/* ============================================================
   Empower YOUth (parent) — brand colour system.
   Direction: warm teal + berry duotone on brown/cream neutrals.

   Re-coloured to the client's OFFICIAL colour chart (2026-09-10): brown
   #312821, cream #FDF7E9, berry #9F0259, teal #186F65 — her supplied hexes are
   used EXACTLY for backgrounds/fills; the -ink/-lift/-tint text variants hold
   her hue and move only lightness to clear WCAG AA. Pink #F34D74 is decorative-
   only (fails AA as text). Written in OKLCH per the NOKNOK craft standard; the
   hex + measured contrast is kept in a comment beside each token.

   Contrast figures in comments are measured, not estimated.
   ============================================================ */

:root {
	/* Warm dark brown scale — the signature base (#312821, client's OFFICIAL chart).
	   brown-800 is her EXACT dark-ground hex; -900/-950 are the deeper steps kept
	   from the approved scale (darker only ⇒ more contrast, safe). */
	--color-brown-950: oklch(20.13% 0.0137 61.72);  /* #1B1510 · deepest band */
	--color-brown-900: oklch(23.72% 0.0144 57.50);  /* #241D18 · ink */
	--color-brown-800: oklch(0.285 0.018 59.8);  /* #312821 · OFFICIAL dark ground (exact) */

	/* Warm cream — the calm light content surface (client's OFFICIAL base, exact). */
	--color-cream: oklch(0.977 0.020 87.5);  /* #FDF7E9 · OFFICIAL page base (exact) · ink-on 15.5:1 */
	--color-cream-200: oklch(93.57% 0.0161 82.79);  /* #EFE9DE */
	--color-cream-300: oklch(0.898 0.024 80);  /* #E6DCCC · hairline on light */
	--color-surface: oklch(1 0 0);  /* #FFFFFF · white cards (Nikki: cream page + white cards) */

	/* Ink + paper (text). Muted tokens KEPT from the approved scale — the lighter
	   official cream only raises their contrast, so they still clear AA with margin. */
	--color-ink: oklch(23.72% 0.0144 57.50);  /* #241D18 - 15.5:1 on cream */
	--color-ink-soft: oklch(0.480 0.034 67);  /* #6B5A49 - 6.17:1 on cream (muted) */
	--color-brown-600: oklch(0.375 0.029 65);  /* #4C3E31 */
	--color-paper: oklch(0.977 0.020 87.5);  /* = cream #FDF7E9 · light text on dark bands · 13.5:1 on brown (Nikki: cream not the old muddy paper) */
	--color-paper-soft: oklch(78.47% 0.0272 76.74);  /* #C3B7A6 - 7.31:1 on brown-800 (muted on dark) */

	/*
	 * BRAND ACCENTS — the duotone: teal and berry (client's OFFICIAL chart).
	 *
	 * Both accents are dark enough to WRITE on cream directly — the base
	 * value is both the fill and the text there. So each behaves like the L.A.B.'s
	 * violet/magenta, and the accent model below has a single shape rather than a
	 * light/dark split:
	 *
	 *   base   the FILL, and the text colour on cream/white (her EXACT hex).
	 *   -ink   the deeper value for links and small text (a genuine darker step).
	 *   -lift  the on-brown value for the dark bands (the base fails there).
	 *   -tint  the pale wash — for hover grounds and the script-word backing.
	 *
	 * A white label reads on every base fill; ink reads on every -lift fill.
	 * base = her exact hex; -ink/-lift/-tint derived (hue held, L moved) to AA.
	 */
	--color-teal: oklch(0.490 0.080 183.4);  /* #186F65 · OFFICIAL (exact) · text on cream 5.62:1 · white-on 6.00:1 */
	--color-teal-ink: oklch(0.438 0.080 183.4);  /* #006056 · links / strong text on cream 7.00:1 */
	--color-teal-lift: oklch(0.658 0.080 183.4);  /* #53A296 · on brown bands 4.79:1 · ink-on 5.52:1 */
	--color-teal-tint: oklch(0.930 0.030 183.4);  /* #D3EFEA · pale wash · on berry 6.6:1 */
	/* The lift lifted once more (L up, hue/chroma held) — the bright colour splash
	   inside a brand illustration on the dark bands, sitting over teal-lift linework. */
	--color-teal-splash: oklch(0.800 0.072 183.4);  /* #88CDC2 · on brown-800 7.95:1 */

	--color-berry: oklch(0.458 0.186 356.9);  /* #9F0259 · OFFICIAL (exact) · text on cream 7.48:1 · white-on 7.99:1 */
	--color-berry-ink: oklch(0.388 0.186 356.9);  /* #870046 · links / pressed / strong · on cream 9.28:1 · on white 9.91:1 */
	/* On-brown berry text/eyebrows/links. A saturated rose, NOT the old dusty grey-pink:
	   the ground is too dark to keep berry dark AND legible, so L stays lifted (~0.68) and
	   chroma is pushed up (0.140) to undust it. Clears AA small text on the dark bands. */
	--color-berry-lift: oklch(0.680 0.140 356.9);  /* #DB709A · on brown-800 4.66:1 (AA small ✓) · ink-on 5.38:1 */
	/* Deep berry for LARGE display only (headings ≥24px on brown, 3:1 gate). Fails small text —
	   never a body/link/caption colour. Use for hero/column headings on the dark bands. */
	--color-berry-lift-display: oklch(0.600 0.150 356.9);  /* #C35482 · on brown-800 3.37:1 (large ✓, small ✗) */
	--color-berry-tint: oklch(0.930 0.032 356.9);  /* #FBE0E8 · pale wash */
	/* Berry-lift lifted once more (L up, hue held, chroma eased to stay in sRGB) — the
	   bright colour splash inside a brand illustration on the dark bands, over berry-lift linework. */
	--color-berry-splash: oklch(0.800 0.115 356.9);  /* #F99EBF · on brown-800 7.33:1 */

	/*
	 * PINK — the client's fifth official colour (#F34D74). DECORATIVE / large-display
	 * ONLY: it fails AA as body text everywhere (3.2:1 on cream; white-on 3.4; dark-on
	 * 4.2), so it is NEVER a text or button fill and is NOT an editor-facing accent.
	 * Use for large hero/illustration/seed-motif fills. -ink is an optional darkened
	 * step for the rare case pink small text is needed.
	 */
	--color-pink: oklch(0.661 0.202 10.8);  /* #F34D74 · decorative / ≥24px display only */
	--color-pink-ink: oklch(0.578 0.202 10.8);  /* #D52D5C · optional small text 4.51:1 on cream */

	/*
	 * FUNCTIONAL STATE COLOURS — held SEPARATE from brand (never reuse berry/pink
	 * for errors). Restrained chroma, each ≥4.5:1 on cream; error pulled toward
	 * orange-red (~32°) so it never reads as berry or pink.
	 */
	--color-error: oklch(0.570 0.160 32);  /* #C34A35 · 4.52:1 on cream */
	--color-success: oklch(0.541 0.110 150);  /* #38804B · 4.51:1 on cream */
	--color-warning: oklch(0.555 0.130 75);  /* #9E6500 · 4.56:1 on cream */

	/* The accent inside a brand illustration (ey_illustration_svg). Berry by
	   default, so an illustration inlined anywhere reads on-brand; .card__illo
	   rebinds it to --card-accent so a card's drawing takes the card's colour. */
	--ey-illo-accent: var(--color-berry);

	/* Shape + rhythm */
	--header-h: 72px;
	--space-section: clamp(4rem, 3rem + 4vw, 6rem);
	--radius-btn: 999px;      /* buttons are pills (style tile) */
	--radius-card: 1.25rem;   /* 20px */
	--radius-card-glass: 1.25rem;
	--wrap: 67.5rem;          /* 1080px — the style-tile measure */

	--font-display: "Lora", "Iowan Old Style", Georgia, serif;   /* serif headings */
	--font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;  /* body + UI */
	--font-script: var(--font-display);   /* emphasis word = Lora italic (see .hl) */
}

/* ============================================================
   SURFACES — the mechanism behind the Design tab.

   A section picks a background. It does NOT pick a text colour, a link colour
   or a focus ring: those are derived here, together, as one tested set. That is
   what makes every combination an editor can assemble safe by construction —
   the accessibility gate runs when we build, never when they choose.

   Adding a background means adding one block here. Nothing else.
   ============================================================ */

.surface {
	background-color: var(--surface-bg);
	color: var(--surface-ink);
}

/* Light surfaces */
:root,
.is-cream { --surface-bg: var(--color-cream); }
.is-white { --surface-bg: #fff; }

:root,
.is-cream,
.is-white {
	--surface-ink: var(--color-ink);
	--surface-ink-soft: var(--color-ink-soft);
	--surface-link: var(--color-teal-ink);
	/* Link hover shifts the link's COLOUR, not its underline. The pair below is the
	   direction + amount to mix the resting link colour toward: darken toward black
	   on light grounds, lighten toward paper on dark/coloured grounds. Because the
	   move is always AWAY from the ground, hover contrast only ever rises — AA is
	   kept by construction. Every link rule mixes its own resting colour toward it. */
	--link-hover-toward: #000;
	--link-hover-amt: 30%;
	--surface-kicker: var(--color-teal-ink);
	--surface-rule: color-mix(in oklch, var(--color-teal-ink) 35%, transparent);
	--surface-card-bg: #fff;
	--surface-card-border: color-mix(in oklch, var(--color-ink) 9%, transparent);
	/*
	 * neon-ink: 5.65:1 on cream, 6.25:1 on white.
	 *
	 * The focus ring has to be the ink value, never the brand one. The brand
	 * neon measures 1.49:1 on cream — far under the 3:1 that WCAG 2.2 SC 1.4.11
	 * requires of a focus indicator. axe has no rule for focus-ring contrast, so
	 * the automated gate passes either way; this is held by measurement alone.
	 */
	--surface-focus: var(--color-teal-ink);
}

/* Dark surfaces */
.is-brown { --surface-bg: var(--color-brown-800); }
.is-dark  { --surface-bg: var(--color-brown-950); }

.is-brown,
.is-dark {
	--surface-ink: var(--color-paper);
	--surface-ink-soft: var(--color-paper-soft);
	/* teal-LIFT on the brown bands — the base teal is dark-on-dark and fails there. */
	--surface-link: var(--color-teal-lift);
	--link-hover-toward: var(--color-paper);   /* lighten on dark grounds */
	--link-hover-amt: 28%;
	--surface-kicker: var(--color-teal-lift);
	--surface-rule: color-mix(in oklch, var(--color-teal-lift) 55%, transparent);
	--surface-card-bg: oklch(100% 0 0 / 0.05);
	--surface-card-border: color-mix(in oklch, var(--color-teal-lift) 22%, transparent);
	--surface-focus: var(--color-teal-lift); /* 4.65:1 on brown-800 */
}

/*
 * Berry band — a bold berry ground (#9F0259, the client's official berry). The
 * one COLOURED dark surface. Everything reads LIGHT on it: text is cream, the
 * accent resolves to a pale value (the section-accent override sits below, after
 * the accent definitions, so it wins by source order). The buttons land WHITE
 * (Nikki: cream + white, not the old muddy paper): btn-primary fills #fff under a
 * berry-ink label (9.91:1); the outline draws pale teal. Ratios measured on #9F0259.
 */
.is-berry { --surface-bg: var(--color-berry); }
.is-berry {
	--surface-ink: var(--color-paper);            /* cream · 7.48:1 on berry */
	--surface-ink-soft: oklch(0.86 0.03 60);      /* light warm — 5.19:1 on berry */
	--surface-link: var(--color-teal-tint);       /* pale teal, the duotone partner — 6.59:1 */
	--link-hover-toward: var(--color-paper);      /* lighten toward paper on this coloured ground */
	--link-hover-amt: 28%;
	--surface-kicker: var(--color-teal-tint);
	--surface-rule: color-mix(in oklch, var(--color-paper) 35%, transparent);
	--surface-card-bg: oklch(100% 0 0 / 0.08);
	--surface-card-border: color-mix(in oklch, var(--color-paper) 28%, transparent);
	--surface-focus: var(--color-paper);          /* cream · 7.48:1 on berry, well over the 3:1 */
}

/*
 * Teal band — the teal twin of the berry band, on the client's EXACT teal ground
 * (#186F65). Per Nikki's rule a band background is her exact hex, mirroring the
 * berry band on #9F0259; the derived deep teal-ink is no longer the ground.
 * Everything reads light on it: cream text (5.62:1), the buttons land WHITE under
 * a teal-ink label, and the pale accent is berry's tint, the duotone partner.
 * Ratios measured on #186F65.
 */
.is-teal { --surface-bg: var(--color-teal); }
.is-teal {
	--surface-ink: var(--color-paper);            /* cream · 5.62:1 on teal */
	--surface-ink-soft: oklch(0.93 0.02 87.5);    /* light cream — 4.87:1 on teal (raised: exact teal is lighter than teal-ink was) */
	--surface-link: var(--color-berry-tint);      /* pale berry, the duotone partner — 4.84:1 */
	--link-hover-toward: var(--color-paper);      /* lighten toward paper on this coloured ground */
	--link-hover-amt: 28%;
	--surface-kicker: var(--color-berry-tint);
	--surface-rule: color-mix(in oklch, var(--color-paper) 35%, transparent);
	--surface-card-bg: oklch(100% 0 0 / 0.08);
	--surface-card-border: color-mix(in oklch, var(--color-paper) 28%, transparent);
	--surface-focus: var(--color-paper);          /* cream · 5.62:1 on teal, over the 3:1 */
}

/*
 * Duo Tone — a two-band ground: deep brown ABOVE the seam, berry BELOW it.
 *
 * One section, two grounds, so the tokens come in two halves. The SECTION set
 * (here) is the deep-brown band — the same foreground values as Deep brown
 * (.is-dark), because that is exactly the ground the eyebrow and heading sit on.
 * The berry band re-scopes its own set on .duotone__below (layout.css), so the
 * intro, links and buttons that live under the seam resolve precisely as they
 * would in a bare Berry section — the pair is what keeps every element AA on the
 * band it actually lands on, the same safety argument as every other surface.
 *
 * The two band colours are handed to the layout as --duo-top / --duo-bottom;
 * the layout paints them (a 50% gradient on the desktop grid, per-band wrappers
 * on a phone so the seam floats to the content).
 */
.is-duotone { --surface-bg: var(--color-brown-800); }
.is-duotone {
	--surface-ink: var(--color-paper);
	--surface-ink-soft: var(--color-paper-soft);
	--surface-link: var(--color-teal-lift);
	--link-hover-toward: var(--color-paper);      /* lighten on the dark band */
	--link-hover-amt: 28%;
	--surface-kicker: var(--color-teal-lift);
	--surface-rule: color-mix(in oklch, var(--color-teal-lift) 55%, transparent);
	--surface-card-bg: oklch(100% 0 0 / 0.05);
	--surface-card-border: color-mix(in oklch, var(--color-teal-lift) 22%, transparent);
	--surface-focus: var(--color-teal-lift);      /* 4.65:1 on brown-800 */
	/*
	 * Warm brown above (the .is-brown ground), berry below — not the near-black
	 * deep brown, which read as a flat dark band rather than part of the warm
	 * palette. The ink tokens above were already measured against brown-800
	 * (see --surface-focus), so the eyebrow and heading stay AA on it. Kept in
	 * step with --surface-bg so a first section's header-clearance strip reads
	 * as more of the top band.
	 */
	--duo-top: var(--color-brown-800);
	--duo-bottom: var(--color-berry);
}

/* ============================================================
   PHOTO-COMPOSITION SHAPES — the count-based Bauhaus compositions
   (photos-1 / photos-2 / photos-3, inc/shapes.php).

   Each SVG's decorative fills read three slot variables, --ey-art-1..3, keyed
   dark→light, with the delivered berry hex as the fallback. Because the SVG is
   inlined inside a .surface section it inherits these from the section — so the
   shapes RECOLOUR to the section's own ACCENT: a teal-accent section draws teal
   shapes, a berry-accent section berry. On any coloured or dark ground the whole
   ramp lifts a step (hue kept) so the darkest tone still separates from it.

   These are aria-hidden DECORATIVE graphics (not text, not UI), so WCAG does not
   gate them; the goal is harmony and tonal separation from the ground. The photo
   <image> slots are untouched by any of this.
   ============================================================ */

/* Light grounds (cream / white), teal accent — the default. */
:root,
.section--accent-teal {
	--ey-art-1: var(--color-teal);          /* teal      */
	--ey-art-2: oklch(0.600 0.095 183.4);     /* mid teal  */
	--ey-art-3: var(--color-teal-lift);     /* pale teal */
}

/* Light grounds, berry accent — the vibrant berry→pink family (no dusty rose):
   berry, the deep berry-rose display tone, then Mel's vibrant pink. */
.section--accent-berry {
	--ey-art-1: var(--color-berry);              /* #9F0259 · berry            */
	--ey-art-2: var(--color-berry-lift-display); /* #C35482 · deep berry-rose  */
	--ey-art-3: var(--color-pink);               /* #F34D74 · vibrant pink     */
}

/* Coloured and dark grounds (warm/deep brown, berry, teal, Duo Tone): the
   darkest tone would sink into the ground, so the ramp lifts a step, hue kept.
   Compound selectors — both classes sit on the one <section>. */
.is-brown.section--accent-teal,
.is-dark.section--accent-teal,
.is-berry.section--accent-teal,
.is-teal.section--accent-teal,
.is-duotone.section--accent-teal {
	--ey-art-1: var(--color-teal-lift);     /* pale teal   */
	--ey-art-2: oklch(0.700 0.070 183.4);     /* paler teal  */
	--ey-art-3: oklch(0.800 0.045 183.4);     /* palest teal */
}
.is-brown.section--accent-berry,
.is-dark.section--accent-berry,
.is-berry.section--accent-berry,
.is-teal.section--accent-berry,
.is-duotone.section--accent-berry {
	/* Berry disappears on a berry ground (1.0:1) and reads weakly on brown (1.4:1),
	   so the dark-band shapes drop berry entirely for the lighter pink family —
	   the deep berry-rose, Mel's vibrant pink, then a light pink. All vivid, no dust. */
	--ey-art-1: var(--color-berry-lift-display); /* #C35482 · deepest that still separates */
	--ey-art-2: var(--color-pink);               /* #F34D74 · vibrant pink                 */
	--ey-art-3: oklch(0.800 0.120 10.8);         /* #FF9CAB · light pink · lightest         */
}

/* ============================================================
   ACCENTS — the section's own pathway colour.

   A section picks an accent (teal / berry) alongside its background,
   and the pair resolves together into these tokens:

     --section-accent      the FILL. Button grounds, the dashed rule, anything
                           that is a shape rather than a word.
     --section-accent-ink  the TEXT. Eyebrows, the script emphasis word, links —
                           anything held to 4.5:1 against the section ground.
     --section-accent-on   the LABEL that sits ON the fill, held to 4.5:1
                           against --section-accent, not against the section.
     --section-accent-pale a light wash of the accent — outline-button hover.

   Both OoHC accents are dark enough to write on cream, so the model is
   uniform: on light grounds the base fills and -ink writes with a white label;
   on the brown bands both move to -lift with an ink label. That is why BOTH
   classes are needed to resolve a colour, and why every combination an editor
   can assemble is safe by construction rather than by review.

   The focus ring is deliberately NOT here. It stays derived from the
   background alone — a ring that changed colour with the accent would be a
   ring whose contrast an editor could choose, and SC 1.4.11 is not theirs
   to answer.
   ============================================================ */

/* Light grounds — cream and white. Base fills, -ink writes, white label on fill. */
.section--accent-teal {
	--section-accent: var(--color-teal);
	--section-accent-ink: var(--color-teal-ink);   /* 7.09:1 on cream */
	--section-accent-on: #fff;                     /* 5.13:1 on teal */
	--section-accent-pale: var(--color-teal-tint);
}
.section--accent-berry {
	--section-accent: var(--color-berry);
	--section-accent-ink: var(--color-berry-ink);  /* strong berry, well over 4.5:1 on cream */
	--section-accent-on: #fff;                     /* 7.87:1 on berry */
	--section-accent-pale: var(--color-berry-tint);
}

/*
 * Dark grounds — warm brown and deep brown.
 *
 * The base value fails on brown (both accents are dark by design), so both
 * the fill and the text move to -lift; the label on that lighter fill is ink.
 * The pale face is the -lift too — a dark tint over a dark band only darkens it.
 *
 * Compound selectors, not descendant ones: both classes are on the same
 * <section>, so `.is-brown .section--accent-teal` would never match anything.
 */
.is-brown.section--accent-teal,
.is-dark.section--accent-teal,
.is-duotone.section--accent-teal {
	--section-accent: var(--color-teal-lift);
	--section-accent-ink: var(--color-teal-lift);   /* 4.65:1 on brown-800 */
	--section-accent-on: var(--color-ink);
	--section-accent-pale: var(--color-teal-lift);
}
.is-brown.section--accent-berry,
.is-dark.section--accent-berry,
.is-duotone.section--accent-berry {
	--section-accent: var(--color-berry-lift);
	--section-accent-ink: var(--color-berry-lift);  /* 4.66:1 on brown-800 */
	--section-accent-on: var(--color-ink);
	--section-accent-pale: var(--color-berry-lift);
}

/*
 * Duo Tone, below the seam: the berry band.
 *
 * Above the seam the section IS the deep-brown band, so its tokens (set on
 * .is-duotone above) already carry the eyebrow and heading. Everything below the
 * seam sits on berry, so this wrapper swaps in the Berry band's whole set — the
 * exact values from .is-berry — so the intro, links and the two buttons resolve
 * precisely as they would in a bare Berry section: light text, pale-teal links,
 * and the light button treatment (a #fff fill under a berry-ink label). Vars
 * inherit, so ey_buttons() inside picks these up untouched.
 */
.duotone__below {
	--surface-ink: var(--color-paper);            /* 6.88:1 on berry */
	--surface-ink-soft: oklch(0.86 0.03 60);      /* 5.11:1 on berry */
	--surface-link: var(--color-teal-tint);       /* 6.56:1 on berry */
	--surface-kicker: var(--color-teal-tint);
	--surface-rule: color-mix(in oklch, var(--color-paper) 35%, transparent);
	--surface-focus: var(--color-paper);          /* 6.88:1 on berry */
	--section-accent: #fff;
	--section-accent-ink: var(--color-teal-tint); /* eyebrow / links / outline — 6.56:1 */
	--section-accent-on: var(--color-berry-ink);  /* label on the white fill — 9.91:1 */
	--section-accent-pale: var(--color-teal-tint);
	color: var(--surface-ink);
}
/*
 * On the magenta band the accent goes PALE, whatever the section picked (teal or
 * berry both resolve here) and even when nothing is picked — bare .is-berry, so
 * an unset accent can't fall back to a dark teal fill. Placed after the accent
 * definitions above so it wins on source order at equal specificity. This is what
 * makes the buttons light: btn-primary paints --section-accent (paper) under
 * --section-accent-on (berry-ink 9.91:1), and the outline draws pale teal.
 */
.is-berry {
	--section-accent: #fff;
	--section-accent-ink: var(--color-teal-tint);   /* eyebrow / links / outline — 6.56:1 */
	--section-accent-on: var(--color-berry-ink);    /* label on the white fill — 9.91:1 */
	--section-accent-pale: var(--color-teal-tint);
}
/* The teal band's twin: pale berry accent, teal-ink label on the white button. */
.is-teal {
	--section-accent: #fff;
	--section-accent-ink: var(--color-berry-tint);  /* eyebrow / links / outline — 6.20:1 */
	--section-accent-on: var(--color-teal-ink);     /* label on the white fill — 7.48:1 */
	--section-accent-pale: var(--color-berry-tint);
}

/*
 * Photo background. The image is a wash OVER the colour, never a replacement
 * for it — so the colour still owns contrast and a light photograph cannot
 * cost you the heading. The overlay is not optional for that reason.
 */
/*
 * A brand illustration used as a section BACKGROUND: inline (so it recolours —
 * ey-illo carries that), contained (never stretched — a drawing is not a cover
 * photo), and washed faintly behind the content. No dark diagonal scrim like
 * .has-photo — that exists for a photograph the copy must sit over; this is
 * already surface-toned and kept light enough that the copy reads over it, so
 * text contrast is unchanged. A bolder foreground illustration goes in a Text +
 * photo image slot, not here.
 */
.has-illo { position: relative; isolation: isolate; }
.has-illo > .surface__illo {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: grid;
	place-items: center;
	inline-size: auto;
	opacity: 0.16;
	pointer-events: none;
}
.has-illo > .surface__illo svg { inline-size: min(100%, 64rem); block-size: 100%; }

.has-photo { position: relative; isolation: isolate; }
.has-photo > .surface__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.25;
}
/*
 * Diagonal, not vertical, and this is the whole difference.
 *
 * The overlay is FULLY opaque where the text sits and thins toward the far
 * corner, so the photograph is a presence rather than a backdrop and the copy
 * never has to compete with a face. A vertical gradient with a transparent
 * middle does the opposite: it leaves the photo at its most visible exactly
 * where the paragraph is.
 *
 * color-mix keeps this working for every surface, because the overlay is made
 * from whatever background the section chose rather than a hardcoded brown.
 */
.has-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom right,
		var(--surface-bg) 0%,
		color-mix(in oklab, var(--surface-bg) 92%, transparent) 45%,
		color-mix(in oklab, var(--surface-bg) 55%, transparent) 100%
	);
}

/* ============================================================
   BASE
   ============================================================ */

/*
 * border-box everywhere.
 *
 * Without it `width: 100%` plus `padding-inline: 1.5rem` on .container-lab
 * measured 438px inside a 390px viewport — a horizontal scrollbar on every
 * page, on every phone. Desktop hid it completely, because the container's
 * max-width caps it well inside the viewport there, so it only appeared once
 * something actually measured a narrow width.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/*
	 * `clip`, not `hidden`: hidden makes the element a scroll container, which
	 * silently breaks position:sticky on descendants.
	 */
	overflow-x: clip;
}

body {
	background-color: var(--color-cream);
	color: var(--color-ink);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	line-height: 1.6;
	margin: 0;
}

/* Headings inherit colour on purpose, so a dark surface gets light headings
   automatically rather than needing a rule per heading level. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);        /* Lora (serif) */
	font-weight: 560;                        /* Lora display weight (style tile) */
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: inherit;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.4rem); line-height: 1.15; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.25rem); line-height: 1.16; }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.5rem); line-height: 1.2; }

p { text-wrap: pretty; }

a { color: inherit; }

/* :focus-visible, never :focus — and never `outline: none`. The ring is the
   only thing telling a keyboard user where they are. */
:focus-visible {
	outline: 3px solid var(--surface-focus, var(--color-teal-ink));
	outline-offset: 3px;
	border-radius: 5px;
}

/* A pale teal wash under ink — a quiet, legible highlight (well over 10:1). */
::selection { background: var(--color-teal-tint); color: var(--color-ink); }

img { max-width: 100%; height: auto; }

/* ============================================================
   LAYOUT
   ============================================================ */

.container-lab {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 1.5rem;
}
@media (min-width: 768px) {
	.container-lab { padding-inline: 2rem; }
}

.section { padding-block: var(--space-section); }

/* Skip link — visible only when focused. */
.skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--color-ink);
	color: var(--color-cream);
	border-radius: 0 0 var(--radius-btn) 0;
}
.skip-link:focus { inset-inline-start: 0; }

/* ============================================================
   TEXTURE
   ============================================================ */

/*
 * The seed texture — a scattered, dithered field, NOT in the section accent.
 *
 * The colour is fixed per ground: paper on the dark grounds, warm brown on the
 * light ones (set on the two variants below). It deliberately does not follow the
 * section's accent — it is a neutral texture, the same everywhere. The artwork
 * (assets/img/decor/seeds-NN.svg) and how it is masked are described at the
 * .halftone--* rule below; the field runs almost invisible on the LEFT to full
 * strength on the RIGHT, the two variants differing only in how much alpha each
 * ground needs to read.
 */

/*
 * It is a LAYER, not the section's own background — and that is what puts it
 * over the photograph.
 *
 * An element's background paints before any of its children, including the
 * ones at z-index -1 — so the dots, painted on the section itself, sat under
 * .surface__photo AND under the wash over it. On a textured section carrying a
 * background image they were not faint, they were gone: the wash is fully
 * opaque where the text sits, so it covered them outright, and the photo took
 * the rest. Home's hero runs both, and was showing no dot at all.
 *
 * A pseudo-element is a child, so it paints after them. z-index 0 puts it over
 * the photo and the wash (both -1) and under .section__inner (1), and the
 * splatter — also 0, but later in tree order — still lands on top of it, which
 * is where it already was. A section with no photo paints the same pixels as
 * before; only the mechanism moved.
 *
 * No position of its own: .halftone--* is only ever set on .section, which is
 * already position:relative and clips, so inset:0 is the section's own box.
 */
.halftone--on-light::before,
.halftone--on-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/*
	 * The seed field as a mask. Its shape (and now its whole density falloff and
	 * per-seed opacity) come from the SVG's alpha; the fill is the flat colour set
	 * per-ground below. --seed-mask is set inline PER SECTION by ey_section_open()
	 * — one of a dozen pre-scattered variants — so no two textured sections carry
	 * the same field; the fallback covers a section that predates that.
	 *
	 * Pinned to the TOP-RIGHT and not repeated: the art already gathers the seeds
	 * into its own top-right corner, so it sits in the section's top-right and
	 * fades toward the bottom-left. -webkit- prefix carried for older WebKit.
	 */
	-webkit-mask-image: var(--seed-mask, url("../img/decor/seeds-01.svg"));
	        mask-image: var(--seed-mask, url("../img/decor/seeds-01.svg"));
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: top right;
	        mask-position: top right;
	-webkit-mask-size: 640px 640px;
	        mask-size: 640px 640px;
}
/*
 * The fill is a FLAT colour, fixed per ground and NOT the section accent — paper
 * on dark, warm brown on light. All the strength variation now lives in the mask
 * (per-seed opacity + the top-right falloff baked into each variant), so the fully
 * opaque seeds read at full colour and the rest fade with their own alpha.
 */
.halftone--on-light::before { background-color: var(--color-brown-800); }
.halftone--on-dark::before  { background-color: var(--color-paper); }
/*
 * Mobile: keep the seed field out of the reading column.
 *
 * On a phone the section is full-width, so the 640px top-right field lands
 * straight over the heading and body copy and fights the words. Below 700px the
 * field is clipped to the section's padding frame — the band AROUND the content,
 * never over it — with a clip-path ring: the whole box with a centred window the
 * size of the text column punched out (an outer rectangle traced one way, the
 * inner window the other, so the winding leaves a hole).
 *
 * The window inset is the padding itself: the inline gutter is .container-lab's
 * 1.5rem, the block inset is the section's own vertical padding — --space-section
 * by default, and 0 for the flush duotone bands / 1.25rem for the tight inline
 * list, matched below so the band never lands over their content.
 *
 * clip-path, NOT a mask composite. An earlier version carved this frame with a
 * three-layer mask + mask-composite; on iOS / WebKit the composite that should
 * have cut the window did not take and the whole masked layer showed, repainting
 * the padding as a solid brown / paper band. clip-path sidesteps compositing
 * entirely — every current engine cuts it — and leaves the base seed mask exactly
 * as it is on desktop.
 *
 * 700px matches .section__watermark's own mobile cutoff above — the two
 * decorative washes step back on small screens together. Above it the desktop
 * corner field stands untouched.
 */
@media (max-width: 700px) {
	.halftone--on-light::before,
	.halftone--on-dark::before {
		--seed-gx: 1.5rem;
		--seed-gy: var(--space-section);
		clip-path: polygon(
			0 0, 100% 0, 100% 100%, 0 100%, 0 0,
			var(--seed-gx) var(--seed-gy),
			var(--seed-gx) calc(100% - var(--seed-gy)),
			calc(100% - var(--seed-gx)) calc(100% - var(--seed-gy)),
			calc(100% - var(--seed-gx)) var(--seed-gy),
			var(--seed-gx) var(--seed-gy)
		);
	}
	/* Sections whose vertical padding is not --space-section: match the window to
	   it so the seed band lands only in their real padding. */
	.is-duotone.section::before,
	.hero--duo::before { --seed-gy: 0px; }
	.section--list-inline::before { --seed-gy: 1.25rem; }
}
/*
 * The solid bottom border along a section's bottom edge.
 *
 * It was .dashed-neon, and it was neon — one hardcoded colour for a thing that
 * now follows the section. The name went with the colour; .section__rule in
 * layout.css already places it, and this is the only thing that ever wore it.
 */
.section__rule {
	height: 6px;
	border: 0;
	/* A rule is a shape, not a word: the FILL token, not -ink. */
	background-color: var(--section-accent, var(--color-teal));
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 0.975rem;
	line-height: 1;
	padding: 0.9rem 1.5rem;
	min-height: 48px; /* comfortably over the 44px target-size minimum */
	border-radius: var(--radius-btn);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn-sm { padding: 0.6rem 1.05rem; min-height: 44px; font-size: 0.875rem; }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }

/*
 * The solid button — the section's accent as a fill.
 *
 * The accent is a FILL here, never text, and the label is --section-accent-on,
 * which is the one token measured against the fill rather than against the
 * page. That is the whole reason the label is not simply --color-ink: ink on
 * magenta is 3.27:1 and white on it is 5.08:1, so the label has to flip with
 * the colour. It is chosen for the editor, not by them.
 *
 * There was a .btn-magenta beside this that hardcoded the second colour. The
 * accent answers that now, on all five values instead of one.
 */
.btn-primary {
	background: var(--section-accent, var(--color-berry));
	/* The fill is one of the two pathway accents in an accented section; where no
	   section accent is set — the header CTA, the form submit, any un-themed
	   button — the fallback is BERRY, the brand's default button colour, under a
	   white label (7.87:1). --section-accent-on carries the label per section. */
	color: var(--section-accent-on, #fff);
	box-shadow: 0 8px 22px -6px color-mix(in oklch, var(--section-accent, var(--color-berry)) 50%, transparent);
}
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -8px color-mix(in oklch, var(--section-accent, var(--color-berry)) 60%, transparent);
}

/*
 * The outline button, on every ground, from one rule.
 *
 * There were four rules before: .btn-outline for light, .btn-ghost for dark,
 * and a ground-qualified override for each in case the wrong class reached the
 * wrong surface. All four existed to answer one question — is this ground light
 * or dark — which --section-accent-ink already answers by construction. So it
 * is one rule now, and ey_button_style() no longer has to guess a class from a
 * background it had to be handed separately.
 *
 * The border is the fix. It was --color-ink at 22%, which is 1.58:1 on white
 * and 1.57:1 on cream: SC 1.4.11 asks 3:1 of the visual boundary of a control,
 * and at that value the button had no visible boundary at all — the same defect
 * this file already records on the dark side, where the outline "reads as an
 * empty rectangle", and for the same reason it went unnoticed. axe has no rule
 * for the contrast of a border, so the gate cannot see either of them. Found by
 * being asked why the button looked wrong.
 *
 * 76% is the number that clears 3:1 for all five accents on all four grounds,
 * violet on cream being the tightest at 3.16:1. The label is the accent's own
 * -ink at full strength, 4.59:1 at worst, which is text and held to 4.5.
 *
 * A solid and an outline button side by side in the same accent still read as
 * primary and secondary. Fill against no fill is what carries that, not hue —
 * the dark bands have done it this way all along.
 */
.btn-outline,
.btn-ghost {
	background: transparent;
	color: var(--section-accent-ink, var(--color-berry-ink));
	border-color: color-mix(in oklch, var(--section-accent-ink, var(--color-berry-ink)) 76%, transparent);
}
.btn-outline:hover,
.btn-ghost:hover {
	/*
	 * The wash is a tint of the ACCENT, not of the ink.
	 *
	 * -ink is chosen for legibility, which on a light ground means dark and
	 * desaturated — orange-ink is #8F5100, and a tenth of that over white is a
	 * warm grey. The button read as disabled rather than as the section's
	 * colour. The pale face is what the accent actually looks like.
	 *
	 * The label goes to the surface's own ink for the duration. It has to: the
	 * two dark accents clear 4.5:1 on cream by 0.09 and 0.15 respectively, so
	 * ANY wash at all — measured down to 2% — puts magenta's label under the
	 * bar. --surface-ink is already "the readable text colour on this ground",
	 * ink on the light ones and paper on the dark, so one declaration covers all
	 * four without a rule per ground. Worst case across the twenty is then
	 * better than 10:1, and the accent is still doing the talking through the
	 * wash and the border.
	 */
	background: color-mix(in oklch, var(--section-accent-pale, var(--section-accent, var(--color-teal))) 12%, transparent);
	color: var(--surface-ink, var(--color-ink));
	border-color: var(--section-accent-ink, var(--color-teal-ink));
}

.btn:active { transform: translateY(0) scale(.985); }

/* ---- Inline text links — never browser-blue ----
   A hairline at 0.35em rather than a 2px line at 3px. At the old values the
   rule cut straight through the descenders of "p", "y" and "g" — "Empower
   YOUth" had three of them struck through — and read as a redaction rather
   than a link. from-font is avoided deliberately: Space Grotesk's own metrics
   put it back where it was. Same treatment as .event__link, which is where
   this was first measured. */
.link {
	color: var(--surface-link, var(--color-teal-ink));
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
	transition: color .14s ease;
}
/* Hover shifts the COLOUR, not the underline: the rest-state hairline underline
   stays put (it is the F73 cue that marks the link), and the colour move is the
   hover affordance instead of the line thickening. */
.link:hover { color: color-mix(in oklch, var(--surface-link), var(--link-hover-toward) var(--link-hover-amt)); }
/* An icon inside a link should not be underlined with the words — the line
   runs under the glyph and looks like a typo. */
.link .icon { text-decoration: none; }

/* ---- Eyebrow / kicker ---- */
/*
 * No rule beside it any more. The eyebrow carried a 26px dash of its own
 * colour; it is the label's job to be a label, and the uppercase display face
 * at 0.14em tracking already does that without a mark to announce it.
 *
 * inline-flex and the gap went with the dash — they were the box that sat the
 * rule beside the words, and on a wrapping eyebrow a flex box was also the
 * thing that stopped it wrapping like text.
 */
.kicker {
	display: block;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	/*
	 * The section's accent, falling back to the surface's own kicker colour for
	 * every kicker that is not inside a section — the header wordmark, chiefly.
	 * .card__kicker keeps its own rule in layout.css and is not affected: a card
	 * in a cycling run answers to the card, not to the section around it.
	 */
	color: var(--section-accent-ink, var(--surface-kicker, var(--color-teal-ink)));
}

/* ---- Cards ---- */
/*
 * No border by default.
 *
 * The fill and the drop shadow define the card on a light ground, and on a
 * dark one the glass gradient and the blur do it — the note below says so
 * itself. The 1px edge on top of that was a line nobody asked for, and on dark
 * surfaces it was a 22% neon tint that made "Outline each card" look like it
 * did nothing, because a card was already outlined.
 */
.card {
	background: var(--surface-card-bg);
	border-radius: var(--radius-card);
	box-shadow: 0 12px 34px -18px color-mix(in oklch, var(--color-ink) 22%, transparent);
}
/* On dark surfaces the card is glass: a drop shadow does nothing there, and the
   blur is what separates it from the background instead. */
.is-brown .card,
.is-dark .card,
.is-berry .card,
.is-teal .card {
	background: linear-gradient(160deg, oklch(100% 0 0 / 0.07), oklch(100% 0 0 / 0.02));
	border-radius: var(--radius-card-glass);
	backdrop-filter: blur(6px);
	box-shadow: none;
}
/* Concentric radius: inner radius = outer minus the padding, so the corners stay
   parallel instead of drifting apart. */
.card__inner { border-radius: calc(var(--radius-card) - 0.5rem); }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border-radius: 999px;
	background: var(--color-cream-200);
	color: var(--color-ink-soft);
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.32rem 0.75rem;
	line-height: 1.2;
}
.is-brown .badge,
.is-dark .badge,
.is-berry .badge,
.is-teal .badge { background: oklch(100% 0 0 / 0.08); color: var(--color-paper); }

/* Icons. currentColor is the whole point: an icon inherits whatever text colour
   the surface derived, so it can never be off-palette. Line icons stroke;
   doodles fill (see .icon--doodle). */
.icon {
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	vertical-align: -0.125em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}
.badge .icon { inline-size: 0.95em; block-size: 0.95em; }

/* A doodle is a FILLED hand-drawn shape, not a stroked line. The shared .icon
   rule sets fill:none for the line icons, so a doodle must switch it back to a
   fill and drop the stroke — otherwise it renders as nothing. ey_icon() adds
   this class when the source SVG has no stroke of its own. */
.icon--doodle {
	fill: currentColor;
	stroke: none;
}

/* A mark an editor asked for by typing an emoji — see ey_text(). It
   takes the section's accent, the token that is already contrast-measured on
   every surface, so the mark can never be the one off-palette thing on a band.
   1.15em because it sits inline at text size, matching .event__meta. */
.icon--mark {
	inline-size: 1.15em;
	block-size: 1.15em;
	color: var(--section-accent-ink, var(--color-teal-ink));
}

/* The same mark inside a heading.
 *
 * 1.15em is tuned for body text, where the icon sits between the x-height and
 * the cap and the hairline matches the text weight. A heading is bigger and
 * heavier, so the same ratio overshoots the caps and the stroke reads thin
 * against the letterforms. 0.9em lands on the cap height and 2.1 puts the
 * stroke at about the weight of a stem — measured against the heading, not
 * picked. */
:is(h1, h2, h3, h4, h5, h6) .icon--mark {
	inline-size: 0.9em;
	block-size: 0.9em;
	stroke-width: 2.1;
}

/*
 * A mark inside a control follows the control's OWN text colour, not the
 * section accent.
 *
 * In flowing text the mark is --section-accent-ink on purpose — a measured pop
 * of the section's colour beside the ink. A button or a link has already chosen
 * a text colour measured against its own ground, though: white
 * (--section-accent-on) on the solid accent fill, the accent-ink on an outline
 * button or a link. There, the accent-ink would override that choice and the
 * mark could vanish — an editor who typed 📢 into a solid button's label got a
 * dark megaphone on the teal fill. currentColor keeps the mark on the label, at
 * the same contrast the words already cleared.
 */
.btn .icon--mark,
.link .icon--mark {
	color: inherit;
}

/* ---- Forms ---- */
.field {
	width: 100%;
	border-radius: 0.7rem;
	border: 1.5px solid color-mix(in oklch, var(--color-ink) 16%, transparent);
	background: #fff;
	padding: 0.7rem 0.9rem;
	/* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
	font-size: 1rem;
	font-family: var(--font-sans);
	color: var(--color-ink);
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.field::placeholder { color: oklch(64.34% 0.0219 76.60); }
.field:focus {
	outline: none;
	border-color: var(--color-teal-ink);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-teal-ink) 15%, transparent);
}
.field:focus-visible { outline: 3px solid var(--surface-focus); outline-offset: 1px; }

/* Numeric alignment: dates and counts line up in a column rather than dancing. */
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   UTILITIES
   ============================================================ */

/* Scroll-reveal, gated on `.js` so it degrades to visible-by-default with
   JavaScript off. shot.mjs forces `.is-in` for screenshots. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
/*
 * Event cards slide in without the fade, and that is a contrast decision, not
 * a taste one.
 *
 * Fading a card composites its bar and the text on the bar toward the page
 * colour together, which walks a dark background and light text toward each
 * other. axe caught exactly that mid-fade and blocked the AA gate. It also
 * means the brightest brand colours — the pink that matches Become a
 * Supporter, in particular — cannot be used behind text on anything that
 * fades, because their settled margin is spent by the animation.
 *
 * So the cards keep the motion and lose the part of it that eats contrast.
 */
.js .events > .event.reveal { opacity: 1; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-2 { transition-delay: .08s; }
.js .reveal-3 { transition-delay: .16s; }
.js .reveal-4 { transition-delay: .24s; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.js .reveal { opacity: 1 !important; transform: none !important; }
}

/* The *asterisked* emphasis word in a heading — the brand's script accent.
   ONE word per headline, set in Lora italic and coloured with the section's own
   accent, defaulting to berry — the heart colour the style tile always gives it.
   Held to 4.5:1 like any other text (accent-ink is the text-safe value).

   It's the same family as the heading, so weight, size, tracking and line-height
   are inherited — the italic + berry colour carry the emphasis. */
.hl {
	font-family: var(--font-script);
	font-style: italic;
	/* The script word is the brand heart — berry on every surface. On white and
	   cream it is the base berry (#9F0259 · 7.48:1 on cream, higher on white), not
	   the deep berry-ink. On the brown bands it takes berry's on-dark lift so it
	   still reads. To pathway-colour it instead, use var(--section-accent-ink). */
	color: var(--color-berry);
}
.is-brown .hl,
.is-dark .hl,
.is-duotone .hl { color: var(--color-berry-lift); }
/* On a coloured band the script word takes its OWN accent's hue, not the duotone
   partner: light pink on the berry band, light teal on the teal band. Not the pale
   tint — that sits too close to the light paper text — but a saturated mid-light,
   pushed as dark as AA on the band allows so it reads as a colour against the text.
   Matched L/chroma; contrast measured on each band (large display text, ≥3:1):
   pink 4.79:1 on berry, teal 3.88:1 on the exact-teal band. */
.is-berry .hl { color: oklch(0.845 0.09 356.9); } /* light pink · #FBB4D2 */
.is-teal .hl { color: oklch(0.845 0.09 183.4); } /* light teal · #80DFDE */
/*
 * There is no highlighter band, unlike the L.A.B. OoHC's heading emphasis is
 * the script WORD above (.hl), not a marked run — so the light/dark-ground
 * split the band needed is gone, and .hl resolves the same on every surface.
 * The script face needs no leading correction: its line-height is pinned to 1.
 */