/*
Theme Name: ManRADS
Theme URI: https://mangroverestorationbydrone.org
Author: Vitek Digital
Author URI: https://vitekdigital.com
Description: Classic WordPress theme for ManRADS, a Darwin Initiative mangrove restoration research project led by the University of Greenwich. A field-journal design system, hand-coded on the eyestyle vanilla starter (Prisca Schmarsow and Erika Balode, eyedea.studio). Page content is edited in the block editor using the bundled ManRADS pattern library.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: manrads
Tags: custom-menu, featured-images, block-patterns, block-styles, editor-style, translation-ready, accessibility-ready
*/

/* ============================================================
   FONTS  (self-hosted, subset woff2)
   The data face is a system stack today (see --ff-data). To self-host
   one later, add its @font-face here and put its family name first
   in --ff-data. Nothing else changes.
============================================================ */
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/libre-baskerville-400.woff2) format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/libre-baskerville-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/libre-baskerville-700.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/source-sans-3-400.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/source-sans-3-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/source-sans-3-600.woff2) format('woff2'); }

/* ============================================================
   ManRADS — Mass and Precise Mangrove Restoration
   Using Aerial Drone Systems
   ------------------------------------------------------------
   Field-journal design system. Cascade-first, mobile-first,
   token-driven.

   ONE RULE PER COMPONENT. Hand-coded templates hook on data
   attributes (data-section, data-kicker, data-btn ...). Block
   patterns hook on .mr-* and .is-style-* classes, because the
   block editor only stores classes. Each component is written
   once, with both hooks paired through :is(), so a visual
   change lands in a single place.

   CONTEXT TOKENS. Dark grounds re-scope --accent, --edge and
   the button tokens (section 1b), so components carry no
   per-ground overrides of their own.
============================================================ */

/* ============================================================
   1. CUSTOM PROPERTIES
============================================================ */
:root {
  /* Palette: brand */
  --clr-forest:      #085041;
  --clr-forest-deep: #05392E;
  --clr-canopy:      #1D9E75;
  --clr-sand:        #F5F0E8;
  --clr-sand-deep:   #ECE3D3;
  --clr-tidal:       #B8D4CE;
  --clr-paper:       #FBFAF6;
  --clr-ink:         #1A1A1A;
  --clr-muted:       #5E5E5E;
  --clr-line:        #E0DCD2;   /* decorative hairlines only: 1.3:1 on paper */
  --clr-white:       #FFFFFF;

  /* Palette: sampled from the field photographs */
  --clr-canopy-ink:  #137A5A;   /* canopy as text: 5.08 on paper, 4.68 on sand */
  --clr-leaf:        #9DB53A;   /* new leaf. Dark grounds only: 4.08 on forest, 5.58 on forest deep, 4.64 on mud */
  --clr-mud:         #443D33;   /* 10.25 on paper. Same grey as forest, so an alternate, never a pair */
  --clr-silt:        #787368;   /* edges a person has to find: 4.52 on paper, 4.16 on sand, 4.72 on white */

  /* Type families */
  --ff-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --ff-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  --ff-data:    ui-monospace, 'Cascadia Mono', 'Roboto Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Fluid type scale. Small steps floor at 13px and 15px on a phone. */
  --step--2: clamp(0.8125rem, 0.80rem + 0.08vw, 0.875rem);
  --step--1: clamp(0.9375rem, 0.92rem + 0.10vw, 1rem);
  --step-0:  clamp(1rem,    0.96rem + 0.2vw,  1.125rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.42vw, 1.45rem);
  --step-2:  clamp(1.4rem,  1.18rem + 0.95vw, 2.15rem);
  --step-3:  clamp(1.85rem, 1.45rem + 1.85vw, 3.15rem);
  --step-4:  clamp(2.3rem,  1.7rem + 3vw,     4.35rem);

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs:  0.5rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   clamp(2rem, 4vw, 3rem);
  --space-xl:  clamp(3.25rem, 6vw, 5rem);
  --space-2xl: clamp(4.5rem, 8vw, 7.5rem);

  /* Measure and layout */
  --measure:         66ch;
  --measure-narrow:  60ch;
  --container:       1180px;
  --container-narrow: 760px;

  --radius:    4px;
  --radius-lg: 8px;
  --ring:      3px;
  --target:    44px;            /* comfortable touch target */
  --glance-overlap: clamp(2.5rem, 5vw, 4rem);   /* how far the stats card rides up into the hero */

  /* Devices */
  --mask-propagule: url(assets/img/devices/propagule.svg);
  --mask-arrow:     url(assets/img/devices/arrow.svg);

  /* 1a. Context tokens: light grounds (the default) */
  --accent:          var(--clr-canopy);      /* rules, fills, markers */
  --accent-ink:      var(--clr-canopy-ink);  /* the accent when it is text */
  --edge:            var(--clr-silt);        /* control edges, 3:1 or better */
  --hairline:        var(--clr-line);
  --ring-clr:        var(--clr-canopy-ink);
  --heading-clr:     var(--clr-forest);
  --kicker-clr:      var(--clr-forest);
  --quiet:           var(--clr-muted);       /* secondary text */
  --link-clr:        var(--clr-forest);
  --link-hover:      var(--clr-canopy-ink);
  --btn-bg:          var(--clr-forest);
  --btn-fg:          var(--clr-paper);
  --btn-bg-hover:    var(--clr-forest-deep);
  --btn-fg-hover:    var(--clr-white);
  --btn-ghost-fg:    var(--clr-forest);
  --btn-ghost-hover: var(--clr-sand);
}

/* 1b. Context tokens: dark grounds. The one place that knows which grounds are dark. */
:is([data-tone="dark"],
    [data-ground="forest"],
    [data-ground="mud"],
    [data-site-footer],
    [data-section="glance"] dl,
    .has-forest-background-color,
    .has-forest-deep-background-color,
    .has-mud-background-color,
    .mr-cover) {
  --accent:          var(--clr-leaf);
  --accent-ink:      var(--clr-leaf);
  --edge:            rgba(255, 255, 255, 0.6);
  --hairline:        rgba(255, 255, 255, 0.14);
  --ring-clr:        var(--clr-leaf);
  --heading-clr:     var(--clr-white);
  --kicker-clr:      var(--clr-tidal);
  --quiet:           rgba(255, 255, 255, 0.78);
  --link-clr:        var(--clr-white);
  --link-hover:      var(--clr-leaf);
  --btn-bg:          var(--clr-paper);
  --btn-fg:          var(--clr-forest);
  --btn-bg-hover:    var(--clr-white);
  --btn-fg-hover:    var(--clr-forest-deep);
  --btn-ghost-fg:    var(--clr-white);
  --btn-ghost-hover: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   2. RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--clr-ink);
  background: var(--clr-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

ul, ol { list-style: none; }

p, h1, h2, h3, h4, li, figcaption { overflow-wrap: break-word; }

small { font-size: inherit; }   /* the element carries meaning; size comes from its context */

::selection { background: var(--clr-canopy-ink); color: var(--clr-white); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   3. SHARED UTILITIES
============================================================ */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-m);
}
.container[data-narrow] { max-width: var(--container-narrow); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
a[href="#main"] {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--clr-forest);
  color: var(--clr-white);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.15s ease;
}
a[href="#main"]:focus { transform: translateY(0); }

/* Focus ring follows the ground through --ring-clr: canopy ink on light, new leaf on dark. */
:focus-visible {
  outline: var(--ring) solid var(--ring-clr);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Data face: coordinates, dates, figure labels, site codes */
:is([data-data], .is-style-data, time) {
  font-family: var(--ff-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ============================================================
   4. TYPOGRAPHY
============================================================ */
h1, h2, h3, h4 {
  font-family: var(--ff-heading);
  font-weight: 700;
  line-height: 1.18;
  color: var(--heading-clr);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p { max-width: var(--measure); }

a { color: var(--link-clr); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }

strong { font-weight: 600; }
em { font-style: italic; }

abbr[title] { text-decoration: none; }

/* Kicker: small-caps eyebrow signed with the propagule rule */
[data-kicker] { max-width: none; }
:is([data-kicker], p.is-style-kicker) {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 var(--space-s);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kicker-clr);
}
:is([data-kicker], p.is-style-kicker)::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--accent);
  flex: none;
}
/* Where masks are supported the bar becomes the propagule. Elsewhere it stays a bar. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  :is([data-kicker], p.is-style-kicker)::before {
    inline-size: 2.1rem;
    block-size: 0.6rem;
    -webkit-mask: var(--mask-propagule) center / contain no-repeat;
            mask: var(--mask-propagule) center / contain no-repeat;
  }
}
:is([data-align="center"] [data-kicker],
    [data-kicker][data-align="center"],
    p.is-style-kicker.has-text-align-center) { justify-content: center; }

/* Lede: the opening statement */
:is([data-lede], p.is-style-lede) {
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: var(--measure);
}

/* Section heading rule */
[data-headrule] {
  position: relative;
  padding-block-end: var(--space-s);
  margin-block-end: var(--space-m);
}
[data-headrule]::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 3.5rem;
  block-size: 2px;
  background: var(--clr-forest);
}

/* ============================================================
   5. BUTTONS AND LINKS
   data-btn: solid | ghost   ·   core/button: fill | outline
============================================================ */
:is([data-btn], .wp-block-button__link) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 1.5rem;
  min-height: var(--target);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
:is([data-btn], .wp-block-button__link):active { transform: translateY(1px); }

:is([data-btn="solid"], .wp-block-button:not(.is-style-outline) > .wp-block-button__link) {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
:is([data-btn="solid"], .wp-block-button:not(.is-style-outline) > .wp-block-button__link):hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
}

:is([data-btn="ghost"], .wp-block-button.is-style-outline > .wp-block-button__link) {
  background: transparent;
  color: var(--btn-ghost-fg);
  border-color: var(--edge);
}
:is([data-btn="ghost"], .wp-block-button.is-style-outline > .wp-block-button__link):hover {
  background: var(--btn-ghost-hover);
  color: var(--btn-ghost-fg);
  border-color: currentColor;
}

/* Text link with the drawn arrow */
:is([data-arrow], a.mr-arrow) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2rem;
  font-weight: 600;
  text-decoration: none;
  border-block-end: 1.5px solid var(--clr-tidal);
  padding-block-end: 2px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
:is([data-arrow], a.mr-arrow):hover { color: var(--link-hover); border-color: currentColor; }
:is([data-arrow], a.mr-arrow)::after {
  content: "";
  flex: none;
  inline-size: 1.25em;
  block-size: 0.68em;
  background: currentColor;
  -webkit-mask: var(--mask-arrow) center / contain no-repeat;
          mask: var(--mask-arrow) center / contain no-repeat;
  transition: transform 0.18s ease;
}
:is([data-arrow], a.mr-arrow):hover::after { transform: translateX(3px); }
[data-arrow][data-dir="back"] { flex-direction: row-reverse; }
[data-arrow][data-dir="back"]::after { transform: scaleX(-1); }
[data-arrow][data-dir="back"]:hover::after { transform: scaleX(-1) translateX(3px); }

/* ============================================================
   6. MASTHEAD
============================================================ */
[data-site-header] { position: relative; z-index: 100; }

/* Utility strip */
[data-utility] {
  background: var(--clr-forest-deep);
  color: var(--clr-tidal);
}
[data-utility] .container {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: 0.45rem;
}
[data-utility] p {
  max-width: none;
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-utility] p:last-child { display: none; }
[data-utility] a { display: inline-flex; align-items: center; min-block-size: 1.5rem; color: inherit; text-decoration-color: rgba(184, 212, 206, 0.45); }
[data-utility] a:hover { color: var(--clr-white); text-decoration-color: currentColor; }

/* Sticky bar */
[data-bar] {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--clr-paper);
  border-block-end: 1px solid var(--clr-line);
}
[data-bar] .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: 0.9rem;
}
[data-bar] a[rel="home"] { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; text-decoration: none; }
[data-brand-mark] { width: 33px; height: 40px; flex: none; }
[data-brand-name] {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--clr-forest);
}

/* Nav */
[data-bar] nav { position: relative; }
[data-bar] nav > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target); min-height: var(--target);
  background: none;
  border: 1.5px solid var(--edge);
  border-radius: var(--radius);
  color: var(--clr-forest);
  cursor: pointer;
}
[data-bar] nav > button:hover { background: var(--clr-sand); }

[data-bar] nav > button[aria-expanded="false"] + ul { display: none; }
[data-bar] nav > button[aria-expanded="true"] + ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset-block-start: calc(100% + 0.85rem);
  inset-inline-end: 0;
  min-width: 220px;
  padding: var(--space-2xs) 0;
  background: var(--clr-paper);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(5, 57, 46, 0.12);
}
[data-bar] nav a {
  display: block;
  padding: 0.7rem var(--space-m);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-ink);
  text-decoration: none;
}
[data-bar] nav a:hover { color: var(--clr-forest); }
[data-bar] nav a[aria-current="page"] { color: var(--clr-forest); }

@media (min-width: 860px) {
  [data-utility] p:last-child { display: block; }
  [data-bar] nav > button { display: none; }
  [data-bar] nav > button + ul,
  [data-bar] nav > button[aria-expanded="true"] + ul {
    display: flex !important;
    position: static;
    flex-direction: row;
    gap: 1.75rem;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  [data-bar] nav a { padding: 0.35rem 0; border-block-end: 2px solid transparent; }
  [data-bar] nav a[aria-current="page"] { border-block-end-color: var(--clr-canopy); }
}

/* ============================================================
   7. SECTION RHYTHM, GROUNDS AND DIVIDERS
============================================================ */
:is(main > section, article > :is(section, nav)[data-section]) { padding-block: var(--space-2xl); }
main > section[data-tight] { padding-block: var(--space-xl); }

[data-ground="paper"]  { background: var(--clr-paper); }
[data-ground="sand"]   { background: var(--clr-sand); }
[data-ground="forest"] { background: var(--clr-forest); color: var(--clr-white); }
:is([data-ground="mud"], .has-mud-background-color) { background: var(--clr-mud); color: var(--clr-white); }

/* Hairline divider between same-tone sections */
[data-rule-top] { border-block-start: 1px solid var(--clr-line); }

/* Tide datum: solid high water over dashed low water. At most three per page,
   and never in the same band as the drop-point grid. */
:is([data-rule="tide"], hr.wp-block-separator.is-style-tide) {
  position: relative;
  border: 0;
  border-block-start: 2px solid var(--clr-tidal);
}
:is([data-rule="tide"], hr.wp-block-separator.is-style-tide)::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 9px;
  border-block-start: 1.5px dashed var(--clr-tidal);
}
:is([data-rule="tide"], hr.wp-block-separator.is-style-tide)::after {
  content: "HW\A LW" / "";      /* decorative: empty alternative text */
  white-space: pre;
  position: absolute;
  inset-block-start: -0.62em;
  inset-inline-end: max(var(--space-m), calc((100% - var(--container)) / 2 + var(--space-m)));
  padding-inline: 0.5em;
  background: var(--clr-paper);
  font-family: var(--ff-data);
  font-size: var(--step--2);
  line-height: 0.95;
  letter-spacing: 0.06em;
  color: var(--clr-silt);
}
hr.wp-block-separator.is-style-tide {
  max-width: none;
  block-size: 12px;
  margin-block: var(--space-xl);
  background: none;
  opacity: 1;
}

/* ============================================================
   8. HERO  (homepage) and PAGE HERO  (inner pages, .mr-hero in patterns)
============================================================ */
:is([data-section="hero"], [data-section="pagehero"]) {
  position: relative;
  padding: 0;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--clr-forest-deep);
  isolation: isolate;
}
[data-section="hero"]     { min-height: min(90svh, 720px); }
[data-section="pagehero"] { min-height: clamp(300px, 44vh, 440px); }

/* A grid item with auto margins shrink-wraps. Full inline size lets max-width do the capping,
   so the hero text starts on the same edge as the masthead and every section below. */
:is([data-section="hero"], [data-section="pagehero"]) > .container { inline-size: 100%; }

:is([data-section="hero"], [data-section="pagehero"]) > figure { position: absolute; inset: 0; margin: 0; }
:is([data-section="hero"], [data-section="pagehero"]) > figure > :is(picture, img) { z-index: -2; }
:is([data-section="hero"], [data-section="pagehero"]) > figure :is(picture, img) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0;
  background: none;
}

/* Scrim. Narrow screens: the text spans the full width, so the scrim is vertical and firm.
   Wide screens: the text holds the left, so the scrim leans that way and the photo opens up. */
:is([data-section="hero"], [data-section="pagehero"])::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5,40,32,0.9) 0%, rgba(5,40,32,0.74) 50%, rgba(5,40,32,0.5) 100%);
}
@media (min-width: 860px) {
  [data-section="hero"]::after {
    background:
      linear-gradient(105deg, rgba(5,40,32,0.86) 0%, rgba(5,40,32,0.66) 34%, rgba(5,40,32,0.3) 60%, rgba(5,40,32,0.04) 100%),
      linear-gradient(to top, rgba(5,40,32,0.72) 0%, rgba(5,40,32,0.1) 55%, rgba(5,40,32,0) 100%);
  }
  [data-section="pagehero"]::after {
    background:
      linear-gradient(102deg, rgba(5,40,32,0.9) 0%, rgba(5,40,32,0.6) 55%, rgba(5,40,32,0.34) 100%),
      linear-gradient(to top, rgba(5,40,32,0.7) 0%, rgba(5,40,32,0) 55%);
  }
}
[data-section="pagehero"][data-ground="forest"]::after { background: none; }

/* The fund's mark above the kicker, linked to the fund. White cut, since it sits on the photograph. */
:is([data-funder-mark], .mr-funder-mark) { display: inline-block; margin: 0 0 var(--space-m); }
:is([data-funder-mark], .mr-funder-mark) img { display: block; block-size: clamp(3.5rem, 7vw, 5.5rem); inline-size: auto; border-radius: 0; background: none; }
.mr-cover .mr-funder-mark a { display: inline-block; }

/* Over a photograph the kicker goes a shade lighter than tidal, to hold 4.5:1 on bright patches */
:is([data-section="hero"], [data-section="pagehero"]) [data-kicker] { --kicker-clr: #DCEAE6; }
[data-section="hero"] > .container     { padding-block: var(--space-2xl); }
[data-section="pagehero"] > .container { padding-block: var(--space-xl) var(--space-l); }

[data-section="hero"] h1 {
  font-size: var(--step-4);
  line-height: 1.06;
  max-width: 20ch;
  margin-block-end: var(--space-m);
  text-wrap: balance;
}
[data-section="pagehero"] h1 { font-size: var(--step-3); max-width: 20ch; text-wrap: balance; }
[data-section="hero"] [data-lede] { color: rgba(255,255,255,0.94); max-width: 48ch; margin-block-end: var(--space-l); }
[data-section="pagehero"] [data-lede] { color: rgba(255,255,255,0.92); margin-block-start: var(--space-m); max-width: 54ch; }
[data-section="hero"] [data-actions] { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Photo credit line: place, in the data face. Narrow screens: top right, clear of the stats card
   that overlaps the hero's lower edge. Wide screens: bottom right. */
[data-section="hero"] figcaption {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-end: var(--space-m);
  z-index: 1;
  margin: 0; border: 0;
  padding: 0.2rem 0.55rem;                 /* a small plate, so the credit reads over any photo */
  border-radius: 2px;
  background: rgba(5, 40, 32, 0.78);
  max-width: calc(100% - 2 * var(--space-m));
  font-family: var(--ff-data);
  font-size: var(--step--2);
  font-style: normal;
  line-height: 1.4;
  text-align: end;
  color: rgba(255,255,255,0.9);
}
@media (min-width: 860px) {
  /* bottom right, above the stats card that rides up into the hero */
  [data-section="hero"] figcaption { inset-block: auto calc(var(--glance-overlap) + var(--space-s)); }
}

/* Block-pattern homepage hero: a cover block on the hero photograph. Core's flat dim is
   replaced by the hand-coded hero's scrim, so both versions show the same photograph. */
.mr-cover { padding: 0; }
.mr-cover.mr-cover > .wp-block-cover__background {
  opacity: 1;
  background: linear-gradient(to top, rgba(5,40,32,0.9) 0%, rgba(5,40,32,0.74) 50%, rgba(5,40,32,0.5) 100%);
}
@media (min-width: 860px) {
  .mr-cover.mr-cover > .wp-block-cover__background {
    background:
      linear-gradient(105deg, rgba(5,40,32,0.86) 0%, rgba(5,40,32,0.66) 34%, rgba(5,40,32,0.3) 60%, rgba(5,40,32,0.04) 100%),
      linear-gradient(to top, rgba(5,40,32,0.72) 0%, rgba(5,40,32,0.1) 55%, rgba(5,40,32,0) 100%);
  }
}
/* The class is repeated to match the weight of core's own rule for positioned cover content
   (.wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container),
   which sets the container to width auto with no margin. Full width plus centring padding puts
   the text on the same left edge as the hand-coded hero. */
.mr-cover.mr-cover.mr-cover > .wp-block-cover__inner-container {
  inline-size: 100%;
  margin: 0;
  padding: var(--space-2xl) max(var(--space-m), calc((100% - var(--container)) / 2 + var(--space-m)));
}
/* One shared left edge for the hero text: core centres each child of a constrained layout on its own */
.mr-cover > .wp-block-cover__inner-container > :not(.alignwide, .alignfull) { margin-inline: 0 !important; }
.mr-cover .is-style-kicker { --kicker-clr: #DCEAE6; }
.mr-cover h1 { font-size: var(--step-4); line-height: 1.06; max-width: 20ch; margin-block-end: var(--space-m); text-wrap: balance; }
.mr-cover p.is-style-lede { color: rgba(255,255,255,0.94); max-width: 48ch; margin-block-end: var(--space-l); }
.mr-cover .wp-block-buttons { gap: var(--space-xs); }
.mr-cover + .mr-glance { position: relative; z-index: 5; margin-block-start: calc(-1 * var(--glance-overlap)); box-shadow: 0 26px 60px rgba(5, 40, 32, 0.26); }
.mr-mission > p.is-style-lede { max-width: 58ch; }
.mr-mission > h2 { font-size: var(--step-3); max-width: 20ch; }
p.has-drop-cap:not(:focus)::first-letter { font-family: var(--ff-heading); font-weight: 700; font-size: 3.2em; line-height: 0.76; margin: 0.05em 0.1em 0 0; color: var(--clr-forest); }

/* Block-pattern page hero: a forest band signed with the mark. Its text runs on the same
   reading column as the sections beneath it, so hero and body share one left edge. */
.mr-hero { padding-block: var(--space-xl) var(--space-l); }
.mr-hero h1 { font-size: var(--step-3); text-wrap: balance; margin-block-end: var(--space-m); }
.mr-hero p:not(.is-style-kicker) { font-size: var(--step-1); line-height: 1.6; color: rgba(255,255,255,0.92); }

/* ============================================================
   9. PROSE AND EDITORIAL BLOCKS
============================================================ */
:is([data-prose], .mr-prose) > * + * { margin-block-start: var(--space-s); }
[data-prose] > * { max-width: var(--measure); }
:is([data-prose], .entry-content, .mr-block) h2 { margin-block-start: var(--space-l); margin-block-end: 0.2rem; }
:is([data-prose], .entry-content, .mr-block) h3 { margin-block-start: var(--space-m); }
:is([data-prose], .entry-content, .mr-block) :is(h2, h3) + p { margin-block-start: var(--space-xs); }
:is([data-prose], .entry-content, .mr-block) :is(h2, h3):first-child,
.is-style-kicker + :is(h1, h2, h3) { margin-block-start: 0; }

/* Lists: the propagule marks each item */
:is([data-prose] ul, ul.wp-block-list) { padding-inline-start: 0.25rem; }
:is([data-prose] ul, ul.wp-block-list) > li { list-style: none; position: relative; padding-inline-start: 1.9rem; }
:is([data-prose] ul, ul.wp-block-list) > li + li { margin-block-start: 0.5rem; }
:is([data-prose] ul, ul.wp-block-list) > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  inline-size: 1.25rem; block-size: 0.36rem;
  background: var(--accent);
  border-radius: 1px;
}
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  :is([data-prose] ul, ul.wp-block-list) > li::before {
    -webkit-mask: var(--mask-propagule) center / contain no-repeat;
            mask: var(--mask-propagule) center / contain no-repeat;
    border-radius: 0;
  }
}
:is([data-prose] ol, ol.wp-block-list) { list-style: decimal; padding-inline-start: 1.5rem; }
:is([data-prose] ol, ol.wp-block-list) > li + li { margin-block-start: 0.5rem; }
:is([data-prose] ol, ol.wp-block-list) > li::marker { color: var(--accent-ink); font-family: var(--ff-data); font-weight: 600; }

/* Pull quote */
blockquote {
  max-width: var(--measure);
  margin-block: var(--space-l);
  padding-inline-start: var(--space-m);
  border-inline-start: 3px solid var(--accent);
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--heading-clr);
}
blockquote cite {
  display: block;
  margin-block-start: var(--space-xs);
  font-family: var(--ff-body);
  font-style: normal;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--quiet);
}

/* Figures and captions. The figure label sits in the data face. */
figure { margin-block: var(--space-l); }
figure img { border-radius: var(--radius); background: var(--clr-sand); }
figcaption, .wp-block-image figcaption, p.mr-caption {
  margin-block-start: 0.6rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--hairline);
  font-size: var(--step--1);
  font-style: normal;
  line-height: 1.5;
  color: var(--quiet);
  max-width: var(--measure);
  text-align: start;
}
:is(figcaption, p.mr-caption) :is(b, strong) {
  font-family: var(--ff-data);
  font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-inline-end: 0.6rem;
}

/* Page header (inner pages without a featured image) */
[data-pagehead] { padding-block: var(--space-xl) var(--space-l); }
[data-pagehead] h1 { font-size: var(--step-3); max-width: 20ch; text-wrap: balance; }
[data-pagehead] [data-lede] { margin-block-start: var(--space-m); }
[data-pagehead] + [data-section] { padding-block-start: var(--space-m); }
[data-pagehead][data-align="center"] { text-align: center; }
[data-pagehead][data-align="center"] :is(h1, [data-lede]) { margin-inline: auto; }

/* ============================================================
   10. SECTION HEADS, NUMERALS, MISSION
============================================================ */
[data-head] { display: flex; align-items: center; gap: 0.85rem; margin-block-end: var(--space-s); }
[data-head] [data-kicker] { margin: 0; }
[data-head][data-align="center"] { justify-content: center; }
[data-num] { font-family: var(--ff-data); font-weight: 600; font-size: var(--step--1); color: var(--accent-ink); flex: none; }
[data-secnum] { font-family: var(--ff-data); font-weight: 600; font-size: 0.55em; color: var(--accent-ink); margin-inline-end: 0.55rem; }
p[data-dropcap]::first-letter {
  float: left;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 3.2em;
  line-height: 0.76;
  padding-inline-end: 0.1em;
  padding-block-start: 0.02em;
  color: var(--clr-forest);
}

[data-section="mission"] .container { max-width: 880px; }
[data-section="mission"] h2 { margin-block-end: var(--space-m); font-size: var(--step-3); max-width: 20ch; }
[data-section="mission"] p { font-size: var(--step-1); line-height: 1.62; max-width: 58ch; }

/* ============================================================
   11. STATS  (the drop-point grid lives here)
============================================================ */
[data-section="glance"] { padding-block: 0; position: relative; z-index: 5; }
:is([data-section="glance"] dl, .mr-glance) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--clr-forest);
  border-radius: var(--radius);
}
[data-section="glance"] dl {
  margin-block: calc(-1 * var(--glance-overlap)) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m) 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--space-xs);
  box-shadow: 0 26px 60px rgba(5, 40, 32, 0.26);
}
.mr-glance { padding-block: var(--space-l); }

/* Drop-point grid: a 24px lattice of empty rings, with landed points filled in new leaf.
   Fill against ring carries the difference, so it reads in greyscale. */
:is([data-section="glance"] dl, .mr-glance)::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cpattern id='p' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='12' cy='12' r='1.9' fill='none' stroke='%23B8D4CE' stroke-opacity='.34'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23p)'/%3E%3Cg fill='%239DB53A'%3E%3Ccircle cx='36' cy='12' r='3'/%3E%3Ccircle cx='156' cy='36' r='3'/%3E%3Ccircle cx='84' cy='84' r='3'/%3E%3Ccircle cx='204' cy='108' r='3'/%3E%3Ccircle cx='12' cy='156' r='3'/%3E%3Ccircle cx='132' cy='180' r='3'/%3E%3Ccircle cx='228' cy='228' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 0 38%, #000 96%);
          mask-image: radial-gradient(ellipse at center, transparent 0 38%, #000 96%);
}
@media print { :is([data-section="glance"] dl, .mr-glance)::before { display: none; } }

:is([data-section="glance"] dl > div, .mr-glance-row .wp-block-column) { text-align: center; padding-inline: var(--space-s); }
:is([data-section="glance"] dt, .mr-stat-num) {
  margin: 0;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--clr-white);
}
:is([data-section="glance"] dd, .mr-stat-label) {
  margin-block-start: 0.5rem;
  max-width: none;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-tidal);
}
.mr-glance-row { gap: 0 !important; }
@media (min-width: 720px) {
  [data-section="glance"] dl { grid-template-columns: repeat(4, 1fr); gap: 0; }
  :is([data-section="glance"] dl > div + div, .mr-glance-row .wp-block-column + .wp-block-column) {
    border-inline-start: 1px solid rgba(184, 212, 206, 0.28);
  }
}

/* ============================================================
   12. TWO-COLUMN FEATURE
============================================================ */
[data-layout="split"] .container {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
[data-layout="split"] figure { margin: 0; }
:is([data-layout="split"] figure, .mr-split-media) img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
[data-layout="split"] h2 { margin-block-end: var(--space-s); }
[data-layout="split"] [data-body] > p + p { margin-block-start: var(--space-s); }
[data-layout="split"] [data-arrow] { margin-block-start: var(--space-m); }
[data-layout="split"] blockquote { margin-block: var(--space-m); }
@media (min-width: 860px) {
  [data-layout="split"] .container { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  [data-layout="split"][data-flip] figure { order: 2; }
}

/* ============================================================
   13. PROCESS STRIP  (drawn icons, no circles)
============================================================ */
[data-process] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  max-width: none;
  counter-reset: step;
}
[data-process] > li { counter-increment: step; max-width: 40ch; }
:is([data-process] [data-icon], .mr-step-icon) {
  display: block;
  inline-size: 64px; block-size: 64px;
  margin: 0 0 var(--space-s);
}
:is([data-process] [data-icon], .mr-step-icon) :is(svg, img) { inline-size: 100%; block-size: 100%; border-radius: 0; background: none; }
:is([data-process], .mr-steps-row) h3 {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--ff-body);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--clr-ink);
  margin-block-end: 0.3rem;
}
[data-process] h3::before { content: counter(step, decimal-leading-zero); }
:is([data-process] h3::before, .mr-step-num) {
  margin: 0 0 0.3rem;
  font-family: var(--ff-data);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--accent-ink);
}
:is([data-process], .mr-steps-row) p:not(.mr-step-num) { font-size: var(--step--1); color: var(--clr-muted); max-width: none; }
.mr-steps-row { gap: var(--space-l); }
@media (min-width: 760px) {
  [data-process] { grid-template-columns: repeat(4, 1fr); }
  [data-process] > li { max-width: none; }
}

/* ============================================================
   14. DIAGRAM  (inline SVG drawing, numbered callouts, HTML legend)
   The drawing scales. The words stay at reading size beneath it.
============================================================ */
:is([data-diagram], .mr-diagram) { margin-block: var(--space-xl) 0; }
:is([data-diagram], .mr-diagram) svg {
  inline-size: 100%;
  block-size: auto;
  background: var(--clr-paper);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  font-family: var(--ff-data);
}
/* Callout markers grow on narrow screens, where the drawing shrinks */
:is([data-diagram], .mr-diagram) svg [data-callout] { transform-box: fill-box; transform-origin: center; }
@media (max-width: 640px) { :is([data-diagram], .mr-diagram) svg [data-callout] { transform: scale(1.7); } }

:is([data-legend], ol.is-style-legend) {
  display: grid;
  gap: 0.4rem var(--space-l);
  margin-block-start: var(--space-m);
  padding: 0;
  max-width: none;
  list-style: none;
  counter-reset: callout;
}
:is([data-legend], ol.is-style-legend) > li {
  counter-increment: callout;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.6rem;
  align-items: start;
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
  line-height: 1.5;
}
:is([data-legend], ol.is-style-legend) > li::before {
  content: counter(callout);
  position: static;
  display: grid;
  place-items: center;
  inline-size: 1.6rem; block-size: 1.6rem;
  margin-block-start: 0.05rem;
  border-radius: 50%;
  background: var(--clr-forest);
  color: var(--clr-paper);
  font-family: var(--ff-data);
  font-size: var(--step--2);
  font-weight: 600;
  -webkit-mask: none; mask: none;
}
:is([data-legend], ol.is-style-legend) > li::marker { content: none; }
@media (min-width: 640px)  { :is([data-legend], ol.is-style-legend) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { :is([data-legend], ol.is-style-legend) { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   15. PARTNERS
   Map: land as a drop-point lattice, partners as landed points.
   The list beneath carries the content. The map is decoration.
============================================================ */
:is([data-section="partners"], .mr-partners) > .container > header { margin-block-end: var(--space-l); text-align: center; }
[data-section="partners"] header [data-kicker] { justify-content: center; }
[data-section="partners"] header h2 { margin-block-end: var(--space-xs); }
[data-section="partners"] header p { color: var(--quiet); margin-inline: auto; }

:is([data-partner-map], .mr-partner-map) {
  position: relative;
  container-type: inline-size;
  margin: 0;
  --map-ratio: 3.128;          /* viewBox 2440 by 780 */
}
:is([data-partner-map], .mr-partner-map) > img { inline-size: 100%; border-radius: 0; background: none; }

/* Landed points. Position is a fraction of the map box, set per partner below. */
[data-pin] {
  position: absolute;
  inset-inline-start: calc(var(--x) * 100cqi);
  inset-block-start: calc(var(--y) * 100cqi / var(--map-ratio));
  display: grid;
  place-items: center;
  inline-size: 1.4rem; block-size: 1.4rem;
  margin: -0.7rem 0 0 -0.7rem;
  border-radius: 50%;
  background: var(--clr-leaf);
  color: var(--clr-mud);
  box-shadow: 0 0 0 3px rgba(157, 181, 58, 0.28);
  font-family: var(--ff-data);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}
[data-partner="uog"]    { --x: 0.4262; --y: 0.1349; }
[data-partner="ipb"]    { --x: 0.8639; --y: 0.8795; }
[data-partner="upv"]    { --x: 0.9272; --y: 0.6585; }
[data-partner="tup"]    { --x: 0.1003; --y: 0.6797; }
[data-partner="zsl-uk"] { --x: 0.4262; --y: 0.1349; }   /* ZSL shares London with Greenwich */
[data-partner="zsl-ph"] { --x: 0.9272; --y: 0.6585; }   /* and Iloilo with UPV */
/* Shared places: the two points sit side by side, the partner's own number on each */
[data-partner="uog"] [data-pin], [data-partner="upv"] [data-pin] { translate: -0.78rem 0; }
[data-partner="zsl-uk"] [data-pin], [data-partner="zsl-ph"] [data-pin] { translate: 0.78rem 0; }
@container (min-width: 700px) {
  [data-pin] { inline-size: 1.5rem; block-size: 1.5rem; margin: -0.75rem 0 0 -0.75rem; font-size: var(--step--2); box-shadow: 0 0 0 5px rgba(157, 181, 58, 0.25); }
  [data-partner="uog"] [data-pin], [data-partner="upv"] [data-pin] { translate: -0.9rem 0; }
  [data-partner="zsl-uk"] [data-pin], [data-partner="zsl-ph"] [data-pin] { translate: 0.9rem 0; }
}

[data-partner-list] {
  display: grid;
  gap: var(--space-m) var(--space-m);
  margin-block-start: var(--space-l);
  counter-reset: partner;
}
[data-partner-list] > li {
  counter-increment: partner;
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--hairline);
}
[data-partner-list] :is(h2, h3) {
  display: flex; gap: 0.6rem; align-items: baseline;
  font-family: var(--ff-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
[data-partner-list] :is(h2, h3)::before {
  content: counter(partner);
  font-family: var(--ff-data);
  font-size: var(--step--1);
  color: var(--accent-ink);
}
[data-partner-list] p { max-width: none; margin-block-start: 0.35rem; font-size: var(--step--1); line-height: 1.45; color: var(--quiet); }
[data-partner-list] p[data-role] { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--kicker-clr); }
[data-partner-list] [data-data] { display: block; font-size: var(--step--2); }
@media (min-width: 560px)  { [data-partner-list] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { [data-partner-list] { grid-template-columns: repeat(5, 1fr); } }

/* Inside the pattern's constrained group, the wide map matches the hand-coded container's inner width */
.mr-partners > .alignwide { max-width: calc(var(--container) - 2 * var(--space-m)); }
[data-section="partners"] > .container > p { margin-block-start: var(--space-l); text-align: center; max-width: none; }
.mr-partners > p.has-text-align-center:not(.is-style-kicker) { color: var(--quiet); }
.mr-partners > p.has-text-align-center:has(> a.mr-arrow) { margin-block-start: var(--space-l); }

/* Partner grid pattern (cards with monograms), for editors who want it on other pages */
.mr-partner-row { gap: var(--space-s); }
.mr-partner-card { height: 100%; text-align: center; padding: var(--space-m) var(--space-s); background: var(--clr-paper); border: 1px solid var(--clr-line); border-radius: var(--radius); }
.mr-monogram {
  display: flex; align-items: center; justify-content: center;
  inline-size: 54px; block-size: 54px;
  margin: 0 auto var(--space-xs);
  border: 1.5px solid var(--clr-tidal);
  border-radius: 50%;
  background: var(--clr-sand);
  font-family: var(--ff-data);
  font-size: var(--step--2);
  font-weight: 700;
  color: var(--clr-forest);
}
.mr-partner-card h3 { font-family: var(--ff-body); font-size: var(--step--1); font-weight: 600; color: var(--clr-ink); }
.mr-partner-place { font-size: var(--step--1); color: var(--clr-muted); }
.mr-partner-role { margin-block-start: 0.5rem; font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-forest); }

/* ============================================================
   15b. PARTNER PROFILE  (page-partner.php and the Partner page pattern)
   The header is the partner's record; the locator is the same map with
   this partner landed and the others as empty rings.
============================================================ */
[data-section="profile"] { padding-block: var(--space-m) var(--space-xl); }
[data-section="profile"] > .container { display: grid; gap: var(--space-l); }
[data-section="profile"] h1 { font-size: var(--step-3); max-width: 18ch; text-wrap: balance; }
[data-section="profile"] [data-head] { margin-block-end: var(--space-xs); }
[data-section="profile"] [data-lede] { margin-block-start: var(--space-s); }
[data-place] { margin-block-start: var(--space-s); font-size: var(--step--1); color: var(--quiet); }
[data-place] [data-data] { margin-inline-start: 0.6rem; font-size: var(--step--2); color: var(--accent-ink); }
[data-locator-map] { align-self: center; }
@media (min-width: 880px) {
  [data-section="profile"] > .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: center; }
  [data-section="profile"] > .container > [data-crumbs] { grid-column: 1 / -1; }
}

/* Breadcrumb: a small trail above the name, in the quiet tone */
[data-crumbs] ol { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--step--1); color: var(--quiet); }
[data-crumbs] li { display: inline-flex; align-items: center; min-block-size: 2rem; }
[data-crumbs] li + li::before { content: ""; inline-size: 1px; block-size: 0.9em; margin-inline: 0.7rem; background: currentColor; opacity: 0.5; }
[data-crumbs] a { display: inline-flex; align-items: center; min-block-size: 2rem; color: inherit; text-decoration: none; }
[data-crumbs] a:hover { color: var(--link-hover); text-decoration: underline; }

/* The locator: the landed point keeps its fill and halo; the rest become empty rings */
[data-focus] [data-partner]:not([data-landed]) [data-pin] {
  background: transparent;
  color: var(--clr-leaf);
  box-shadow: inset 0 0 0 1.5px var(--clr-leaf);
}
[data-focus] [data-landed] [data-pin] { box-shadow: 0 0 0 6px rgba(157, 181, 58, 0.3); }
@container (min-width: 700px) {
  [data-focus] [data-partner]:not([data-landed]) [data-pin] { box-shadow: inset 0 0 0 1.5px var(--clr-leaf); }
}

/* The other partners: numbered rows on the sand ground, two up from 720px */
[data-section="partnernav"] h2 { font-size: var(--step-1); margin-block-end: var(--space-m); }
[data-partnernav] { display: grid; column-gap: var(--space-l); border-block-start: 1px solid var(--clr-line); }
[data-partnernav] li { border-block-end: 1px solid var(--clr-line); }
[data-partnernav] a {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  align-items: baseline;
  padding-block: var(--space-s);
  min-block-size: var(--target);
  color: var(--clr-ink);
  text-decoration: none;
}
[data-partnernav] [data-num] { grid-row: 1 / span 2; }
[data-partnernav] [data-name] { font-weight: 600; color: var(--clr-forest); }
[data-partnernav] [data-meta] { grid-column: 2; font-size: var(--step--1); color: var(--quiet); }
[data-partnernav] [data-meta] > span + span::before {
  content: "";
  display: inline-block;
  inline-size: 3px; block-size: 3px;
  margin: 0 0.55rem 0.2em 0.35rem;
  border-radius: 50%;
  background: currentColor;
}
[data-partnernav] a:hover [data-name] { color: var(--link-hover); text-decoration: underline; text-underline-offset: 0.18em; }
[data-section="partnernav"] > .container > p { margin-block-start: var(--space-m); }
@media (min-width: 720px) { [data-partnernav] { grid-template-columns: repeat(2, 1fr); } }

/* Role in the project: reading column beside the facts panel */
.mr-aside { gap: var(--space-l) var(--space-xl); }
.mr-aside .is-style-panel { padding: var(--space-m); }
.mr-aside .is-style-panel > p { max-width: none; }

/* Watch: the band exists for a film and stays out of the way until one is added */
.mr-watch:not(:has(.wp-block-embed__wrapper, .wp-block-video, video, iframe)) { display: none; }
.mr-block > .mr-video, .mr-block > figure.wp-block-embed { margin-block: var(--space-m) 0; }
.mr-video .wp-block-embed__wrapper { overflow: hidden; border-radius: var(--radius); background: var(--clr-sand); }
.mr-video figcaption { max-width: none; }

/* From the site: three frames with captions beneath, in the figure style, never over the photo */
.mr-block > .mr-gallery { margin-block: var(--space-m) 0; }
.mr-gallery.mr-gallery.has-nested-images { --wp--style--unstable-gallery-gap: var(--space-m); }
.mr-gallery.mr-gallery.has-nested-images figure.wp-block-image { margin: 0; }
.mr-gallery.mr-gallery.has-nested-images figure.wp-block-image img {
  flex: none;
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.mr-gallery.mr-gallery.has-nested-images figure.wp-block-image figcaption {
  position: static;
  width: auto; max-width: none; max-height: none;
  margin: 0.6rem 0 0;
  padding: 0.5rem 0 0;
  overflow: visible;
  background: none;
  border-block-start: 1px solid var(--hairline);
  color: var(--quiet);
  font-size: var(--step--1);
  text-align: start;
  text-shadow: none;
}
.mr-gallery.mr-gallery.has-nested-images figure.wp-block-image::before { content: none; }
/* One frame per row on a phone, where two-up thumbnails leave no room for a caption */
@media (max-width: 599px) {
  .mr-gallery.mr-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: 100%; }
}

/* The team: portrait cards on a grid that wraps by itself */
.mr-block > .mr-person-grid { gap: var(--space-l) var(--space-m); margin-block: var(--space-l) 0; }
.mr-person > * { max-width: none; margin-inline: 0 !important; }
.mr-person > * + * { margin-block-start: 0.2rem; }
.mr-person > .mr-portrait { margin-block: 0 var(--space-s); }
.mr-portrait img { width: 100%; border-radius: var(--radius); background: var(--clr-sand); }
.mr-person h3 { font-family: var(--ff-body); font-size: var(--step-0); font-weight: 600; letter-spacing: 0; }
.mr-person-role { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--kicker-clr); }
.mr-person > p:not(.mr-person-role) { font-size: var(--step--1); line-height: 1.5; color: var(--quiet); }
/* On a phone each person is a row: a small portrait beside the name */
@media (max-width: 599px) {
  .mr-person { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-s); align-content: start; }
  .mr-person > .mr-portrait { grid-row: 1 / span 3; margin: 0; }
  .mr-person > h3 { align-self: end; }
}

/* ============================================================
   16. UPDATES  (field-report cards)
============================================================ */
[data-section="updates"] > .container > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-end: var(--space-l);
}
[data-section="updates"] header > div { max-width: none; }
[data-section="updates"] header h2 { margin: 0; }
[data-section="updates"] header > a { flex: none; }

:is([data-cards], .mr-cards) { display: grid; gap: var(--space-m); }
:is([data-cards] > li > article, .mr-cards .wp-block-post) {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--clr-paper);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
:is([data-cards] > li > article, .mr-cards .wp-block-post):hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(5,57,46,0.1);
  border-color: var(--clr-tidal);
}
[data-cards] article > a[tabindex] { display: block; }
:is([data-cards] article, .mr-cards .wp-block-post-featured-image) img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.mr-cards .wp-block-post-featured-image { margin: 0; }
[data-cards] article > div { padding: var(--space-s) var(--space-m) var(--space-m); display: flex; flex-direction: column; flex: 1; }

:is([data-cards] time, .mr-cards .wp-block-post-date) {
  display: block;
  margin-block-end: 0.4rem;
  font-family: var(--ff-data);
  font-size: var(--step--2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
}
:is([data-cards] article h3, .mr-cards .wp-block-post-title) { margin-block-end: 0.4rem; font-size: var(--step-1); }
:is([data-cards] article h3, .mr-cards .wp-block-post-title) a { text-decoration: none; color: var(--clr-forest); }
:is([data-cards] article h3, .mr-cards .wp-block-post-title) a:hover { color: var(--accent-ink); }
:is([data-cards] article p, .mr-cards .wp-block-post-excerpt) { font-size: var(--step--1); line-height: 1.6; color: var(--clr-muted); }
[data-cards] article [data-meta] {
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mr-cards .wp-block-post-date { padding: var(--space-s) var(--space-m) 0; margin: 0; }
.mr-cards .wp-block-post-title { padding-inline: var(--space-m); margin-block-start: 0.4rem; }
.mr-cards .wp-block-post-excerpt { padding: 0 var(--space-m) var(--space-m); margin-block-start: 0.4rem; }
@media (min-width: 720px) { [data-cards] { grid-template-columns: repeat(3, 1fr); } }

/* Updates archive: stacked list variant.
   The attribute is doubled on purpose: :is() takes the weight of its heaviest argument, so the
   paired card rules above weigh (0,2,x). A variant has to match that weight to override them. */
[data-cards][data-cards="list"] { grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 720px) {
  [data-cards][data-cards="list"] > li > article { flex-direction: row; }
  [data-cards][data-cards="list"] > li > article > a[tabindex] { flex: 0 0 40%; }
  [data-cards][data-cards="list"] article img { height: 100%; aspect-ratio: 16 / 10; }
  [data-cards][data-cards="list"] article > div { padding: var(--space-m) var(--space-l); align-self: center; }
}

/* ============================================================
   17. CALL TO ACTION
============================================================ */
:is([data-section="support"], .mr-cta) { text-align: center; }
[data-section="support"] .container { max-width: 680px; }
.mr-cta > * { max-width: 62ch; margin-inline: auto; }
:is([data-section="support"], .mr-cta) :is([data-kicker], p.is-style-kicker) { justify-content: center; }
[data-section="support"] h2 { margin-block-end: var(--space-s); }
:is([data-section="support"] [data-lede], .mr-cta p.is-style-lede) { color: rgba(255,255,255,0.88); }
[data-section="support"] [data-lede] { margin: 0 auto var(--space-l); }
[data-section="support"] [data-actions] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }

/* ============================================================
   18. FORMS
============================================================ */
form[data-contact] { max-width: var(--container-narrow); }
form[data-contact] fieldset { border: 0; }
form[data-contact] fieldset + fieldset { margin-block-start: var(--space-l); }
form[data-contact] legend {
  font-family: var(--ff-heading);
  font-size: var(--step-1);
  color: var(--clr-forest);
  margin-block-end: var(--space-s);
}
[data-field] { margin-block-end: var(--space-m); }
[data-field] label {
  display: block;
  margin-block-end: 0.35rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clr-ink);
}
[data-field] label span { color: var(--accent-ink); }
/* Any text control, hand-coded or from a form plugin, gets a findable edge. */
:is([data-field], .entry-content, [data-search-row]) :is(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]), textarea, select) {
  width: 100%;
  min-height: var(--target);
  padding: 0.7rem 0.85rem;
  background: var(--clr-white);
  border: 1.5px solid var(--edge);
  border-radius: var(--radius);
  color: var(--clr-ink);
  font: inherit;
}
:is([data-field], .entry-content, [data-search-row]) :is(input, textarea, select):focus-visible {
  border-color: var(--clr-forest);
  outline-offset: 0;
}
[data-field] textarea { min-height: 8rem; resize: vertical; }
[data-field] [data-hint] { margin-block-start: 0.35rem; font-size: var(--step--1); color: var(--clr-muted); }
form[data-contact] [data-actions] { margin-block-start: var(--space-l); }

/* ============================================================
   19. PANELS, TIMELINE, POST META
============================================================ */
:is([data-panel], .wp-block-group.is-style-panel) {
  padding: var(--space-l);
  background: var(--clr-sand);
  border: 1px solid var(--clr-sand-deep);
  border-radius: var(--radius);
}
:is([data-panel], .is-style-panel) :is(h2, h3) { font-size: var(--step-1); margin-block-end: var(--space-s); }
[data-panel] dl > div { padding-block: var(--space-xs); }
[data-panel] dl > div + div { border-block-start: 1px solid var(--clr-sand-deep); }
[data-panel] dt {
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-block-end: 0.1rem;
}
[data-panel] dd { font-weight: 600; color: var(--clr-ink); }
/* Pattern panels hold "Label value" paragraphs: the strong label reads as the term */
.is-style-panel > p { max-width: none; padding-block: var(--space-xs); margin: 0; font-weight: 600; }
.is-style-panel > p + p { border-block-start: 1px solid var(--clr-sand-deep); }
.is-style-panel > p > strong:first-child {
  display: block;
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

/* Timeline. data-timeline is a list of dt/dd pairs. .mr-timeline holds "Date text" paragraphs. */
:is([data-timeline], .mr-timeline) { max-width: var(--measure); }
:is([data-timeline] > li, .mr-timeline > p) {
  position: relative;
  max-width: none;
  margin: 0;
  padding-inline-start: var(--space-l);
  padding-block-end: var(--space-m);
  border-inline-start: 1.5px solid var(--clr-tidal);
}
:is([data-timeline] > li, .mr-timeline > p):last-child { padding-block-end: 0; }
:is([data-timeline] > li, .mr-timeline > p)::before {
  content: "";
  position: absolute;
  inset-inline-start: -6.5px; inset-block-start: 0.45em;
  inline-size: 11px; block-size: 11px;
  background: var(--clr-canopy);
  border: 2px solid var(--clr-paper);
  border-radius: 50%;
}
:is([data-timeline] dt, .mr-timeline > p > strong:first-child) {
  display: block;
  font-family: var(--ff-data);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--clr-forest);
}
[data-timeline] dd { color: var(--clr-muted); max-width: var(--measure); }

/* Post meta line */
[data-postmeta] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-block-start: var(--space-m);
  padding-block: var(--space-s);
  border-block: 1px solid var(--clr-line);
  font-size: var(--step--1);
  color: var(--clr-muted);
  max-width: none;
}
[data-postmeta] > span { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
[data-postmeta] b { color: var(--clr-forest); font-weight: 600; }
[data-postmeta] :is(time, [data-data]) { color: inherit; font-size: 0.94em; }

/* Post footer nav */
:is([data-postnav], .post-navigation .nav-links) {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-l);
  border-block-start: 1px solid var(--clr-line);
}
.post-navigation a { text-decoration: none; }

/* ============================================================
   20. FUNDING STRIP AND FOOTER
   The UK International Development logo may only sit on white,
   so funding gets its own light strip above the dark footer.
============================================================ */
[data-funding] {
  background: var(--clr-white);
  border-block-start: 1px solid var(--clr-line);
  padding-block: var(--space-l);
}
[data-funding] .container {
  display: grid;
  gap: var(--space-m);
  align-items: center;
}
[data-funding] [data-logos] { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-m); }
[data-funding] [data-logos] img { block-size: 64px; inline-size: auto; border-radius: 0; background: none; }
[data-funding] [data-logos] a { display: inline-flex; }
[data-funding] p { font-size: var(--step--1); line-height: 1.55; max-width: 70ch; color: var(--clr-ink); }
[data-funding] p + p { margin-block-start: 0.35rem; color: var(--clr-muted); }
[data-funding] b { font-weight: 600; }
@media (min-width: 780px) { [data-funding] .container:has([data-logos]) { grid-template-columns: auto 1fr; gap: var(--space-xl); } }

footer[data-site-footer] {
  background: var(--clr-forest-deep);
  color: rgba(255,255,255,0.78);
  padding-block: var(--space-xl) var(--space-l);
}
footer[data-site-footer] a { color: rgba(255,255,255,0.86); }
footer[data-site-footer] a:hover { color: var(--clr-white); }
[data-foot-partners] a { text-decoration-color: rgba(255,255,255,0.4); }
[data-foot-partners] a:hover { text-decoration-color: currentColor; }

[data-foot-top] {
  display: grid;
  gap: var(--space-l);
  padding-block-end: var(--space-l);
  margin-block-end: var(--space-l);
  border-block-end: 1px solid rgba(255,255,255,0.12);
}
[data-foot-brand] strong {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-block-end: var(--space-s);
}
[data-foot-brand] strong img { width: 28px; height: 34px; background: none; }
[data-foot-brand] p { font-size: var(--step--1); line-height: 1.6; max-width: 42ch; }

[data-foot-nav] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
[data-foot-nav] p {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-tidal);
  margin-block-end: var(--space-2xs);
}
[data-foot-nav] > ul { grid-column: 1 / -1; columns: 2; column-gap: var(--space-m); }
/* Links are rows at least 32px tall: clear of the 24px target minimum, with room between */
[data-foot-nav] a { display: inline-flex; align-items: center; min-block-size: 2rem; font-size: var(--step--1); text-decoration: none; }

[data-foot-partners] { margin-block-end: var(--space-l); }
[data-foot-partners] p { font-size: var(--step--1); line-height: 1.6; max-width: none; }
[data-foot-partners] b { color: var(--clr-white); font-weight: 600; }

[data-foot-bottom] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-s);
  font-size: var(--step--2);
  color: rgba(255,255,255,0.72);
}
[data-foot-bottom] nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
[data-foot-bottom] a { display: inline-flex; align-items: center; min-block-size: 2rem; text-decoration: none; }
[data-foot-bottom] small a { text-decoration: underline; }

@media (min-width: 780px) {
  [data-foot-top] { grid-template-columns: 1.5fr 1fr; align-items: start; }
  [data-foot-nav] { gap: var(--space-l); }
}

/* ============================================================
   21. WIDE FIGURES AND IMAGE BAND
============================================================ */
[data-figure="wide"] { margin-block: var(--space-l) 0; max-width: none; }
[data-figure="wide"] img {
  width: 100%;
  background: var(--clr-paper);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius);
}
:is([data-figure="wide"], .mr-figure) figcaption, p.mr-caption { max-width: none; }
.mr-figure img { width: 100%; }

[data-section="imageband"] { padding: 0; }
:is([data-section="imageband"] > figure, figure.mr-imageband) { margin: 0; }
:is([data-section="imageband"] > figure, figure.mr-imageband) img {
  width: 100%;
  height: clamp(240px, 42vh, 460px);
  object-fit: cover;
  border-radius: 0;
}
:is([data-section="imageband"], figure.mr-imageband) figcaption {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.6rem var(--space-m) 0;
  border: 0;
}

/* Partner figure inside the reading column */
[data-partner-figure] { margin-block: var(--space-m) 0; }
[data-partner-figure] img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }

/* ============================================================
   22. MOTIF  (the mark as a faint watermark on dark bands)
============================================================ */
:is([data-motif], .mr-hero, .mr-cta) { position: relative; overflow: hidden; }
:is([data-motif], .mr-hero, .mr-cta)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline-end: clamp(-4rem, -2vw, -1.5rem);
  width: clamp(230px, 34vw, 470px);
  aspect-ratio: 1671 / 2048;
  transform: translateY(-50%);
  background: url(assets/img/manrads-mark-light.svg) no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}
:is([data-motif], .mr-hero, .mr-cta) > * { position: relative; z-index: 1; }

/* ============================================================
   23. TWO-COLUMN ARTICLE  (reading text and media aside)
============================================================ */
[data-cols] { display: grid; gap: var(--space-l); margin-block-start: var(--space-m); }
[data-cols] > [data-prose],
[data-cols] > aside { max-width: none; }
[data-cols] aside > * + * { margin-block-start: var(--space-m); }
[data-cols] aside figure { margin: 0; }
[data-cols] aside figure img { width: 100%; height: auto; aspect-ratio: auto; border-radius: var(--radius); }
[data-cols] aside figcaption { max-width: none; }
[data-cols] aside [data-panel] { padding: var(--space-m); }
@media (min-width: 880px) {
  [data-cols] { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  [data-cols][data-aside="left"] > [data-prose] { order: 2; }
  [data-cols] aside { position: sticky; inset-block-start: 88px; }
}

/* ============================================================
   24. BLOCK EDITOR CONTENT  (pages built from patterns)
============================================================ */
/* Width model: readable column by default; wide and full break out. */
.entry-content > * { max-width: var(--measure); margin-inline: auto; padding-inline: var(--space-m); }
.entry-content > .alignwide { max-width: var(--container); }
.entry-content > .alignfull { max-width: none; padding-inline: 0; }
.entry-content > * + * { margin-block-start: var(--space-s); }
.entry-content > .alignfull + *, .entry-content > * + .alignfull,
.entry-content > .alignwide + *, .entry-content > * + .alignwide { margin-block-start: var(--space-xl); }
.entry-content > .mr-hero + * { margin-block-start: 0; }
.mr-block { padding-block: var(--space-xl); }
.mr-block > * + * { margin-block-start: var(--space-s); }
.mr-block > :is(figure, .wp-block-group, .mr-timeline, .mr-diagram) { margin-block: var(--space-l); }
.mr-block:not(.has-background) + .mr-block:not(.has-background) { padding-block-start: 0; }
figure.mr-imageband + .mr-block { padding-block-start: var(--space-xl); }

/* Column model for pattern sections. A constrained group centres every child in the content
   column on its own, so a child with a shorter measure (kicker, lede, paragraph, caption) would
   drift off the shared left edge. Each child takes the column's start as its margin instead. */
.mr-block {
  --col: var(--wp--style--global--content-size, 760px);
  --col-start: max(0px, calc((100% - var(--col)) / 2));
}
.mr-block.alignwide { --wp--style--global--content-size: 100%; --col: 100%; }   /* wide sections: children fill the section */
.mr-block:not(.mr-cta) > :not(.alignwide, .alignfull, .has-text-align-center) {
  max-width: var(--col);                                /* a child fills the column, never more, unless it is aligned wide or full */
  margin-inline: var(--col-start) auto !important;
}
.mr-block:not(.mr-cta) > :is(p, ul, ol, blockquote):not(.alignwide, .alignfull) { max-width: min(var(--measure), var(--col)); }   /* text keeps its measure */
.mr-block:not(.mr-cta) > ol.is-style-legend { max-width: var(--col); }   /* the legend spans its column, wide in a wide section */
.mr-block > .has-text-align-center { margin-inline: auto !important; }   /* centred children centre in the column */

/* Section pages print their blocks bare (no entry-content column). Top-level wide blocks get the
   container's width here; full-width blocks and constrained groups already size themselves. */
[data-sections] > .alignwide {
  inline-size: min(100% - 2 * var(--space-m), var(--container) - 2 * var(--space-m));
  margin-inline: auto;
}
[data-sections] > .alignwide.has-global-padding { padding-inline: 0; }
[data-sections] > * + * { margin-block-start: 0; }
[data-sections] > .mr-block:not(.has-background) + .mr-block:not(.has-background) { padding-block-start: 0; }

/* Search form and pagination */
form[data-searchform] label { display: block; margin-block-end: 0.35rem; font-weight: 600; font-size: var(--step--1); }
[data-search-row] { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
[data-search-row] input { flex: 1 1 16rem; }
.navigation { margin-block-start: var(--space-l); display: flex; gap: 0.4rem; flex-wrap: wrap; }
.navigation .page-numbers {
  display: inline-flex; min-width: var(--target); min-height: var(--target);
  align-items: center; justify-content: center;
  padding: 0 0.6rem;
  border: 1.5px solid var(--edge);
  border-radius: var(--radius);
  font-family: var(--ff-data);
  text-decoration: none;
  color: var(--clr-forest);
}
.navigation .page-numbers.current { background: var(--clr-forest); color: var(--clr-paper); border-color: var(--clr-forest); }

/* ============================================================
   25. FORCED COLOURS AND PRINT
============================================================ */
@media (forced-colors: active) {
  /* Masked decorations lose their fill here, so let them go cleanly. Controls keep real borders. */
  :is([data-kicker], p.is-style-kicker)::before,
  :is([data-prose] ul, ul.wp-block-list) > li::before,
  :is([data-section="glance"] dl, .mr-glance)::before,
  :is([data-motif], .mr-hero, .mr-cta)::before { display: none; }
  :is([data-arrow], a.mr-arrow)::after { background: LinkText; }
  :is([data-btn], .wp-block-button__link) { border-color: ButtonText; }
  [data-pin] { border: 1px solid CanvasText; }
}

@media print {
  [data-site-header], [data-site-footer], [data-section="support"], [data-actions], [data-partner-map] { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  [data-section] { padding-block: 1rem !important; }
  [data-ground="mud"], [data-ground="forest"] { background: none; color: #000; --heading-clr: #000; --quiet: #333; --kicker-clr: #000; }
  figure img { max-height: 8cm; }
}