/* Generated from design/tokens.json by scripts/assets.mjs. Edit the tokens, not this. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-soft-normal.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-soft-italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2"); font-style: italic; font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: light;
  --font-display: "Fraunces", Georgia, 'Times New Roman', serif;
  --font-text: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --c-canvas: #FBF6EC;
  --c-surface: #F4ECDC;
  --c-raised: #FFFDF8;
  --c-line: #E2D6C0;
  --c-line-strong: #958670;
  --c-ink: #1B2340;
  --c-ink-soft: #323B5A;
  --c-muted: #555D74;
  --c-inverse-canvas: #1B2340;
  --c-inverse-gold: #F2B33D;
  --c-inverse-ink: #FBF6EC;
  --c-gold: #F2B33D;
  --c-gold-soft: #FBE3AE;
  --c-gold-ink: #875800;
  --c-gold-glow: rgba(242, 179, 61, 0.45);
  --c-on-gold: #1B2340;
  --c-terracotta: #D9734E;
  --c-terracotta-soft: #F6D9CB;
  --c-terracotta-ink: #A1401E;
  --c-sage: #8DAE86;
  --c-sage-soft: #DCE8D5;
  --c-sage-ink: #3F6339;
  --c-sky: #7DB3DF;
  --c-sky-soft: #D6E8F6;
  --c-sky-ink: #285E8C;
  --c-plum: #A27BAE;
  --c-plum-soft: #EADDEE;
  --c-plum-ink: #6A4378;
  --c-focus: #1B2340;
  --c-focus-ring: #F2B33D;
  --c-error: #A3341F;
  --c-error-soft: #F8DDD4;
  --c-success: #3F6339;
  --c-scrim: rgba(27, 35, 64, 0.55);
  --font-display-settings: "SOFT" 100, "WONK" 0;
  --type-display-xl-size: clamp(2.5rem, 1.6667rem + 3.7037vw, 5rem);
  --type-display-xl-line: 1.04;
  --type-display-xl-tracking: -0.02em;
  --type-display-xl-weight: 560;
  --type-display-xl-font: var(--font-display);
  --type-display-l-size: clamp(2.125rem, 1.5833rem + 2.4074vw, 3.75rem);
  --type-display-l-line: 1.08;
  --type-display-l-tracking: -0.015em;
  --type-display-l-weight: 560;
  --type-display-l-font: var(--font-display);
  --type-display-m-size: clamp(1.75rem, 1.4583rem + 1.2963vw, 2.625rem);
  --type-display-m-line: 1.14;
  --type-display-m-tracking: -0.01em;
  --type-display-m-weight: 580;
  --type-display-m-font: var(--font-display);
  --type-display-s-size: clamp(1.375rem, 1.2500rem + 0.5556vw, 1.75rem);
  --type-display-s-line: 1.22;
  --type-display-s-tracking: -0.005em;
  --type-display-s-weight: 600;
  --type-display-s-font: var(--font-display);
  --type-title-size: clamp(1.1875rem, 1.1458rem + 0.1852vw, 1.3125rem);
  --type-title-line: 1.35;
  --type-title-tracking: 0em;
  --type-title-weight: 700;
  --type-title-font: var(--font-text);
  --type-body-l-size: clamp(1.1875rem, 1.1250rem + 0.2778vw, 1.375rem);
  --type-body-l-line: 1.6;
  --type-body-l-tracking: 0em;
  --type-body-l-weight: 400;
  --type-body-l-font: var(--font-text);
  --type-body-size: clamp(1.125rem, 1.1042rem + 0.0926vw, 1.1875rem);
  --type-body-line: 1.65;
  --type-body-tracking: 0.003em;
  --type-body-weight: 400;
  --type-body-font: var(--font-text);
  --type-small-size: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
  --type-small-line: 1.55;
  --type-small-tracking: 0.005em;
  --type-small-weight: 400;
  --type-small-font: var(--font-text);
  --type-label-size: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
  --type-label-line: 1.3;
  --type-label-tracking: 0.06em;
  --type-label-weight: 700;
  --type-label-font: var(--font-text);
  --space-0: 0px;
  --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: 96px;
  --space-10: 128px;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --layout-gutter: 16px;
  --layout-gutter-wide: 40px;
  --layout-wrap: 1240px;
  --layout-narrow: 720px;
  --layout-measure: 40px;
  --layout-header: 72px;
  --layout-tap: 48px;
  --motion-duration-quick: 160ms;
  --motion-duration-base: 320ms;
  --motion-duration-slow: 640ms;
  --motion-duration-reveal: 720ms;
  --motion-ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-reveal-distance: 16px;
  --elevation-card: 0 1px 0 rgba(27, 35, 64, 0.04), 0 8px 24px -12px rgba(27, 35, 64, 0.18);
  --elevation-lift: 0 2px 0 rgba(27, 35, 64, 0.05), 0 18px 40px -16px rgba(27, 35, 64, 0.28);
  --elevation-glow: 0 0 0 6px rgba(242, 179, 61, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-canvas: #121829;
    --c-surface: #1A2137;
    --c-raised: #212A44;
    --c-line: #2F3956;
    --c-line-strong: #6D7899;
    --c-ink: #F6F0E3;
    --c-ink-soft: #E1DACB;
    --c-muted: #B3B7C7;
    --c-inverse-canvas: #F6F0E3;
    --c-inverse-gold: #875800;
    --c-inverse-ink: #121829;
    --c-gold: #F5BE4F;
    --c-gold-soft: #3A3320;
    --c-gold-ink: #F7C863;
    --c-gold-glow: rgba(245, 190, 79, 0.35);
    --c-on-gold: #121829;
    --c-terracotta: #E58A66;
    --c-terracotta-soft: #3B2724;
    --c-terracotta-ink: #F2A586;
    --c-sage: #9DBF95;
    --c-sage-soft: #24332A;
    --c-sage-ink: #B2D3AA;
    --c-sky: #8EC0E8;
    --c-sky-soft: #1F3046;
    --c-sky-ink: #A6CFF0;
    --c-plum: #BB97C6;
    --c-plum-soft: #30263A;
    --c-plum-ink: #D2B5DB;
    --c-focus: #F6F0E3;
    --c-focus-ring: #F5BE4F;
    --c-error: #F59B85;
    --c-error-soft: #3D2522;
    --c-success: #B2D3AA;
    --c-scrim: rgba(0, 0, 0, 0.66);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-canvas: #121829;
  --c-surface: #1A2137;
  --c-raised: #212A44;
  --c-line: #2F3956;
  --c-line-strong: #6D7899;
  --c-ink: #F6F0E3;
  --c-ink-soft: #E1DACB;
  --c-muted: #B3B7C7;
  --c-inverse-canvas: #F6F0E3;
  --c-inverse-gold: #875800;
  --c-inverse-ink: #121829;
  --c-gold: #F5BE4F;
  --c-gold-soft: #3A3320;
  --c-gold-ink: #F7C863;
  --c-gold-glow: rgba(245, 190, 79, 0.35);
  --c-on-gold: #121829;
  --c-terracotta: #E58A66;
  --c-terracotta-soft: #3B2724;
  --c-terracotta-ink: #F2A586;
  --c-sage: #9DBF95;
  --c-sage-soft: #24332A;
  --c-sage-ink: #B2D3AA;
  --c-sky: #8EC0E8;
  --c-sky-soft: #1F3046;
  --c-sky-ink: #A6CFF0;
  --c-plum: #BB97C6;
  --c-plum-soft: #30263A;
  --c-plum-ink: #D2B5DB;
  --c-focus: #F6F0E3;
  --c-focus-ring: #F5BE4F;
  --c-error: #F59B85;
  --c-error-soft: #3D2522;
  --c-success: #B2D3AA;
  --c-scrim: rgba(0, 0, 0, 0.66);
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration-quick: 0ms; --motion-duration-base: 0ms; --motion-duration-slow: 0ms; --motion-duration-reveal: 0ms; --motion-reveal-distance: 0px; }
}
:root[data-motion="reduce"] { --motion-duration-quick: 0ms; --motion-duration-base: 0ms; --motion-duration-slow: 0ms; --motion-duration-reveal: 0ms; --motion-reveal-distance: 0px; }

/* styles/00-base.css */
/* Base: reset, type, links, focus. Everything reads the tokens in design/tokens.json. Body text is never
   below 18px; focus is a gold ring inside an ink ring, visible on every background. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--layout-header) + var(--space-4)); }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="reduce"]) { scroll-behavior: smooth; } }
body {
  overflow-wrap: break-word; /* a word wider than its line (large text, long URLs) breaks instead of widening the page */
  margin: 0;
  min-height: 100vh;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
/* With a large text setting a single long word can be wider than a phone: break it only then. No hyphens: auto, which
   hyphenated words that fit ("mon-ey", "book-keeping" in home headings at 320px). */
/* anywhere, not break-word: break-word does not lower a heading's min-content width, so a shrink-to-fit heading (a centred
   grid, a flex row) still pushed past a 320px screen at a 200% text setting. */
h1, h2, h3, h4, .display-xl, .display-l, .display-m, .display-s { overflow-wrap: anywhere; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, .display-xl, .display-l, .display-m, .display-s {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-settings);
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--c-ink);
}
.display-xl { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-line); letter-spacing: var(--type-display-xl-tracking); font-weight: var(--type-display-xl-weight); }
h1, .display-l { font-size: var(--type-display-l-size); line-height: var(--type-display-l-line); letter-spacing: var(--type-display-l-tracking); font-weight: var(--type-display-l-weight); }
h2, .display-m { font-size: var(--type-display-m-size); line-height: var(--type-display-m-line); letter-spacing: var(--type-display-m-tracking); font-weight: var(--type-display-m-weight); }
h3, .display-s { font-size: var(--type-display-s-size); line-height: var(--type-display-s-line); letter-spacing: var(--type-display-s-tracking); font-weight: var(--type-display-s-weight); }
h1 em, h2 em, .display-xl em, .display-l em, .display-m em { font-style: italic; font-weight: 500; color: var(--c-gold-ink); }
.title { font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: var(--type-title-weight); }
.lede, .body-l { font-size: var(--type-body-l-size); line-height: var(--type-body-l-line); color: var(--c-ink-soft); }
.small, small { font-size: var(--type-small-size); line-height: var(--type-small-line); }
.label, .eyebrow { font-size: var(--type-label-size); line-height: var(--type-label-line); letter-spacing: var(--type-label-tracking); font-weight: var(--type-label-weight); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-gold-ink); margin-bottom: var(--space-4); }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 0 4px var(--c-gold-glow); }
.muted { color: var(--c-muted); }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
code { font-size: 0.92em; background: var(--c-surface); padding: 0.1em 0.35em; border-radius: var(--radius-s); }
.num, .credits-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--c-gold); transition: text-decoration-color var(--motion-duration-quick) var(--motion-ease-standard), background-color var(--motion-duration-quick); }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--c-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 7px var(--c-focus); border-radius: var(--radius-s); }
::selection { background: var(--c-gold-soft); color: var(--c-ink); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--c-ink); color: var(--c-canvas); padding: var(--space-3) var(--space-4); text-decoration: none; border-radius: var(--radius-m); font-weight: 700; }
.skip:focus { top: var(--space-3); }
hr { border: 0; border-top: 2px dashed var(--c-line); margin: var(--space-7) 0; }

/* styles/10-layout.css */
/* Layout: wrap, header, menu, footer, bands, grids. Phones first; nothing important hides behind hover. */
.wrap { width: 100%; max-width: var(--layout-wrap); margin-inline: auto; padding-inline: var(--layout-gutter); }
@media (min-width: 56.25em) { .wrap { padding-inline: var(--layout-gutter-wide); } }
.narrow { max-width: var(--layout-narrow); }
.stack > * + * { margin-top: var(--space-4); }
.stack-l > * + * { margin-top: var(--space-6); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--c-canvas) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--motion-duration-base); }
.site-header.is-scrolled { border-bottom-color: var(--c-line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: var(--layout-header); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--c-ink); flex: none; min-height: var(--layout-tap); }
.wordmark-text { font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-weight: 650; font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1; }
.wordmark-text span { font-style: italic; font-weight: 500; color: var(--c-gold-ink); }
/* With a large text setting (24px) the media queries below still see a wide screen in some browsers, so the full
   wordmark plus the actions ran about 15px past a 390px phone and pushed the menu button off it. The header's wordmark
   may shrink: "Golden Hint" then sets on two lines instead of widening the page. At normal sizes it never needs to.
   Only while the nav is folded into the menu: beside the full nav the nav must give way, never the wordmark. */
@media (max-width: 69.9375em) {
  .site-header .wordmark { flex: 0 1 auto; min-width: 0; }
  .site-header .wordmark-text { min-width: 0; }
  .site-header .header-actions { flex: none; } /* the actions keep their size; only the wordmark gives way */
}
.primary-nav { display: none; margin-inline: auto; }
.primary-nav ul { display: flex; gap: var(--space-1); }
.primary-nav a { display: inline-flex; align-items: center; min-height: var(--layout-tap); padding: 0 var(--space-3); border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; font-size: 1.0625rem; color: var(--c-ink-soft); }
/* English labels stay on one line ("Start a Charity" wrapped in two at 1440px); the longer Spanish ones still need to wrap to fit. */
html:not([lang="es"]) .primary-nav a { white-space: nowrap; }
.primary-nav a:hover { background: var(--c-surface); color: var(--c-ink); }
.primary-nav a[aria-current] { color: var(--c-ink); background: var(--c-gold-soft); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 70em) { .primary-nav { display: block; } .header-actions { margin-left: 0; } .menu-button { display: none !important; } }
/* Narrow phones: the header must fit 320px (and the longer Spanish "Unirse") without squeezing a tap target below 48px. */
.header-actions > * { flex: none; }
@media (max-width: 26.1875em) {
  .site-header .wrap { gap: var(--space-2); }
  .site-header .wordmark { gap: 6px; }
  .site-header .wordmark-text { font-size: 1.125rem; }
  .header-actions { gap: var(--space-1); }
  .header-actions .button-small { padding: 0 var(--space-3); }
}
@media (max-width: 23.375em) { .site-header .wordmark-text { font-size: 1rem; } }
/* Below 359px the wordmark is the glow alone: keep it a full 48px target (it was 40px wide). */
@media (max-width: 22.4375em) { .site-header .wordmark-text { display: none; } .site-header .wordmark { min-width: var(--layout-tap); justify-content: center; } }
/* Signed in, the member bar under the header already starts with Dashboard; phones drop the duplicate button. */
@media (max-width: 29.9375em) { .header-actions .dashboard-link { display: none; } }
.icon-button { display: inline-grid; place-items: center; width: var(--layout-tap); height: var(--layout-tap); border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--c-ink); cursor: pointer; text-decoration: none; }
.icon-button:hover { background: var(--c-surface); }
.icon-button svg { width: 24px; height: 24px; }
.search-button { display: inline-flex; align-items: center; gap: var(--space-2); width: auto; padding: 0 var(--space-3); font-weight: 700; }
.search-button kbd { display: none; font: inherit; font-size: 0.8125rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius-s); padding: 0 6px; color: var(--c-muted); }
@media (min-width: 90em) { .search-button kbd { display: inline-block; } }
.search-button .label-text { display: none; }
@media (min-width: 43.75em) { .search-button .label-text { display: inline; } }
/* Laptops and tablets in landscape: the full nav must fit beside the actions (the Spanish labels are longer, see below). */
@media (min-width: 70em) and (max-width: 89.9375em) {
  .site-header .wrap { gap: var(--space-3); }
  .primary-nav a { padding: 0 var(--space-2); }
  .search-button { width: var(--layout-tap); padding: 0; justify-content: center; }
  .search-button .label-text { display: none; }
}
/* The Spanish labels don't fit beside the actions until 1280px: keep the menu button until then. */
@media (min-width: 70em) and (max-width: 79.9375em) {
  html[lang="es"] .primary-nav { display: none; }
  html[lang="es"] .header-actions { margin-left: auto; }
  html[lang="es"] .menu-button { display: inline-grid !important; }
}
/* Spanish from 1280px: the nav labels stay on one line too ("Crear una organización" wrapped in two), so the search button is the icon alone and the labels are a little smaller until the screen is wide enough. */
@media (min-width: 80em) {
  html[lang="es"] .primary-nav a { white-space: nowrap; padding: 0 var(--space-2); font-size: 1rem; }
  html[lang="es"] .search-button { width: var(--layout-tap); padding: 0; justify-content: center; }
  html[lang="es"] .search-button .label-text, html[lang="es"] .search-button kbd { display: none; }
}
.lang-link { display: none; }
@media (min-width: 43.75em) { .lang-link { display: inline-flex; } }

/* Full-screen menu (a <dialog>; /menu without JavaScript) */
.menu-sheet { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--c-canvas); color: var(--c-ink); overflow-y: auto; }
.menu-sheet::backdrop { background: var(--c-scrim); }
.menu-sheet[open] { animation: sheet-in var(--motion-duration-base) var(--motion-ease-standard); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.menu-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--layout-header); }
.menu-body { padding-bottom: var(--space-8); }
.menu-list a { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; text-decoration: none; font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: var(--type-display-m-size); font-weight: 560; border-bottom: 1px solid var(--c-line); min-height: 64px; }
.menu-list a .spot { width: 48px; height: 48px; flex: none; }
.menu-extra { display: grid; gap: var(--space-3); margin-top: var(--space-6); }

/* Bands and sections */
.band { padding-block: var(--space-8); }
@media (min-width: 56.25em) { .band { padding-block: var(--space-9); } }
.band-tight { padding-block: var(--space-7); }
.band-surface { background: var(--c-surface); }
.band-ink { background: var(--c-inverse-canvas); color: var(--c-inverse-ink); }
.band-ink h2, .band-ink h3 { color: var(--c-inverse-ink); }
.band-ink .muted, .band-ink .lede { color: color-mix(in srgb, var(--c-inverse-ink) 82%, transparent); }
/* Gold text on the inverse surfaces (navy in the light theme, cream in the dark one) needs its own shade. */
:is(.band-ink, .site-footer, .help-cta) :is(.eyebrow, h1 em, h2 em, h3 em) { color: var(--c-inverse-gold); }
.band-gold { background: var(--c-gold-soft); }
.section-head { max-width: 46rem; margin-bottom: var(--space-6); }
.section-head p { margin-top: var(--space-3); }
.grid { display: grid; gap: var(--space-5); }
/* Grid items may shrink below their longest word or list (at large text sizes they otherwise overflow small screens). */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
@media (min-width: 56.25em) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-8); } .split-rev { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
/* A split's plain text column is a flow (eyebrow, heading, lede, note, buttons). Without spacing, the heading sat on its
   paragraph and the buttons touched the last line (home credits and Foundation bands, the credits page). */
.split > div:not([class]) > * + * { margin-top: var(--space-4); }
.split > div:not([class]) > .eyebrow + * { margin-top: 0; }
.split > div:not([class]) > .actions { margin-top: var(--space-5); }
/* The home "Start a Charity" band: the firefly is centred in its half instead of pinned to the far left. */
.split-rev > div:first-child { display: grid; justify-items: center; }
/* Beside a form (join, ask a person), the side notes start at the top instead of floating halfway down the form. */
.split:has(> .form-card) { align-items: start; }
/* Buttons after a grid of cards ("Browse the library", "All news") had no space above them. */
.wrap > :is(.grid, .board) + .actions { margin-top: var(--space-5); }

/* Page head */
.page-head { padding-block: var(--space-7) var(--space-6); }
@media (min-width: 56.25em) { .page-head { padding-block: var(--space-8) var(--space-7); } }
.page-head .lede { margin-top: var(--space-4); max-width: 40rem; }
.page-head .actions { margin-top: var(--space-5); }
.page-head .actions + .small { margin-top: var(--space-2); }
.page-head-art { display: grid; gap: var(--space-5); align-items: center; grid-template-columns: minmax(0, 1fr); }
.page-head-art > * { min-width: 0; }
.page-head-art h1 { overflow-wrap: break-word; }
@media (min-width: 50em) { .page-head-art { grid-template-columns: 1fr auto; } }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--type-small-size); color: var(--c-muted); margin-bottom: var(--space-4); padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--c-line-strong); }
.crumbs a { color: var(--c-muted); }

/* Ask a person */
.ask-band { border-top: 2px dashed var(--c-line); }
.ask-band .wrap { display: grid; gap: var(--space-4); align-items: center; padding-block: var(--space-6); }
@media (min-width: 47.5em) { .ask-band .wrap { grid-template-columns: auto 1fr auto; } }
.ask-band h2 { font-size: var(--type-display-s-size); }

/* Footer */
.site-footer { background: var(--c-inverse-canvas); color: var(--c-inverse-ink); padding-block: var(--space-8) var(--space-6); }
.site-footer a { color: var(--c-inverse-ink); text-decoration-color: color-mix(in srgb, var(--c-gold) 70%, transparent); }
.site-footer .wordmark { color: var(--c-inverse-ink); }
.site-footer .wordmark-text span { color: var(--c-inverse-gold); }
.site-footer .art .f-line, .band-ink .art .f-line { fill: var(--c-inverse-ink); }
.site-footer .art .s-line, .band-ink .art .s-line { stroke: var(--c-inverse-ink); }
.site-footer .art .f-wing, .band-ink .art .f-wing { fill: var(--c-inverse-canvas); }
.footer-grid { display: grid; gap: var(--space-7); }
@media (min-width: 56.25em) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr) 1.5fr; gap: var(--space-6); } }
.footer-grid h2 { font-family: var(--font-text); font-size: var(--type-label-size); letter-spacing: var(--type-label-tracking); font-weight: 700; color: var(--c-inverse-gold); margin-bottom: var(--space-3); }
/* Footer links are 44px tall touch targets (they were 38px); the gap goes so the lists stay the same length. */
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 0; }
.footer-grid li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 4px; text-decoration: none; font-size: var(--type-small-size); }
.footer-grid li a:hover { text-decoration: underline; }
.footer-blurb { margin-top: var(--space-4); font-size: var(--type-small-size); color: color-mix(in srgb, var(--c-inverse-ink) 82%, transparent); max-width: 22rem; }
.footer-news p { font-size: var(--type-small-size); color: color-mix(in srgb, var(--c-inverse-ink) 82%, transparent); margin-bottom: var(--space-3); }
.footer-news form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.footer-news input[type=email] { flex: 1 1 12rem; min-height: var(--layout-tap); border-radius: var(--radius-pill); border: 2px solid color-mix(in srgb, var(--c-inverse-ink) 40%, transparent); background: transparent; color: var(--c-inverse-ink); padding: 0 var(--space-4); }
.footer-base { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--c-inverse-ink) 20%, transparent); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); font-size: var(--type-small-size); }
@media (min-width: 56.25em) { .footer-base { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.endorsement { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.endorsement-rule { width: 28px; height: 2px; background: var(--c-gold); flex: none; }
.theme-switch { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.theme-switch button { min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--c-inverse-ink) 35%, transparent); background: transparent; color: var(--c-inverse-ink); cursor: pointer; font-size: var(--type-small-size); }
.theme-switch button[aria-pressed="true"] { background: var(--c-gold); color: var(--c-on-gold); border-color: var(--c-gold); }

/* styles/20-art.css */
/* Illustration colouring. Art is inline SVG with fill/stroke classes, so it follows the theme. Motion is
   decorative and never carries meaning: the moving sparks only run once client/site.js has confirmed motion
   is welcome (html.motion-ok), and the pause button stops them (WCAG 2.2.2). */
.art { overflow: visible; }
.f-line { fill: var(--c-ink); } .s-line { stroke: var(--c-ink); }
.f-paper { fill: var(--c-raised); } .s-paper { stroke: var(--c-raised); }
.f-wing { fill: var(--c-raised); opacity: 0.94; }
.f-gold { fill: var(--c-gold); } .f-gold-soft { fill: var(--c-gold-soft); } .f-gold-glow { fill: var(--c-gold-glow); }
.s-gold-ink { stroke: var(--c-gold-ink); }
.f-terracotta { fill: var(--c-terracotta); } .f-terracotta-soft { fill: var(--c-terracotta-soft); }
.f-sage { fill: var(--c-sage); } .f-sage-soft { fill: var(--c-sage-soft); }
.f-sky { fill: var(--c-sky); } .f-sky-soft { fill: var(--c-sky-soft); }
.f-plum { fill: var(--c-plum); } .f-plum-soft { fill: var(--c-plum-soft); }
:root[data-theme="dark"] .f-paper, :root[data-theme="dark"] .f-wing { fill: #2A3452; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .f-paper, :root:not([data-theme="light"]) .f-wing { fill: #2A3452; } }
.ff-halo { fill: var(--c-gold-glow); }

/* Glow breathes and bobs, gently. */
.motion-ok .ff-halo { animation: halo 3.2s var(--motion-ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
.motion-ok .ff-bob { animation: bob 4.8s var(--motion-ease-in-out) infinite; }
.motion-ok .glow-flyer { animation: fly 9s var(--motion-ease-in-out) infinite; }
@keyframes halo { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fly { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-18px, 10px); } 65% { transform: translate(16px, -6px); } }

.spark-moving { display: none; }
.motion-ok .spark-moving { display: inline; }
.motion-ok .spark-resting { display: none; }
.motion-paused .spark-moving { display: none; }
.motion-paused .spark-resting { display: inline; }
.motion-paused .ff-halo, .motion-paused .ff-bob, .motion-paused .glow-flyer { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .spark-moving { display: none !important; }
  .spark-resting { display: inline !important; }
  .ff-halo, .ff-bob, .glow-flyer { animation: none !important; }
}

.town { width: 100%; height: auto; }
.spot { flex: none; }
.spark { display: inline-block; vertical-align: -0.15em; }

/* styles/30-components.css */
/* Components: buttons, cards, chips, forms, callouts, the credit badge. Tap targets are at least 48px. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 2px solid var(--c-ink); background: var(--c-raised); color: var(--c-ink); font-weight: 700; font-size: 1.0625rem; text-decoration: none; cursor: pointer; transition: transform var(--motion-duration-quick) var(--motion-ease-spring), box-shadow var(--motion-duration-quick), background-color var(--motion-duration-quick); }
.button:hover { transform: translateY(-2px); box-shadow: var(--elevation-card); }
.button:active { transform: translateY(0); }
.button-gold { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-on-gold); box-shadow: 0 4px 0 color-mix(in srgb, var(--c-gold-ink) 60%, var(--c-gold)); }
.button-gold:hover { box-shadow: 0 6px 0 color-mix(in srgb, var(--c-gold-ink) 60%, var(--c-gold)), 0 0 0 6px var(--c-gold-glow); }
.button-quiet { border-color: transparent; background: transparent; text-decoration: underline; text-decoration-color: var(--c-gold); text-decoration-thickness: 2px; text-underline-offset: 0.25em; padding-inline: var(--space-2); }
.button-quiet:hover { box-shadow: none; }
.button-small { min-height: var(--layout-tap); padding: 0 var(--space-4); font-size: 1rem; }
.band-ink .button { background: transparent; color: var(--c-inverse-ink); border-color: var(--c-inverse-ink); }
.band-ink .button-gold { background: var(--c-gold); color: var(--c-on-gold); border-color: var(--c-gold); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.arrow::after { content: "→"; display: inline-block; transition: transform var(--motion-duration-quick) var(--motion-ease-standard); }
a:hover .arrow::after, .arrow:hover::after { transform: translateX(3px); }

.card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--c-raised); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--elevation-card); }
.card h3 { font-size: var(--type-display-s-size); }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(h3 a):hover { box-shadow: var(--elevation-lift); transform: translateY(-2px); }
.card:has(h3 a) { transition: transform var(--motion-duration-quick) var(--motion-ease-standard), box-shadow var(--motion-duration-quick); }
.card:focus-within { box-shadow: var(--elevation-lift); }
.card .meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--type-small-size); color: var(--c-muted); }
.card-featured { border: 2px solid var(--c-gold); box-shadow: var(--elevation-card), 0 0 0 6px var(--c-gold-glow); }
.card-plain { box-shadow: none; background: transparent; }

.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px var(--space-3); border-radius: var(--radius-pill); font-size: 0.9375rem; font-weight: 700; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); }
.chip-terracotta { background: var(--c-terracotta-soft); color: var(--c-terracotta-ink); border-color: transparent; }
.chip-sage { background: var(--c-sage-soft); color: var(--c-sage-ink); border-color: transparent; }
.chip-sky { background: var(--c-sky-soft); color: var(--c-sky-ink); border-color: transparent; }
.chip-plum { background: var(--c-plum-soft); color: var(--c-plum-ink); border-color: transparent; }
.chip-gold { background: var(--c-gold-soft); color: var(--c-gold-ink); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
a.chip { text-decoration: none; min-height: var(--layout-tap); }
a.chip:hover, a.chip[aria-current] { border-color: var(--c-ink); }
a.chip[aria-current] { background: var(--c-ink); color: var(--c-canvas); }

/* The credit badge: the spark and a tabular number, gold */
/* Kept on one line while it fits; at a 200% text setting in a two-column figure it wraps rather than overflowing. */
.credit { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 4px; font-weight: 700; color: var(--c-gold-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.credit-big { font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: var(--type-display-l-size); color: var(--c-ink); gap: var(--space-2); }

/* Forms */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field > label, .field > .field-label, fieldset legend { font-weight: 700; }
.field .help { font-size: var(--type-small-size); color: var(--c-muted); }
input:not([type]), input[type=text], input[type=email], input[type=search], input[type=number], input[type=password], input[type=url], input[type=date], input[type=datetime-local], input[type=time], input[type=tel], select, textarea {
  width: 100%; min-height: 52px; padding: 10px var(--space-4); border: 2px solid var(--c-line-strong); border-radius: var(--radius-m); background: var(--c-raised); color: var(--c-ink); font-size: 1.125rem;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
/* WebKit draws a native select at a fixed ~31px whatever its min-height (found at 390px, Playwright WebKit): drop
   the native face so every engine gets the 52px field, with a CSS-only chevron (no image, nothing for the CSP). */
select { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
/* A long chosen option ("Ningún estado (solo fechas federales)" on the Spanish compliance calendar) drew past the
   select and widened a 320px page by 14px: the select clips its own text. */
select { overflow: hidden; text-overflow: ellipsis; }
select[multiple] { padding-right: var(--space-4); background-image: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--c-ink); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--c-error); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
/* A legend sizes to its text: at a 200% text size one long word (restablecimiento) pushed it past a 320px screen. */
legend { max-width: 100%; overflow-wrap: anywhere; }
.choice-list { display: grid; gap: var(--space-2); }
.choice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); min-height: var(--layout-tap); border: 2px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); cursor: pointer; }
.choice:hover { border-color: var(--c-line-strong); }
.choice:has(input:checked) { border-color: var(--c-gold-ink); background: var(--c-gold-soft); }
.choice input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--c-ink); }
.choice small { display: block; color: var(--c-muted); }
/* Radios drawn by the site: Safari's unchecked radio was a faint grey ring on the cream cards (31 questions on the
   1023-EZ checker). An ink ring, an ink dot when chosen; the focus ring stays round. High-contrast modes get the
   system control back. */
.choice input[type=radio] { -webkit-appearance: none; appearance: none; display: grid; place-items: center; border: 2px solid var(--c-ink-soft); border-radius: 50%; background: var(--c-raised); cursor: pointer; }
.choice input[type=radio]:checked { border-color: var(--c-ink); }
.choice input[type=radio]:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-ink); }
.choice input[type=radio]:focus-visible { border-radius: 50%; }
@media (forced-colors: active) { .choice input[type=radio] { -webkit-appearance: auto; appearance: auto; } .choice input[type=radio]::after { content: none; } }
.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 44px; } /* the whole label ticks the box: a 44px target */
.check input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--c-ink); }
/* Centre the control on the first line of its label (it sat about 4px high beside the 1.65 line height). */
@supports (margin-top: 1lh) { .choice input { margin-top: max(0px, calc((1lh - 22px) / 2)); } .check input { margin-top: max(0px, calc((1lh - 22px) / 2)); } }
.alert { padding: var(--space-4); border-radius: var(--radius-m); background: var(--c-error-soft); color: var(--c-error); font-weight: 700; border-left: 6px solid var(--c-error); }
.fine { font-size: var(--type-small-size); color: var(--c-muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-card { padding: var(--space-6) var(--space-5); background: var(--c-raised); border-radius: var(--radius-xl); border: 1px solid var(--c-line); box-shadow: var(--elevation-lift); }
@media (min-width: 43.75em) { .form-card { padding: var(--space-7); } }

/* Callouts: golden hints, cautions, official sources */
.callout { position: relative; margin-block: var(--space-6); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-5); border-radius: var(--radius-l); background: var(--c-surface); }
.callout > * + * { margin-top: var(--space-3); }
.callout-label { font-size: var(--type-label-size); font-weight: 700; letter-spacing: var(--type-label-tracking); }
.callout-hint { background: var(--c-gold-soft); border: 2px solid color-mix(in srgb, var(--c-gold) 60%, transparent); padding-left: calc(var(--space-5) + 40px); }
.callout-hint .callout-label { color: var(--c-gold-ink); }
/* The spark is the first child, so the label got the 12px gap meant between paragraphs and sat below the spark. */
.callout > .hint-spark + * { margin-top: 0; }
.hint-spark { position: absolute; left: var(--space-4); top: var(--space-5); width: 28px; height: 28px; background: var(--c-gold); clip-path: path("M14 0 C15 8 18 11.5 28 14 C18 16.5 15 20 14 28 C13 20 10 16.5 0 14 C10 11.5 13 8 14 0 Z"); box-shadow: 0 0 0 6px var(--c-gold-glow); }
.callout-caution { background: var(--c-terracotta-soft); }
.callout-caution .callout-label { color: var(--c-terracotta-ink); }
.callout-official { background: var(--c-sky-soft); }
.callout-official .callout-label { color: var(--c-sky-ink); }
.callout-note { background: var(--c-plum-soft); margin-block: 0 var(--space-6); }
.callout ul { padding-left: 1.2em; }

/* Checklist (ticks saved in the browser by client/site.js) */
.checklist { display: grid; gap: var(--space-2); margin-block: var(--space-4); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); background: var(--c-raised); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.checklist input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; flex: none; margin: 1px 0 0; border: 2px solid var(--c-ink); border-radius: 8px; background: var(--c-raised); cursor: pointer; display: grid; place-items: center; transition: background-color var(--motion-duration-quick); }
.checklist input:checked { background: var(--c-gold); border-color: var(--c-gold-ink); }
.checklist input:checked::after { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--c-on-gold); border-bottom: 3px solid var(--c-on-gold); transform: rotate(-45deg) translate(1px, -1px); }
/* The label (which ticks the box) fills the row, card padding included: a 44px+ target for a one-line item beside the
   26px box. */
.checklist label { cursor: pointer; min-width: 0; overflow-wrap: break-word; flex: 1 1 auto; margin-block: calc(-1 * var(--space-3)); padding-block: var(--space-3); }
.checklist { grid-template-columns: minmax(0, 1fr); }
.checklist li:has(input:checked) label { color: var(--c-muted); text-decoration: line-through; text-decoration-color: var(--c-gold); }
.motion-ok .checklist input:checked { animation: tick var(--motion-duration-base) var(--motion-ease-spring); }
@keyframes tick { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); box-shadow: 0 0 0 8px var(--c-gold-glow); } 100% { transform: scale(1); } }
.progress { height: 12px; border-radius: var(--radius-pill); background: var(--c-surface); border: 1px solid var(--c-line); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--c-gold); border-radius: inherit; transition: width var(--motion-duration-slow) var(--motion-ease-standard); }

/* Empty states */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); border: 2px dashed var(--c-line); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--c-raised) 60%, transparent); }
.empty p { max-width: 32rem; color: var(--c-muted); }

/* Search dialog */
.search-sheet { width: min(100% - 32px, 44rem); max-height: min(80vh, 40rem); margin: 10vh auto auto; padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--c-raised); color: var(--c-ink); box-shadow: var(--elevation-lift); }
.search-sheet::backdrop { background: var(--c-scrim); }
/* The results take whatever height the form leaves (at 200% text the form is taller than the old fixed 90px, so the
   list overflowed the dialog and the two scrolled inside each other). dvh: the visible height on phones. */
.search-sheet[open] { display: flex; flex-direction: column; overflow: hidden; }
@supports (height: 100dvh) { .search-sheet { max-height: min(80dvh, 40rem); } }
.search-sheet form { flex: none; }
.search-sheet .search-results { flex: 1 1 auto; min-height: 0; max-height: none; }
.search-sheet form { display: flex; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--c-line); }
.search-results { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; max-height: calc(min(80vh, 40rem) - 90px); }
.search-results a { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: var(--c-gold-soft); }
.search-results .r-label { font-size: var(--type-label-size); font-weight: 700; color: var(--c-gold-ink); }
.search-results .r-title { display: block; font-weight: 700; }
.search-results .r-none { padding: var(--space-3) var(--space-4); color: var(--c-muted); font-weight: 700; }
.search-results .r-sum { display: block; font-size: var(--type-small-size); color: var(--c-muted); }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; margin-block: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); }
table { width: 100%; border-collapse: collapse; font-size: var(--type-small-size); }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-line); vertical-align: top; }
thead th { background: var(--c-surface); font-weight: 700; }
tbody th { font-weight: 700; }
tr:last-child > * { border-bottom: 0; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: var(--space-5); list-style: none; padding: 0; }
@media (min-width: 56.25em) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: grid; gap: var(--space-3); align-content: start; }
.step-num { font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: 1.25rem; font-weight: 700; color: var(--c-gold-ink); }
/* Three across, the step titles line up and so do the paragraphs under them ("Spend them on what you need" takes two lines). */
@media (min-width: 56.25em) { .steps .step h3 { min-height: calc(2em * var(--type-display-s-line)); } }

/* Pause button for decorative motion */
.motion-toggle { display: none; }
.motion-ok .motion-toggle, .motion-paused .motion-toggle { display: inline-flex; }

/* styles/40-pages.css */
/* Page-specific layouts: the home hero, audience selector, exchange cards, credits explainer, pathway. */
.hero { padding-block: var(--space-6) var(--space-7); position: relative; }
@media (min-width: 56.25em) { .hero { padding-block: var(--space-8) var(--space-9); min-height: calc(100vh - var(--layout-header)); display: grid; align-items: center; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
@media (min-width: 60em) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-7); } }
.hero h1 { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-line); letter-spacing: var(--type-display-xl-tracking); }
.hero .lede { margin-top: var(--space-5); max-width: 34rem; }
.hero .actions { margin-top: var(--space-6); }
.hero-art { position: relative; }
.hero-art .motion-toggle { position: absolute; right: 0; bottom: -8px; }
.hero-note { margin-top: var(--space-5); font-size: var(--type-small-size); color: var(--c-muted); display: flex; gap: var(--space-2); align-items: center; }

/* Who are you? */
/* minmax(0, 1fr) on the one-column phone grids: an auto column grows to its longest word, which at a 200% text
   setting is wider than a 320-390px phone. */
.who { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 43.75em) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68.75em) { .who { grid-template-columns: repeat(5, 1fr); } }
.who a { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); min-height: 88px; background: var(--c-raised); border: 2px solid var(--c-line); border-radius: var(--radius-l); text-decoration: none; font-weight: 700; line-height: 1.3; transition: border-color var(--motion-duration-quick), transform var(--motion-duration-quick) var(--motion-ease-spring); }
.who a > * { min-width: 0; }
/* Every audience card is as tall as the tallest in its row (a short "Just curious" stood shorter than the rest). */
.who > li { display: flex; } .who > li > a { flex: 1; }
@media (min-width: 68.75em) { .who a { flex-direction: column; align-items: flex-start; } }
.who a:hover { border-color: var(--c-ink); transform: translateY(-3px); }
.who .spot { width: 56px; height: 56px; }
.who small { display: block; font-weight: 400; color: var(--c-muted); font-size: 0.9375rem; margin-top: 2px; }

/* Exchange cards (a noticeboard) */
.board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 47.5em) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68.75em) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A board inside half a grid (the area pages, /exchange/marketing and others) went three across in 568px, so each
   listing title got 130px and split "communic ations". There the board fills its column as wide as the cards allow. */
.grid > * > .board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.grid > * > * + .board { margin-top: var(--space-5); } /* the pins sat on the heading above */
.listing { position: relative; padding: var(--space-5); border-radius: var(--radius-l); background: var(--c-raised); border: 1px solid var(--c-line); box-shadow: var(--elevation-card); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-content: start; }
.listing:nth-child(3n+1) { transform: rotate(-0.4deg); } .listing:nth-child(3n+2) { transform: rotate(0.35deg); }
.listing::before { content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--c-terracotta); box-shadow: inset -3px -3px 0 rgba(0,0,0,0.15); }
.listing.offer::before { background: var(--c-sage); }
.listing.featured { border: 2px solid var(--c-gold); }
.listing.featured::before { background: var(--c-gold); }
.listing .kind { font-size: var(--type-label-size); font-weight: 700; letter-spacing: var(--type-label-tracking); }
.listing.offer .kind { color: var(--c-sage-ink); } .listing.request .kind { color: var(--c-terracotta-ink); }
.listing h3 { font-family: var(--font-text); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: 700; }
.listing .who-line { display: flex; gap: var(--space-3); align-items: center; min-width: 0; font-size: var(--type-small-size); color: var(--c-muted); }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; }
.listing dl { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--type-small-size); }
.listing dl div { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .listing .who-line > * { min-width: 0; } .listing dt { color: var(--c-muted); } .listing dd { font-weight: 700; }
.sample-note { font-size: var(--type-small-size); color: var(--c-muted); font-style: italic; }
/* The home noticeboard: the note sits just under the cards, then a clear break before "Thirteen kinds of help". */
.board + .sample-note { margin-top: var(--space-3); }
.sample-note + .title { margin-top: var(--space-6); }
.wrap > .title + .chips { margin-top: var(--space-3); }

/* Credits */
.credit-flow { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5); background: var(--c-raised); border-radius: var(--radius-xl); border: 1px solid var(--c-line); }
/* The example ledger: balances right-aligned in even figures so they read down a column. */
.credit-flow thead th:nth-child(n+3), .credit-flow td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* /exchange: "Why the board is quiet" sits close to the board it explains (two band paddings stacked to about 100px). */
.band-tight[aria-labelledby="ex-quiet"] { padding-bottom: 0; }
/* The drawing ends about 60 units above the bottom of its 380-unit canvas, and at full width it stood about 530px tall
   with a band of empty space before the ledger. Capped and centred, and the empty strip pulled up (5% of the width is
   40 units, clear of the lowest moving spark). */
.flow-svg { width: 100%; max-width: 56rem; height: auto; margin-inline: auto; margin-bottom: -5%; }
.flow-svg text { font-family: var(--font-text); font-size: 15px; font-weight: 700; fill: var(--c-ink); }
.flow-svg .t-muted { font-weight: 400; fill: var(--c-muted); font-size: 13px; }
.flow-steps { display: grid; gap: var(--space-3); counter-reset: f; list-style: none; padding: 0; }
@media (min-width: 56.25em) { .flow-steps { grid-template-columns: repeat(3, 1fr); } }
.flow-steps li { padding: var(--space-4); border-radius: var(--radius-m); background: var(--c-surface); border: 2px solid transparent; }
.flow-steps li[aria-current="step"] { border-color: var(--c-gold); background: var(--c-gold-soft); }
.wallet { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-l); background: var(--c-raised); border: 1px solid var(--c-line); }
.wallet-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 43.75em) { .wallet-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wallet-figs div { padding: var(--space-3); border-radius: var(--radius-m); background: var(--c-surface); }
.wallet-figs dt { font-size: var(--type-small-size); color: var(--c-muted); }
.wallet-figs dd { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Beside text in a split (the credits page's "Getting started"), four across left each figure about 100px: "Welcome
   grant" wrapped and the spark sat on its own line above "0.5-20". Two across there; on a surface band the tiles are
   raised so they don't vanish into the band. */
.split > .wallet-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band-surface .wallet-figs div { background: var(--c-raised); border: 1px solid var(--c-line); }
.rule-list { display: grid; gap: var(--space-3); list-style: none; padding: 0; }
.rule-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); border-radius: var(--radius-m); background: var(--c-raised); border: 1px solid var(--c-line); }
.rule-val { min-width: 4.5rem; text-align: center; padding: 4px var(--space-2); border-radius: var(--radius-pill); background: var(--c-gold-soft); color: var(--c-gold-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.no-cash { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-l); border: 3px solid var(--c-ink); background: var(--c-raised); }
.no-cash strong { font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: var(--type-display-s-size); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { cursor: pointer; padding: var(--space-4) 0; font-weight: 700; font-size: var(--type-title-size); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); min-height: var(--layout-tap); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--c-gold-ink); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: var(--space-5); max-width: 44rem; }
.faq details > div > * + * { margin-top: var(--space-3); }

/* Founder pathway */
.path { display: grid; gap: var(--space-3); list-style: none; padding: 0; counter-reset: stage; }
.path li a { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border-radius: var(--radius-l); background: var(--c-raised); border: 2px solid var(--c-line); text-decoration: none; min-height: 88px; }
.path li a:hover { border-color: var(--c-ink); }
.path .stage-num { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-weight: 700; font-size: 1.375rem; background: var(--c-surface); border: 2px solid var(--c-line-strong); }
.path li.is-done .stage-num { background: var(--c-gold); border-color: var(--c-gold-ink); color: var(--c-on-gold); }
.path li.is-here a { border-color: var(--c-gold-ink); box-shadow: 0 0 0 6px var(--c-gold-glow); }
.path .stage-title { font-weight: 800; font-size: var(--type-title-size); display: block; }
.path .stage-sub { color: var(--c-muted); font-size: var(--type-small-size); display: block; }
.path .stage-progress { font-size: var(--type-small-size); color: var(--c-gold-ink); font-weight: 700; white-space: nowrap; }
/* Phones: the date (Trust Centre) goes under the text instead of squeezing it past the screen edge. */
@media (max-width: 37.4375em) { .path li a { grid-template-columns: 56px minmax(0, 1fr) auto; } .path .stage-progress { grid-column: 2 / -1; } .path .stage-progress:empty { display: none; } }
.stage-facts { display: grid; gap: var(--space-3); margin-top: var(--space-5); } /* it sat flush against the summary box */
@media (min-width: 43.75em) { .stage-facts { grid-template-columns: repeat(3, 1fr); } }
.stage-facts > div { padding: var(--space-4); border-radius: var(--radius-m); background: var(--c-surface); }
.stage-facts dt { font-size: var(--type-label-size); font-weight: 700; color: var(--c-gold-ink); letter-spacing: var(--type-label-tracking); }
.stage-facts dd { margin-top: var(--space-1); }
.stage-nav { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
@media (min-width: 43.75em) { .stage-nav { grid-template-columns: 1fr 1fr; } }
.stage-nav a { display: block; padding: var(--space-4) var(--space-5); border-radius: var(--radius-l); border: 2px solid var(--c-line); text-decoration: none; background: var(--c-raised); }
.stage-nav a:hover { border-color: var(--c-ink); }
.stage-nav .next { text-align: right; }
.stage-nav small { display: block; color: var(--c-muted); }
.help-cta { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--c-inverse-canvas); color: var(--c-inverse-ink); margin-top: var(--space-7); }
.help-cta h2 { color: var(--c-inverse-ink); font-size: var(--type-display-s-size); }
.help-cta p { color: color-mix(in srgb, var(--c-inverse-ink) 85%, transparent); }
@media (min-width: 47.5em) { .help-cta { grid-template-columns: auto 1fr auto; padding: var(--space-6); } }
.help-cta .f-line { fill: var(--c-inverse-ink); } .help-cta .s-line { stroke: var(--c-inverse-ink); }

/* Tools */
.tool { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); overflow-wrap: break-word; }
/* Fieldsets default to min-inline-size: min-content, so long labels at large text sizes would widen the page. */
.tool fieldset, .tool .form, .tool .result { min-width: 0; }
/* At large text sizes a field's label or input mustn't widen the form's single column past the screen. */
.tool .form { grid-template-columns: minmax(0, 1fr); }
.tool .form > *, .tool .field, .tool .choice, .tool .choice > span { min-width: 0; }
.tool .field { grid-template-columns: minmax(0, 1fr); }
.tool input, .tool select, .tool textarea { max-width: 100%; }
.tool .actions > .button { min-width: 0; max-width: 100%; white-space: normal; text-align: center; }
/* The result sticks beside the form, but most results (a 1023-EZ answer, a calendar, a receipt, a board plan) are taller
   than the window: stuck at the top, their lower half stayed out of reach until the form ran out. Capped to the
   window, a long result scrolls inside itself while it sticks. */
@media (min-width: 62.5em) { .tool-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .tool-2col .result { position: sticky; top: calc(var(--layout-header) + var(--space-4)); max-height: calc(100vh - var(--layout-header) - var(--space-4) * 2); overflow-y: auto; overscroll-behavior: contain; } }
.result { padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); background: var(--c-gold-soft); border: 2px solid color-mix(in srgb, var(--c-gold) 70%, transparent); }
.result > * + * { margin-top: var(--space-3); }
/* "Why we suggested this" and other disclosures in a result: a 44px target (it was a 29px line). */
.result details > summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.result h2 { font-size: var(--type-display-s-size); }
.field-error { color: var(--c-error); font-weight: 700; font-size: var(--type-small-size); }
.tool #errors ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.tool #errors a { color: inherit; }
.tool #errors:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.receipt-text { min-height: 18rem; font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--c-raised); }
.receipt-check { display: grid; gap: var(--space-2); padding-left: var(--space-5); }
[data-copy][hidden] { display: none; }
.budget-table input { min-height: 44px; padding: 6px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.budget-table td:last-child, .budget-table th:last-child { width: 9rem; }
.total-row th, .total-row td { font-weight: 800; background: var(--c-surface); }
.more-states, .state-group { border: 2px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); }
.more-states > summary, .state-group > summary { cursor: pointer; font-weight: 700; min-height: var(--layout-tap); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); }
.more-states > fieldset { padding: 0 var(--space-4) var(--space-4); }
.state-group { border-width: 1px; background: var(--c-surface); }
.state-grid { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.cal-export { margin-block: var(--space-3) var(--space-4); }
.cal-export p { margin-top: var(--space-2); }
.cal { display: grid; gap: var(--space-3); list-style: none; padding: 0; }
.cal li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-m); background: var(--c-raised); border: 1px solid var(--c-line); }
.cal li > div { min-width: 0; overflow-wrap: break-word; }
.cal .when { font-weight: 800; color: var(--c-gold-ink); line-height: 1.2; }
/* Phones: a narrow date column, so the explanation gets the width. */
@media (max-width: 29.9375em) { .cal li { grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); } }
/* Large text on a phone (under 20em wide): the date goes above the explanation. */
@media (max-width: 19.9375em) { .cal li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .cal .when b { display: inline; margin-right: 0.25em; } }
.cal .chip { max-width: 100%; overflow-wrap: anywhere; }
.cal .when b { display: block; font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: 1.75rem; color: var(--c-ink); }
.score-bars { display: grid; gap: var(--space-3); }
.score-bars div { display: grid; gap: 4px; }
.bar { height: 14px; border-radius: var(--radius-pill); background: var(--c-raised); overflow: hidden; border: 1px solid var(--c-line); }
.bar > span { display: block; height: 100%; background: var(--c-gold); }
.bar > .w0 { width: 4%; } .bar > .w1 { width: 12%; } .bar > .w2 { width: 22%; } .bar > .w3 { width: 32%; } .bar > .w4 { width: 42%; } .bar > .w5 { width: 52%; } .bar > .w6 { width: 62%; } .bar > .w7 { width: 72%; } .bar > .w8 { width: 82%; } .bar > .w9 { width: 92%; } .bar > .w10 { width: 100%; }

/* Form 1023-EZ eligibility checker */
.ez-section { display: grid; gap: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--c-line); }
.ez-q legend { font-weight: 700; }
.yn { grid-template-columns: 1fr 1fr; }

/* Resources library */
.lib-layout { display: grid; gap: var(--space-6); }
@media (min-width: 62.5em) { .lib-layout { grid-template-columns: 17rem 1fr; } }
.filters { display: grid; gap: var(--space-5); align-content: start; }
.filters fieldset { gap: var(--space-2); }
.filters legend { margin-bottom: var(--space-2); }
.filters .choice { padding: var(--space-2) var(--space-3); min-height: 44px; }
.filter-toggle { display: block; }
.filter-toggle summary { cursor: pointer; font-weight: 700; min-height: var(--layout-tap); display: flex; align-items: center; }
/* On a wide screen the filters fill the left column. The summary used to be hidden there even when the details was
   closed (as it is unless two filters are set), so the column was empty and the filters unreachable. Now site.js opens
   it on wide screens and the summary hides only once it's open; without the script the summary stays as the way in. */
@media (min-width: 62.5em) { .filter-toggle[open] summary { display: none; } }
.resource-card .spot { width: 48px; height: 48px; }
.resource-card .top { display: flex; gap: var(--space-3); align-items: center; }
/* A narrow card (four across: the home library, the founder tools on /start and /start/tools, the thirteen areas on
   /exchange) left a title beside its icon about 150px, and it split mid-word ("Fundraisin g", "recruitmen t",
   "Complianc e"). The card is a size container, so wherever it is narrow the icon sits above the title and the title
   steps down to the small display size; wide or single-column cards keep the icon beside it. */
.resource-card { container-type: inline-size; }
/* Home library on a phone: eight one-column cards ran about 1,400px. Two across, with the title alone (each area's
   description is on the library page it links to); with large text the rem minimum drops it back to one column. */
@media (max-width: 37.4375em) {
  .grid-4:has(> .resource-card) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-3); }
  .grid-4 > .resource-card { padding: var(--space-4); }
  .grid-4 > .resource-card > .small { display: none; }
  .grid-4 > .resource-card .top > h3 { font-size: 1.1875rem; }
}
/* One across (320px, or large text) the icon stays beside the title; only a two-across tile stacks it. */
@container (min-width: 12.0625rem) and (max-width: 21rem) {
  @media (max-width: 37.4375em) { .grid-4 > .resource-card .top:has(> h3) { flex-direction: row; align-items: center; gap: var(--space-3); } }
}
/* The same for plain cards in a grid (the guide cards four across on the area pages split "communications:" at 28px). */
.grid > .card:not(.resource-card) { container-type: inline-size; }
@container (max-width: 21rem) { .grid > .card:not(.resource-card) h3 { font-size: 1.375rem; } }
@container (max-width: 21rem) {
  .resource-card .top:has(> h2, > h3) { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .resource-card .top > h2, .resource-card .top > h3 { font-size: 1.375rem; }
}
.resource-card .top > * { min-width: 0; } /* the title and label wrap beside the icon instead of pushing past the card */
.glossary dl { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.glossary dt, .glossary dd { min-width: 0; overflow-wrap: break-word; }
.glossary dt { font-weight: 800; font-size: var(--type-title-size); padding-top: var(--space-5); scroll-margin-top: calc(var(--layout-header) + var(--space-4)); }
.glossary dd { padding-bottom: var(--space-5); border-bottom: 1px solid var(--c-line); max-width: 44rem; }
.glossary dd > * + * { margin-top: var(--space-2); }
.alpha { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; position: sticky; top: var(--layout-header); background: var(--c-canvas); padding-block: var(--space-2); z-index: 5; }
.alpha a { display: grid; place-items: center; min-width: 40px; min-height: 40px; border-radius: var(--radius-s); text-decoration: none; font-weight: 700; }
.alpha a:hover { background: var(--c-gold-soft); }
.glossary [hidden] { display: none; }
.glossary-filter { max-width: 32rem; margin-block: var(--space-4) var(--space-2); }
.glossary-filter input { min-height: 48px; }
.glossary-empty { margin-block: var(--space-5); }
.dir-entry { padding: var(--space-4) 0; border-bottom: 1px solid var(--c-line); display: grid; gap: var(--space-1); }
.dir-entry h3 { font-family: var(--font-text); font-size: var(--type-title-size); font-weight: 700; }
/* The name is the entry's link (state guides, the directory): a 44px target, not a 25px line of text. */
.dir-entry h3 a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
/* State guides: one fact per row, label above on phones, beside from 40em */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); }
.facts dd, .facts dt { min-width: 0; overflow-wrap: anywhere; }
.facts > div { grid-template-columns: minmax(0, 1fr); display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--c-line); }
.facts dt { font-weight: 700; }
.facts dd > * + * { margin-top: var(--space-1); }
@media (min-width: 40em) { .facts > div { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-4); } }

/* News */
.lead-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); background: var(--c-raised); border: 1px solid var(--c-line); }
@media (min-width: 56.25em) { .lead-story { grid-template-columns: 1.2fr 1fr; padding: var(--space-7); align-items: center; } }
.lead-story h2 { font-size: var(--type-display-l-size); line-height: var(--type-display-l-line); }

/* About and Foundation */
.memorial { text-align: center; max-width: 40rem; margin-inline: auto; }
.memorial .portrait { width: 180px; height: 220px; margin: 0 auto var(--space-5); border-radius: 90px 90px var(--radius-l) var(--radius-l); background: var(--c-surface); border: 2px solid var(--c-line); display: grid; place-items: center; color: var(--c-muted); font-size: var(--type-small-size); padding: var(--space-4); }
.values { display: grid; gap: var(--space-4); list-style: none; padding: 0; }
@media (min-width: 50em) { .values { grid-template-columns: repeat(3, 1fr); } }
.values li { padding: var(--space-5); border-top: 3px solid var(--c-gold); }
.values strong { display: block; font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: var(--type-display-s-size); margin-bottom: var(--space-2); }

/* Thank-you and 404 */
.center-page { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--space-4); padding-block: var(--space-8); }
.center-page p { max-width: 34rem; }
.nf-suggest { width: 100%; max-width: 40rem; text-align: left; margin-block: var(--space-4); }
.nf-suggest h2 { text-align: center; margin-bottom: var(--space-3); }
.nf-suggest .search-results, .keep-going .search-results { max-height: none; overflow: visible; padding: 0; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); }
.split .values { grid-template-columns: 1fr; }
.article-layout .help-cta { grid-template-columns: 1fr; }
@media (max-width: 49.9375em) { .head-art .art, .page-head-art > .art { width: 96px; height: 96px; } }
.keep-going { margin-block: var(--space-6); }
.keep-going .search-results li + li { border-top: 1px solid var(--c-line); }

/* "Was this page useful?" (src/pages/feedback.tsx) */
.page-feedback { margin-block: var(--space-6); padding: var(--space-4) var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); display: grid; gap: var(--space-3); }
.page-feedback [hidden] { display: none; }
.page-feedback .actions { gap: var(--space-3); }
.page-feedback .actions .button { min-width: 5rem; }
.page-feedback fieldset { gap: var(--space-2); }

/* Exchange help menu (/exchange/menu) */
.menu-item .title { font-size: var(--type-title-size); }
.menu-item { min-width: 0; overflow-wrap: anywhere; }
.menu-facts > div, .menu-facts dd { min-width: 0; }
.menu-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.menu-facts { display: grid; gap: var(--space-3); margin: 0; }
.menu-facts dt { font-weight: 700; font-size: var(--type-small-size); }
.menu-facts dd { margin: 0; color: var(--c-ink-soft); }
.menu-use { margin-top: auto; }
.cal-subscribe { margin-top: var(--space-3); }
.cal-subscribe summary { cursor: pointer; font-weight: 700; min-height: var(--layout-tap); display: flex; align-items: center; }
.cal-subscribe ul { margin-block: var(--space-2); padding-left: 1.25em; display: grid; gap: var(--space-2); }

/* "What changed" under the review date (WhatChanged, src/pages/article.tsx) */
.what-changed { margin-block: var(--space-2) var(--space-3); max-width: 44rem; }
.what-changed summary { cursor: pointer; font-weight: 700; min-height: var(--layout-tap); display: inline-flex; align-items: center; gap: var(--space-2); }
.what-changed summary::before { content: ""; width: 0; height: 0; border-block: 0.35em solid transparent; border-inline-start: 0.5em solid currentColor; transition: transform var(--motion-duration-quick); }
.what-changed[open] summary::before { transform: rotate(90deg); }
.what-changed summary::-webkit-details-marker { display: none; }
.what-changed ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.what-changed li { min-width: 0; overflow-wrap: break-word; }

/* "Get help with a step" on pathway stages (StageAsks, src/pages/start.tsx) */
.stage-asks { margin-block: var(--space-6); }
.stage-ask-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.stage-ask-list li { padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-raised); min-width: 0; overflow-wrap: break-word; }
.stage-ask-list li > p { margin: 0; }
.stage-ask-list li > p + p { margin-top: var(--space-1); }
.stage-ask-list a[data-ga] { font-weight: 700; display: inline-block; padding-block: 0.6rem; }

/* styles/45-states.css */
/* State guides hub (/resources/states, src/pages/state-map.tsx): the tile map, the "find your state" form and the
   cards under them. Tiles are placed by class (.r1-.r8, .c1-.c11) because the CSP forbids style=. Each tile's
   link fills its whole grid cell (the tap target) and the visible square is drawn inset by ::before, so the gaps
   between squares are still tappable: at 390px wide a cell is 32px. Labels size with the map (cqi), not the root
   font, so a 24px root text setting can't push "MA" out of its square. */

.shub-band { padding-block: 0 var(--space-7); }
/* The map is the page: pull it up under the heading. */
.page-head:has(+ .shub-band) { padding-block-end: var(--space-5); }
@media (min-width: 56.25em) { .page-head:has(+ .shub-band) { padding-block: var(--space-7) var(--space-6); } }
.shub { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); grid-template-areas: "find" "map" "list"; }
.shub > * { min-width: 0; }
.shub-find { grid-area: find; }
.shub-map { grid-area: map; }
.shub-list { grid-area: list; display: grid; gap: var(--space-5); }
/* Under 375px a cell would be under 32px: the form and the list come first and the map follows as an overview. */
@media (max-width: 374px) { .shub { grid-template-areas: "find" "list" "map"; } }
@media (min-width: 60em) {
  .shub { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); grid-template-areas: "map find" "list list"; column-gap: var(--space-7); align-items: start; }
}

/* --- The map ------------------------------------------------------------------------------------------- */
.smap-frame {
  position: relative; display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-3) var(--space-4);
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--c-gold) 16%, transparent), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--c-sky) 12%, transparent), transparent 60%),
    var(--c-raised);
  border: 1px solid var(--c-line); border-radius: var(--radius-xl); box-shadow: var(--elevation-card);
}
/* Phones: the frame runs almost edge to edge so each of the 11 cells gets every pixel (33px at 390px wide). */
@media (max-width: 29.9375em) { .smap-frame { margin-inline: calc(var(--layout-gutter) * -1 + 4px); padding: var(--space-3) 6px; border-radius: var(--radius-l); } .smap-lens, .smap-legend { padding-inline: var(--space-2); } }
@media (min-width: 30em) { .smap-frame { padding: var(--space-5); } }
@media (min-width: 60em) { .smap-frame { padding: var(--space-6) var(--space-6) var(--space-5); } }

.smap { container-type: inline-size; }
.smap-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-auto-rows: auto; margin: 0; padding: 0; }
.smap-tile { aspect-ratio: 1; position: relative; min-width: 0; }
.r1 { grid-row: 1; } .r2 { grid-row: 2; } .r3 { grid-row: 3; } .r4 { grid-row: 4; } .r5 { grid-row: 5; } .r6 { grid-row: 6; } .r7 { grid-row: 7; } .r8 { grid-row: 8; }
.c1 { grid-column: 1; } .c2 { grid-column: 2; } .c3 { grid-column: 3; } .c4 { grid-column: 4; } .c5 { grid-column: 5; } .c6 { grid-column: 6; }
.c7 { grid-column: 7; } .c8 { grid-column: 8; } .c9 { grid-column: 9; } .c10 { grid-column: 10; } .c11 { grid-column: 11; }

.smap-cell {
  --inset: clamp(1.5px, 0.45cqi, 4px);
  position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; color: var(--c-muted);
  border-radius: var(--radius-m);
  transition: transform var(--motion-duration-quick) var(--motion-ease-spring);
}
.smap-cell::before {
  content: ""; position: absolute; inset: var(--inset); border-radius: clamp(3px, 1.1cqi, 10px);
  background: var(--c-surface); border: 1px solid var(--c-line);
  transition: background-color var(--motion-duration-quick), box-shadow var(--motion-duration-quick), border-color var(--motion-duration-quick);
}
.smap-cell abbr { position: relative; text-decoration: none; font-family: var(--font-text); font-weight: 700; font-size: clamp(0.5rem, 3.1cqi, 1.375rem); letter-spacing: 0.02em; line-height: 1; font-variant-numeric: lining-nums; }
.smap-cell.is-soon abbr { font-weight: 600; opacity: 0.9; }
.smap-cell.is-ready { color: var(--c-on-gold); }
.smap-cell.is-ready { --ready-fill: linear-gradient(160deg, color-mix(in srgb, var(--c-gold) 82%, #fff) 0%, var(--c-gold) 55%); }
.smap-cell.is-ready::before {
  background: var(--ready-fill);
  border-color: color-mix(in srgb, var(--c-gold-ink) 30%, var(--c-gold));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-gold-ink) 28%, transparent);
}
:root[data-theme="dark"] .smap-cell.is-ready { --ready-fill: var(--c-gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .smap-cell.is-ready { --ready-fill: var(--c-gold); } }

a.smap-cell:hover, a.smap-cell:focus-visible { z-index: 3; color: var(--c-canvas); transform: translateY(-2px) scale(1.06); }
a.smap-cell:hover::before, a.smap-cell:focus-visible::before { background: var(--c-ink); border-color: var(--c-ink); box-shadow: 0 0 0 4px var(--c-gold-glow), var(--elevation-lift); }
a.smap-cell:active { transform: translateY(0) scale(1); }
.smap-cell:focus-visible { outline: 3px solid var(--c-focus-ring); outline-offset: 0; box-shadow: 0 0 0 6px var(--c-focus); }
.smap-tile:hover, .smap-tile:focus-within { z-index: 3; }

/* The full name, shown above the square on hover and focus (the link's accessible name is already the full name). */
.smap-cell::after {
  content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px);
  padding: 4px 10px; border-radius: var(--radius-s); background: var(--c-ink); color: var(--c-canvas);
  font-family: var(--font-text); font-size: 0.875rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
  opacity: 0; pointer-events: none; box-shadow: var(--elevation-card);
  transition: opacity var(--motion-duration-quick), transform var(--motion-duration-quick) var(--motion-ease-standard);
}
.tip-start .smap-cell::after { left: 0; transform: translate(0, 4px); }
.tip-end .smap-cell::after { left: auto; right: 0; transform: translate(0, 4px); }
.smap-cell:hover::after, .smap-cell:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tip-start .smap-cell:hover::after, .tip-start .smap-cell:focus-visible::after,
.tip-end .smap-cell:hover::after, .tip-end .smap-cell:focus-visible::after { transform: translate(0, 0); }
.r1 .smap-cell::after { bottom: auto; top: calc(100% + 6px); }
@media (hover: none) { .smap-cell::after { display: none; } }

/* Lens: colour the guides by who registers to fundraise. CSS only (:has); without :has the switch is hidden. */
.smap-lens { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.smap-lens legend { float: left; margin-right: var(--space-2); color: var(--c-muted); padding: 0; }
.smap-lens-opts { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-l); background: var(--c-surface); border: 1px solid var(--c-line); max-width: 100%; }
.smap-lens label { position: relative; display: inline-flex; min-width: 0; flex: 0 1 auto; }
.smap-lens input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.smap-lens label span { display: inline-flex; align-items: center; min-height: 40px; padding: 4px var(--space-3); border-radius: var(--radius-m); font-weight: 700; font-size: 0.9375rem; line-height: 1.25; color: var(--c-ink-soft); transition: background-color var(--motion-duration-quick), color var(--motion-duration-quick); }
.smap-lens input:hover + span { color: var(--c-ink); background: color-mix(in srgb, var(--c-gold) 14%, transparent); }
.smap-lens input:checked + span { background: var(--c-ink); color: var(--c-canvas); }
.smap-lens input:focus-visible + span { outline: 3px solid var(--c-focus-ring); outline-offset: 2px; }
@supports not selector(:has(*)) { .smap-lens { display: none; } }

.smap-frame:has(#smap-lens-reg:checked) .smap-cell.is-ready[data-reg="yes"]::before { background: var(--c-terracotta); border-color: color-mix(in srgb, var(--c-terracotta-ink) 40%, var(--c-terracotta)); }
.smap-frame:has(#smap-lens-reg:checked) .smap-cell.is-ready[data-reg="no"]::before { background: var(--c-sage); border-color: color-mix(in srgb, var(--c-sage-ink) 40%, var(--c-sage)); }
.smap-frame:has(#smap-lens-reg:checked) .smap-cell.is-ready[data-reg="unconfirmed"]:not(:hover):not(:focus-visible) { color: var(--c-ink); }
.smap-frame:has(#smap-lens-reg:checked) .smap-cell.is-ready[data-reg="unconfirmed"]::before { background: var(--c-raised); border: 2px dashed var(--c-line-strong); box-shadow: none; }
.smap-frame:has(#smap-lens-reg:checked) a.smap-cell.is-ready[data-reg]:hover::before, .smap-frame:has(#smap-lens-reg:checked) a.smap-cell.is-ready[data-reg]:focus-visible::before { background: var(--c-ink); border-color: var(--c-ink); }

.smap-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; color: var(--c-ink-soft); }
.smap-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.swatch { width: 18px; height: 18px; border-radius: 5px; flex: none; border: 1px solid var(--c-line); background: var(--c-surface); }
.swatch.is-ready { background: var(--c-gold); border-color: color-mix(in srgb, var(--c-gold-ink) 30%, var(--c-gold)); }
.swatch.reg-yes, .reg-dot.reg-yes { background: var(--c-terracotta); border-color: var(--c-terracotta); }
.swatch.reg-no, .reg-dot.reg-no { background: var(--c-sage); border-color: var(--c-sage); }
.swatch.reg-unconfirmed { background: var(--c-raised); border: 2px dashed var(--c-line-strong); }
.reg-dot.reg-unconfirmed { background: transparent; border: 2px solid var(--c-line-strong); }
.smap-legend .key-reg { display: none; }
.smap-frame:has(#smap-lens-reg:checked) .key-reg { display: inline-flex; }
.smap-frame:has(#smap-lens-reg:checked) .key-guides { display: none; }

/* --- Find your state ----------------------------------------------------------------------------------- */
.sfind { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--c-raised); border: 1px solid var(--c-line); border-radius: var(--radius-xl); box-shadow: var(--elevation-card); position: relative; overflow: hidden; }
.sfind::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--c-gold), var(--c-terracotta) 60%, var(--c-sage)); }
.sfind-title { font-size: var(--type-display-s-size); line-height: var(--type-display-s-line); }
.sfind-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); color: var(--c-muted); font-size: var(--type-small-size); margin-top: calc(-1 * var(--space-2)); }
.sfind-count .num { font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: var(--type-display-l-size); line-height: 1; font-weight: 600; color: var(--c-gold-ink); }
.sfind-count > span:last-child { flex: 1 1 8rem; min-width: 0; }
.sfind .field { margin: 0; }
.sfind select { max-width: 100%; }
.sfind .button { width: 100%; white-space: normal; text-align: center; }

/* Registration counts, under the form */
.shub-find { display: grid; gap: var(--space-4); align-content: start; }
.sstats { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); }
.sstats h2 { font-family: var(--font-text); color: var(--c-muted); }
.sstats ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.sstats li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; line-height: 1.35; }
.sstats-n { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 6px; border-radius: 10px; font-weight: 700; font-size: 1.125rem; color: var(--c-on-gold); }
.sstats-n.reg-yes { background: var(--c-terracotta); }
.sstats-n.reg-no { background: var(--c-sage); }
.sstats-n.reg-unconfirmed { background: var(--c-raised); color: var(--c-ink); border: 2px dashed var(--c-line-strong); }
/* Below the two-column layout the counts are left out (the cards carry the same answer), so the map stays near the top. */
@media (max-width: 59.9375em) { .sstats { display: none; } }

/* --- Cards ---------------------------------------------------------------------------------------------- */
.shub-list h2 { font-size: var(--type-display-m-size); }
.scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); margin: 0; padding: 0; }
.scard {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name code" "facts facts" "date date";
  gap: var(--space-2) var(--space-3); align-content: start; padding: var(--space-4) var(--space-5) var(--space-4);
  background: var(--c-raised); border: 1px solid var(--c-line); border-radius: var(--radius-l);
  transition: transform var(--motion-duration-quick) var(--motion-ease-spring), box-shadow var(--motion-duration-quick), border-color var(--motion-duration-quick);
}
.scard:hover { transform: translateY(-2px); box-shadow: var(--elevation-lift); border-color: color-mix(in srgb, var(--c-gold) 70%, var(--c-line)); }
.scard:focus-within { border-color: var(--c-ink); }
.scard h3 { grid-area: name; font-family: var(--font-text); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: 700; min-width: 0; }
.scard h3 a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: transparent; }
.scard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.scard:hover h3 a { text-decoration-color: var(--c-gold); }
.scard h3 a:focus-visible { box-shadow: none; outline: none; }
.scard:has(h3 a:focus-visible) { outline: 3px solid var(--c-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 7px var(--c-focus); }
.scard-code { grid-area: code; align-self: center; display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 6px; border-radius: 9px; background: var(--c-gold); color: var(--c-on-gold); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.02em; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-gold-ink) 28%, transparent); }
.scard dl { grid-area: facts; display: grid; gap: var(--space-2); margin: 0; }
.scard dl > div { display: grid; gap: 0; }
.scard dt { font-size: var(--type-label-size); line-height: var(--type-label-line); letter-spacing: var(--type-label-tracking); font-weight: 700; color: var(--c-muted); text-transform: uppercase; }
.scard dd { margin: 0; font-size: var(--type-small-size); line-height: var(--type-small-line); color: var(--c-ink); font-weight: 600; }
.reg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0.05em; border: 1px solid; }
.scard-date { grid-area: date; padding-top: var(--space-2); border-top: 1px dashed var(--c-line); }
/* Phones: a compact row per state, so 39 states don't become a mile of cards. */
@media (max-width: 37.4375em) {
  .scards { gap: var(--space-3); }
  .scard { padding: var(--space-3) var(--space-4); gap: var(--space-1) var(--space-3); }
  .scard h3 a { min-height: 40px; }
  .scard-code { height: 2.125rem; min-width: 2.125rem; font-size: 0.875rem; }
  .scard dl { gap: var(--space-1); }
  .scard dl > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
  .scard dt { text-transform: none; letter-spacing: 0; font-size: var(--type-small-size); font-weight: 600; }
  .scard dt::after { content: ":"; }
  .scard-date { padding-top: var(--space-1); }
}

@media print {
  .smap-lens, .sfind { display: none !important; }
  .scard { break-inside: avoid; box-shadow: none; }
}

/* styles/50-prose.css */
/* Long-form reading: resource articles, pathway stages, news and the Trust Centre. Set like a good
   magazine page: a 40em measure, generous leading, headings that breathe. */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 67.5em) { .article-layout { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-8); } }
.prose { max-width: var(--layout-measure, 40)em; max-width: 42rem; font-size: var(--type-body-l-size); line-height: var(--type-body-l-line); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); font-size: var(--type-display-m-size); }
.prose h3 { margin-top: var(--space-6); font-size: var(--type-display-s-size); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--c-gold-ink); font-weight: 700; }
.prose blockquote { padding-left: var(--space-5); border-left: 4px solid var(--c-gold); font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: var(--type-display-s-size); line-height: 1.35; font-style: italic; }
.prose .callout { font-size: var(--type-body-size); }
.prose .table-wrap { font-size: var(--type-small-size); }
.prose a.ext::after { content: "↗"; font-size: 0.8em; margin-left: 2px; text-decoration: none; display: inline-block; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); font-size: var(--type-small-size); color: var(--c-muted); }
.article-meta strong { color: var(--c-ink); }
.summary-box { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-l); background: var(--c-surface); font-size: var(--type-body-l-size); max-width: 42rem; }
/* A long contents list taller than the window (a landscape tablet, large text) scrolls inside itself instead of
   hiding its last links below the fold while it sticks. */
.toc { position: sticky; top: calc(var(--layout-header) + var(--space-5)); max-height: calc(100vh - var(--layout-header) - var(--space-5) * 2); overflow-y: auto; overscroll-behavior: contain; padding: 10px; margin: -10px; /* room for the focus ring inside the scroller */ align-self: start; display: grid; gap: var(--space-4); align-content: start; font-size: var(--type-small-size); }
.toc ol { list-style: none; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--c-line); }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 6px var(--space-3); text-decoration: none; color: var(--c-muted); margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--c-ink); border-left-color: var(--c-gold); }
.toc .lvl-3 a { padding-left: var(--space-5); }
@media (max-width: 67.4375em) { .toc { position: static; max-height: none; overflow: visible; } .toc-list { display: none; } }
/* Everything under a guide or stage (the disclaimer, related guides, "Stuck?", sources, "Was this page useful?", the
   stage links) keeps to the text's measure, so the right edge doesn't step out by 150px at the end of the page. The
   template preview keeps the full column. */
.article-layout > div > :not(.template-preview) { max-width: 42rem; }
.sources { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 2px dashed var(--c-line); font-size: var(--type-small-size); }
.sources ol { padding-left: 1.3em; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.sources a { word-break: break-word; }
.disclaimer { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-m); background: var(--c-surface); font-size: var(--type-small-size); color: var(--c-ink-soft); }
.template-preview { margin-top: var(--space-6); padding: var(--space-6) var(--space-5); background: var(--c-raised); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: var(--elevation-card); font-family: Georgia, "Times New Roman", serif; font-size: 1.0625rem; line-height: 1.65; max-height: 70vh; overflow-y: auto; }
.template-preview h2, .template-preview h3 { font-family: Georgia, "Times New Roman", serif; font-variation-settings: normal; }
.template-preview h2 { font-size: 1.375rem; } .template-preview h3 { font-size: 1.125rem; }
.template-preview > * + * { margin-top: var(--space-3); }
.prose a.gloss { text-decoration-style: dotted; text-decoration-color: var(--c-muted); }
/* Templates: fill-in blanks ("[ORGANIZATION NAME]") stand out in the preview; .print-only shows only on paper. */
.template-preview .blank { background: color-mix(in srgb, var(--c-gold) 24%, transparent); border-bottom: 1px dashed var(--c-gold-ink); border-radius: 2px; padding-inline: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.template-howto ol { padding-left: 1.25em; }
.print-only { display: none; }

/* styles/60-admin.css */
/* The admin: plain, dense, readable. */
.admin-body { background: var(--c-canvas); }
.admin-bar { background: var(--c-inverse-canvas); color: var(--c-inverse-ink); }
.admin-bar .wrap { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; min-height: 60px; }
.admin-bar a, .admin-bar button { color: var(--c-inverse-ink); background: none; border: 0; cursor: pointer; font-weight: 700; text-decoration: none; padding: var(--space-2); }
.admin-bar a[aria-current] { color: var(--c-gold); }
.admin-main { padding-block: var(--space-6) var(--space-8); }
.admin-main h1 { font-size: var(--type-display-m-size); margin-bottom: var(--space-5); }
.admin-table { width: 100%; font-size: 0.9375rem; }
.admin-table td, .admin-table th { padding: var(--space-2) var(--space-3); }
.status { font-size: 0.8125rem; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--c-surface); }
.status-published { background: var(--c-sage-soft); color: var(--c-sage-ink); }
.status-draft { background: var(--c-gold-soft); color: var(--c-gold-ink); }
.status-removed { background: var(--c-error-soft); color: var(--c-error); }
.admin-edit textarea[name=body] { min-height: 60vh; font-family: ui-monospace, Menlo, monospace; font-size: 0.9375rem; }
.admin-edit textarea[name=meta] { min-height: 10rem; font-family: ui-monospace, Menlo, monospace; font-size: 0.875rem; }
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--c-sage-soft); color: var(--c-sage-ink); font-weight: 700; margin-bottom: var(--space-4); }

/* styles/70-member.css */
/* Member pages: the live board's filters, messages, one-time tokens, category checkboxes. */
.board-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
/* min(): with a 200% text setting 12rem is 384px, wider than a phone; a field then takes the full row instead. */
.board-filters .field { min-width: min(12rem, 100%); flex: 1 1 12rem; margin: 0; }
.board-filters .actions { margin: 0; }
.pre-line { white-space: pre-line; }
.messages { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.msg { padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--c-raised); border: 1px solid var(--c-line); max-width: 46rem; }
.msg.mine { margin-left: auto; background: var(--c-gold-soft); }
.msg p { margin: 0; }
.token-once { display: block; word-break: break-all; padding: var(--space-3); background: var(--c-raised); border-radius: var(--radius-m); font-size: 1rem; }
.cat-checks { display: grid; gap: var(--space-2); }
@media (min-width: 43.75em) { .cat-checks { grid-template-columns: repeat(2, 1fr); } }
.beta-note { font-weight: 400; }
.report summary { cursor: pointer; color: var(--c-muted); }
.signin-link { white-space: nowrap; }
@media (max-width: 43.6875em) { .signin-link { display: none; } }
form.inline, .actions form { display: inline; }

/* Phase three: the signed-in navigation strip, tiers and badges, the impact report's bars. */
.member-nav { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.member-nav ul { display: flex; gap: var(--space-1); overflow-x: auto; list-style: none; margin: 0; padding: var(--space-1) 0; scrollbar-width: thin; }
.member-nav a { display: inline-flex; align-items: center; min-height: var(--layout-tap); padding: 0 var(--space-3); border-radius: var(--radius-pill); text-decoration: none; font-weight: 700; white-space: nowrap; color: var(--c-ink-soft); }
.member-nav a:hover { color: var(--c-ink); background: var(--c-raised); }
.member-nav a[aria-current] { color: var(--c-ink); background: var(--c-gold-soft); }
.stack-s > * + * { margin-top: var(--space-2); }
.tier { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-weight: 800; background: var(--c-gold-soft); color: var(--c-gold-ink); }
.tier-seedling { background: var(--c-sage-soft); color: var(--c-sage-ink); }
.tier-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.tier-steps li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: var(--c-surface); }
.tier-steps li.is-current { background: var(--c-gold-soft); }
.impact-table progress { width: 100%; min-width: 6rem; height: 0.75rem; accent-color: var(--c-gold); }
.impact-table td.num, .impact-table th { white-space: nowrap; }

/* Phase 4A: the notification bell, notifications, members, attachments, passkeys. */
.bell-link { position: relative; }
.bell-count { position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--c-gold); color: var(--c-on-gold); box-shadow: 0 0 0 2px var(--c-canvas); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.notifications { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.notifications li { border: 1px solid var(--c-line); border-radius: var(--radius-m); padding: var(--space-3); background: var(--c-raised); }
.notifications li.unread { border-color: var(--c-gold); background: var(--c-gold-soft); }
.notifications a { font-weight: 700; }
.attachments { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.attachments a { display: inline-flex; align-items: center; min-height: var(--layout-tap); padding: 0 var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius-pill); text-decoration: none; }
.member-table td form, .member-table td .actions { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; }

/* styles/80-print.css */
/* Print: any page prints as plain, readable paper (the annual impact report at /impact/report/<year> is
   meant for it). The site's chrome, the search and menu sheets, and anything marked .no-print are left out;
   colours become ink on white; tables don't split rows across pages. */
@media print {
  @page { margin: 18mm 16mm; }
  html, body { background: #fff !important; color: #000 !important; }
  .skip, .site-header, .member-nav, .ask-band, .site-footer, .menu-sheet, .search-sheet, .no-print, .head-art, nav[aria-label="Breadcrumb"] { display: none !important; }
  main { padding: 0 !important; }
  .page-head, .band-tight, .band-surface { background: none !important; padding: 0 0 6mm !important; box-shadow: none !important; }
  .wrap { max-width: none !important; padding: 0 !important; }
  h1, h2, h3 { color: #000 !important; break-after: avoid; page-break-after: avoid; }
  h1 { font-size: 24pt; }
  h2 { font-size: 15pt; margin-top: 6mm; }
  p, li, td, th, dd, dt { font-size: 10.5pt; color: #000 !important; }
  .muted, .small { color: #333 !important; }
  a { color: #000 !important; text-decoration: none; }
  .wallet-figs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
  .wallet-figs > div { border: 0.3mm solid #999; padding: 2mm 3mm; break-inside: avoid; background: none !important; }
  .table-wrap { overflow: visible !important; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border-bottom: 0.2mm solid #bbb; padding: 1.2mm 2mm; text-align: left; }
  td.num { text-align: right; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  .chip { border: 0.2mm solid #999; background: none !important; color: #000 !important; }
  .annual-report section { break-inside: auto; }
  progress { display: none; }
  /* The cookie consent bar (src/lib/ga.ts adds it to <body>, with inline styles) never prints. */
  body > div[role="dialog"] { display: none !important; }
  /* Articles print the article: no "Was this page useful?", no "On this page" list, no "Get help" banner. Long
     unbreakable strings (URLs in the sources) wrap instead of widening the page past the paper. */
  .page-feedback, .toc, .help-cta { display: none !important; }
  .article-layout { display: block !important; }
  main { overflow-wrap: anywhere; }
  /* A written receipt prints the acknowledgment alone (the .receipt-print copy of the letter), not the form. */
  main:has(> .receipt-print) > :not(.receipt-print) { display: none !important; }
  .receipt-print { display: block !important; white-space: pre-wrap; font-size: 11pt; line-height: 1.5; color: #000; }

  /* A template page prints the template alone: no page head, intro, notes or links, and the preview without its
     scroll box, so every page of it prints. Blanks print as underlined spaces to write on. */
  .print-only { display: block !important; margin-top: 8mm; padding-top: 2mm; border-top: 0.2mm solid #999; }
  .template-page .page-head, .template-page .article-layout > aside, .template-page .article-layout > div > :not(.template-preview):not(.print-only) { display: none !important; }
  .template-page .article-layout { display: block !important; }
  .template-preview { max-height: none !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; margin: 0 !important; font-size: 11pt; line-height: 1.5; }
  .template-preview h2 { font-size: 17pt; margin-top: 0; }
  .template-preview h3 { font-size: 13pt; margin-top: 5mm; }
  .template-preview p, .template-preview li { orphans: 3; widows: 3; }
  .template-preview .blank { background: none !important; border: 0 !important; border-bottom: 0.3mm solid #000 !important; border-radius: 0; padding: 0 6mm 0.4mm 0 !important; color: #000 !important; }
  .template-preview .checklist input { width: 4mm; height: 4mm; }
  .template-preview .table-wrap { border: 0 !important; box-shadow: none !important; background: none !important; }
  .template-preview th, .template-preview td, .template-preview tr { background: none !important; }
  .template-preview td { height: 8mm; }
  /* Wide templates (a nine-column hours log, a content calendar) were wider than the paper: bracketed blanks such as
     [ACTIVITY] can't break, and the columns sized to them, so the right-hand columns were cut off. Fixed columns
     share the page width and long blanks and words wrap inside their cell instead. */
  .template-preview { overflow-wrap: anywhere; }
  .template-preview table { table-layout: fixed; width: 100% !important; }
  .template-preview th, .template-preview td { hyphens: auto; -webkit-hyphens: auto; }
  .template-preview th .blank, .template-preview td .blank { padding-right: 0 !important; }
  /* A long blank that wraps keeps its 6mm writing space only after its last line, not past the margin on each line. */
  .template-preview .blank { -webkit-box-decoration-break: slice; box-decoration-break: slice; }
}