/* ==========================================================================
   EDFNL — Material 3 design system
   Brand-seeded M3 tokens (seed: primary #5E50A0 purple, accent #EED060 gold).
   Hand-authored to Material Design 3 spec: color roles, type scale, shape,
   elevation, state layers. Content-first & accessible — components are plain
   HTML/CSS (work without JS, crawlable, WCAG AA) with Material Symbols icons.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. Reset / base
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--md-sys-typescale-body-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
a { color: var(--md-sys-color-primary); text-underline-offset: 2px; }
button { font: inherit; color: inherit; }
/* 2026-10-28 any author display beats the hidden attribute, so a .btn set hidden
   by script stayed on screen with no label. one rule rather than a patch per
   component that happens to declare a display. */
[hidden] { display: none !important; }
:target { scroll-margin-top: 96px; }

/* ----------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------------- */
:root {
  /* ---- M3 color roles — LIGHT (2026 EDFNL brand: orchid · mauve · gold · orange · plum) ---- */
  --md-sys-color-primary: #6C3A83;              /* brand purple (no pink) */
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E9DDF8;    /* light lavender (purple, not pink) */
  --md-sys-color-on-primary-container: #260C4A;
  --md-sys-color-secondary: #695A97;            /* muted periwinkle-purple */
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E4E0F3;
  --md-sys-color-on-secondary-container: #1C1830;
  --md-sys-color-tertiary: #9A5A00;             /* accessible amber from the gold/orange */
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFDD82;   /* gold */
  --md-sys-color-on-tertiary-container: #2A1800;
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-surface: #FBFAFC;           /* clean off-white, barely cool (was warm taupe) */
  --md-sys-color-on-surface: #1B1B1F;
  --md-sys-color-surface-variant: #E3E1EA;
  --md-sys-color-on-surface-variant: #46464F;
  --md-sys-color-surface-dim: #DBD9E1;
  --md-sys-color-surface-bright: #FBFAFC;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F5F5F8;
  --md-sys-color-surface-container: #F0F0F4;
  --md-sys-color-surface-container-high: #EAEAEF;
  --md-sys-color-surface-container-highest: #E4E4EA;

  --md-sys-color-outline: #757680;
  --md-sys-color-outline-variant: #C6C5CF;
  --md-sys-color-inverse-surface: #301247;      /* deep purple (footer, no pink) */
  --md-sys-color-inverse-on-surface: #EFE6F5;
  --md-sys-color-inverse-primary: #D3C2F2;
  --md-sys-color-primary-light: #A996D8;        /* lavender, used in gradients */
  --edfnl-accent-orange: #F6981F;               /* brand orange, occasional accent */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* Crisis accent (the red "Need help" affordance) — accessible on white */
  --edfnl-crisis: #B3261E;
  --edfnl-on-crisis: #FFFFFF;
  --edfnl-crisis-container: #FFDAD5;
  --edfnl-on-crisis-container: #410001;

  /* ---- Typography ---- */
  --md-sys-typescale-brand-font: 'Public Sans', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-body-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Shape scale (M3) ---- */
  /* Shape scale — rounder for M3 Expressive */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-xs: 6px;
  --md-sys-shape-corner-sm: 12px;
  --md-sys-shape-corner-md: 18px;
  --md-sys-shape-corner-lg: 26px;
  --md-sys-shape-corner-xl: 36px;
  --md-sys-shape-corner-full: 999px;

  /* ---- Elevation (M3 tonal + shadow) ---- */
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30);

  /* ---- Motion ---- */
  --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(.34, 1.56, .64, 1);   /* expressive spring (overshoot) */
  /* 2026-10-18 panels that slide the full height of the screen must not
     overshoot: a whole bar springing past its mark reads as a glitch. */
  --md-sys-motion-easing-decelerate: cubic-bezier(.05, .7, .1, 1);
  --md-sys-motion-duration-short: 180ms;
  --md-sys-motion-duration-medium: 320ms;

  /* ---- Spacing ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 80px; --space-10: 112px;
  --max-w: 1200px;
}

/* ----------------------------------------------------------------------------
   2. Type scale (M3 roles mapped to brand fonts)
   ---------------------------------------------------------------------------- */
.display-large, .display-medium, .display-small,
.headline-large, .headline-medium, .headline-small,
h1 { font-weight: 700; }
h1, h2, h3 { font-family: var(--md-sys-typescale-brand-font); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--md-sys-color-on-surface); }

.display-large  { font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1.05; }
.display-medium { font-size: clamp(2.2rem, 5vw, 3rem); }
.display-small  { font-size: clamp(1.9rem, 4vw, 2.4rem); }
h1, .headline-large  { font-size: clamp(2rem, 4.4vw, 2.75rem); }
h2, .headline-medium { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
h3, .headline-small  { font-size: clamp(1.3rem, 2.4vw, 1.55rem); }

.title-large  { font-family: var(--md-sys-typescale-body-font); font-size: 1.375rem; font-weight: 600; line-height: 1.27; }
.title-medium { font-family: var(--md-sys-typescale-body-font); font-size: 1rem; font-weight: 600; letter-spacing: .009em; }
.title-small  { font-family: var(--md-sys-typescale-body-font); font-size: .875rem; font-weight: 600; letter-spacing: .006em; }

.body-large  { font-size: 1.125rem; line-height: 1.6; }
.body-medium { font-size: 1rem; line-height: 1.55; }
.body-small  { font-size: .875rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant); }

.label-large  { font-family: var(--md-sys-typescale-body-font); font-size: .875rem; font-weight: 600; letter-spacing: .006em; }
.label-medium { font-family: var(--md-sys-typescale-body-font); font-size: .75rem; font-weight: 600; letter-spacing: .04em; }

em { font-style: italic; }
/* Headings never use italic emphasis (subheadline <em> stays upright). */
:is(h1, h2, h3, .display-large, .display-medium, .display-small, .headline-large, .headline-medium, .headline-small) em { font-style: normal; }
/* Let the browser balance heading line breaks instead of hardcoded <br>. */
:is(h1, h2, h3, .display-large, .display-medium, .display-small, .headline-large, .headline-medium, .headline-small) {
  text-wrap: balance;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0, "hlig" 0;
}

/* ----------------------------------------------------------------------------
   3. Material Symbols
   ---------------------------------------------------------------------------- */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.material-symbols-rounded.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ----------------------------------------------------------------------------
   4. Layout
   ---------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-5); }
section { padding-block: var(--space-8); }
.surface-container { background: var(--md-sys-color-surface-container-low); }
.section-header { max-width: 60ch; margin-bottom: var(--space-6); }
.section-header p { color: var(--md-sys-color-on-surface-variant); font-size: 1.0625rem; margin-top: var(--space-3); }
.prose p + p { margin-top: var(--space-4); }
.prose p { color: var(--md-sys-color-on-surface-variant); font-size: 1.0625rem; line-height: 1.65; }

/* ----------------------------------------------------------------------------
   5. Accessibility helpers
   ---------------------------------------------------------------------------- */
.skip-link {
  position: fixed; top: -100px; left: var(--space-4); z-index: 1200;
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  padding: 12px 20px; border-radius: var(--md-sys-shape-corner-full);
  font-weight: 600; text-decoration: none; transition: top var(--md-sys-motion-duration-short);
}
.skip-link:focus-visible { top: var(--space-4); }
.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; }
/* 2026-10-28 the radius here forced 3px onto whatever took focus, so a pill
   button squared off the moment you tabbed to it. One ring, every control, and
   it follows the shape the control actually has. */
:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }

/* ----------------------------------------------------------------------------
   6. Buttons (M3: filled, tonal, outlined, text, extended FAB) — state layers
   ---------------------------------------------------------------------------- */
.btn {
  --_state: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 40px; padding: 10px 24px;
  font-family: var(--md-sys-typescale-body-font); font-size: .9375rem; font-weight: 600; letter-spacing: .01em;
  border: 0; border-radius: var(--md-sys-shape-corner-full); text-decoration: none; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short);
  isolation: isolate;
}
.btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--_state); opacity: 0; transition: opacity var(--md-sys-motion-duration-short); z-index: -1; }
@media (hover: hover) { .btn:hover::before { opacity: .08; } }
.btn:active::before { opacity: .12; }
.btn .material-symbols-rounded { font-size: 20px; }

.btn-filled   { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); --_state: #fff; }
/* 2026-10-28 outlined rather than tinted. the pale fill read at 1.2:1 on the
   page and took two near-identical lavenders to maintain; the outline needs
   neither and is unmistakably a control. */
.btn-tonal    { background: transparent; color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); --_state: var(--md-sys-color-primary); }
.btn-tertiary { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); --_state: var(--md-sys-color-on-tertiary-container); }
.btn-outlined { background: transparent; color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); --_state: var(--md-sys-color-primary); }
.btn-text     { background: transparent; color: var(--md-sys-color-primary); padding-inline: 12px; --_state: var(--md-sys-color-primary); }
/* 2026-10-28 two tiers only. standard carries most of the 96 buttons; large is
   the page's own ask. nothing else gets its own size. */
.btn-lg { min-height: 52px; padding: 14px 30px; font-size: 18px; }
.btn-block { width: 100%; }

/* 2026-10-28 card actions used to be their own bordered, square-cornered shape,
   which agreed with nothing else on the page and put two competing buttons in
   any card that also had a real ask in it. They are text buttons now: same
   component, quietest rank. */
.card > .btn { align-self: flex-start; margin-top: var(--space-2); }
/* a text button's own side padding hangs its label left of the column it opens,
   so pull it back by exactly that much wherever one starts a block */
.card > .btn-text, .card__panel > .btn-text, .prose p > .btn-text,
.detail-back > .btn-text, .golf-back > .btn-text, .container > p > .btn-text { margin-left: -12px; }

/* ----------------------------------------------------------------------------
   7. Top app bar / navigation
   ---------------------------------------------------------------------------- */
/* 2026-10-18 the frosting lives on a pseudo-element because backdrop-filter on
   the bar itself makes it the containing block for position:fixed children, and
   the crisis button now sits inside it. */
.top-app-bar { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.top-app-bar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); }
.nav-row { display: flex; align-items: center; gap: var(--space-4); max-width: var(--max-w); margin-inline: auto; padding: 14px var(--space-5); }
.nav-brand { flex-shrink: 0; display: inline-flex; align-items: center; text-decoration: none; border-radius: var(--md-sys-shape-corner-sm); }
/* 2026-10-28 the anniversary lockup is wider than the old mark, so at 104px
   the brand block alone ate 329px and clipped Contact off the nav. */
.nav-mark { height: 100px; width: auto; object-fit: contain; }
/* 2026-10-28 the nav lines up with the words of the mark, not the middle of its
   box. the leaf adds height on top, so the box centre sits up at the leaf while
   "disorders nl" sits about 16px lower, and that is the line scott wants. */
@media (min-width: 1000px) {
  .nav-main, .nav-utils { position: relative; top: 16px; }
}
.nav-main { flex: 1; min-width: 0; }
/* 2026-11-01 the whole row waits for the desktop breakpoint now. get help used
   to sit out here alone, which on a phone read as a stray menu bar under the
   header. the drawer carries it like every other link. */
.nav-links { display: flex; list-style: none; padding: 0; align-items: stretch; gap: 2px; }
.nav-links > .nav-item { display: none; }
.nav-item { position: relative; display: flex; }
.nav-link {
  display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; white-space: nowrap;
  background: transparent; border: 0; border-radius: var(--md-sys-shape-corner-full); cursor: pointer;
  font-family: 'Roboto Mono', ui-monospace, monospace; font-size: .95rem; font-weight: 600;
  letter-spacing: -.03em; text-transform: lowercase; color: var(--md-sys-color-on-surface);
  text-decoration: none; transition: background-color var(--md-sys-motion-duration-short);
}
.nav-link:hover { background: var(--md-sys-color-surface-container-high); }
.nav-link-btn .material-symbols-rounded { font-size: 20px; transition: transform var(--md-sys-motion-duration-short); }
.nav-item:hover .nav-link-btn .material-symbols-rounded .material-symbols-rounded { transform: rotate(180deg); }

/* Mega dropdown */
/* 2026-10-28 the panel was a big soft card hanging off a tight monospace nav,
so
   the two did not look like the same website. squarer,
lighter{
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 120;
  min-width: 520px; display: none; grid-auto-flow: column; gap: var(--space-5);
  padding: var(--space-4);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 15, 19, .10);
}
/* the click handler has always set aria-expanded, but nothing listened to it,
   so the menu never opened on a touch screen. it does now. */
/* 2026-11-01 clicking the trigger a second time set aria-expanded to false, but
   the click leaves focus on the button, so :focus-within held the menu open and
   it could only ever be opened. An explicit collapse has to beat focus. */

/* the column heading is a signpost,
not a thing to read: same face as the nav
   it drops out of{ font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant); margin-bottom: var(--space-2); padding-inline: 8px; }






/* 2026-10-28 stop single words dropping onto a line of their own inside a box.
   balance evens short headings instead of leaving one word stranded; pretty keeps
   a paragraph from orphaning its last word. both fall back to normal wrapping. */
.card h3,
.detail-facts__title,
.card__spine-label{ text-wrap: balance; }
.card p,
.hero-lede,
.card__panel p{ text-wrap: pretty; }

.nav-utils { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
/* 2026-10-28 the language toggle borrows Donate's shape and face but none of its
   colour. it is a utility control, not an ask, and the gold made it compete. */
.nav-lang {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 40px; padding: 10px 24px;
  font-family: var(--md-sys-typescale-body-font); font-size: .9375rem;
  font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  background: #fff; color: #000; text-decoration: none;
  transition: background-color var(--md-sys-motion-duration-short);
}
.nav-lang:hover { background: var(--md-sys-color-surface-container-high); }
.nav-lang:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .nav-lang { transition: none; }
  .nav-lang:active { transform: none; }
}

/* Hamburger */
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: transparent; border-radius: var(--md-sys-shape-corner-full); cursor: pointer; }
.nav-toggle:hover { background: var(--md-sys-color-surface-container-high); }
.nav-toggle .material-symbols-rounded { font-size: 28px; }

/* Mobile drawer */
.nav-drawer { position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); transform: translateX(100%); transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-decelerate); background: var(--md-sys-color-surface-container-low); z-index: 300; padding: var(--space-6) var(--space-5); overflow-y: auto; box-shadow: var(--md-sys-elevation-3); }
.nav-drawer.open { transform: translateX(0); }
.nav-drawer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* 2026-11-01 the drawer is the same navigation as the horizontal bar, so it
   reads in the same voice: the mono face, lowercase, tightened. */
.nav-drawer a:not(.btn) {
  display: block; padding: 14px 16px;
  border-radius: var(--md-sys-shape-corner-full); text-decoration: none;
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -.03em; text-transform: lowercase;
  color: var(--md-sys-color-on-surface);
}
@media (hover: hover) {
  .nav-drawer a:hover { background: var(--md-sys-color-surface-container-high); }
}
.nav-drawer__donate { margin-top: var(--space-4); }
/* 2026-11-01 these fade on the background's own alpha rather than on element
   opacity. opacity blends a backdrop-filter back toward the unfiltered backdrop
   by the same fraction, so a scrim at .4 was only ever showing 40% of its blur,
   which read as none at all. */
.scrim {
  position: fixed; inset: 0; z-index: 290;
  background: transparent; visibility: hidden;
  transition: background-color var(--md-sys-motion-duration-medium), visibility 0s linear var(--md-sys-motion-duration-medium);
}
.scrim.open {
  visibility: visible;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent);
  transition: background-color var(--md-sys-motion-duration-medium), visibility 0s;
}

/* 2026-10-28 the desktop nav needs 1121px for the French labels, which are
   longer than the English ones, plus the brand and the buttons. The row caps
   at 1200px, so anything under about 1170 overflowed into the Donate button.
   The hamburger now covers right up to where the full nav genuinely fits. */
@media (min-width: 1200px) {
  .nav-links > .nav-item { display: flex; }
  .nav-toggle { display: none; }
  .nav-utils { padding-left: var(--space-4); }
}
/* Below the 1200px cap the header shrinks with the viewport, so the longer French
   labels get even tighter — step the nav down further so it never runs under Donate. */
/* 2026-10-28 the French labels are the constraint, not the English ones:
   seven of them run 820px at the default size, against a 1200px row that also
   carries the logo and the buttons. Tighten from the breakpoint up. */
@media (min-width: 1200px) {
  /* 2026-10-28 min-width:0 on .nav-main let the box shrink under its own
     contents while overflow stayed visible, so the links silently rendered
     on top of the Donate button. Hold the box at its content width. */
  .nav-main { min-width: max-content; }
  .nav-row { gap: var(--space-2); }
  .nav-link { padding: 0 9px; font-size: .9rem; }
  .nav-links { gap: 2px; margin-left: var(--space-1); padding-left: var(--space-2); }
}

/* ----------------------------------------------------------------------------
   8. Hero
   ---------------------------------------------------------------------------- */
.hero { padding-block: var(--space-8) var(--space-8); }
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; }
.hero-lede { font-size: 1.1875rem; line-height: 1.6; color: var(--md-sys-color-on-surface-variant); margin-top: var(--space-4); max-width: 52ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* 2026-10-18 headline over the photograph. the scrim is heavy at the left and
   has cleared by the right edge, so the copy holds 12:1 or better whatever
   image sits behind it, and swapping the photo cannot quietly break contrast.   band sits a little shorter than the photo's own 16:9 and the crop is biased
   down the frame, so what gets taken is the empty wall above the pair rather
   than the bench underneath them. */
.hero--overlay {
  position: relative; display: flex; align-items: center; overflow: hidden;  padding-block: 0; min-height: clamp(420px, 36vw, 540px);
}
.hero--overlay .hero__photos { position: absolute; inset: 0; z-index: 0; }
.hero--overlay .hero__photo {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hero-focus-wide, center 32%);
  animation: hero-drift 26s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.4%, -1%, 0); }
}
/* 2026-10-28 a picture changing under you is motion like any other, so a reader
   who asked for less keeps the first frame and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .hero--overlay .hero__photo { transition: none; animation: none; transform: scale(1.06); }
}
.hero--overlay::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* 2026-10-28 this was brand purple, which is what made the hero read as a
     purple wash rather than a photograph. Neutral charcoal reads as shadow
     and lets the frame keep its own colour. */
  background: linear-gradient(90deg, rgba(16,15,19,.72) 0%, rgba(16,15,19,.62) 40%, rgba(16,15,19,.14) 54%, rgba(16,15,19,0) 72%);
}
/* 2026-10-28 the minimal scrim only carries white text over a quiet frame.
   Measured behind the copy: two-talking 7.0:1, walk 4.1, hands 3.25, circle
   3.18. So the base stays minimal and each frame tops it up by as much as it
   actually needs, rather than darkening the good one to rescue the others. */
.hero--overlay::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(16,15,19,1) 0%, rgba(16,15,19,.92) 40%, rgba(16,15,19,.30) 58%, transparent 76%);
  opacity: var(--scrim-boost, 0);
  transition: opacity 1.4s ease;
}
@media (prefers-reduced-motion: reduce) { .hero--overlay::after { transition: none; } }
.hero--overlay > .container { position: relative; z-index: 2; }
.hero--overlay .hero-copy { max-width: min(46%, 560px); }
.hero--overlay h1 { color: #fff; }
.hero--overlay .hero-lede { color: rgba(255,255,255,.92); }
/* a purple button on a purple scrim sits at 1.8:1 against what surrounds it,
   under the 3:1 WCAG 1.4.11 asks of a control's edge. */
/* 2026-10-28 the two hero CTAs, designed in the lab. both sit on a photograph, so
   the ask is solid white and the second route is a hairline; on hover both fill
   with the same plum, which is what makes them read as one pair. */
.hero--overlay .btn-filled,
.hero--overlay .btn-tonal { --_state: transparent; }
.hero--overlay .btn-filled { background: #fff; color: #000; border: 1px solid #ccc; }
.hero--overlay .btn-tonal {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.72); box-shadow: none;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
/* 2026-10-28 nothing fills or moves on hover. the solid one deepens its ink to
   the brand plum, the hairline one firms its edge to solid white behind a wash
   you can barely see. a pair that answers without either of them shouting. */
.hero--overlay .btn-filled:hover { background: #fff; color: var(--md-sys-color-primary); }
.hero--overlay .btn-tonal:hover { background: rgba(255,255,255,.10); border-color: #fff; }
/* white, because this ring is only ever drawn over the darkened photograph */
.hero--overlay .btn-filled:focus-visible,
.hero--overlay .btn-tonal:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 2026-11-01 Phone hero: the photograph is the hero and the words sit on it.
   The words go to the top and the two routes in stay on the bottom edge where
   the thumb is, so the middle of the frame is left to the photograph.
   The top is a blurred band rather than a coloured one: a purple wash heavy
   enough to carry text put a tinge over the whole picture, where defocusing it
   takes the detail out from under the words and leaves the colour alone. The
   veil that rides with it is neutral, not brand purple, for the same reason. */
@media (max-width: 899px) {
  .hero--overlay {
    display: flex; align-items: stretch;
    min-height: clamp(460px, 68vh, 600px);
    padding-block: 0;
  }
  .hero--overlay .hero__photos { position: absolute; inset: 0; z-index: 0; }
  .hero--overlay .hero__photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto; object-fit: cover;
    object-position: var(--hero-focus-phone, 50% 50%);
    /* 2026-11-01 the slow drift is a wide-banner idea; on a phone it is just
       12% more zoom on an already tight frame, and battery for nothing. */
    animation: none; transform: none;
  }
  /* 2026-11-01 the gradient carries the contrast and the blur only softens what
     is under it. backdrop-filter and mask together are fragile, and the hero
     picks a different photograph every visit, so the one thing that has to work
     on every frame in every browser cannot be the fragile one. */
  .hero--overlay::before {
    content: ''; position: absolute; inset: 0; z-index: 1; display: block;
    background:
      linear-gradient(to bottom,
        rgba(26, 22, 34, .55) 0%,
        rgba(26, 22, 34, .51) 42%,
        rgba(26, 22, 34, .17) 53%,
        rgba(26, 22, 34, 0) 58%),
      linear-gradient(to top,
        rgba(26, 22, 34, .66) 0%,
        rgba(26, 22, 34, .34) 16%,
        rgba(26, 22, 34, 0) 38%);
  }
  .hero--overlay > .container {
    flex: 1; display: flex; flex-direction: column;
    padding-block: var(--space-7);
  }
  /* the copy's three children become the column's own items, so the heading and
     the lede sit at the top and the buttons can be pushed to the floor */
  .hero--overlay .hero-copy { display: contents; }
  .hero--overlay h1 {
    margin: 0 0 var(--space-3);
    font-size: clamp(2.4rem, 11vw, 3rem); line-height: 1.04;
    color: #fff;
  }
  .hero--overlay .hero-lede {
    margin: 0; max-width: none;
    color: rgba(255, 255, 255, .94); font-size: .95rem; line-height: 1.5;
  }
  /* 2026-11-02 with the scrim this light the paragraph crosses whatever the
     photograph has behind it, and a window puts white on white. the shadow
     holds the letterforms without darkening the frame the way a heavier scrim
     would. measured worst case behind it: 2.6:1 on the gradient alone. */
  .hero--overlay h1,
  .hero--overlay .hero-lede {
    text-shadow: 0 1px 2px rgba(10, 8, 14, .78), 0 2px 14px rgba(10, 8, 14, .62);
  }
  /* 2026-10-28 both routes in matter the same, so on a phone they get the same
     width rather than sizing to whichever label happens to be longer. */
  .hero--overlay .hero-ctas {
    margin: auto 0 0; padding: 0;
    flex-direction: column; align-items: stretch; gap: var(--space-3);
  }
  .hero--overlay .hero-ctas .btn { width: 100%; }
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

/* ----------------------------------------------------------------------------
   9. Cards (M3 filled / outlined)
   ---------------------------------------------------------------------------- */
.cards { display: grid; gap: var(--space-5); }
.cards-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.cards-2 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards-2 { grid-template-columns: repeat(2, 1fr); } }
.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-lg);
  transition: background-color var(--md-sys-motion-duration-short), border-color var(--md-sys-motion-duration-short), transform var(--md-sys-motion-duration-short);
  /* 2026-10-25 the whole program card is the link now, so a dozen identical
     "Learn more" links stopped being the only thing a screen reader hears. */
  color: inherit; text-decoration: none;
}
/* 2026-10-28 only a card that genuinely goes somewhere reacts to the pointer.
   Two thirds of them are plain boxes whose CTA is the thing that clicks, and
   lifting those was promising a link that was never there.
   2026-10-28 and it reacts by changing colour, not by casting a shadow: one
   hover for every clickable box on the site, cards, downloads and tiers. */
a.card:hover, .event-cards .card:hover, a.download-card:hover, .tier:hover {
  background: var(--md-sys-color-surface-container-low);
  border-color: var(--md-sys-color-primary);
}
/* 2026-10-28 the whole card is the target without nesting a button inside a link:
   the card's own action stretches an invisible layer over it, so the markup stays
   valid and the accordion on phones still works. the visible link stays, because
   on a downloads card "(PDF)" is worth reading before you commit to a click. */
.card:has(> .btn-text, > .link-more) { cursor: pointer; }
.card > .btn-text,
.card > .link-more { position: static; }
.card > .btn-text::before { display: none; }
.card > .btn-text::after,
.card > .link-more::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:has(> .btn-text, > .link-more):hover {
  background: var(--md-sys-color-surface-container-low);
  border-color: var(--md-sys-color-primary);
  transform: translateY(-2px);
}
.card:has(> .btn-text, > .link-more):hover .btn-text { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .card:has(> .btn-text, > .link-more):hover { transform: none; }
}

/* 2026-10-28 the decorative marks are gone site wide. they were category badges
   sitting above a heading that already says the category, and the house rule puts
   icons on functional widgets only. the working ones stay: chevrons, closes,
   form controls and anything in the crisis sheet. */
.card-icon { display: none; }
.card h3 { font-size: 1.3rem; }
.card p { color: var(--md-sys-color-on-surface-variant); line-height: 1.6; flex: 1; }

/* ---- Stats ---- */
.stats { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { text-align: center; }
.stat-number { display: block; font-family: var(--md-sys-typescale-brand-font); font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 600; color: var(--md-sys-color-primary); line-height: 1; }
.stat-label { display: block; margin-top: var(--space-3); color: var(--md-sys-color-on-surface-variant); font-size: .975rem; }

/* 2026-11-01 three ways in, as three doors (src/_includes/ways-in.njk): a
   photograph each with the words over its lower half. the gradient is the brand
   purple rather than near black, and stops well short of opaque, because the
   point is that you can still see the room. */
.doors { display: grid; gap: var(--space-4); }
.door {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end; min-height: 540px;
  border-radius: var(--md-sys-shape-corner-lg); overflow: hidden;
  color: #fff; text-decoration: none;
}
.door__photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--door-focus, center);
}
/* held high enough that the first line of the blurb still has something behind
   it on a pale photograph, then let go quickly so the top half stays a picture */
.door::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(43, 30, 79, .84) 0%,
    rgba(43, 30, 79, .76) 40%,
    rgba(43, 30, 79, .30) 68%,
    rgba(43, 30, 79, 0) 94%);
}
.door__text { display: block; padding: var(--space-6); }
.door__title { color: #fff; font-size: 1.75rem; margin: 0; }
.door__blurb { display: block; margin-top: var(--space-3); color: rgba(255, 255, 255, .93); line-height: 1.55; }
.door__cta {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: var(--space-5); padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .72); border-radius: var(--md-sys-shape-corner-full);
  font-weight: 600;
}
.door:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 3px; }
@media (hover: hover) {
  .door:hover .door__photo { transform: scale(1.04); }
  .door:hover .door__cta { background: rgba(255, 255, 255, .14); border-color: #fff; }
}
@media (prefers-reduced-motion: no-preference) {
  .door__photo { transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); }
}
@media (min-width: 900px) { .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 2026-11-01 stacked rather than a side-scroller on a phone. these are the
   homepage's three routes in and a carousel hides two of them behind a gesture
   nothing on screen advertises. shorter cards so three still fit the thumb. */
@media (max-width: 899px) {
  /* 2026-11-02 taller, and the scrim lets go sooner. On a short card the text
     block is most of its height, so a gradient tuned for the desktop card
     covered nearly the whole photograph. */
  .door { min-height: 440px; }
  .door__title { font-size: 1.5rem; }
  .door::after {
    background: linear-gradient(to top,
      rgba(43, 30, 79, .84) 0%,
      rgba(43, 30, 79, .76) 40%,
      rgba(43, 30, 79, .24) 62%,
      rgba(43, 30, 79, 0) 78%);
  }
}

/* 2026-10-28 mission and reach in one section, with the province in a column of its
   own beside them. it is a mask rather than an image so it takes the brand colour. */
.province { position: relative; overflow: clip; isolation: isolate; }
.province__grid { display: grid; gap: var(--space-6); }
.province__map {
  z-index: -1; pointer-events: none;
  aspect-ratio: 800 / 988;
  background: var(--md-sys-color-primary);
  -webkit-mask: url('/images/nl-map.webp') center / contain no-repeat;
          mask: url('/images/nl-map.webp') center / contain no-repeat;
  transition: background-color 2s ease-in-out;
}
/* js/province-map.js holds it at a faint tint until it first comes into view, then
   lets it deepen to the brand purple. with no script, or for a reader who asked for
   less motion, it is never held and simply sits purple. no transition into the
   hold, so the hold itself never shows. */
.province__map.is-waiting {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, var(--md-sys-color-surface));
  transition: none;
}
.province__body > h2 { margin-bottom: var(--space-5); }
.province__reach { margin: var(--space-8) 0 var(--space-5); }

/* frosted glass on the paragraphs and the numbers, so the map reads through as
   soft colour on its way past instead of fighting the words. a light blur only,
   18px smeared the coastline into white blobs. */
.province__body > .prose,
.province__stats .stat {
  border-radius: var(--md-sys-shape-corner-lg);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.province__body > .prose { padding: var(--space-5) var(--space-6) var(--space-4); }
.province__stats { gap: var(--space-4); }
.province__stats .stat { text-align: left; padding: var(--space-5) var(--space-5) var(--space-6); }
.province__stats .stat-label { text-wrap: pretty; }
/* 2026-10-28 the bright brand orange, scott's pick. it is 2.2:1 on the cards, under
   the 3:1 large text wants, so the label under each number has to say it in words */
.province__stats .stat-number { color: var(--edfnl-accent-orange); }

/* the photograph is a phone-only thing: on a wide screen the map has its own
   column and the section does not need a second picture. */
.province__photo { display: none; }
/* 2026-11-01 on a phone the section runs wall to wall and the copy panel bites
   up into it, the same move as the page headers. The map is desktop-only: with a
   photograph at the top of the section it was a second picture competing with the
   first, and scott called it either way. */
@media (max-width: 899px) {
  .province { padding-top: 0; }
  .province__photo {
    display: block; width: 100%;
    height: clamp(220px, 30vh, 290px);
    object-fit: cover;
    object-position: var(--province-focus-phone, center);
  }
  .province__grid {
    position: relative; z-index: 1;
    margin-top: -34px;
    padding-top: var(--space-7);
    background: var(--md-sys-color-surface);
    border-radius: 26px 26px 0 0;
  }
  .province__map { display: none; }
  /* the glass had a map to read through; on a solid panel it is just a smudge */
  .province__body > .prose,
  .province__stats .stat {
    background: var(--md-sys-color-surface-container-lowest);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}
/* on a wide screen the map also takes the page margin to its left, so it is as big
   as the room allows and still never gets cut off */
@media (min-width: 900px) {
  .province__grid { grid-template-columns: .75fr 1.25fr; gap: var(--space-8); align-items: center; }
  .province__body { grid-column: 2; }
  .province__map {
    --map-bleed: clamp(0px, (100vw - var(--max-w)) / 2, 160px);
    grid-column: 1; grid-row: 1;
    width: calc(100% + var(--map-bleed)); margin-left: calc(-1 * var(--map-bleed));
  }
}

/* ---- CTA band ---- */
.cta-band { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: var(--md-sys-shape-corner-xl); padding: var(--space-8) var(--space-7); text-align: center; }
.cta-band h2 { color: var(--md-sys-color-on-primary); }
.cta-band p { color: color-mix(in srgb, var(--md-sys-color-on-primary) 88%, transparent); max-width: 52ch; margin: var(--space-4) auto var(--space-6); font-size: 1.0625rem; }

/* ----------------------------------------------------------------------------
   10. Footer
   ---------------------------------------------------------------------------- */
.site-footer { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); padding-block: var(--space-8) var(--space-6); margin-top: var(--space-9); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; padding-bottom: var(--space-7); border-bottom: 1px solid rgba(255,255,255,.15); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-7); } }
/* 2026-10-28 between tablet and laptop the first of four columns is narrower than the
   wordmark, so it broke onto two lines. it takes its own row there instead. */
@media (min-width: 760px) and (max-width: 959px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
/* Footer logo matches the header logo. The art has dark text and the footer is
   dark, so seat it on a light chip to keep it crisp and legible (WCAG). */
.footer-logo { height: 52px; width: auto; margin-bottom: var(--space-4); background: #fff; padding: 10px 16px; border-radius: var(--md-sys-shape-corner-md); box-sizing: content-box; }
/* Footer text wordmark (in place of the logo image) */
.footer-wordmark { display: block; margin-bottom: var(--space-4); line-height: 1.05; }
.footer-wordmark__name { display: block; font-family: var(--md-sys-typescale-brand-font); font-size: 1.8rem; font-weight: 600; letter-spacing: -.01em; color: var(--md-sys-color-inverse-on-surface); }
.footer-wordmark__prov { display: block; margin-top: 6px; font-family: var(--md-sys-typescale-body-font); font-size: .78rem; font-weight: 700; letter-spacing: .1175em; text-transform: uppercase; color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 72%, transparent); }
/* 2026-10-28 the province line runs exactly as wide as the name above it, which means
   different tracking per language. measured against the loaded fonts, so if either
   font or the name's size changes these need measuring again. */
.footer-wordmark__prov:lang(fr) { letter-spacing: .143em; }
.footer-brand p { color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 80%, transparent); font-size: .95rem; margin-top: var(--space-2); max-width: 34ch; }
/* 2026-10-28 footer columns collapse on a phone. They ship open so the markup
   still reads as three plain lists without JS, and the summary is inert above
   the breakpoint where the grid lays them out side by side. */
.footer-col > summary { list-style: none; cursor: default; }
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col > summary::marker { content: ""; }
@media (max-width: 759px) {
  .footer-col { border-top: 1px solid rgba(255,255,255,.16); }
  .footer-col > summary {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    padding: 15px 0; gap: var(--space-4);
  }
  .footer-col > summary h4 { margin: 0; }
  .footer-col > summary::after {
    content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--md-sys-motion-duration-short);
  }
  .footer-col[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  @media (prefers-reduced-motion: reduce) {
    .footer-col > summary::after { transition: none; }
  }
  .footer-col > ul, .footer-col > .footer-contact-item:last-of-type { padding-bottom: var(--space-5); }
}
.footer-col h4 { font-family: var(--md-sys-typescale-body-font); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 70%, transparent); margin-bottom: var(--space-3); }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--md-sys-color-inverse-on-surface); text-decoration: none; font-size: .95rem; }
.footer-col a:hover { text-decoration: underline; }
.footer-contact-item { margin-bottom: var(--space-3); font-size: .95rem; color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 85%, transparent); }
.footer-contact-item strong { display: block; color: var(--md-sys-color-inverse-on-surface); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.footer-contact-item a { color: var(--md-sys-color-inverse-on-surface); }
/* Media & downloads page — brochures, reports, brand kit */
.download-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 680px) { .download-grid { grid-template-columns: repeat(2, 1fr); } }
.download-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-lg); color: var(--md-sys-color-on-surface); text-decoration: none; transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); }
.download-card__icon { font-size: 34px; flex: none; color: var(--md-sys-color-primary); }
.download-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.download-card__name { font-family: var(--md-sys-typescale-title-font, var(--md-sys-typescale-body-font)); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.download-card__meta { font-size: .82rem; letter-spacing: .04em; color: var(--md-sys-color-on-surface-variant); text-transform: uppercase; }
.download-card__dl { font-size: 22px; flex: none; color: var(--md-sys-color-on-surface-variant); }
.media-group { margin-bottom: var(--space-8); }
.media-group:last-child { margin-bottom: 0; }
.media-group__title { font-size: 1.5rem; margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.media-year { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); margin: var(--space-5) 0 var(--space-3); }
.media-year:first-of-type { margin-top: 0; }
/* 2026-10-28 corner-large is not a token in this scale, so these three boxes
   were quietly square while every other card was rounded. */
.media-empty { margin: 0; color: var(--md-sys-color-on-surface-variant); padding: var(--space-5); border: 1px dashed var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-lg); }

/* Event date pill (beside the event chip on cards) */
.event-date { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.event-date .material-symbols-rounded { font-size: 17px; }

/* Golf tournament page */
.golf-presenter { margin-top: var(--space-3); font-size: 1rem; color: var(--md-sys-color-on-surface-variant); }
.golf-presenter strong { color: var(--md-sys-color-on-surface); }
.golf-facts-section { padding-block: var(--space-6); }
.golf-facts { list-style: none; margin: 0; padding: 0; max-width: 620px; display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }
.golf-facts li { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.golf-facts li:last-child { border-bottom: none; padding-bottom: 0; }
.golf-facts strong { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--md-sys-color-primary); }
.golf-facts li > span { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--md-sys-color-on-surface); }
.golf-facts li > span a { color: var(--md-sys-color-primary); }
.golf-facts__cta { flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-4); }

/* Event pages: left-align the call-to-action band */
.ev .cta-band { text-align: left; }
.ev .cta-band p { margin-left: 0; margin-right: 0; }

/* Volunteer / action buttons in the hero */
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); margin-bottom: 0; }

/* Intake modal payment / info note */
.intake-modal__note { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--md-sys-shape-corner-sm); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: .875rem; }
.intake-modal__note[hidden] { display: none; }

/* Data tables (schedules, price lists) */
.table-wrap { overflow-x: auto; margin: var(--space-5) 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.data-table th, .data-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--md-sys-color-outline-variant); vertical-align: top; }
    .data-table th:first-child, .data-table td:first-child { padding-left: 0; }
    .data-table th:last-child, .data-table td:last-child { padding-right: 0; text-align: right; }
.data-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--md-sys-color-primary); font-weight: 700; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td.price { font-weight: 600; white-space: nowrap; }
.data-table__note { display: block; margin-top: 2px; font-size: .875rem; font-weight: 400; color: var(--md-sys-color-on-surface-variant); }
.data-table tr.row-featured td { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* Fine-print disclaimers — always give them room to breathe */
.disclaimer { margin-top: var(--space-6); font-size: .9375rem; color: var(--md-sys-color-on-surface-variant); }

/* Donate drawer — desktop side panel with the CanadaHelps form */
.donate-scrim {
  position: fixed; inset: 0; z-index: 1290;
  background: transparent; visibility: hidden;
  transition: background-color var(--md-sys-motion-duration-medium), visibility 0s linear var(--md-sys-motion-duration-medium);
}
.donate-scrim.open {
  visibility: visible;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 50%, transparent);
  transition: background-color var(--md-sys-motion-duration-medium), visibility 0s;
}
.donate-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(94vw, 480px);
  transform: translateX(100%); transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-decelerate);
  background: var(--md-sys-color-surface); z-index: 1300; display: flex; flex-direction: column; box-shadow: var(--md-sys-elevation-4);
}
.donate-drawer.open { transform: translateX(0); }
.donate-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--md-sys-color-outline-variant); flex-shrink: 0; }
.donate-drawer__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--md-sys-color-primary); margin-bottom: 2px; }
.donate-drawer__title { font-size: 1.375rem; }
.donate-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-6); }

/* Clickable event cards (stretched-link pattern) */
.event-cards .card { position: relative; }
/* the card's own button stretches to cover the whole box, which is what earns
   these the hover lift. Unpositioned so the overlay measures the card, which
   also means the button's state layer would wash the card — drop it. */
.event-cards .card .btn { position: static; }
.event-cards .card .btn::before { display: none; }
.event-cards .card .btn::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Sponsorship: one section, tiers + opportunities as sub-sections */
#play, #sponsor { scroll-margin-top: 84px; }
.spon-subsection { margin-top: var(--space-8); }
.spon-subhead { margin-bottom: var(--space-5); }
.spon-subhead h3 { font-size: 1.375rem; margin-bottom: var(--space-2); }
.spon-subhead p { color: var(--md-sys-color-on-surface-variant); max-width: 65ch; }

.spon-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .spon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .spon-grid { grid-template-columns: repeat(3, 1fr); } }
.spon-card { display: flex; flex-direction: column; padding: var(--space-5); background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-lg); }
.spon-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-3); }
.spon-card__price { font-family: var(--md-sys-typescale-title-font, var(--md-sys-typescale-body-font)); font-weight: 700; font-size: 1.25rem; color: var(--md-sys-color-on-surface); }
.spon-card__name { font-size: 1.1rem; margin: 0 0 var(--space-2); }
.spon-card__limited { margin: 0 0 var(--space-2); font-size: .82rem; font-weight: 600; color: var(--edfnl-accent-orange, var(--md-sys-color-tertiary)); }
.spon-card__benefits { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.spon-card__benefits li { position: relative; padding-left: 22px; font-size: .92rem; line-height: 1.4; color: var(--md-sys-color-on-surface-variant); }
.spon-card__benefits li::before { content: "check"; font-family: 'Material Symbols Rounded'; position: absolute; left: 0; top: 1px; font-size: 16px; color: var(--md-sys-color-primary); }
.spon-card__cta { align-self: flex-start; margin-top: auto; }

/* Status tags — Tina toggles available/sold per package */
.status-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--md-sys-shape-corner-full); }
.status-tag .material-symbols-rounded { font-size: 16px; }
.status-tag--available { background: #E1F3E7; color: #1B5E33; }
.status-tag--sold { background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); color: var(--md-sys-color-on-surface-variant); }
.spon-card--sold { opacity: .72; }
.spon-card--sold .spon-card__name { color: var(--md-sys-color-on-surface-variant); }

.golf-book-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.golf-back { margin-top: var(--space-5); margin-bottom: 0; }
.footer-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding-top: var(--space-5); font-size: .875rem; color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 70%, transparent); }
.footer-socials a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-inverse-on-surface); }
.footer-socials a:hover { background: rgba(255,255,255,.12); }

/* ----------------------------------------------------------------------------
   11. Crisis help — FAB tab + side sheet (M3)
   ---------------------------------------------------------------------------- */
/* 2026-10-18 a round red phone button in the header. The label stays in the DOM
   as the accessible name only; a crisis affordance reads faster as one shape
   than as a word, and it buys the wordmark its space back. */
/* 2026-10-28 a narrow tab fixed to the left wall rather than a disc in a corner.
   It reads as something permanently attached to the page, never covers content,
   and keeps the whole left edge as its target. */
.help-tab {
  /* 2026-10-28 on a phone the copy fills the middle of the hero, so the tab rides
     higher where it only ever sits on the photograph. Centred from the laptop up,
     where the content column has margins of its own. */
  position: fixed; left: 0; top: 26%; transform: translateY(-50%); z-index: 350;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 44px; height: 76px; padding: 0;
  border: 0;
  border-radius: 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md) 0;
  background: var(--edfnl-crisis); color: #fff;
  cursor: pointer;
  box-shadow: 2px 0 12px rgba(0,0,0,.20);
  transition: background-color var(--md-sys-motion-duration-short), width var(--md-sys-motion-duration-short);
}
.help-tab:hover { background: color-mix(in srgb, var(--edfnl-crisis) 88%, #000); width: 50px; }
/* the one ring that is not brand purple: purple on this red button sits well
   under 3:1, so it rides the red out onto the surface behind it instead. */
.help-tab:focus-visible { outline: 3px solid var(--edfnl-crisis); outline-offset: 3px; }
.help-tab__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.help-tab__svg { display: block; width: 24px; height: 24px; }
.help-tab .material-symbols-rounded { font-size: 32px; }

@media (min-width: 1000px) {
  .help-tab { top: 50%; width: 48px; height: 88px; }
  .help-tab:hover { width: 56px; }
  .help-tab__svg { width: 26px; height: 26px; }
  .help-tab__label { display: none; }
}

.media { border-radius: var(--md-sys-shape-corner-lg); overflow: hidden; box-shadow: var(--md-sys-elevation-1); }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 2026-10-28 these sit inside the content column, so 16/9 at full width was a
   644px slab that pushed the actual page under the fold. Cap the height and let
   object-fit crop; the aspect only governs the narrow end now. */
.media--tall { aspect-ratio: 4/5; max-height: 460px; }
.media--wide { aspect-ratio: 16/9; max-height: 340px; }

.help-panel {
  position: fixed; inset: 0 auto 0 0; width: min(92vw, 420px); transform: translateX(-100%);
  transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-decelerate);
  background: var(--md-sys-color-surface-container-low); z-index: 360; display: flex; flex-direction: column;
  box-shadow: var(--md-sys-elevation-4);
}
.help-panel.open { transform: translateX(0); }
/* 2026-10-28 the panel used to open with a red title block that said little.
   The red now carries the one line that actually matters and the numbers
   start straight away. */
.help-panel__strip { display: flex; align-items: flex-start; gap: var(--space-3); flex-shrink: 0; padding: var(--space-4) var(--space-5); background: var(--edfnl-crisis); color: var(--edfnl-on-crisis); }
.help-panel__strip .help-panel__intro { flex: 1; margin: 0; color: inherit; font-size: .95rem; line-height: 1.5; }
.help-panel__close { color: inherit; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; border-radius: var(--md-sys-shape-corner-full); cursor: pointer; flex-shrink: 0; }
.icon-btn:hover { background: rgba(255,255,255,.16); }
.help-panel__body { padding: var(--space-5); overflow-y: auto; }
.help-section + .help-section { margin-top: var(--space-5); }
.help-section__label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); margin-bottom: var(--space-2); }
.speed-dial { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--md-sys-shape-corner-md); background: var(--md-sys-color-surface-container-lowest); border: 1px solid var(--md-sys-color-outline-variant); text-decoration: none; color: var(--md-sys-color-on-surface); margin-bottom: var(--space-2); transition: background-color var(--md-sys-motion-duration-short); }
.speed-dial[href]:hover { background: var(--md-sys-color-surface-container-high); }
.speed-dial:not([href]) { cursor: default; }   /* desktop: static display, not a dead link */
.speed-dial__info { flex: 1; min-width: 0; }
.speed-dial__number { display: block; font-weight: 700; font-size: 1rem; }
.speed-dial__name { display: block; font-size: .8125rem; color: var(--md-sys-color-on-surface-variant); }
.speed-dial__hours { display: block; font-size: .75rem; color: var(--md-sys-color-on-surface-variant); margin-top: 1px; }
/* Trailing "call/text" affordance icon — only meaningful on a phone. Hidden on desktop. */
.speed-dial > .material-symbols-rounded { color: var(--md-sys-color-on-surface-variant); font-size: 20px; display: none; }
.help-note { font-size: .8125rem; color: var(--md-sys-color-on-surface-variant); margin-top: var(--space-3); padding: var(--space-3); background: var(--md-sys-color-surface-container-high); border-radius: var(--md-sys-shape-corner-sm); }

/* Device-adaptive text: show the touch copy only on phones/tablets, desktop copy otherwise */
.on-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .on-touch { display: inline; }
  .on-desktop { display: none; }
  .speed-dial > .material-symbols-rounded { display: inline-block; }
}

/* ----------------------------------------------------------------------------
   12. Quick donate — FAB + side sheet (UI only for now)
   ---------------------------------------------------------------------------- */
.donate-fab {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 340;
  display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 22px;
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
  border: 0; border-radius: var(--md-sys-shape-corner-lg); box-shadow: var(--md-sys-elevation-3);
  font-family: var(--md-sys-typescale-body-font); font-weight: 700; font-size: 1rem; cursor: pointer;
}
.donate-fab:hover { background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 92%, var(--md-sys-color-on-tertiary-container)); }
.donate-fab .material-symbols-rounded { font-size: 22px; }
.donate-panel { position: fixed; right: var(--space-5); bottom: calc(var(--space-5) + 68px); width: min(92vw, 340px); background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-lg); box-shadow: var(--md-sys-elevation-4); z-index: 341; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--md-sys-motion-duration-short), transform var(--md-sys-motion-duration-short), visibility var(--md-sys-motion-duration-short); }
.donate-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.donate-panel__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) 0; }
.donate-panel__title { font-family: var(--md-sys-typescale-brand-font); font-size: 1.2rem; }
.donate-panel__body { padding: var(--space-4); }
.donate-panel__label { font-size: .8125rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); margin-bottom: var(--space-2); }
.donate-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.donate-amount { height: 44px; border: 1px solid var(--md-sys-color-outline); background: transparent; border-radius: var(--md-sys-shape-corner-sm); font-weight: 700; cursor: pointer; color: var(--md-sys-color-on-surface); }
.donate-amount.selected { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-color: var(--md-sys-color-primary); }
.donate-soon { margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--md-sys-shape-corner-sm); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: .8125rem; text-align: center; }

/* ----------------------------------------------------------------------------
   14. Inner-page components (heroes, chips, accordions, forms, callouts)
   ---------------------------------------------------------------------------- */

/* Page hero (sub-pages) */
.page-hero { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); padding-block: var(--space-8); }
.page-hero h1 { color: var(--md-sys-color-on-primary-container); }
.page-hero p { color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 88%, transparent); font-size: 1.1875rem; line-height: 1.6; margin-top: var(--space-4); max-width: 58ch; }

/* 2026-10-28 photo header, opt-in per page from pageHeaders.json. the copy sits
   beside the picture, never on it, so there is no scrim and the photograph is
   never dimmed to rescue contrast. direct children only, so callouts and the
   back link inside the header keep their own colours. */
.page-hero--photo { display: grid; padding-block: 0; background: var(--md-sys-color-surface); }
.page-hero--photo > .container > h1 { color: var(--md-sys-color-on-surface); }
.page-hero--photo > .container > p { color: var(--md-sys-color-on-surface-variant); }
.page-hero__photo { display: block; width: 100%; object-fit: cover; }

@media (max-width: 859.98px) {
  /* the panel bites up into the photograph and its rounded lip is what separates
     the two, so nothing needs laying over the picture to make the words read */
  /* 2026-11-01 these are all wide landscape shots, and in a 250px band cover
     fits the whole height, so the people end up tiny. the picture is given a
     taller box than the row it sits in and the header clips the overhang, which
     zooms it while leaving object-position meaning what it says. a page whose
     photo needs less can dial its own in. */
  .page-hero--photo { overflow: hidden; grid-template-rows: 250px auto; }
  .page-hero--photo > .page-hero__photo {
    grid-area: 1 / 1; align-self: center;
    height: calc(250px * var(--page-hero-zoom-phone, 1.35));
    object-position: var(--page-hero-focus-phone, center);
  }
  .page-hero--photo > .container {
    /* 2026-11-01 the scaled photograph makes its own stacking context, so the
       panel has to be told to stay in front of it */
    grid-area: 2 / 1; position: relative; z-index: 1; margin-top: -34px;
    background: var(--md-sys-color-surface); border-radius: 26px 26px 0 0;
    padding-block: 30px 36px; container-type: inline-size;
  }
    /* sized against the panel, not the window: scott chose this on a short title,
       where "Get Help" runs nearly the full width. fit-heading.js then measures
       each heading and comes down from here when the words need it, so a long
       french title does not end up five lines deep with broken words. */
    .page-hero--photo > .container > h1 {
      font-size: clamp(2.4rem, 22cqw, 4.8rem); letter-spacing: -.02em;
      overflow-wrap: break-word;
    }
}

@media (min-width: 860px) {
  .page-hero--photo { grid-template-columns: 1fr 1fr; }
  /* half of --max-w pushed to the inside edge lands the heading on exactly the
     left margin every .container below it uses. a header that starts left of
     the page content reads as a mistake. */
  .page-hero--photo > .container {
    grid-area: 1 / 1; max-width: calc(var(--max-w) / 2); margin-inline: auto 0;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--space-7); padding-inline-end: var(--space-7);
  }
  .page-hero--photo > .page-hero__photo { grid-area: 1 / 2; height: 100%; min-height: 360px; object-position: var(--page-hero-focus-wide, center); }
}

/* Content prose */
.content { max-width: 72ch; }
.content h2 { margin-top: var(--space-7); }
.content h3 { margin-top: var(--space-6); }
.content p, .content li { color: var(--md-sys-color-on-surface-variant); font-size: 1.0625rem; line-height: 1.7; }
.content p + p { margin-top: var(--space-4); }
.content ul, .content ol { margin: var(--space-4) 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.content a:not(.btn) { color: var(--md-sys-color-primary); text-decoration: underline; }
.lead { font-size: 1.1875rem; line-height: 1.6; color: var(--md-sys-color-on-surface); }

/* Chips (M3) — accessible color pairs (dark text on light containers) */
.chip-set { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--md-sys-shape-corner-sm); font-family: var(--md-sys-typescale-body-font); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.chip .material-symbols-rounded { font-size: 18px; }
.chip-primary   { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.chip-secondary { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.chip-tertiary  { background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-surface)); color: var(--md-sys-color-on-tertiary-container); }

/* Accordion (native <details>) */
.accordion { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-md); overflow: hidden; background: var(--md-sys-color-surface-container-lowest); }
.accordion + .accordion { margin-top: var(--space-3); }
.accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; font-family: var(--md-sys-typescale-body-font); font-weight: 600; font-size: 1.05rem; list-style: none; }
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after { content: 'expand_more'; font-family: 'Material Symbols Rounded'; font-size: 24px; color: var(--md-sys-color-on-surface-variant); transition: transform var(--md-sys-motion-duration-short); }
.accordion[open] > summary::after { transform: rotate(180deg); }
.accordion > summary:hover { background: var(--md-sys-color-surface-container-high); }
.accordion__body { padding: 0 var(--space-5) var(--space-5); }
.accordion__body p, .accordion__body li { color: var(--md-sys-color-on-surface-variant); line-height: 1.65; }

/* Callout / alert — accessible */
.callout { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--md-sys-shape-corner-md); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.callout .material-symbols-rounded { flex-shrink: 0; color: var(--md-sys-color-primary); }
.callout--crisis { background: var(--edfnl-crisis-container); color: var(--edfnl-on-crisis-container); }
.callout--crisis .material-symbols-rounded { color: var(--edfnl-crisis); }
.callout p { color: inherit; }

/* Resource row (labelled external links / phone rows on content pages) */
.resource-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-md); background: var(--md-sys-color-surface-container-lowest); text-decoration: none; color: var(--md-sys-color-on-surface); transition: background-color var(--md-sys-motion-duration-short); }
.resource-row:hover { background: var(--md-sys-color-surface-container-high); }
.resource-row__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); flex-shrink: 0; }
.resource-row__info { flex: 1; min-width: 0; }
.resource-row__title { display: block; font-weight: 600; }
.resource-row__desc { display: block; font-size: .875rem; color: var(--md-sys-color-on-surface-variant); }

/* Team grid (About) */
.team-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-member { padding: var(--space-4) var(--space-5); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-md); background: var(--md-sys-color-surface-container-lowest); }
.team-member__name { font-weight: 700; }
.team-member__role { font-size: .875rem; color: var(--md-sys-color-on-surface-variant); }

/* M3 text fields + form */
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 560px; }
.form-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--md-sys-typescale-body-font); font-size: .875rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.field label .req { color: var(--md-sys-color-error); }
.field input, .field textarea, .field select {
  font: inherit; width: 100%; padding: 12px 14px; color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-sm);
  transition: border-color var(--md-sys-motion-duration-short), box-shadow var(--md-sys-motion-duration-short);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--md-sys-color-primary); box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }
.form-success { display: none; padding: var(--space-4) var(--space-5); border-radius: var(--md-sys-shape-corner-md); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.form-success.show { display: flex; gap: var(--space-3); align-items: center; }

/* Fieldsets + choice groups (checkbox / radio) for long forms */
.fieldset { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-md); padding: var(--space-5); margin: 0; }
.fieldset > legend { padding: 0 8px; font-family: var(--md-sys-typescale-body-font); font-weight: 700; font-size: 1.05rem; color: var(--md-sys-color-on-surface); }
.fieldset__hint { font-size: .9rem; color: var(--md-sys-color-on-surface-variant); margin: 6px 0 var(--space-3); }
.check-group { display: grid; gap: 6px; }
.check-group--2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .check-group--2 { grid-template-columns: 1fr 1fr; } }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--md-sys-shape-corner-sm); cursor: pointer; }
.check:hover { background: var(--md-sys-color-surface-container-high); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--md-sys-color-primary); flex-shrink: 0; }
.check span { line-height: 1.45; }
.form-section { margin-top: var(--space-7); }
.form-section > h2 { font-size: 1.4rem; margin-bottom: var(--space-2); }
.form-section__intro { color: var(--md-sys-color-on-surface-variant); margin-bottom: var(--space-4); max-width: 68ch; }
.req { color: var(--md-sys-color-error); }

/* ---- Multi-step form wizard ---- */
/* Step headings are focused programmatically (tabindex=-1) only to move the
   screen-reader position when advancing a step — never a keyboard target — so
   suppress the visible focus ring that was boxing the title. */
.wizard-step h2:focus, .wizard-step h2:focus-visible { outline: none; }
.wizard-progress { margin-bottom: var(--space-6); }
.wizard-progress__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 12px; flex-wrap: wrap; }
.wizard-progress__step { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--md-sys-color-primary); }
.wizard-progress__title { font-family: var(--md-sys-typescale-brand-font); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--md-sys-color-on-surface); }
.wizard-progress__bar { height: 12px; border-radius: 999px; background: var(--md-sys-color-surface-container-highest); overflow: hidden; }
.wizard-progress__fill { height: 100%; width: 16.6%; border-radius: 999px; background: linear-gradient(90deg, var(--md-sys-color-primary), var(--md-sys-color-primary-light)); transition: width .45s var(--md-sys-motion-easing-emphasized); }
.wizard-progress__dots { display: flex; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; }
.wizard-progress__dots li { flex: 1; height: 6px; border-radius: 999px; background: var(--md-sys-color-surface-container-highest); transition: background-color .3s; }
.wizard-progress__dots li.done { background: var(--md-sys-color-primary-light); }
.wizard-progress__dots li.current { background: var(--md-sys-color-primary); }

.wizard-step > h2 { font-size: 1.4rem; margin-bottom: var(--space-2); }
.wizard.js .wizard-step { display: none; }
.wizard.js .wizard-step.active { display: block; animation: wizardIn .4s var(--md-sys-motion-easing-emphasized); }
@keyframes wizardIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .wizard.js .wizard-step.active { animation: none; } }

.wizard-nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-7); }
.wizard-nav .wizard-spacer { flex: 1; }
.wizard:not(.js) .wizard-back, .wizard:not(.js) .wizard-next { display: none; }   /* no-JS: full form, submit only */
.is-hidden { display: none !important; }
@media (max-width: 560px) {
  .wizard-nav { flex-direction: column-reverse; align-items: stretch; }
  .wizard-nav .btn { width: 100%; }
  .wizard-nav .wizard-spacer { display: none; }
}

/* List-with-us layout: form (main) + collapsible criteria aside.
   Mobile: aside is first in the DOM and collapsible. Desktop: aside becomes a
   sticky right rail, always shown, no toggle. */
.lwu-layout { display: grid; gap: var(--space-6); }
.lwu-aside { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-lg); background: var(--md-sys-color-surface-container-lowest); overflow: hidden; }
.lwu-aside > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: var(--space-4) var(--space-5); cursor: pointer; font-family: var(--md-sys-typescale-body-font); font-weight: 600; }
.lwu-aside > summary::-webkit-details-marker { display: none; }
.lwu-aside > summary .material-symbols-rounded { color: var(--md-sys-color-primary); }
.lwu-aside__chev { margin-left: auto; transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); }
.lwu-aside[open] .lwu-aside__chev { transform: rotate(180deg); }
.lwu-aside__body { padding: 0 var(--space-5) var(--space-5); }
.lwu-aside__body .lead { font-size: 1.0625rem; }
.lwu-aside__body .callout { margin-top: var(--space-4); }
@media (min-width: 960px) {
  .lwu-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
  .lwu-form { grid-column: 1; grid-row: 1; }
  .lwu-aside { grid-column: 2; grid-row: 1; position: sticky; top: 88px; }
  .lwu-aside > summary { display: none; }
  .lwu-aside__body { padding: var(--space-5); display: block !important; }
}

/* Two-column split for content pages */
.split { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } .split--sidebar { grid-template-columns: 1.6fr 1fr; } }

/* Simple map placeholder */
.map-placeholder { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; justify-content: center; padding: var(--space-6); border-radius: var(--md-sys-shape-corner-lg); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); min-height: 220px; }

/* ----------------------------------------------------------------------------
   15. Promo banner (M3 tonal)
   ---------------------------------------------------------------------------- */
.promo-banner { display: flex; align-items: center; justify-content: center; gap: var(--space-3); position: relative; padding: 10px var(--space-6); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: .9375rem; }
.promo-banner__text { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.promo-banner__cta { display: inline-flex; align-items: center; gap: 4px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 600; font-size: .78rem; padding: 3px 12px; border-radius: var(--md-sys-shape-corner-full); text-decoration: none; }
.promo-banner__close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

/* ----------------------------------------------------------------------------
   16. M3 Expressive — tactile press + hover motion (springy)
   ---------------------------------------------------------------------------- */
.btn { transition: background-color var(--md-sys-motion-duration-short), transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.95); }
.card { transition: background-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized), border-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized), transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized); }
/* 2026-10-28 one lift for every clickable box, and a small one: with the hover
   shadows gone there is nothing for a big jump to look like. */
a.card:hover, .event-cards .card:hover, a.download-card:hover { transform: translateY(-2px); }
.chip { transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized); }
.chip:active { transform: scale(.95); }
.nav-link:active { transform: scale(.97); }
.resource-row:active, .speed-dial[href]:active, .donate-amount:active { transform: scale(.98); }
.icon-btn:active, .nav-toggle:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, a.card:hover, .event-cards .card:hover, a.download-card:hover,
  .chip:active, .nav-link:active, .resource-row:active, .speed-dial[href]:active, .donate-amount:active,
  .icon-btn:active, .nav-toggle:active { transform: none; }
}

/* ----------------------------------------------------------------------------
   17. Donate — special, immediately-noticeable button (brand orange + glow)
   ---------------------------------------------------------------------------- */
.btn-donate {
  /* 2026-10-28 standard tier, not large: the french header fits with about a
     pixel to spare, so this button cannot afford to grow. it leads on colour. */
  border: 0;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: none;
  --_state: transparent;
}
/* 2026-10-28 the ring in the original was the button's own yellow, which sits at
   1.5:1 on a white header, so a keyboard user got no ring at all. the border
   colour carries the same family and reads at 4.2:1. */
.btn-donate .material-symbols-rounded { font-size: 20px; }
/* 2026-10-28 the app bar is a fixed strip and the french nav very nearly fills it,
   so buttons in there keep the tier's size and take the narrower side padding.
   a header-wide rule, not a per-button exception. */
.nav-utils .btn, .nav-lang { padding-inline: 16px; }
/* 2026-10-28 on a narrow phone the full-size mark, get help, donate and the menu
   button need about 450px and the screen has 360. rather than shrink the mark or
   hide get help, get help takes a line of its own under the mark. */
@media (max-width: 539px) {
  .nav-row { flex-wrap: wrap; row-gap: 2px; }
  .nav-utils { margin-left: auto; }
  .nav-main { order: 3; flex: 1 0 100%; }
}
/* 2026-10-28 below the desktop breakpoint the panel spans the row rather than
   hanging off one item and running past the screen edge. anchored to the row,
   so no app-bar height has to be guessed at. */
@media (max-width: 999px) {
  .nav-row { position: relative; }
  .nav-item { position: static; }
  
}

/* ----------------------------------------------------------------------------
   18. Mobile cleanup — bigger logo, tidier header, non-wrapping banner
   ---------------------------------------------------------------------------- */
.nav-mark--mobile { display: none; }       /* compact logo, mobile only */
@media (max-width: 999px) {
  .nav-mark--desktop { display: none; }
  .nav-mark--mobile { display: block; height: 88px; }
  .nav-lang { display: none; }             /* FR toggle lives in the drawer on mobile */
  .nav-row { padding: 12px var(--space-4); gap: var(--space-3); }
  .nav-utils { gap: var(--space-2); }
}
@media (max-width: 640px) {
  .promo-banner { font-size: .8rem; padding: 8px 40px 8px 14px; gap: var(--space-2); }
  .promo-banner__text { flex-wrap: nowrap; }
  .promo-banner__cta { display: none; }    /* keep the strip to one clean line; Get Help is in the menu */
  .nav-mark--mobile { height: 88px; }
  /* 2026-10-18 the header now carries Get help as well as Donate, so the mark
     and both pills tighten up to keep the hamburger on screen at 360px. */
  .nav-row { padding: 10px var(--space-3); gap: var(--space-2); }
  .nav-utils { gap: 6px; }
  .nav-utils .btn-donate { padding: 12px 18px; font-size: 1rem; }
  .nav-toggle { width: 42px; height: 42px; }
  .nav-toggle .material-symbols-rounded { font-size: 26px; }
}

/* 2026-10-18 at 360px the French header runs 30px over: "Faire un don" plus the
   mark plus two more targets. The mark gives up the most for the least. */
@media (max-width: 400px) {
  .nav-mark--mobile { height: 88px; }
  .nav-row { padding: 8px 6px; gap: 3px; }
  .nav-utils { gap: 4px; }
  .nav-utils .btn-donate { padding: 11px 14px; font-size: .95rem; }
}
/* Drawer donate stays legible (orange + dark text) on the light drawer */
.nav-drawer .btn-donate { color: var(--md-sys-color-on-primary); }

/* ----------------------------------------------------------------------------
   19. Designed desktop nav — brand hover, gold underline, active state
   ---------------------------------------------------------------------------- */
.nav-links { gap: 4px; }
.nav-link { position: relative; }
/* 2026-10-28 the pill is drawn on a pseudo-element rather than the link itself:
   the link stays a 44px target for thumbs, while the tint hugs the label with
   about 4px around it. boxy, lightly rounded, out of the way. */
.nav-link::before {
  content: ""; position: absolute; inset: 11px 5px; z-index: -1;
  border-radius: 6px; background: transparent;
  transition: background-color var(--md-sys-motion-duration-short);
}
.nav-link:hover::before::before,
.nav-item:hover > .nav-link-btn::before {
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
}
.nav-link:hover, .nav-item:hover > .nav-link-btn {
  background: transparent; color: var(--md-sys-color-primary);
}
/* 2026-11-01 the hover underline used to be a bar springing out from the centre.
   Hover is a plain underline now; the bar stays, unanimated, for the page you
   are actually on, which is a state rather than a pointer effect. */
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 3px;
  background: var(--md-sys-color-primary);
}
.nav-link:hover, .nav-item:hover > .nav-link-btn {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.nav-link[aria-current="page"] { color: var(--md-sys-color-primary); font-weight: 700; }
/* a little more presence + a hairline between logo and nav */
.nav-links { margin-left: var(--space-4); }

/* ============================================================================
   20. Page-local styles consolidated from head <style> blocks (so EN + FR build
   pages get them — donate tiers, program groups, myth/fact grid, etc.)
   ============================================================================ */

/* ---- from donate.html ---- */
.cards-4 { grid-template-columns: 1fr; }
    @media (min-width: 600px)  { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1000px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }

    .tier {
      display: flex; flex-direction: column; gap: var(--space-3); text-align: left;
      width: 100%; font: inherit; color: inherit; cursor: pointer;
      padding: var(--space-6);
      background: var(--md-sys-color-surface-container-lowest);
      border: 1px solid var(--md-sys-color-outline-variant);
      border-radius: var(--md-sys-shape-corner-lg);
      transition: background-color var(--md-sys-motion-duration-short),
                  border-color var(--md-sys-motion-duration-short);
    }
    .tier.selected {
      border-color: var(--md-sys-color-primary);
      box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
    }
    .tier__amount {
      font-family: var(--md-sys-typescale-brand-font);
      font-size: 2.4rem; font-weight: 600; line-height: 1;
      color: var(--md-sys-color-primary);
    }
    .tier__label { font-weight: 700; color: var(--md-sys-color-on-surface); }
    .tier__desc  { color: var(--md-sys-color-on-surface-variant); font-size: .95rem; line-height: 1.55; }

    .give-callout { align-items: flex-start; margin-top: var(--space-6); }
    .give-callout__body { display: flex; flex-direction: column; gap: var(--space-4); }
    .give-callout__body strong { font-size: 1.0625rem; }
    .give-callout__body p { margin: 0; }

    .event-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
    .event-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--md-sys-color-on-surface-variant); line-height: 1.5; }
    .event-list .material-symbols-rounded { font-size: 20px; color: var(--md-sys-color-primary); flex-shrink: 0; }
    .event-list strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
    .event-list--walks li { align-items: baseline; }

    /* CanadaHelps embedded donation form. The form is a cross-origin iframe, so we
       style only the card around it; the form's internals are set in CanadaHelps. */
    .ch-card {
      max-width: 560px; margin-inline: auto;
      background: var(--md-sys-color-surface-container-lowest);
      border: 1px solid var(--md-sys-color-outline-variant);
      border-radius: var(--md-sys-shape-corner-xl);
      padding: var(--space-4);
      box-shadow: var(--md-sys-elevation-1);
    }
    .ch-card iframe { width: 100% !important; border: 0; display: block; border-radius: var(--md-sys-shape-corner-lg); }
    .ch-card__loading { padding: var(--space-8) var(--space-6); text-align: center; color: var(--md-sys-color-on-surface-variant); }
    .ch-fallback { margin-top: var(--space-5); text-align: center; font-size: .9375rem; color: var(--md-sys-color-on-surface-variant); }

/* ---- from programs.html ---- */
.program-group { margin-top: var(--space-9); }
    .program-group:first-of-type { margin-top: 0; }
    .program-cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
    @media (min-width: 720px)  { .program-cards { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1080px) { .program-cards { grid-template-columns: repeat(3, 1fr); } }
    .program-cards .card .chip-set { margin-bottom: var(--space-1); }
    .program-cards .card h3 { font-size: 1.25rem; }

/* ---- from understanding.html ---- */
.signs-cards .card h3 { display: flex; align-items: center; gap: var(--space-3); font-size: 1.15rem; }
    .signs-cards .card ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
    .signs-cards .card li { color: var(--md-sys-color-on-surface-variant); line-height: 1.55; }

    .mf-set { display: grid; gap: var(--space-4); }
    @media (min-width: 720px) { .mf-set { grid-template-columns: 1fr 1fr; } }
    .mf-item { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-md); overflow: hidden; background: var(--md-sys-color-surface-container-lowest); display: flex; flex-direction: column; }
    .mf-myth { padding: var(--space-4) var(--space-5); background: var(--md-sys-color-surface-container-high); }
    .mf-fact { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--md-sys-color-outline-variant); flex: 1; }
    .mf-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-2); }
    .mf-tag--myth { color: var(--md-sys-color-secondary); }
    .mf-tag--fact { color: var(--md-sys-color-primary); }
    .mf-tag .material-symbols-rounded { font-size: 18px; }
    .mf-myth p { color: var(--md-sys-color-on-surface-variant); margin: 0; }
    .mf-fact p { color: var(--md-sys-color-on-surface); margin: 0; line-height: 1.6; }

    .accordion__body .type-note { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--md-sys-shape-corner-sm); background: var(--md-sys-color-surface-container-high); font-size: .95rem; }
    .accordion__body .type-note .material-symbols-rounded { font-size: 20px; color: var(--md-sys-color-primary); flex-shrink: 0; }
    .source-note { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--md-sys-color-outline-variant); font-size: .95rem; color: var(--md-sys-color-on-surface-variant); }
    .source-note a { color: var(--md-sys-color-primary); }

/* ---- from about.html ---- */
.team-member__email { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-2); font-size: .875rem; color: var(--md-sys-color-primary); text-decoration: none; word-break: break-word; }
    .team-member__email:hover { text-decoration: underline; }
    .team-member__email .material-symbols-rounded { font-size: 16px; }

/* ---- Program / resource detail pages ---- */
.detail-back { margin-bottom: var(--space-5); }
.detail-back a { display: inline-flex; align-items: center; gap: 2px; }
.detail-back .material-symbols-rounded { font-size: 1.15rem; }

.detail-layout { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 860px) { .detail-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); } }

.detail-body .prose + .prose { margin-top: var(--space-7); }
.detail-body h2 { font-size: 1.5rem; margin-bottom: var(--space-3); }

.detail-aside { position: sticky; top: var(--space-6); }
.detail-facts { padding: 0; }
.detail-facts__title { font-size: 1.125rem; margin-bottom: var(--space-3); }
.detail-facts dl { margin: 0 0 var(--space-5); }
.detail-fact { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
    .detail-fact:last-child { border-bottom: none; }
    .detail-fact dt { flex: none; min-width: 92px; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--md-sys-color-primary); }
    .detail-fact dd { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.0625rem; font-weight: 600; color: var(--md-sys-color-on-surface); }
@media (max-width: 859px) { .detail-aside { position: static; } }

/* ---- Intake popover (generic contact form on CTAs) ---- */
/* 2026-10-28 a drawer off the right wall rather than a box dropped in the middle.
   the page blurs behind it so the form is plainly the only thing being asked for.
   2026-11-01 it is a drawer on a phone now too: with the message box gone there
   are four fields left, and leaving the page showing at the edge says plainly
   that this can be dismissed. */
.intake-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,9,12,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: sheet-fade .24s ease both;
}
.intake-backdrop[hidden] { display: none; }
.intake-modal {
  position: fixed; z-index: 1001; inset: 0 0 0 auto;
  width: min(88vw, 400px); overflow-y: auto;
  background: var(--md-sys-color-surface);
  border-radius: 0;
  padding: var(--space-6) var(--space-5) var(--space-7);
  box-shadow: -18px 0 48px rgba(16,15,19,.26);
  animation: sheet-in .3s var(--md-sys-motion-easing-decelerate, ease) both;
}
@media (min-width: 600px) {
  .intake-modal { width: min(100%, 520px); padding: var(--space-7); }
}
@keyframes sheet-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
/* it still arrives, it just stops sliding to get there */
@media (prefers-reduced-motion: reduce) {
  .intake-modal, .intake-backdrop { animation: none; }
}
.intake-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.intake-modal__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; font-weight: 600; color: var(--md-sys-color-primary); margin-bottom: var(--space-1); }
.intake-modal__title { font-size: 1.5rem; }
.intake-modal__re { margin-top: var(--space-2); font-size: .9375rem; color: var(--md-sys-color-on-surface-variant); }
.intake-optional { font-weight: 400; color: var(--md-sys-color-on-surface-variant); font-size: .875rem; }
.intake-note { margin-top: var(--space-3); font-size: .875rem; color: var(--md-sys-color-on-surface-variant); }

/* ---- News & events ticker (top hat banner) ---- */
.promo-banner--events { padding-top: 0; padding-bottom: 0; min-height: 46px; }
.promo-ticker { position: relative; flex: 1; min-height: 46px; }
.promo-slide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 8px var(--space-6); white-space: nowrap;
  text-decoration: none; color: inherit;
  opacity: 0; visibility: hidden; transition: opacity .45s ease;
}
.promo-slide.is-active { opacity: 1; visibility: visible; }
.promo-slide__icon { font-size: 21px; color: var(--md-sys-color-primary); flex-shrink: 0; }
.promo-slide__label { font-weight: 700; font-size: 1rem; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; }
.promo-slide__date { font-weight: 700; color: var(--md-sys-color-primary); flex-shrink: 0; }
.promo-slide__date::before { content: "·"; margin: 0 8px 0 2px; color: currentColor; opacity: .45; font-weight: 400; }
.promo-slide:hover .promo-slide__label { text-decoration: underline; }
/* Mobile: collapse the rotating ticker to one compact "Upcoming events" link */
.promo-banner__mobile { display: none; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; letter-spacing: .01em; color: inherit; text-decoration: none; }
@media (max-width: 700px) {
  .promo-banner--events, .promo-banner--events.promo-banner { min-height: 38px; }
  .promo-ticker { display: none; }
  .promo-banner__mobile { display: inline-flex; }
}

/* ---- Golf sponsorship multi-select ---- */
.spon-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: auto; padding-top: var(--space-4); }
.spon-card__foot .spon-card__cta { margin-left: auto; }
.spon-select { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; color: var(--md-sys-color-on-surface-variant); }
.spon-select__cb { width: 18px; height: 18px; accent-color: var(--md-sys-color-primary); cursor: pointer; flex-shrink: 0; }

.spon-select-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-radius: var(--md-sys-shape-corner-lg); }
.spon-select-bar[hidden] { display: none; }
.spon-select-bar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.spon-select-bar__info strong { font-size: 1rem; }
.spon-select-bar__names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.spon-select-bar__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.spon-tag { display: inline-flex; align-items: center; gap: 2px; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-full); padding: 3px 4px 3px 12px; font-size: .8125rem; font-weight: 500; }
.spon-tag__x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; background: transparent; color: var(--md-sys-color-on-surface-variant); border-radius: 50%; cursor: pointer; }
.spon-tag__x:hover { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.spon-tag__x .material-symbols-rounded { font-size: 16px; }


/* Steps: a short numbered path through a process */
.steps { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-md); background: var(--md-sys-color-surface-container-lowest); }
.steps li::before { counter-increment: step; content: counter(step); flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 700; font-size: 1.05rem; }
.steps h3 { margin: 0 0 4px; font-size: 1.05rem; }
.steps p { margin: 0; color: var(--md-sys-color-on-surface-variant); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .steps li { flex-direction: column; } }

/* Reveal: extra detail the reader opts into. Never put urgent information in one. */
.reveal { margin-top: var(--space-5); }
.reveal > summary { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-5); border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); cursor: pointer; font-family: var(--md-sys-typescale-body-font); font-weight: 600; font-size: .95rem; color: var(--md-sys-color-primary); list-style: none; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::after { content: 'expand_more'; font-family: 'Material Symbols Rounded'; font-size: 20px; transition: transform var(--md-sys-motion-duration-short); }
.reveal > summary:hover { background: var(--md-sys-color-surface-container-high); }
.reveal[open] > summary::after { transform: rotate(180deg); }
.reveal[open] > summary .reveal__more { display: none; }
.reveal > summary .reveal__less { display: none; }
.reveal[open] > summary .reveal__less { display: inline; }
.reveal__body { margin-top: var(--space-5); }

/* Utilities replacing the inline styles that were on the content pages */
.callout + .callout { margin-top: var(--space-4); }
.content--measure { max-width: 80ch; }
.cards--spaced { margin-top: var(--space-6); }
.section-note { margin-top: var(--space-6); }
.section-note .body-small { color: var(--md-sys-color-on-surface-variant); }
.signs-cards .card h3 .material-symbols-rounded { color: var(--md-sys-color-primary); }

/* Card rows become a swipe on phones. Native scroll-snap, so it stays keyboard
   reachable, reads in normal order to a screen reader, and needs no markup
   changes on the twenty-odd card rows across the site. */
@media (max-width: 719px) {
  .cards-2, .cards-3, .cards-4 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    scrollbar-width: none;
  }
  .cards-2::-webkit-scrollbar, .cards-3::-webkit-scrollbar, .cards-4::-webkit-scrollbar { display: none; }
  .cards-2 > *, .cards-3 > *, .cards-4 > * { scroll-snap-align: start; }
}

/* Entrance motion. Wrapped in no-preference so a reader who asks for less never
   gets the hidden starting state, and scoped to .has-motion so the page still
   renders fully if the script never runs. */
@media (prefers-reduced-motion: no-preference) {
  .has-motion .rise {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
    transition-delay: var(--rise-delay, 0ms);
  }
  .has-motion .rise.is-in { opacity: 1; transform: none; }
  /* the three number cards are the point of their section, so they travel further,
     take longer and space out more than the small cards elsewhere */
  .has-motion .province__stats .rise {
    transform: translateY(28px);
    transition-duration: .9s;
    transition-delay: calc(var(--rise-delay, 0ms) * 2.5);
  }
  .has-motion .province__stats .rise.is-in { transform: none; }
}

/* Myth and fact pairs swipe on a phone, same as the card rows. */
@media (max-width: 719px) {
  .mf-set {
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    scrollbar-width: none;
  }
  .mf-set::-webkit-scrollbar { display: none; }
  .mf-set > * { scroll-snap-align: start; }
}

/* Swipe hint. The script only hangs these off a row that genuinely overflows,
   so they turn up on a phone and are gone the moment the row fits. */
.swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-1); }
.swipe-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--md-sys-color-outline); opacity: .45; }
.swipe-dots span.is-current { width: 20px; opacity: 1; background: var(--md-sys-color-primary); }
@media (prefers-reduced-motion: no-preference) {
  .swipe-dots span {
    transition: width var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
                opacity var(--md-sys-motion-duration-short),
                background-color var(--md-sys-motion-duration-short);
  }
}

/* The section index scrolls sideways on a phone too, but dots would be wrong
   on a row of chips. A chip cut flat at the edge reads as cropped; a chip
   fading out reads as more to come. */

/* Disclosure. Everything is open in the markup so the page is complete without
   the script; the script is what clamps it and reveals the toggle, and only on
   screens wide enough that swiping is not the better answer. */
/* 2026-10-28 this is a real button, so it looks like one: the outlined variant,
   same shape as everything else. It used to be dressed as an underlined link. */
.disclose__toggle { display: none; }
.disclose.is-enhanced .disclose__toggle { display: inline-flex; margin-top: var(--space-5); }
.disclose.is-enhanced .disclose__toggle::after {
  content: 'expand_more'; font-family: 'Material Symbols Rounded'; font-size: 20px;
  transition: transform var(--md-sys-motion-duration-short);
}
.disclose:not(.is-clamped) .disclose__toggle::after { transform: rotate(180deg); }
.disclose.is-clamped .mf-set > :nth-child(n + 3) { display: none; }
.disclose.is-clamped .disclose__less { display: none; }
.disclose:not(.is-clamped) .disclose__more { display: none; }
@media (prefers-reduced-motion: reduce) {
  .disclose.is-enhanced .disclose__toggle::after { transition: none; }
}

/* Card accordions on phones. A row of cards collapses to a list of titles so the
   whole row fits on one screen, instead of scrolling past it or swiping through
   it sideways. The first card in each row opens by default. */
@media (max-width: 719px) {
  .cards--accordion,
  .program-cards.cards--accordion {
    display: block;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: none;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .cards--accordion > .card { padding: 0; }
  .cards--accordion > .card + .card { margin-top: var(--space-3); }
  .cards--accordion > .card > h3 { margin: 0; font-size: 1.125rem; }

  .cards--accordion > .card { position: relative; overflow: hidden; }
  .card__spine {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; padding: var(--space-4) var(--space-5);
    background: none; border: 0; border-radius: inherit;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
  }
  /* the spine fills the card and the card clips its overflow, so an outward ring
     would be cut off. Same 3px, laid just inside the card's own corner. */
  .card__spine:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: -3px;
  }
  .card__spine::after {
    content: 'expand_more';
    font-family: 'Material Symbols Rounded'; font-size: 24px; font-weight: 400;
    margin-left: auto; flex-shrink: 0;
    color: var(--md-sys-color-on-surface-variant);
    transition: transform var(--md-sys-motion-duration-short);
  }
  .card__spine[aria-expanded="true"]::after { transform: rotate(180deg); }
  .card__spine-label { min-width: 0; }

  .card__panel { padding: 0 var(--space-5) var(--space-5); }
  /* 2026-10-28 the icon is decoration beside a line of text, which is what the
     house rule says icons are not for. it stays on the wide layout where it is
     part of the card, and goes here where it only gets in the way. */
  .card__panel > :first-child { margin-top: 0; }

  /* the swipe affordances have nothing to point at once a row is a stack */
  .cards--accordion + .swipe-dots { display: none; }
}
@media (max-width: 719px) and (prefers-reduced-motion: reduce) {
  .card__spine::after { transition: none; }
}

/* 2026-10-18 Touch targets. Keyed off pointer:coarse rather than width, so it
   catches phones, tablets and touch laptops on any OS rather than guessing from
   the viewport. 44px is the smaller of Apple's 44 and Material's 48, and the
   floor WCAG 2.5.8 wants cleared comfortably.

   The phone links matter most: inline in a paragraph they were 20px tall, and
   "911" on the Understanding page was a 21 by 22 target. Padding plus an equal
   negative margin grows the hit area without moving the line it sits on. */
@media (pointer: coarse) {
  a[href^="tel:"]:not(.speed-dial),
  a[href^="mailto:"]:not(.speed-dial) {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }
  .nav-toggle { width: 44px; height: 44px; }
  .promo-banner__close { width: 44px; height: 44px; }
  /* 2026-10-28 every button on the site comes through here now, so the floor is
     set once on the component instead of naming them one at a time. The large
     variant is already 52 and must not be pulled back down to 44. */
  .btn:not(.btn-lg) { min-height: 44px; }
}

/* Page nav. Sticks under the app bar once the hero has scrolled away: the page's
   own name, and a menu of its sections. */
/* 2026-10-28 the bar was the same off-white as the page under it, so once it
   stuck it read as more content rather than something floating over it. white
   and frosted like the app bar above, with a hairline and a soft resting shadow;
   the shadow stays because the bar genuinely floats, nothing here moves on hover. */
.page-nav {
  position: sticky; top: var(--edfnl-app-bar-h, 64px); z-index: 90;
  color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 6px 18px rgba(16, 15, 19, .06);
}
/* frosting on a pseudo-element, same reason as the app bar: backdrop-filter on the
   bar itself would make it the containing block for anything fixed inside it */
.page-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.page-nav__inner {
  display: flex; align-items: center; gap: var(--space-4);
  max-width: var(--max-w); margin-inline: auto;
  padding: 6px var(--space-5);
}
.page-nav__title {
  flex: 1; min-width: 0;
  font-family: var(--md-sys-typescale-brand-font);
  font-size: 1rem; font-weight: 600;
  color: var(--md-sys-color-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a real button now: round, so the focus ring follows it instead of drawing a
   square box around two icons */
.page-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  flex-shrink: 0; min-height: 40px; padding: 0 10px 0 12px;
  background: transparent; cursor: pointer;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  transition: background-color var(--md-sys-motion-duration-short), border-color var(--md-sys-motion-duration-short);
}
.page-nav__toggle:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
  border-color: var(--md-sys-color-primary);
}
.page-nav__toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
  border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
}
.page-nav__toggle .material-symbols-rounded { font-size: 20px; }
.page-nav__toggle::after {
  content: 'expand_more';
  font-family: 'Material Symbols Rounded'; font-size: 18px;
  transition: transform var(--md-sys-motion-duration-short);
}
.page-nav__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* sections run in columns on a wide screen instead of one long stack of rows */
.page-nav__menu {
  list-style: none; margin: 0 auto;
  display: grid; gap: 2px;
  padding: var(--space-2) var(--space-5) var(--space-4);
  max-width: var(--max-w);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
@media (min-width: 860px) {
  .page-nav__menu { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: var(--space-4); }
}
.page-nav__menu a {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 0 10px; border-radius: 6px;
  color: var(--md-sys-color-on-surface-variant); text-decoration: none;
  font-size: .9375rem; font-weight: 500; text-wrap: pretty;
}
.page-nav__menu a:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
  color: var(--md-sys-color-on-surface);
}
/* the current section gets a short bar and the brand colour rather than a slab
   of fill. every row carries the bar's slot so the text never shifts sideways. */
.page-nav__menu a::before {
  content: ""; flex-shrink: 0; width: 3px; height: 16px; border-radius: 2px;
  background: transparent;
}
.page-nav__menu a.is-current { color: var(--md-sys-color-primary); font-weight: 600; }
.page-nav__menu a.is-current::before { background: var(--md-sys-color-primary); }
@media (max-width: 999px) {
  .page-nav__toggle, .page-nav__menu a { min-height: 44px; }
}

main > section[id] { scroll-margin-top: calc(var(--edfnl-app-bar-h, 64px) + 64px); }

@media (prefers-reduced-motion: reduce) {
  .page-nav__toggle::after { transition: none; }
}

/* 2026-10-18 The board and staff lists are a roster, not a set of choices, but
   on a phone they rendered as 18 stacked boxes: border, radius, background and
   a gap each, about 100px per person for two lines of text. Below the
   two-column breakpoint they become a plain list with hairlines, which is what
   a list of names and titles actually is. */
@media (max-width: 599px) {
  /* 2026-11-01 twelve board members down one column is a long scroll of near
     identical rows. Two across halves it and reads as a roster rather than a
     feed. Anyone carrying an email keeps the full width, since an address and a
     tappable link need the room. */
  .team-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4);
    border-top: 1px solid var(--md-sys-color-outline-variant);
  }
  .team-member {
    padding: var(--space-3) 0;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0;
    background: none;
    min-width: 0;
  }
  .team-member:has(.team-member__email) { grid-column: 1 / -1; }
  .team-member__name { font-size: .9375rem; line-height: 1.25; }
  .team-member__role { font-size: .8125rem; }
  .team-member__email { margin-top: var(--space-1); }
}

/* Roster toggle. The script builds it as an outlined button; all it needs here
   is room under it before the list starts. */


/* 2026-10-18 Drawers: the page behind blurs, the panel itself sits at 90% with
   a light blur of its own, and it opens with the mark and a close button you
   can actually find rather than only a scrim to guess at. */
/* 2026-11-01 these two were the only backdrop-filters in the file without the
   webkit prefix, so on safari neither blur ran and the drawer was a 90%
   transparent panel over a sharp photograph. prefixed, and taken up to a blur
   that actually puts the page behind out of focus. */
.scrim.open, .donate-scrim.open {
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.nav-drawer {
  background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(18px);
          backdrop-filter: saturate(1.3) blur(18px);
}
.nav-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5);
}
.nav-drawer__mark { height: 60px; width: auto; }
/* 2026-10-28 a square-cornered box among three round close buttons. It is an
   icon button like the others now; the hairline is all it keeps, because this
   one sits on a pale drawer rather than a coloured header. */
.nav-drawer__close {
  width: 44px; height: 44px;
  border: 0; border-radius: 0;
  background: none;
  color: var(--md-sys-color-on-surface);
}
@media (hover: hover) {
  .nav-drawer__close:hover { background: none; color: var(--md-sys-color-primary); }
}
.nav-drawer__close .material-symbols-rounded { font-size: 24px; }


/* 2026-11-01 On a phone the crisis tab was a tall slab riding the left edge,
   which gave a help button the visual weight of a banner. It becomes a small
   square-ish button floating at the bottom left, opposite the donate button,
   where a thumb reaches it without it dominating the page. */
@media (max-width: 999px) {
  .help-tab {
    top: auto;
    left: 0;
    bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    transform: none;
    /* under the 44px guideline, which the screen edge buys back: a thumb
       swiping in from off-screen cannot miss it sideways. */
    width: 36px; height: 52px;
    border-radius: 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md) 0;
    box-shadow: 2px 0 12px rgba(0,0,0,.22);
  }
  .help-tab:hover { width: 42px; }
  .help-tab .material-symbols-rounded { font-size: 20px; }
  .help-tab__svg { width: 18px; height: 18px; }
}