/* Generated by scripts/build-site.py from src/css/. Do not edit here: edit the source and run npm run build. */

/* ==== src/css/fonts.css ==== */
/* Fonts
   Literata and Raleway (SIL Open Font License), self-hosted: the same files Google Fonts served
   when the picture baselines were taken (test/fixtures/fonts), Latin and Latin Extended only, so
   pages draw identically with no third-party request (and nothing for a cookie banner to hold
   back). Files in site/fonts/; paths are relative to style.css. See docs/seo-audit.md.
   Library: none. Classes: none.
*/
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/raleway-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/raleway-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== src/css/tokens.css ==== */
/* Tokens
   Every colour, type size, space, node size and motion value the site uses, as custom
   properties on :root. Components read these; they never hard-code a value (the unit tests
   check, with a list of the few that still do in test/unit/known-debt.json).
   Three groups: brand colours, the roles built from them, and the measures (type, space,
   device, motion). The phone and wide-screen values are at the end.
   Layer 1 of 6. Library: #colour, #type, #space.
*/
:root {
  /* Brand colours (CCEE) */
  --ink: #21495F;          /* dark blue: headings, solid buttons, the ink band, footer (9.6:1 on white) */
  --aqua: #377C89;         /* lines, fills, large figures (4.8:1 on white) */
  --aqua-deep: #2E6773;    /* links on any light ground (6.4:1 on white, 5.6:1 on mist) */
  --aqua-grey: #6C9CA7;    /* field dots, faint lines (graphic only) */
  --aqua-pale: #C9DCE1;    /* lines and text on ink (6.8:1 on ink) */
  --signal: #FDB515;       /* orange: only what moves or changes (pulses, gain dots, the "you" ring). Never text. */
  --text: #394148;         /* body text (10.4:1) */
  --muted: #616970;        /* secondary text (5.6:1 on white, 5.0:1 on mist) */
  --rule: #CFDADF;         /* hairlines */
  --mist: #EEF2F6;         /* the page ground (alternates with white) */
  --surface: #FFFFFF;      /* the white ground */
  --white: #FFFFFF;        /* white text, lines and nodes on ink; white fills */

  /* Roles built from the brand colours */
  --on-ink-line: rgba(201,220,225,.28);       /* hairlines and node rings on ink (aqua-pale at 28%) */
  --on-ink-line-soft: rgba(201,220,225,.25);  /* the footer's legal-row rule */
  --on-ink-line-strong: rgba(201,220,225,.5); /* the line under a group on ink */
  --head-ground: rgba(238,242,246,.94);       /* the sticky header: mist, slightly see-through */
  --head-rule: #D5DEE3;                       /* the header's bottom rule */
  --menu-shadow: rgba(33,73,95,.35);          /* the open menu's drop shadow (ink) */
  --head-shadow: rgba(33,73,95,.45);          /* the scrolled header's soft shadow (ink) */
  --menu-scrim: rgba(33,73,95,.55);           /* the page behind the open menu (ink) */
  --focus-glow: rgba(55,124,137,.18);         /* soft aqua ring round a focused field */
  --aqua-halo: rgba(55,124,137,.22);          /* the ring round a lit trio node */
  --signal-halo: rgba(253,181,21,.25);        /* the glow round the travelling trio pulse */
  --signal-ring: rgba(253,181,21,.35);        /* the ring round a form's "sent" node (WordPress, wp.css) */
  --field-border: #808B92;                    /* form field borders (3.48:1 on white, 3.10:1 on mist; WCAG 1.4.11 needs 3:1) */
  --error: #B3261E;                           /* red: a form answer that needs fixing, its words and its field's edge (6.5:1 on white, 5.8:1 on mist) */
  --error-ground: rgba(179,38,30,.06);        /* the faint red behind a field that needs fixing */
  --frame-rule: #D3DEE4;                      /* photo-frame border */
  --frame-hatch: rgba(33,73,95,.05);          /* photo-frame stand-in hatching */
  --frame-caption-ground: rgba(255,255,255,.85); /* caption plate on a photo frame */
  --placeholder-ground: #FFF6D6;              /* amber "to come" placeholders */
  --gap-ring: #9FB1B8;                        /* the challenge figure's missing-student rings */

  /* Type: faces, and the one type scale (one size per role) */
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.6rem, 1.2rem + 4.6vw, 5.25rem); /* H1 */
  --fs-h2: clamp(1.9rem, 1.45rem + 1.5vw, 2.6rem);      /* H2 */
  --fs-body: 1.0625rem;                                 /* body text */
  --t-fig: clamp(2.4rem, 1.7rem + 1.8vw, 3rem);         /* figures on a line */
  --t-lead: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);      /* lead statements */
  --t-mid: clamp(1.25rem, 1.12rem + .4vw, 1.5rem);      /* section sentences, item names */
  --t-item: 1.25rem;                                    /* item titles */
  --t-lede: 1.1875rem;                                  /* ledes, hero lines */
  --t-small: .9375rem;                                  /* small text, examples, notes */
  --t-meta: .875rem;                                    /* labels, sources, captions */

  /* Space: the steps, the content width, the page gutter, and the section rhythm */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4.5rem; --s7: 6.5rem;
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --h2-gap: var(--s5);     /* under a section heading */
  --link-gap: var(--s5);   /* before the one link that ends a section */

  /* The device: nodes and lines */
  --node: 11px;
  --line: 1.5px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .7s;
}
@media (max-width: 700px) {
  :root { --s6: 3.25rem; --s7: 4.5rem; --h2-gap: var(--s4); --link-gap: var(--s4); }
}
@media (min-width: 1680px) {
  :root { --wrap: 1320px; }
}
@media (min-width: 2200px) {
  :root { --wrap: 1420px; }
}

/* ==== src/css/base.css ==== */
/* Base
   Element defaults: box sizing, the page ground and body text, headings, links, lists, images,
   the focus ring, reduced-motion switches.
   Layer 2 of 6.
   Classes: 
*/
*, *::before, *::after { box-sizing: border-box; }
/* overscroll-behavior-y on html and body: no bounce past the top or bottom; Safari's rubber-band showed a blank band above the header. */
/* scroll-padding-top: a jump to a heading (contact.html#form-h) stops below the sticky header (76px), the eyebrow above it still in view. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-anchor: none; overscroll-behavior-y: none; scroll-padding-top: 9rem; } /* no scroll anchoring: header.css, the header logo */
body { overscroll-behavior-y: none; margin: 0; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65; color: var(--text); }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); margin: 0; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: var(--aqua-deep); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}
@media (max-width: 700px) {
  body { font-size: 1rem; }
}
body { background: var(--mist); }
h1, h2, h3 {
  font-optical-sizing: auto; font-variant-numeric: lining-nums proportional-nums; }
h1 { font-weight: 500; letter-spacing: -.022em; line-height: 1.04; }
h2 { font-weight: 500; letter-spacing: -.012em; line-height: 1.15; }
h3 { font-weight: 500; letter-spacing: -.005em; }
@media (min-width: 1680px) {
  html { font-size: 106.25%; }
}
@media (min-width: 2200px) {
  html { font-size: 112.5%; }
}

/* ==== src/css/layout.css ==== */
/* Layout
   The page frame: .wrap (the content width), sections (.sec and its grounds .g-mist / .g-white
   / .block-ink), the section head (.sec-head, .sec-sent), split grids, and the one link that
   ends a section (.more lives in buttons).
   Layer 3 of 6. Rule: grounds alternate; ink for one strong band per page at most, plus the
   footer. Library: #grounds, #beat.
   Classes: .block-ink, .c-line, .c-wide, .g-mist, .g-white, .sec, .sec-belief, .sec-end, .sec-form-first, .sec-head,
   .sec-head-solo, .sec-last, .sec-proof, .sec-sent, .sec-what, .sec-who, .sec-why, .wrap
*/
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.block-ink :focus-visible { box-shadow: none; }
.block-ink { color: var(--aqua-pale); }
.block-ink h2, .block-ink strong { color: var(--white); }
.sec { padding: var(--s7) 0 !important; margin: 0 !important; border-top: 0 !important; }
.sec-why { background: var(--surface); }
.sec-proof { background: var(--surface); }
.sec-who { background: var(--ink); }
.sec-last { padding-bottom: var(--s7) !important; }
@media (max-width: 1024px) {
  .sec { padding: var(--s6) 0 !important; }
}
@media (max-width: 700px) {
  .sec { padding: var(--s5) 0 !important; }
  .sec-last { padding-bottom: var(--s6) !important; }
}
.sec-what h2 { margin-bottom: var(--s3) !important; }
.inner .g-mist { background: var(--mist); --g: var(--mist); }
.inner .g-white { background: var(--surface); --g: var(--surface); }
.inner .block-ink { background: var(--ink); --g: var(--ink); }
.inner .sec-end { padding-bottom: var(--s7) !important; }
/* .sec-form-first: a form section with no visible head, right under the hero (Subscribe). It
   stands in for .sec: a shorter top, the usual bottom. */
.inner .sec-form-first { padding: var(--s5) 0 var(--s7); }
@media (max-width: 1024px) {
  .inner .sec-form-first { padding-bottom: var(--s6); }
}
.inner .sec-head { margin: 0 0 var(--s5); max-width: 48rem; }
.inner .sec-head h2 { margin: 0 0 var(--s3) !important; }
.inner .sec-head-solo h2 { margin-bottom: 0 !important; }
.inner .sec-sent { font-size: var(--t-lede); line-height: 1.55; color: var(--text); margin: 0; max-width: 46ch; }
.inner .block-ink .sec-sent { color: var(--aqua-pale); }
/* .sec-belief: a section head that leads with a quoted statement, then its source line (About, Why we exist). */
.inner .sec-belief .sec-sent { max-width: 58ch; }
.inner .sec-belief .source { margin-top: var(--s2); }
@media (max-width: 700px) {
  .inner .sec-head { margin-bottom: var(--s4); }
  .inner .sec-form-first { padding: var(--s4) 0 var(--s5); }
}
.inner .g-mist { --c-ground: var(--mist); }
.inner .g-white { --c-ground: var(--surface); }
.inner .block-ink { --c-ground: var(--ink); }
.inner .c-line.c-wide[style] { max-width: none; }

/* ==== src/css/components/header.css ==== */
/* Header
   The sticky site header: .site-head, .head-row, the logo (.brand: the full SDR logo .lockup-g at the
   top of the page, the compact mark .lockup-c once scrolled, .head-compact; header-logo.js), the main
   nav (.site-nav) and, up to 1100px, the Menu button (.menu-btn, .menu-lines) with its open state
   (.site-head.open).
   Library: #header.
   Classes: .brand, .brand-rev, .btn, .head-compact, .head-snap, .head-row, .lockup, .lockup-c, .lockup-full, .lockup-g, .menu-btn,
   .menu-lines, .site-foot, .site-head, .site-nav, .skip
*/
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--white); padding: .6rem 1rem; z-index: 50; }
.skip:focus { top: 1rem; }
.site-head { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.head-row { display: flex; align-items: center; gap: var(--s3); min-height: 76px; }
.brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.site-nav ul { display: flex; gap: 1.6rem; }
.site-nav ul a { position: relative; color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--t-small); padding: .4rem 0; }
.site-nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: var(--line); background: var(--aqua); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.site-nav ul a:hover::after, .site-nav ul a[aria-current]::after { transform: scaleX(1); }
.menu-btn { display: none; }
/* Without JavaScript the Menu button can't open the menu, so it is hidden; the footer links every menu page. */
html:not(.js) .menu-btn { display: none; }
@media screen and (prefers-reduced-motion: no-preference) {
  .site-nav ul a::after { will-change: transform; }
}
@media (max-width: 1180px) {
  .site-nav ul { gap: 1.1rem; }
}
@media (max-width: 1024px) {
  .menu-btn { display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; background: none; border: var(--line) solid var(--ink); border-radius: 999px; padding: .55rem .9rem; font: 700 var(--t-meta) var(--sans); color: var(--ink); cursor: pointer; }
  .menu-lines { position: relative; width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; transition: border-color .2s; }
  .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
  .site-head.open .menu-lines { border-color: transparent; }
  .site-head.open .menu-lines::before, .site-head.open .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; }
  .site-head.open .menu-lines::before { transform: rotate(45deg); }
  .site-head.open .menu-lines::after { transform: rotate(-45deg); }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s3) var(--gutter) var(--s4); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
  .site-head.open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .site-nav ul { flex-direction: column; gap: 0; position: relative; }
  .site-nav ul li { position: relative; }
  .site-nav ul a { display: block; font-weight: 500; }
}
@media (max-width: 700px) {
  .head-row { min-height: 64px; }
}
.site-head { background: var(--head-ground); border-bottom-color: var(--head-rule); transition: box-shadow .3s var(--ease); }
@media (max-width: 1024px) {
  .site-nav { background: var(--mist); z-index: 2; box-shadow: 0 18px 30px -18px var(--menu-shadow); }
  .site-nav ul { padding-left: 0; }
  .site-nav ul li { border-bottom: 1px solid var(--rule); }
  .site-nav ul a { font-family: var(--serif); font-size: 1.4rem; padding: .7rem 0; }
  .site-nav ul a[aria-current] { color: var(--aqua-deep); }
  .site-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: var(--menu-scrim); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; z-index: 1; }
  .site-head.open::after { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
}
.brand .lockup { display: block; }
/* The logo. At the top of the page the
   full SDR logo, 80px tall (52px on phones); scrolled past 60px, header-logo.js sets .head-compact and the
   compact mark takes over, 26px (20px on phones, smaller still if the row is tight). The two images
   cross-fade and are sized so their "ccee" letters line up throughout: "ccee" fills rows 51-208 of the
   full logo's 391 and rows 1-80 of the compact mark's 83, hence the ratios below. Without JavaScript the
   full logo simply stays. The brand link's 10px above and below (a bigger tap target, cancelled by its
   negative margin, further down) is inside these heights, so the images sit 10px down. */
.site-head .brand { --hf: 80px; --hc: 26px; position: relative; display: block; flex-shrink: 0; overflow: hidden;
  height: calc(var(--hf) + 20px); width: calc(var(--hf) * 1442 / 391); transition: height .35s var(--ease), width .35s var(--ease); }
.site-head .brand .lockup { position: absolute; left: 0; width: auto; max-width: none; transition: top .35s var(--ease), height .35s var(--ease), opacity .3s var(--ease); }
.site-head .brand .lockup-g { top: 10px; height: var(--hf); }
.site-head .brand .lockup-c { top: calc(10px + var(--hf) * (51 / 391 - 0.421860 * 1 / 83)); height: calc(var(--hf) * 0.421860); opacity: 0; }
.head-compact .site-head .brand { height: calc(var(--hc) + 20px); width: calc(var(--hc) * 1942 / 163); }
.head-compact .site-head .brand .lockup-g { top: calc(10px + var(--hc) * (1 / 83 - 2.370454 * 51 / 391)); height: calc(var(--hc) * 2.370454); opacity: 0; }
.head-compact .site-head .brand .lockup-c { top: 10px; height: var(--hc); opacity: 1; }
.site-head .head-row { min-height: calc(var(--hf-row, 80px) + 28px); transition: min-height .35s var(--ease); }
.head-compact .site-head .head-row { min-height: calc(var(--hc-row, 26px) + 32px); }
.head-compact .site-head { box-shadow: 0 8px 24px -16px var(--head-shadow); }
/* The header is in the page's flow, so going compact moves everything below it up 50px. With the
   browser's scroll anchoring on, it then scrolled back 50px to keep the content still, which crossed
   back under 20px and undid the change, forever, for anyone who stopped scrolling between 60 and 110px.
   So base.css turns scroll anchoring off (overflow-anchor on html): the page simply moves up with it. */
/* .head-snap: on <html> for the instant jump.js turns the header compact before a jump to an anchor. */
.head-snap .site-head .head-row, .head-snap .site-head .brand, .head-snap .site-head .brand .lockup { transition: none; }
@media (max-width: 700px) {
  .site-head .brand { --hf: 52px; --hc: 20px; }
  .site-head .head-row { --hf-row: 52px; --hc-row: 20px; }
}
/* 320px wide (a 1280px screen at 400% zoom) and up to 360px: the full logo at 52px plus the Menu button
   ran 9px past the screen (WCAG 1.4.10), so the logo steps down to 44px and the gap to 1rem. */
@media (max-width: 360px) {
  .site-head .brand { --hf: 44px; }
  .site-head .head-row { --hf-row: 44px; gap: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .site-head, .site-head .head-row, .site-head .brand, .site-head .brand .lockup { transition: none; }
}
.site-foot .brand-rev .lockup-full { height: 92px; width: auto; max-width: 100%; }
@media (max-width: 700px) {
  .site-foot .brand-rev .lockup-full { height: 78px; }
}
@media (min-width: 1101px) {
  .site-foot .brand-rev .lockup-full { height: 112px; max-width: none; }
}
.site-head .brand { padding: 10px 0; margin: -10px 0; }
.site-head .brand:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; border-radius: 4px; }
.menu-btn { min-height: 44px; }
@media (pointer: coarse) and (min-width: 1025px) {
  .site-nav ul a { display: inline-block; padding: .75rem 0; }
  .site-nav ul a::after { bottom: .45rem; }
}
@media (min-width: 1025px) {
  .site-nav ul a { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1100px) {
  .menu-btn { display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; background: none; border: var(--line) solid var(--ink); border-radius: 999px; padding: .55rem .9rem; font: 700 var(--t-meta) var(--sans); color: var(--ink); cursor: pointer; }
  .menu-lines { position: relative; width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; transition: border-color .2s; }
  .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
  .site-head.open .menu-lines { border-color: transparent; }
  .site-head.open .menu-lines::before, .site-head.open .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; }
  .site-head.open .menu-lines::before { transform: rotate(45deg); }
  .site-head.open .menu-lines::after { transform: rotate(-45deg); }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s3) var(--gutter) var(--s4); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
  .site-head.open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .site-nav ul { flex-direction: column; gap: 0; position: relative; }
  .site-nav ul li { position: relative; }
  .site-nav ul a { display: block; font-weight: 500; }
  .site-nav { background: var(--mist); z-index: 2; box-shadow: 0 18px 30px -18px var(--menu-shadow); }
  .site-nav ul { padding-left: 0; }
  .site-nav ul li { border-bottom: 1px solid var(--rule); }
  .site-nav ul a { font-family: var(--serif); font-size: 1.4rem; padding: .7rem 0; }
  .site-nav ul a[aria-current] { color: var(--aqua-deep); }
  .site-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: var(--menu-scrim); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; z-index: 1; }
  .site-head.open::after { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
  .site-nav ul a { white-space: normal; }
  .site-nav ul a::after { bottom: -2px; }
}
/* The open menu's Subscribe button is a 44px tap target. */
@media (max-width: 1100px) {
  .site-nav .btn { min-height: 44px; }
}

/* ==== src/css/components/footer.css ==== */
/* Footer
   The ink footer: .site-foot, .foot-grid, the white lockup (.brand-rev, .lockup-full), column
   heads (.foot-h), the subscribe link (.foot-cta), the legal row (.foot-legal).
   Library: #footer.
   Classes: .brand-rev, .foot-brand, .foot-cta, .foot-grid, .foot-h, .foot-legal, .site-foot
*/
.foot-cta span { display: inline-block; transition: transform .3s var(--ease); }
.foot-cta:hover span { transform: translateX(4px); }
.site-foot { background: var(--ink); color: var(--aqua-pale); padding: 0 0 var(--s4); font-size: var(--t-small); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--s5); }
.brand-rev { margin-bottom: var(--s3); }
.foot-h { font: 700 var(--t-meta)/1.2 var(--sans); text-transform: uppercase; color: var(--white); margin-bottom: var(--s2); }
.site-foot ul li { margin-bottom: .55rem; }
.site-foot a { color: var(--white); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-foot p { max-width: 22rem; }
.foot-cta { font-weight: 700; }
.foot-legal { display: flex; flex-wrap: wrap; gap: .5rem var(--s4); margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--on-ink-line-soft); font-size: var(--t-meta); align-items: center; }
@media (max-width: 1024px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
  .foot-brand, .foot-grid > div:last-child { grid-column: 1 / -1; }
}
.site-foot { padding-top: var(--s6); }
.foot-cta { text-wrap: balance; }
.foot-h { font-weight: 600; letter-spacing: .08em; }
.site-foot .brand-rev { gap: 14px; }
@media (min-width: 1101px) {
  .site-foot .foot-grid { grid-template-columns: minmax(420px, 1.9fr) 1fr 1fr 1.3fr; }
}
/* Phones: every footer link is a 44px row, so it is easy to tap (polish list; WCAG target size). */
@media (max-width: 700px) {
  .site-foot ul li { margin-bottom: 0; }
  .site-foot ul a, .foot-cta, .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-legal { row-gap: 0; }
}

/* ==== src/css/components/buttons.css ==== */
/* Buttons and links
   Solid and outline buttons (.btn, .btn-solid, .btn-line, .btn-sm) with the chosen hover (C2: a
   node travels behind the label and opens with an arrow; hidden on touch screens), text links
   with an arrow (.textlink, .textlink-rev on ink), button rows (.actions) and the one link that
   ends a section (.more). A link that opens another site in a new tab ends in the open-in-new-window
   icon (.i-ext) instead of the arrow.
   Library: #buttons, #links.
   Classes: .actions, .beat-link, .btn, .btn-line, .btn-sm, .btn-solid, .defn-body, .i-ext,
   .more, .pill-field, .res-filter, .sec-what, .sec-who, .site-nav, .textlink, .textlink-rev
*/
.btn { display: inline-flex; align-items: center; gap: .5rem; font: 700 var(--t-small)/1 var(--sans); padding: 1rem 1.4rem; border-radius: 999px; text-decoration: none; border: var(--line) solid var(--ink); cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), transform .25s var(--ease); }
.btn-solid { background: var(--ink); color: var(--white); }
.btn-solid:hover { background: var(--aqua-deep); border-color: var(--aqua-deep); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); }
.btn-sm { padding: .65rem 1.05rem; font-size: var(--t-meta); }
.btn:active { transform: translateY(1px); }
.textlink { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--aqua-deep); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 var(--line) no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease); }
.textlink:hover { background-size: 100% var(--line); }
.textlink span { display: inline-block; transition: transform .3s var(--ease); }
.textlink:hover span { transform: translateX(4px); }
/* A text link that jumps down the same page (Contact's "Send a message ↓"): its arrow points down and nudges down. */
.textlink[href^="#"]:hover span { transform: translateY(3px); }
.textlink-rev { color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--s3); }
@media (max-width: 1024px) {
  .site-nav .btn { align-self: flex-start; }
}
@media (max-width: 700px) {
  .actions .btn { flex: 1 1 auto; justify-content: center; }
}
.textlink { text-wrap: balance; }
.btn { letter-spacing: .01em; }
@media (max-width: 700px) {
  .sec-what .more .textlink { display: inline; }
}
.btn-solid { --c-node: 2rem; --c-inset: calc((1rem + 2rem + 2 * var(--line) - var(--c-node)) / 2); --c-gap: .7rem; --c-left: 1.5rem;
  --c-right: calc(var(--c-gap) + var(--c-node) + var(--c-inset));
  position: relative; padding-left: calc((var(--c-left) + var(--c-right)) / 2); padding-right: calc((var(--c-left) + var(--c-right)) / 2);
  transition: background .3s var(--ease), padding .4s var(--ease), transform .25s var(--ease); } /* slowed from .18/.22 s */
.btn-solid::after { content: ""; position: absolute; top: 50%; width: var(--c-node); height: var(--c-node); margin-top: calc(var(--c-node) / -2); border-radius: 50%;
  background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%2321495F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat; }
.btn-solid:hover, .btn-solid:focus-visible { background: var(--ink); border-color: var(--ink); padding-left: var(--c-left); padding-right: var(--c-right); }
.btn-solid:hover::after, .btn-solid:focus-visible::after { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .btn-solid, .btn-solid::after { transition: none; }
}
.btn-solid { isolation: isolate; }
.btn-solid::after { z-index: -1; }
.btn-solid::after { right: auto; left: var(--c-inset); transform: scale(.28); opacity: 1; background-size: 0 0; }
.btn-solid:hover::after, .btn-solid:focus-visible::after { left: calc(100% - var(--c-node) - var(--c-inset)); transform: scale(1); background-size: 1rem 1rem; }
.more { margin: var(--s4) 0 0; }
.sec-what .defn-body .more { margin: var(--s3) 0 0; }
.btn-solid::after { background-color: var(--aqua-pale); transition: left .4s var(--ease), transform .4s var(--ease), background-size .16s var(--ease) .26s, background-color .3s var(--ease); }
.btn-solid:hover::after, .btn-solid:focus-visible::after { background-color: var(--signal); }
@media (hover: none) {
  .btn-solid::after { display: none; }
  .btn-solid { padding-left: 1.4rem; padding-right: 1.4rem; }
}
.more { margin-top: var(--link-gap) !important; }
.pill-field .btn { flex: none; }
@media (max-width: 700px) {
  .pill-field .btn { justify-content: center; }
}
.sec-what .defn-body .more { margin-top: var(--s5) !important; }
.sec-who .more { margin-top: var(--s5) !important; }
.inner .more { margin-top: var(--s5) !important; }
@media (max-width: 700px) {
  .inner .more { margin-top: var(--s4) !important; }
  .inner .more .textlink { display: inline; }
}
.inner .res-filter .btn[aria-pressed="true"] { background: var(--ink); color: var(--white); }
/* The breadcrumb link in a hero eyebrow ("Stories · Nominate a bright spot"): always underlined, the usual sign of
   a link, darker and heavier on hover. */
.inner .beat-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s var(--ease); }
.inner .beat-link:hover { color: var(--ink); text-decoration-thickness: 2px; }
.inner .actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 700px) {
  .inner .actions .btn { justify-content: center; }
}
@media (pointer: coarse) {
  .btn-sm { min-height: 44px; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .js .sec-who .more { opacity: 0; transform: translateY(14px); }
  .js .sec-who .more.in { animation: whoIn .7s var(--ease) 1.4s forwards; }
}
@media (min-width: 1025px) and (max-width: 1100px) {
  .site-nav .btn { align-self: flex-start; }
}
/* The open-in-new-window icon: every link that opens in a new tab ends with it, in the
   link's own colour. Written into the design's links as .i-ext where the arrow was; a new-tab link without one,
   such as a link in a paragraph or one staff add in WordPress, gets it drawn after its words. */
.i-ext, a[target="_blank"]:not(:has(.i-ext))::after { content: ""; display: inline-block; flex: none; width: .72em; height: .72em; margin-left: .35em; vertical-align: -.02em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ==== src/css/components/type.css ==== */
/* Text roles
   The small labels and text roles: the beat label that opens each section (.eyebrow.beat),
   group labels (.meta, .label), the lede, sources (.source), quiet lines.
   One type scale: sizes come from --t-* and --fs-* tokens. Library: #type, #beat.
   Classes: .beat, .block-ink, .c-line, .c-line--ink, .col-list, .el-see, .eyebrow, .feature,
   .gather-body, .hero-in, .hero-story, .isnt-hd, .join-copy, .label, .lede, .lg-see, .meta, .new,
   .res-tag, .sec-note, .sec-who, .source, .stories-3, .what, .who-v2
*/
.meta, .eyebrow { display: block; font-family: var(--sans); font-size: var(--t-meta); text-transform: uppercase; color: var(--aqua-deep); margin-bottom: .6rem; }
.lede { line-height: 1.55; color: var(--text); }
.source { color: var(--muted); margin: 0; }
.meta, .eyebrow, .label { font-weight: 600; letter-spacing: .06em; }
@media (max-width: 700px) {
  .stories-3 .meta { grid-column: 2; margin: .2rem 0 0; }
}
.join-copy .lede { margin: 0 0 var(--s5); max-width: 40ch; }
.beat { margin: 0 0 var(--s2) !important; }
.block-ink .beat { color: var(--aqua-pale); }
.gather-body .meta { color: var(--aqua-pale); margin-bottom: .4rem; }
.join-copy .lede { font-size: var(--t-lede) !important; }
.source { font-size: var(--t-meta) !important; }
.inner .hero-in .beat { margin-bottom: var(--s3) !important; }
.inner .el-see .meta { margin-bottom: .2rem; }
.inner .isnt-hd .meta { margin: 0; }
.inner .isnt-hd .meta + .meta { color: var(--muted); }
.inner .block-ink .lg-see .meta { color: var(--aqua-pale); }
.inner .col-list > li.new .meta { margin: .5rem 0 0; color: var(--ink); }
/* A section's quieter second line (what's coming, how links behave), read with its head, before the content. */
.inner .sec-note { margin: var(--s2) 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--muted); max-width: 64ch; }
.inner .what .meta { margin: 0; }
.inner .c-line .meta { margin: 0 0 .35rem; }
.inner .feature .beat { margin-bottom: var(--s3) !important; }
.inner .hero-story .beat a { color: inherit; text-decoration: none; }
.inner .hero-story .beat a:hover { text-decoration: underline; text-underline-offset: 3px; }
.inner .res-tag .meta { margin: 0 0 .15rem; }
.inner .c-line .source { margin-top: var(--s2); }
.inner .c-line--ink .meta { color: var(--aqua-pale); }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .sec-who .who-v2 .eyebrow { opacity: 0; transform: translateY(14px); }
  .js .sec-who .who-v2.in .eyebrow { animation: whoIn .7s var(--ease) forwards; }
  @keyframes whoIn { to { opacity: 1; transform: none; } }
}

/* ==== src/css/components/hero.css ==== */
/* Hero
   Home's hero (.hero, .hero-grid, .hero-copy, .hero-art with the California map) and the
   shorter inner-page hero (.inner .hero-in, .in-art), plus the story hero (.hero-story).
   Entrance motion on the first lines (.enter, .e1-.e3).
   Library: #hero, #inner-hero.
   Classes: .e1, .e2, .e3, .enter, .hero, .hero-art, .hero-copy, .hero-grid, .hero-in, .hero-story,
   .sub, .sub-note
*/
.hero { padding: var(--s6) 0 var(--s5); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s4); align-items: center; }
.hero-copy h1 { max-width: 14ch; margin-bottom: var(--s4); }
.hero-copy .sub { line-height: 1.6; max-width: 34rem; margin-bottom: var(--s4); }
.hero-art { position: relative; }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .enter { opacity: 0; transform: translateY(18px); animation: rise .9s var(--ease) forwards; }
  .js .e1 { animation-delay: .1s; }
  .js .e2 { animation-delay: .3s; }
  .js .e3 { animation-delay: .5s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: var(--s4); }
}
.hero { background: var(--mist); }
@media (max-width: 700px) {
  .hero-copy h1 { margin-bottom: var(--s3); }
  .hero-art { order: 5; margin: var(--s5) 0 0; }
}
.hero .sub { font-size: var(--t-lede) !important; }
.inner .hero-in { background: var(--mist); padding: var(--s6) 0 !important; }
.inner .hero-in .hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: var(--s5); align-items: center; }
.inner .hero-in h1 { max-width: 18ch; margin: 0 0 var(--s3); text-wrap: balance; }
.inner .hero-in .sub { line-height: 1.6; max-width: 36rem; margin: 0; }
/* .sub-note: a short practical line under the lede (Subscribe). */
.inner .hero-in .sub-note { line-height: 1.6; max-width: 36rem; margin: var(--s2) 0 0; color: var(--muted); }
@media (max-width: 1024px) {
  .inner .hero-in .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: var(--s4); }
}
@media (max-width: 700px) {
  .inner .hero-in { padding: var(--s5) 0 !important; }
  .inner .hero-in .hero-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .inner .hero-in .hero-art { order: 0; margin: 0; }
}
.inner .hero-story .hero-grid { gap: var(--s6); }
@media (max-width: 700px) {
  .inner .hero-story .hero-grid { gap: var(--s4); }
}
.inner .hero-story .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.inner .hero-story h1 { max-width: 20ch; }
@media (max-width: 700px) {
  .inner .hero-story .hero-grid { grid-template-columns: 1fr; }
}
.inner .hero-story h1 { text-wrap: wrap; }
.hero-copy .sub { text-wrap: pretty; }

/* ==== src/css/components/placeholders.css ==== */
/* Placeholders
   Amber stand-ins for content we still need (.tbc block, .tbc-inline in running text), and the
   coming-soon / new markers (.c-soon, .new).
   Rule: never invent content; mark it. Library: #placeholder, #coming-soon.
   Classes: .actions, .c-form, .c-line-h, .c-soon, .col-list, .glance, .lg-lead, .net, .net-n,
   .new, .soon, .stat-group, .story-text, .tbc, .tbc-inline, .tbd, .when, .when-list, .where
*/
.tbc { display: block; font-size: var(--t-meta); line-height: 1.5; color: var(--text); background: var(--placeholder-ground); border-left: 3px solid var(--signal); padding: .5rem .75rem; max-width: 40rem; }
.tbc::before { content: "To come · "; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.tbc-inline { background: var(--placeholder-ground); box-shadow: inset 0 -2px 0 var(--signal); padding: 0 .2em; font-style: normal; }
.inner .col-list > li.new::before { background: var(--signal); }
.inner .net.tbd .net-n .tbc-inline { font-size: var(--t-small); font-family: var(--sans); }
.inner .when-list li.soon::before { background: var(--aqua-grey); }
.inner .c-line-h .tbc-inline, .inner .lg-lead .tbc-inline { font-family: var(--sans); font-size: var(--t-small); font-weight: 400; }
.inner .story-text .tbc { margin: 0 0 var(--s3); }
.inner .glance dd .tbc-inline { font-family: var(--sans); font-size: var(--t-small); font-weight: 400; }
.inner .c-soon > li::before { background: var(--aqua-grey); }
.inner .where .tbc-inline, .inner .when .tbc-inline { font-family: var(--sans); font-size: var(--t-small); font-weight: 400; }
.inner .c-form .tbc { margin: 0; }
.inner h2 .tbc-inline { font-family: var(--sans); font-size: var(--t-small); font-weight: 400; vertical-align: middle; }
.inner .stat-group + .tbc { margin-top: var(--s5); }
.inner .actions + .tbc { margin-top: var(--s4); }

/* ==== src/css/components/drawings.css ==== */
/* Drawings
   The one drawing language: the dot field and its nodes, quiet arcs and travelling pulses. The
   hero map (.camap), the network band's clusters (.clusters), the join drawing (.joinmap with
   the open 'you' ring), the inner-page hero drawings (.in-art: field and variants from
   src/drawings, filled in by the build), the gathering link (.gather-art) and the growth drawing
   (.grow-art). Rule: orange (--signal) only for what moves; the 'you' ring is the one sanctioned
   static orange. Library: #network, #join, #inner-hero.
   Classes: .block-ink, .camap, .clusters, .clusters-wrap, .conn, .dot, .end, .faint, .ga-core,
   .ga-field, .ga-halo, .ga-node, .ga-ring, .ga-spokes, .gather-art, .grow-art, .hero, .in-art,
   .joinmap, .link, .map-wrap, .node, .open, .pulse, .ring, .rv-map, .spoke, .sx-now-art, .you-halo, .you-ring
*/
.map-wrap { width: 112%; max-width: 600px; margin: 0 -4% 0 auto; position: relative; left: 4%; }
.clusters-wrap { margin: 0 0 var(--s5); }
.clusters { width: 100%; height: auto; }
.camap { width: 100%; height: auto; overflow: visible; }
.clusters .link.faint { stroke-dasharray: 2 5; }
.clusters .spoke { stroke: var(--aqua-grey); stroke-width: 1; opacity: .65; }
.pulse { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .07 1; stroke-dashoffset: .07; }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .rv-map .dot, .js .rv-map .spoke { opacity: 0; }
  .js .rv-map .link { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .rv-map.in .dot, .js .rv-map.in .spoke { animation: fade .6s var(--ease) var(--d) forwards; }
  .js .rv-map.in .link { animation: draw 1.1s var(--ease) var(--d) forwards; }
  .js .rv-map.in .link.faint { stroke-dasharray: 2 5; stroke-dashoffset: 0; opacity: 0; animation: fadeFaint .8s var(--ease) var(--d) forwards; }
  .js .rv-map.in .pulse { animation: travel var(--t) linear var(--d) infinite; }
  @keyframes fade { to { opacity: 1; } }
  @keyframes fadeFaint { to { opacity: .6; } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes travel { from { stroke-dashoffset: .07; } to { stroke-dashoffset: -1; } }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { display: none; }
}
@media (max-width: 700px) {
  .clusters-wrap { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); overflow: hidden; }
  .clusters { width: 200%; max-width: none; transform: translateX(-2%); }
}
.camap .conn .link { stroke: var(--aqua); stroke-width: 1.4; opacity: .85; }
.camap .conn .end { fill: var(--ink); }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .rv-map .conn .link { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
  .js .rv-map .conn .end { opacity: 0; }
  .js .rv-map.in .conn .link { animation: connect var(--t) var(--ease) calc(1.4s + var(--c)) infinite; }
  .js .rv-map.in .conn .end { animation: endfade var(--t) linear calc(1.4s + var(--c)) infinite; }
  .js .rv-map.in .conn .pulse { animation: travelc var(--t) linear calc(1.4s + var(--c)) infinite; }
  @keyframes connect { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: .85; } 28% { stroke-dashoffset: 0; } 72% { stroke-dashoffset: 0; opacity: .85; } 86%, 100% { stroke-dashoffset: 0; opacity: 0; } }
  @keyframes endfade { 0% { opacity: 0; } 6%, 74% { opacity: 1; } 86%, 100% { opacity: 0; } }
  @keyframes travelc { 0%, 30% { stroke-dashoffset: .07; } 66%, 100% { stroke-dashoffset: -1; } }
}
.camap .link, .clusters .link { fill: none; }
.block-ink .clusters-wrap { margin-bottom: var(--s4); }
@media (max-width: 700px) {
  .block-ink .clusters-wrap { margin-bottom: var(--s2); }
  .hero .map-wrap { width: 78%; max-width: 300px; }
  .hero .map-wrap { margin-left: auto; margin-right: auto; }
}
.clusters .spoke { display: none; }
.clusters .dot { fill: var(--aqua-grey); }
.clusters .node { fill: var(--white); r: 4.5px; }
.clusters .link { stroke: var(--aqua-pale); stroke-width: 1.2; opacity: .5; }
.clusters .link.faint { opacity: .3; }
.joinmap .dot { fill: var(--aqua-grey); }
.joinmap .link { fill: none; stroke: var(--aqua); stroke-width: 1.3; opacity: .7; }
.joinmap .link.faint { stroke: var(--aqua-grey); opacity: .35; stroke-dasharray: 2 5; }
.joinmap .node { fill: var(--ink); }
.joinmap .ring { fill: none; stroke: var(--aqua); stroke-width: 1.3; } /* a node lit, found or held (inner-page drawings) */
.joinmap .open { fill: var(--surface); stroke: var(--aqua); stroke-width: 2.5; } /* an open place to join; orange arrives only as a moving pulse */
.joinmap .you-ring { fill: var(--surface); stroke: var(--signal); stroke-width: 3; }
.joinmap .you-halo { fill: none; stroke: var(--signal); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .rv-map.in .you-halo { animation: you-wait 2.8s var(--ease) 2.2s infinite; }
  @keyframes you-wait { 0% { opacity: .7; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
}
.gather-art .link { fill: none; stroke: var(--aqua-pale); stroke-width: 1.4; }
.gather-art .node { fill: var(--white); }
.gather-art .pulse { stroke-width: 3.5; }
.gather-art .link { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; opacity: .7 !important; }
.gather-art .node { opacity: 1 !important; animation: none !important; }
.inner .in-art { max-width: 400px; margin-left: auto; }
.inner .in-art svg { width: 100%; height: auto; }
@media (max-width: 700px) {
  .inner .in-art { max-width: 220px; margin: 0; }
}
@media (min-width: 2200px) {
  .map-wrap { max-width: 660px; }
}
.sx-now-art .grow-art { width: 100%; max-width: 360px; height: auto; display: block; margin-left: auto; overflow: visible; }
.grow-art .ga-field circle { fill: var(--aqua-grey); }
.grow-art .ga-spokes line { stroke: var(--aqua); stroke-width: 1.2; opacity: .55; }
.grow-art .ga-ring { fill: none; stroke: var(--aqua); stroke-width: 1.2; opacity: .45; }
.grow-art .ga-node { fill: var(--ink); }
.grow-art .ga-core { fill: var(--signal); transform-box: fill-box; transform-origin: center; }
.grow-art .ga-halo { fill: none; stroke: var(--signal); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .sx-now-art .ga-node { transform: translate(var(--dx), var(--dy)); opacity: .35; }
  .js .sx-now-art .ga-spokes line, .js .sx-now-art .ga-ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .sx-now-art .ga-core { transform: scale(.5); }
  .js .sx-now-art.in .ga-node { animation: gaGather 1.6s var(--ease) calc(.4s + var(--k) * .08s) forwards; }
  .js .sx-now-art.in .ga-spokes line { animation: gaDraw .9s var(--ease) calc(1.7s + var(--k) * .07s) forwards; }
  .js .sx-now-art.in .ga-ring { animation: gaDraw 1.4s var(--ease) 2.4s forwards; }
  .js .sx-now-art.in .ga-core { animation: gaGrow 1.2s var(--ease) 3.2s forwards, gaBreathe 4s ease-in-out 4.6s infinite; }
  .js .sx-now-art.in .ga-halo { animation: gaHalo 4s ease-out 4.6s infinite; }
  @keyframes gaGather { to { transform: none; opacity: 1; } }
  @keyframes gaDraw { to { stroke-dashoffset: 0; } }
  @keyframes gaGrow { to { transform: scale(1.35); } }
  @keyframes gaBreathe { 0%, 100% { transform: scale(1.35); } 50% { transform: scale(1.55); } }
  @keyframes gaHalo { 0% { opacity: .7; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(2.2); } }
}
@media (prefers-reduced-motion: reduce) {
  .grow-art .ga-core { transform: scale(1.35); }
}
@media (max-width: 900px) {
  .sx-now-art .grow-art { max-width: 220px; margin: 0; }
}

/* ==== src/css/components/line-group.css ==== */
/* Line group
   The one way to show a group: items on a thin line with a node where each starts. .c-line
   (with --cols; .c-line--ink on ink; an item may lead with its organization's logo, .c-line-logo), .inner .line-group (.lg-lead, .lg-sm), the stat row
   (.line-stats), the elements list (.el-list) and its closing statement (.el-close), is / isn't (.isnt), the two-column list (.inner
   .col-list) with its network and working-group variants (.net-list, .wg-list).
   Stacks vertically on phones. Library: #line, #line-ink, #stat-line, #elements, #isnt, #col-list.
   Classes: .block-ink, .c-line, .c-line--ink, .c-line--prose, .c-line--stack-md, .c-line-h, .c-line-logo, .c-line-p, .c-wide,
   .col-list, .el-close, .el-close-s, .el-d, .el-list, .el-see, .is, .isnt, .isnt-hd, .issue-list, .journey, .jump,
   .lg-lead, .lg-see, .lg-sm, .line-stats, .net-list, .not, .res-list, .route-h,
   .stat-group, .wg-list
*/
.line-stats { display: grid; }
.line-stats b { display: block; font-family: var(--serif); line-height: 1; margin-bottom: .45rem; }
.line-stats li > span { display: block; font-size: var(--t-meta); line-height: 1.4; max-width: 14rem; }
.line-stats { gap: 0; }
@media (max-width: 700px) {
  .line-stats { padding-left: 0; }
}
.line-stats b, .route-h, .jump a {
  font-optical-sizing: auto; font-variant-numeric: lining-nums proportional-nums; }
.line-stats b { font-weight: 500; letter-spacing: -.02em; }
.c-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 var(--s5); position: relative; }
.c-line::before { content: ""; position: absolute; left: calc(var(--node) / 2); right: 0; top: calc(var(--node) / 2 - .5px); height: 1px; background: var(--rule); }
.c-line > li { position: relative; padding-top: calc(var(--node) + var(--s3)); }
.c-line > li::before { content: ""; position: absolute; left: 0; top: 0; width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--c-ground, var(--surface)); }
.c-line .c-line-h { font-family: var(--serif); font-weight: 500; font-size: var(--t-mid); line-height: 1.25; color: var(--ink); margin: 0 0 .4rem; }
.c-line .c-line-p { font-size: var(--t-small); line-height: 1.55; color: var(--text); margin: 0; max-width: 32ch; }
.c-line .c-line-logo { display: block; height: 3rem; width: auto; max-width: 100%; margin: 0 0 var(--s3); }
.c-line a.c-line-h { text-decoration: none; display: inline-block; }
.c-line a.c-line-h:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-line--ink::before { background: var(--on-ink-line); }
.c-line--ink > li::before { background: var(--white); box-shadow: 0 0 0 4px var(--ink); }
.c-line--ink .c-line-h { color: var(--white); }
.c-line--ink .c-line-p { color: var(--aqua-pale); }
@media (max-width: 700px) {
  .c-line { grid-template-columns: 1fr; gap: var(--s4); }
  .c-line::before { left: calc(var(--node) / 2 - .5px); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .c-line > li { padding: 0 0 0 calc(var(--node) + var(--s3)); }
  .c-line > li::before { top: .55rem; }
}
/* .c-line--stack-md: a line whose items lead with long statements stacks on tablets too, as it
   does on phones, instead of squeezing into three narrow towers. */
@media (min-width: 701px) and (max-width: 1024px) {
  .c-line--stack-md { grid-template-columns: 1fr; gap: var(--s4); }
  .c-line--stack-md::before { left: calc(var(--node) / 2 - .5px); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .c-line--stack-md > li { padding: 0 0 0 calc(var(--node) + var(--s3)); }
  .c-line--stack-md > li::before { top: .55rem; }
}
.inner .lg-lead { font-family: var(--serif); font-weight: 500; font-size: var(--t-item); line-height: 1.35; color: var(--ink); margin: 0 0 .6rem; max-width: 26ch; }
.inner .lg-sm { font-size: var(--t-small); line-height: 1.6; color: var(--text); margin: 0; max-width: 34ch; }
/* .c-line--prose: a passage in a few paragraphs, one per item, at reading size (What Redesign Is, "Why adolescence, why now?"). */
.inner .c-line--prose .lg-sm { font-size: var(--t-lede); line-height: 1.55; max-width: 36ch; }
.inner .el-list { list-style: none; margin: 0; padding: 0; position: relative; }
.inner .el-list::before { content: ""; position: absolute; left: calc(var(--node) / 2 - .5px); top: .9rem; bottom: 2.2rem; width: 1px; background: var(--rule); transform-origin: top; }
.inner .el-list li { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr) minmax(0, .95fr); gap: var(--s2) var(--s5); padding: 0 0 var(--s5) calc(var(--node) + var(--s4)); }
.inner .el-list li:last-child { padding-bottom: 0; }
.inner .el-list li::before { content: ""; position: absolute; left: 0; top: .55rem; width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--g); }
.inner .el-list h3 { font-size: var(--t-mid); line-height: 1.25; margin: 0; }
.inner .el-d { font-size: var(--t-small); line-height: 1.6; margin: .2rem 0 0; }
.inner .el-see { font-size: var(--t-small); line-height: 1.55; margin: .2rem 0 0; }
.inner .el-see a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--aqua-grey); text-underline-offset: 3px; }
.inner .el-see a:hover { text-decoration-color: var(--ink); }
/* .el-close: the list's closing statement. The list's line runs on past the
   last element to one larger aqua node, the pieces joined as a whole; the statement sits beside it. */
.inner .el-list:has(+ .el-close)::before { bottom: calc(-1 * (var(--s5) + .9rem)); }
.inner .el-close { text-wrap: pretty; position: relative; margin-top: var(--s5); padding-left: calc(var(--node) + var(--s4)); }
.inner .el-close::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 8.5px); top: .45rem; width: 17px; height: 17px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px var(--g), 0 0 0 9px var(--aqua-halo); }
.inner .el-close h3 { font-size: var(--t-lead); line-height: 1.25; letter-spacing: -.01em; margin: 0; max-width: 40ch; }
.inner .el-close-s { font-size: var(--t-lede); line-height: 1.55; margin: var(--s2) 0 0; max-width: 46ch; }
.inner .el-close .take { margin-top: var(--s4); }
.inner .el-close .take span { font-size: var(--t-mid); max-width: 62ch; }
.inner .isnt { max-width: 64rem; }
.inner .isnt-hd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin: 0 0 var(--s3); padding-left: calc(var(--node) + var(--s4)); }
.inner .isnt ol { list-style: none; margin: 0; padding: 0; position: relative; }
.inner .isnt ol::before { content: ""; position: absolute; left: calc(var(--node) / 2 - .5px); top: 1.1rem; bottom: 1.1rem; width: 1px; background: var(--rule); }
.inner .isnt li { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: baseline; padding: var(--s2) 0 var(--s2) calc(var(--node) + var(--s4)); }
.inner .isnt li::before { content: ""; position: absolute; left: 0; top: calc(var(--s2) + .55rem); width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--g); }
.inner .isnt .is { font-family: var(--serif); font-weight: 500; font-size: var(--t-item); line-height: 1.35; color: var(--ink); }
.inner .isnt .not { font-size: var(--t-small); line-height: 1.55; color: var(--muted); }
.inner .journey { max-width: 640px; }
.inner .journey svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 1024px) {
  .inner .el-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .inner .el-list .el-see { grid-column: 2; }
}
@media (max-width: 700px) {
  .inner .lg-lead, .inner .lg-sm { max-width: none; }
  .inner .el-list li { grid-template-columns: 1fr; gap: .3rem; padding-left: calc(var(--node) + var(--s3)); padding-bottom: var(--s4); }
  .inner .el-list .el-see { grid-column: 1; margin-top: .4rem; }
  .inner .el-list li::before { top: .5rem; }
  .inner .el-close { margin-top: var(--s4); padding-left: calc(var(--node) + var(--s3)); }
  .inner .el-list:has(+ .el-close)::before { bottom: calc(-1 * (var(--s4) + .9rem)); }
  .inner .isnt-hd { display: none; }
  .inner .isnt li { grid-template-columns: 1fr; gap: .2rem; padding-left: calc(var(--node) + var(--s3)); }
  .inner .isnt .not::before { content: "Not: "; font-weight: 700; color: var(--muted); }
}
.inner .stat-group .lg-sm { display: block; }
.inner .lg-see { font-size: var(--t-small); line-height: 1.55; margin: var(--s2) 0 0; max-width: 34ch; }
.inner .lg-see a { text-decoration: underline; text-underline-offset: 3px; }
.inner .lg-see a:hover { text-decoration-color: currentColor; }
.inner .block-ink .lg-see a { color: var(--white); text-decoration-color: var(--on-ink-line-strong); }
.inner .col-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; gap: 0 var(--s6); }
.inner .net-list { grid-template-rows: repeat(7, auto); }
.inner .wg-list { grid-template-rows: repeat(4, auto); }
.inner .col-list > li { position: relative; padding: 0 0 var(--s4) calc(var(--node) + var(--s3)); }
.inner .col-list > li::before { content: ""; position: absolute; left: 0; top: .5rem; width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--g); z-index: 1; transition: transform .3s var(--ease); }
.inner .col-list > li::after { content: ""; position: absolute; left: calc(var(--node) / 2 - .5px); top: .9rem; bottom: -.5rem; width: 1px; background: var(--rule); }
.inner .net-list > li:nth-child(7)::after, .inner .net-list > li:nth-child(14)::after, .inner .wg-list > li:nth-child(4)::after, .inner .wg-list > li:nth-child(8)::after { display: none; }
.inner .net-list > li { padding-bottom: var(--s3); }
.inner .col-list .lg-lead { max-width: 34ch; margin-bottom: .35rem; }
.inner .col-list .lg-sm { max-width: 44ch; }
.inner .col-list > li:hover::before, .inner .col-list > li:focus-within::before { transform: scale(1.3); }
@media (max-width: 700px) {
  .inner .stat-group { grid-template-columns: 1fr 1fr !important; row-gap: var(--s4) !important; }
  .inner .stat-group::before { display: none !important; }
  .inner .stat-group > li { padding: calc(var(--node) + var(--s2)) 0 0 0; }
  .inner .stat-group > li::before { top: 0; }
  .inner .col-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .inner .net-list > li:nth-child(7)::after, .inner .wg-list > li:nth-child(4)::after { display: block; }
  .inner .col-list > li { padding-left: calc(var(--node) + var(--s3)); }
}
.inner .c-line .lg-lead { margin-bottom: .6rem; }
.inner .c-line > li > .c-line-p + .lg-see { margin-top: var(--s2); }
@media (max-width: 1024px) {
  .inner .c-line[style*="--cols:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
  .inner .c-line[style*="--cols:4"]::before { display: none; }
}
@media (max-width: 700px) {
  .inner .c-line[style*="--cols:4"] { grid-template-columns: 1fr; row-gap: var(--s4); }
  .inner .c-line[style*="--cols:4"]::before { display: block; }
  .inner .c-line .lg-lead, .inner .c-line .lg-sm, .inner .c-line .c-line-p { max-width: none; }
}
.inner .res-list .lg-sm { max-width: 60ch; }
.inner .c-line-p a { color: var(--aqua-deep); font-weight: 600; }
.inner .c-line[style*="--cols:2"] { max-width: 52rem; }
.inner .issue-list .lg-sm { max-width: 64ch; }
.inner .c-wide .c-line-p { max-width: 46ch; font-size: var(--t-lede); line-height: 1.55; }
.inner .c-wide .c-line-h { max-width: 28ch; }
/* Tablets: a four-item line becomes two rows of two, and each row keeps its own line, running from
   the first node to the end of the row (polish list: groups never lose their line). */
@media (min-width: 701px) and (max-width: 1024px) {
  .inner .c-line[style*="--cols:4"] > li:nth-child(odd)::after { content: ""; position: absolute; z-index: -1; left: calc(var(--node) / 2); right: calc(-100% - var(--s5)); top: calc(var(--node) / 2 - .5px); height: 1px; background: var(--rule); }
  .inner .c-line--ink[style*="--cols:4"] > li:nth-child(odd)::after { background: var(--on-ink-line); }
  .inner .c-line[style*="--cols:4"] { isolation: isolate; }
}

/* ==== src/css/components/figures.css ==== */
/* Figures
   Evidence figures: 100-dot grids (.dotgrid with .on / .off / .gain) for any 'out of 100'
   figure, and the proof row (.proof, .proof-item, .proof-fig, .proof-what, .proof-who).
   Rule: figures written plainly ('61 -> 65 in every 100 students'). Library: #figure,
   #evidence.
   Classes: .c-line, .dotgrid, .gain, .lg-fig, .off, .on, .proof, .proof-fig, .proof-foot,
   .proof-item, .proof-what, .proof-who, .rv, .sec, .stat-group, .sx, .to
*/
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.proof-fig { font-family: var(--serif); line-height: 1; color: var(--ink); white-space: nowrap; }
.proof-fig .to { color: var(--aqua); font-weight: 400; }
@media (max-width: 700px) {
  .proof { grid-template-columns: 1fr; }
  .proof { gap: var(--s4); }
}
.proof { padding-top: 0; }
.proof-fig {
  font-optical-sizing: auto; font-variant-numeric: lining-nums proportional-nums; }
.proof-fig { font-weight: 500; letter-spacing: -.02em; }
.proof-foot { margin: var(--s3) 0 0; }
.proof-foot { margin-top: var(--s4); }
.proof-item { border-top: 0 !important; padding-top: calc(var(--node) + var(--s3)) !important; position: relative; }
.proof { position: relative; }
.proof::before { content: ""; position: absolute; left: calc(var(--node) / 2); right: 0; top: calc(var(--node) / 2 - .5px); height: 1px; background: var(--rule); }
.proof-item::before { content: ""; position: absolute; left: 0; top: 0; width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--surface); }
@media (max-width: 700px) {
  .proof::before { left: calc(var(--node) / 2 - .5px); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .proof { padding-left: 0 !important; }
  .proof-item { padding: 0 0 0 calc(var(--node) + var(--s3)) !important; }
  .proof-item::before { top: .55em; }
}
.dotgrid { display: block; margin: 0 0 var(--s3); }
.dotgrid .off { fill: var(--rule); }
.dotgrid .on { fill: var(--ink); }
.proof-item .proof-fig { margin: 0 0 .35rem !important; }
.proof-item p.proof-what { font-family: var(--serif); line-height: 1.35; color: var(--ink); margin: 0 0 .5rem; max-width: 22ch; }
.proof-item p.proof-who { line-height: 1.45; color: var(--muted); margin: 0; max-width: 30ch; }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .proof.rv .dotgrid circle { opacity: 0; }
  .js .proof.rv.in .dotgrid circle { animation: fade .25s var(--ease) calc(var(--i) * 8ms + 200ms) forwards; }
  .js .proof.rv.in .dotgrid .off { animation-name: fadeOff; }
  @keyframes fadeOff { to { opacity: 1; } }
}
.dotgrid { width: 6.25rem; height: 6.25rem; }
.dotgrid .gain { fill: var(--signal); }
.proof-item p.proof-what { font-size: var(--t-item) !important; }
.proof-item p.proof-who { font-size: var(--t-meta) !important; }
.proof-item .proof-fig { font-size: var(--t-fig) !important; }
.inner .stat-group .lg-fig { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--t-fig); line-height: 1; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .45rem; font-variant-numeric: lining-nums; }
.inner .sec .proof + .proof-foot { margin-top: var(--s4); }
.inner .c-line .dotgrid { width: 5.5rem; height: 5.5rem; margin: 0 0 var(--s3); }
.inner .c-line .dotgrid .on { fill: var(--ink); }
.inner .c-line .dotgrid .off { fill: var(--rule); }
.sx .dotgrid { width: 5.25rem; height: 5.25rem; margin: 0 0 var(--s3); }
@media (max-width: 700px) {
  .sx .dotgrid { width: 4.5rem; height: 4.5rem; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .js .sx .rv .dotgrid circle { opacity: 0; }
  .js .sx .rv.in .dotgrid circle { animation: fadeOff .2s var(--ease) calc(var(--i) * 6ms + 150ms) forwards; }
  .sx .dotgrid circle { transform-box: fill-box; transform-origin: center; }
}

/* ==== src/css/components/stories.css ==== */
/* Stories
   Story cards and their photo frames: .stories-3 / .stories-grid, .story, .frame / .frame-sm
   with .frame-tag (or .has-photo once there is a photo, cropped to the frame's shape), the featured story (.feature), and the story page's body, quotes and source
   line.
   No boxed cards except photo frames. Library: #stories.
   Classes: .feature, .feature-photo, .frame, .frame-cap, .frame-sm, .frame-tag, .has-photo, .people,
   .quotes, .sec-stories-home, .stories, .stories-3, .stories-grid, .story, .story-body, .story-h,
   .story-hero-photo, .story-lede, .story-quote, .story-src, .story-text, .briefs, .brief, .brief-sum,
   .brief-go
*/
.frame { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--frame-rule); padding: var(--s2); }
.frame-tag { position: absolute; top: 12px; left: 12px; font: 700 var(--t-meta)/1 var(--sans); text-transform: uppercase; color: var(--ink); background: var(--white); padding: .4rem .55rem; border-radius: 99px; display: inline-flex; align-items: center; gap: .4rem; }
.frame-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); }
.stories { display: grid; }
.story { display: block; text-decoration: none; color: var(--text); }
.story .frame-sm { margin-bottom: var(--s2); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.story:hover .frame-sm { transform: translate(-6px, -6px); box-shadow: 6px 6px 0 var(--aqua); }
.story-h { display: block; font-family: var(--serif); line-height: 1.3; color: var(--ink); }
.story:hover .story-h { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .stories { grid-template-columns: 1fr; }
}
.frame { background: repeating-linear-gradient(135deg, transparent 0 10px, var(--frame-hatch) 10px 11px), var(--surface); }
.frame.has-photo { padding: 0; overflow: hidden; background: var(--surface); }
.frame.has-photo > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.story-h {
  font-optical-sizing: auto; font-variant-numeric: lining-nums proportional-nums; }
.frame-tag { font-weight: 600; letter-spacing: .08em; }
.stories-3 { grid-template-columns: repeat(3, 1fr); }
.stories-3 .frame-sm { aspect-ratio: 16 / 10; }
@media (max-width: 1024px) {
  .stories-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .stories-3 { grid-template-columns: 1fr; }
  .stories-3 .story { display: grid; }
  .stories-3 .frame-sm { margin: 0; aspect-ratio: 4 / 3; }
  .stories-3 .story { grid-template-columns: 7.5rem 1fr; grid-template-rows: auto auto; column-gap: var(--s2); row-gap: .2rem; align-items: start; }
  .stories-3 .frame-sm { grid-row: 1 / span 2; }
  .stories-3 .story-h { grid-column: 2; }
}
.stories-3 { gap: var(--s5); }
.sec-stories-home .stories-3 { gap: var(--s5); }
.story-h { font-size: var(--t-item) !important; }
.inner .stories-3 { gap: var(--s5); }
@media (max-width: 700px) {
  .inner .stories-3 { gap: var(--s3); }
}
.inner .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s6); align-items: center; }
.inner .feature h2 { margin: 0 0 var(--s3) !important; }
.inner .feature-photo { display: block; text-decoration: none; }
.inner .feature-photo .frame { aspect-ratio: 4 / 3; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.inner .feature-photo:hover .frame { transform: translate(-6px, -6px); box-shadow: 6px 6px 0 var(--aqua); }
/* The featured brief's photo isn't a link (its button opens the brief's PDF), so it doesn't lift on hover. */
.inner div.feature-photo:hover .frame { transform: none; box-shadow: none; }
.inner .frame-cap { font-size: var(--t-meta); color: var(--text); background: var(--frame-caption-ground); padding: .4rem .6rem; align-self: flex-start; }
.inner .stories-grid { row-gap: var(--s5); }
.inner .story-src { display: block; margin-top: .35rem; font-size: var(--t-meta); color: var(--muted); }
@media (max-width: 900px) {
  .inner .feature { grid-template-columns: 1fr; gap: var(--s4); }
  .inner .feature-photo { order: -1; }
}
.inner .feature .story-src { margin: var(--s2) 0 0; }
@media (max-width: 700px) {
  .inner .stories-3 .frame-sm { grid-row: 1 / span 3; }
  .inner .stories-3 .story-src { grid-column: 2; margin-top: .15rem; }
}
.inner .story-hero-photo { aspect-ratio: 4 / 3; }
.inner .story-body { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 18rem); justify-content: space-between; gap: var(--s6); align-items: start; }
.inner .story-text > * { max-width: 40rem; }
.inner .story-lede { font-family: var(--serif); font-size: var(--t-mid); line-height: 1.5; color: var(--ink); margin: 0 0 var(--s4); }
.inner .story-text h2 { margin: var(--s5) 0 var(--s3) !important; }
/* Lists staff add to a story (the story text box offers bulleted and numbered lists). */
.inner .story-text ul { margin: 0 0 var(--s3); padding-left: 1.4em; list-style: disc; }
.inner .story-text ol { margin: 0 0 var(--s3); padding-left: 1.4em; list-style: decimal; }
.inner .story-text li { margin: 0 0 .4em; }
.inner .story-quote { margin: var(--s5) 0 0; padding-left: var(--s4); border-left: 2px solid var(--ink); }
.inner .story-quote blockquote { margin: 0; }
.inner .story-quote p { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.35; color: var(--ink); margin: 0 0 var(--s2); }
.inner .story-quote figcaption { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 1024px) {
  .inner .story-body { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .inner .story-quote { padding-left: var(--s3); }
}
.inner .people .frame-sm { aspect-ratio: 1 / 1; margin-bottom: var(--s2); }
.inner .quotes { row-gap: var(--s5); }
.inner .quotes blockquote { margin: 0; }
.inner .quotes blockquote p { font-family: var(--serif); font-size: var(--t-item); line-height: 1.4; color: var(--ink); margin: 0 0 var(--s2); max-width: 30ch; }
@media (min-width: 701px) {
  .inner .quotes::before { display: none; }
  .inner .quotes > li::after { content: ""; position: absolute; left: calc(var(--node) / 2); right: calc(var(--s5) * -1); top: calc(var(--node) / 2 - .5px); height: 1px; background: var(--rule); z-index: -1; }
  .inner .quotes > li:nth-child(3n)::after { right: 0; }
  .inner .quotes > li { isolation: isolate; }
}
/* Case study briefs (Stories page): one section, side by side on a desktop, one above the other on an iPad
   or a phone; each a photo, its title, its date, its summary and a button to the brief's PDF. */
.inner .briefs { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); align-items: start; }
.inner .brief .frame { aspect-ratio: 16 / 10; margin-bottom: var(--s3); }
.inner .brief h3 { font-size: var(--t-mid); line-height: 1.25; margin: 0; }
.inner .brief-sum { margin: var(--s2) 0 0; }
.inner .brief-go { margin: var(--s3) 0 0; }
@media (max-width: 1024px) {
  .inner .briefs { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ==== src/css/components/network-band.css ==== */
/* Network band
   The ink band about the network: heading and lines (.who-*), the figures on the line (.block-
   ink .net-stats), the next gathering (.gather, .gather-date), and the network page's profiles
   and lists.
   Library: #network, #timeline.
   Classes: .block-ink, .gather, .gather-art, .gather-date, .gather-what, .gather-where, .gd,
   .glance, .gm, .gy, .net, .net-go, .net-m, .net-n, .net-stats, .people, .person-n, .person-r,
   .sec-who, .tbd, .what, .when, .when-list, .where, .who-lede, .who-line, .who-row,
   .who-v2
*/
.block-ink .net-stats { grid-template-columns: repeat(4, 1fr); }
.block-ink .net-stats { margin: 0 0 var(--s7); border-color: var(--on-ink-line); }
.block-ink .net-stats li { border-color: var(--on-ink-line); }
.block-ink .net-stats b { color: var(--white); }
.block-ink .net-stats li > span { color: var(--aqua-pale); }
@media (max-width: 1024px) {
  .block-ink .net-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .block-ink .net-stats { grid-template-columns: 1fr 1fr; }
}
.who-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s3) var(--s6); }
@media (max-width: 1024px) {
  .who-row { grid-template-columns: 1fr; }
}
.who-line { font-family: var(--serif); line-height: 1.4; color: var(--white); max-width: 34ch; margin: 0; }
.block-ink .net-stats { margin-bottom: 0; }
.sec-who .who-row { margin-bottom: var(--s5); }
.sec-who .who-row h2 { margin-bottom: var(--s3) !important; }
@media (max-width: 700px) {
  .sec-who .who-row { gap: var(--s3); }
}
.block-ink .net-stats { border: 0 !important; position: relative; padding-top: 0 !important; }
.block-ink .net-stats::before { content: ""; position: absolute; left: calc(var(--node) / 2); right: 0; top: calc(var(--node) / 2 - .5px); height: 1px; background: var(--on-ink-line); }
.block-ink .net-stats li { border: 0 !important; padding: calc(var(--node) + var(--s3)) var(--s3) 0 0 !important; position: relative; }
.block-ink .net-stats li::before { content: ""; position: absolute; left: 0; top: 0; width: var(--node); height: var(--node); border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px var(--ink); }
@media (max-width: 700px) {
  .block-ink .net-stats { row-gap: var(--s4); }
  .block-ink .net-stats::before { display: none; }
  .block-ink .net-stats li::before { display: none; }
  .block-ink .net-stats li { padding: var(--s3) var(--s3) 0 0 !important; border-top: 1px solid var(--on-ink-line) !important; }
}
.sec-who .who-row > div h2 { margin: 0 !important; }
.gather { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 15rem); gap: var(--s5); align-items: center; margin: var(--s6) 0 0; }
.gather-date { display: flex; flex-direction: column; align-items: flex-start; padding-right: var(--s5); border-right: 1px solid var(--on-ink-line); color: var(--white); font-family: var(--serif); line-height: 1; }
.gather-date .gm { font: 700 var(--t-meta)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-pale); margin-bottom: .5rem; }
.gather-date .gd { font-weight: 500; letter-spacing: -.03em; }
.gather-date .gy { font-size: 1.1rem; color: var(--aqua-pale); margin-top: .4rem; }
.gather-where { font-family: var(--serif); line-height: 1.2; color: var(--white); margin: 0 0 var(--s2); }
.gather-what { line-height: 1.6; color: var(--aqua-pale); margin: 0 0 var(--s3); max-width: 50ch; }
.gather-art svg { width: 100%; height: auto; overflow: visible; }
.gather-art text { font: 600 9px var(--sans); fill: var(--aqua-pale); letter-spacing: .02em; }
@media (max-width: 900px) {
  .gather { grid-template-columns: auto minmax(0, 1fr); }
  .gather-art { display: none; }
}
@media (max-width: 700px) {
  .gather { grid-template-columns: 1fr; gap: var(--s3); }
  .gather-date { flex-direction: row; align-items: baseline; gap: .6rem; border-right: 0; padding: 0 0 var(--s3); border-bottom: 1px solid var(--on-ink-line); }
  .gather-date .gm { margin: 0; }
}
.gather { background: none; border: 0; border-top: 1px solid var(--on-ink-line); padding: var(--s5) 0 0; }
.gather-where a { color: var(--white); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); }
.gather-where a:hover, .gather-where a:focus-visible { background-size: 100% 1px; }
.gather-where a span { display: inline-block; color: var(--aqua-pale); transition: transform .3s var(--ease); }
.gather-where a:hover span { transform: translateX(4px); }
.gather-what { margin-bottom: 0; }
@media (max-width: 700px) {
  .gather { padding-top: var(--s4); }
}
.gather-where { font-size: var(--t-lead) !important; }
.who-line { font-size: var(--t-mid); }
.gather-what { font-size: var(--t-small) !important; }
.block-ink .net-stats b, .gather-date .gd { font-size: var(--t-fig) !important; }
.gather-where { font-weight: 500; }
.inner .net { display: grid; gap: .15rem; text-decoration: none; color: var(--text); }
.inner .net-n { font-family: var(--serif); font-weight: 500; font-size: var(--t-item); line-height: 1.3; color: var(--ink); }
.inner .net-m { justify-self: start; font-size: var(--t-meta); }
.inner .net-go { font-size: var(--t-meta); font-weight: 700; color: var(--aqua-deep); }
.inner .net-go span { display: inline-block; transition: transform .3s var(--ease); }
.inner .net:hover .net-n, .inner .net:focus-visible .net-n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.inner .net:hover .net-go span, .inner .net:focus-visible .net-go span { transform: translateX(4px); }
.inner .net.tbd .net-n { color: var(--ink); }
.inner .when-list { list-style: none; margin: 0; padding: 0; position: relative; max-width: 60rem; }
.inner .when-list::before { content: ""; position: absolute; left: calc(var(--node) / 2 - .5px); top: .9rem; bottom: 2rem; width: 1px; background: var(--rule); transform-origin: top; }
.inner .when-list li { position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .3rem var(--s5); padding: 0 0 var(--s4) calc(var(--node) + var(--s4)); }
.inner .when-list li:last-child { padding-bottom: 0; }
.inner .when-list li::before { content: ""; position: absolute; left: 0; top: .55rem; width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--g); }
.inner .when { font-family: var(--serif); font-weight: 500; font-size: var(--t-mid); line-height: 1.25; color: var(--ink); }
.inner .what { display: grid; gap: .15rem; }
.inner .where { font-family: var(--serif); font-weight: 500; font-size: var(--t-item); line-height: 1.35; color: var(--ink); }
@media (max-width: 700px) {
  .inner .when-list li { grid-template-columns: 1fr; padding-left: calc(var(--node) + var(--s3)); }
  .inner .when { font-size: var(--t-item); }
}
.inner .glance { position: sticky; top: 110px; }
.inner .glance dl { margin: 0; position: relative; }
.inner .glance dl::before { content: ""; position: absolute; left: calc(var(--node) / 2 - .5px); top: .5rem; bottom: .8rem; width: 1px; background: var(--rule); }
.inner .glance dl > div { position: relative; padding: 0 0 var(--s3) calc(var(--node) + var(--s3)); }
.inner .glance dl > div::before { content: ""; position: absolute; left: 0; top: .3rem; width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--g); }
.inner .glance dt { font-size: var(--t-meta); color: var(--muted); }
.inner .glance dd { margin: .1rem 0 0; font-family: var(--serif); font-weight: 500; font-size: var(--t-item); line-height: 1.3; color: var(--ink); }
.inner .glance dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--aqua-grey); text-underline-offset: 3px; }
@media (max-width: 1024px) {
  .inner .glance { position: static; }
}
.inner .people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.inner .person-n { display: inline-block; font-family: var(--serif); font-size: var(--t-item); color: var(--ink); }
.inner .person-r { display: block; font-size: var(--t-meta); color: var(--muted); margin-top: .2rem; }
@media (max-width: 900px) {
  .inner .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
}
.sec-who .who-row { align-items: start !important; }
.who-v2 { display: grid !important; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: var(--s3) var(--s6) !important; }
/* One statement at one size: the heading runs on into its line as a single sentence, the line
   a shade quieter, and the eyebrow sits above both columns so it labels the whole row. */
.who-v2 > .eyebrow { grid-column: 1 / -1; margin: 0; }
.who-v2 .who-left h2 { display: inline; line-height: 1.15; }
.who-v2 .who-line { display: inline; font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.15; letter-spacing: -.012em; color: var(--aqua-pale); max-width: none; margin: 0; padding: 0; border: 0; }
.who-v2 .who-lede { font-family: var(--sans); font-size: var(--t-lede); line-height: 1.6; text-wrap: pretty; color: var(--aqua-pale); max-width: 44ch; margin: 0; padding-left: var(--s5); border-left: 1px solid var(--on-ink-line); }
@media (max-width: 900px) {
  .who-v2 { grid-template-columns: 1fr !important; gap: var(--s4) !important; }
  .who-v2 .who-lede { padding: var(--s4) 0 0; border-left: 0; border-top: 1px solid var(--on-ink-line); }
}
@media screen and (prefers-reduced-motion: no-preference) {
  /* The band arrives quickly: the statement, then the paragraph, then the numbers row the
     way every line of items does (motion.css), its line drawing and each number counting up
     (count.js) as the line reaches it. */
  .js .sec-who .who-v2 .who-left, .js .sec-who .who-v2 .who-lede { opacity: 0; transform: translateY(14px); }
  .js .sec-who .who-v2.in .who-left { animation: whoIn .7s var(--ease) .1s forwards; }
  .js .sec-who .who-v2.in .who-lede { animation: whoIn .7s var(--ease) .3s forwards; }
  .js .sec-who .net-stats li { --at: calc(.3s + var(--i, 0) * .3s); }
  .js .sec-who .net-stats li:nth-child(2) { --i: 1; }
  .js .sec-who .net-stats li:nth-child(3) { --i: 2; }
  .js .sec-who .net-stats li:nth-child(4) { --i: 3; }
  .js .sec-who .net-stats::before { transform: scaleX(0); transform-origin: left; transition: transform 1.2s linear .3s; }
  .js .sec-who .net-stats.in::before { transform: scaleX(1); }
  .js .sec-who .net-stats li::before { opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .5s cubic-bezier(.3, 1.6, .5, 1); }
  .js .sec-who .net-stats.in li::before { opacity: 1; transform: none; transition-delay: var(--at); }
  .js .sec-who .net-stats li > * { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .sec-who .net-stats.in li > * { opacity: 1; transform: none; transition-delay: calc(var(--at) + .08s); }
}

/* ==== src/css/components/trio.css ==== */
/* Trio
   'What is redesign?': the statement (.what-statement), the three levers on one line (.trio,
   .trio-line, .nd nodes, .tz-item levers that open), the travelling pulse (.trio-pulse) and the
   conclusion (.trio-take). States: .playing, .hit, .all, .rest; levers .open.
   Library: #idea.
   Classes: .c-line, .defn-in, .nd, .rv, .sec-what, .sx-promise, .take, .trio, .trio--cards, .trio-ex, .trio-k,
   .trio-line, .trio-pulse, .trio-take, .tz, .tz-desc, .tz-head, .tz-item, .tz-key, .tz-more,
   .tz-name, .what-statement
*/
.what-statement { font-family: var(--serif); line-height: 1.4; color: var(--ink); max-width: 34ch; margin: 0 0 var(--s5); }
.trio-line { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding-top: calc(var(--node) + var(--s2)); }
.trio-line::before { content: ""; position: absolute; top: calc(var(--node) / 2 - .75px); height: var(--line); transform-origin: left; }
.trio-line li { position: relative; font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); color: var(--ink); }
.trio-line li::before { content: ""; position: absolute; left: 0; top: calc((var(--node) + var(--s2)) * -1); width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--mist); }
.trio-line li:nth-child(2)::before { background: var(--signal); }
.trio figcaption { font-size: var(--t-small); color: var(--muted); }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .trio-line::before { transform: scaleX(0); }
  .js .rv.in .trio-line::before { transform: scaleX(1); }
  .js .trio-line li::before { opacity: 0; transition: opacity .5s var(--ease); }
  .js .rv.in .trio-line li::before { opacity: 1; }
  .js .rv.in .trio-line li:nth-child(1)::before { transition-delay: .2s; }
  .js .rv.in .trio-line li:nth-child(2)::before { transition-delay: .7s; }
  .js .rv.in .trio-line li:nth-child(3)::before { transition-delay: 1.2s; }
}
@media (max-width: 700px) {
  .what-statement { margin-bottom: var(--s4); }
  .trio-line { grid-template-columns: 1fr; padding: 0 0 0 calc(var(--node) + var(--s2)); }
  .trio-line::before { width: var(--line); transform-origin: top; }
  .trio-line li { font-size: 1.2rem; }
  .trio-line li::before { left: calc((var(--node) + var(--s2)) * -1); top: calc(50% - var(--node) / 2); }
}
@media screen and (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .js .trio-line::before { transform: scaleY(0); }
  .js .rv.in .trio-line::before { transform: scaleY(1); }
}
.trio { position: relative; }
.trio-line li::before { display: none; }
.trio-line li:nth-child(2)::before { display: none; }
.trio-line .nd { position: absolute; top: calc((var(--node) + var(--s2)) * -1); width: var(--node); height: var(--node); border-radius: 50%; transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.trio-line li > span { display: inline-block; transition: color .35s var(--ease), transform .35s var(--ease); }
.trio-line::before { transition: background .5s var(--ease); }
.trio-pulse { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px var(--signal-halo); opacity: 0; pointer-events: none; will-change: transform; }
.trio-line li.hit > span { transform: translateY(-2px); }
.trio.all .trio-line li > span { color: var(--ink); transform: translateY(-2px); }
.trio.all figcaption { color: var(--ink); }
.trio figcaption { transition: color .4s var(--ease); }
.trio-line li { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .trio-pulse { display: none; }
}
.sec-what .what-statement { line-height: 1.5; max-width: 44ch; margin: 0 0 var(--s6); }
.trio { margin: 0; }
.trio-line { gap: 0 var(--s5); }
.trio-line li { text-align: left; border-top: 0; }
.trio-line .nd { left: 0 !important; margin-left: 0 !important; background: var(--ink); transform: none; }
.trio-line::before { left: calc(var(--node) / 2) !important; background: var(--rule); }
.trio-line li.hit .nd, .trio.all .trio-line li .nd { background: var(--aqua); transform: scale(1.25); box-shadow: 0 0 0 4px var(--mist), 0 0 0 7px var(--aqua-halo) !important; }
.trio.all .trio-line::before { background: var(--aqua); }
.trio.playing .trio-line li:not(.hit) > span { color: var(--muted); }
@media (max-width: 700px) {
  .trio-line { gap: var(--s2); }
  .trio-line .nd { left: calc((var(--node) + var(--s2)) * -1) !important; }
  .sec-what .what-statement { margin-bottom: var(--s5); }
}
.trio-line::before { right: 0 !important; }
@media (max-width: 700px) {
  .trio-line::before { right: auto !important; }
}
.trio-line li { display: flex; flex-direction: column; gap: .4rem; padding-right: var(--s3); }
.trio-ex { display: block; font-family: var(--sans); line-height: 1.5; color: var(--text); font-weight: 400; transition: color .35s var(--ease); }
.trio.playing .trio-line li:not(.hit) .trio-ex { color: var(--muted); }
@media (max-width: 700px) {
  .trio-line li { padding-right: 0; }
}
.trio-ex { max-width: 32ch; margin-top: .2rem; }
.trio-line { row-gap: var(--s4); }
@media (max-width: 700px) {
  .trio-line .nd { top: .7rem !important; }
  .trio-line::before { top: .9rem !important; bottom: auto !important; height: calc(100% - 7.5rem) !important; }
}
.trio figcaption.trio-take { margin: var(--s6) 0 0; padding: 0; border: 0; text-align: left; display: flex; flex-direction: column; gap: .15rem; }
.trio-take span { font-family: var(--serif); line-height: 1.25; letter-spacing: -.01em; }
.trio-take span + span { color: var(--aqua-deep); }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .trio .trio-take span { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .trio.all .trio-take span, .js .trio.rest .trio-take span { opacity: 1; transform: none; }
  .js .trio.all .trio-take span + span, .js .trio.rest .trio-take span + span { transition-delay: .35s; }
}
@media (max-width: 700px) {
  .trio figcaption.trio-take { margin-top: var(--s5); }
}
.trio-take span { font-size: var(--t-lead) !important; }
.what-statement, .trio-line li > span { font-size: var(--t-mid) !important; }
.trio-ex { font-size: var(--t-small) !important; }
.inner .defn-in { margin: 0; padding-left: var(--s4); border-left: 2px solid var(--aqua-pale); }
.inner .defn-in blockquote { margin: 0; }
.inner .defn-in p { font-family: var(--serif); font-weight: 400; font-size: var(--t-mid); line-height: 1.55; color: var(--white); max-width: 52ch; margin: 0; }
.inner .defn-in figcaption { margin-top: var(--s4); font-family: var(--serif); font-weight: 500; font-size: var(--t-item); color: var(--aqua-pale); }
.inner .take { margin: var(--s6) 0 0; display: flex; flex-direction: column; gap: .15rem; }
.inner .take span { font-family: var(--serif); font-weight: 500; font-size: var(--t-lead); line-height: 1.25; letter-spacing: -.01em; color: var(--ink); max-width: 40ch; }
.inner .take span + span { color: var(--aqua-deep); }
@media (max-width: 700px) {
  .inner .defn-in { padding-left: var(--s3); }
}
/* After a line of items, the two sentences read as a statement and its answer: a short rule,
   the first sentence on its own, the second quieter beneath it, each kept whole where it fits. */
.inner .c-line + .take { margin-top: var(--s6); padding-top: var(--s4); position: relative; gap: .5rem; }
.inner .c-line + .take::before { content: ""; position: absolute; left: 0; top: 0; width: 2.5rem; height: 2px; background: var(--aqua); }
.inner .c-line + .take span { max-width: none; text-wrap: balance; }
.inner .c-line + .take span + span { font-size: var(--t-mid); font-weight: 400; line-height: 1.4; max-width: 82ch; }
.trio-ex .trio-k { display: block; margin: 0 0 .3rem; font-weight: 600; color: var(--ink); }
.sx-promise { max-width: 40ch; margin: 0 0 var(--s6); }
.tz .tz-item { display: block !important; padding-right: var(--s4); }
.tz-head { all: unset; display: block; cursor: pointer; width: 100%; }
.tz-head:focus-visible { outline: 2px solid var(--aqua); outline-offset: 6px; border-radius: 4px; }
.tz-name { display: block; font-family: var(--serif); line-height: 1.2; color: var(--ink); margin: 0 0 var(--s2); }
.tz-key { display: block; }
.tz-more { display: inline-flex; align-items: center; gap: .4rem; font: 700 .8125rem/1 var(--sans); letter-spacing: .04em; color: var(--aqua-deep); }
.tz-more::after { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 13px; line-height: 1; transition: transform .3s var(--ease); }
.tz-item.open .tz-more::after { transform: rotate(45deg); }
.tz-desc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease); margin-top: 0; }
.tz-desc > p { overflow: hidden; margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--text); max-width: 36ch; }
.tz-item.open .tz-desc { grid-template-rows: 1fr; opacity: 1; margin-top: var(--s3); }
/* Without JavaScript nothing can open a lever, so the descriptions show open. */
html:not(.js) .tz-desc { grid-template-rows: 1fr; opacity: 1; margin-top: var(--s3); }
.tz-item.open .nd { background: var(--aqua) !important; transform: scale(1.25); }
.tz .tz-item > .nd { transition: background .3s var(--ease), transform .3s var(--ease); }
@media (max-width: 700px) {
  .tz .tz-item { padding-right: 0; }
}
.tz-name { font-size: var(--t-mid) !important; font-weight: 500; margin-bottom: .5rem !important; }
.tz-key { font-family: var(--sans) !important; font-size: var(--fs-body) !important; line-height: 1.6 !important; color: var(--text) !important; font-weight: 400; max-width: 30ch !important; }
.tz-more { margin-top: var(--s2) !important; }
.trio-take span { font-size: var(--t-mid) !important; font-weight: 400 !important; }
.trio-take span:first-child { color: var(--ink); }
/* .trio--cards (Home): the three levers as cards, the look of What Redesign Is's "How it fits together"
   (on a line they read as a sequence). Mist cards on the white ground, no line, no nodes, no
   travelling pulse; each lever's "How it works" still opens inside its card. Closed, the three are the
   same height; one opened grows, and the row with it. */
.trio--cards .trio-line { padding-top: 0; column-gap: var(--s4); }
.trio--cards .trio-line::before, .trio--cards .trio-line li::before { display: none; }
.trio--cards .tz .tz-item { padding: var(--s4); background: var(--mist); }
@media (max-width: 700px) {
  .trio--cards .trio-line { padding: 0; row-gap: var(--s2); }
  .trio--cards .tz .tz-item { padding: var(--s3); }
}

/* ==== src/css/components/challenge.css ==== */
/* Challenge
   'Why secondary school redesign?': the 51% figure with its dot grid, the statement, the reason
   column (.sx-*, .why-*, .chal-*).
   Library: #challenge.
   Classes: .dotgrid, .gap, .gap-on, .rv, .sec, .sx, .sx-big, .sx-h, .sx-l, .sx-n, .sx-now-art,
   .sx-now-grid, .sx-only, .sx-src, .sx-sub, .sx-ways, .why-unit
*/
.sec h2:not(.why-unit) { margin: 0 0 var(--h2-gap); }
.sx h2 { margin: 0 0 var(--s3) !important; }
.sx-h { font-family: var(--sans); font-size: var(--t-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aqua-deep); margin: 0 0 var(--s4); }
.sx-n { font-family: var(--serif); font-weight: 500; font-size: var(--t-fig); line-height: 1; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .5rem; }
.sx-l { font-family: var(--serif); font-size: var(--t-item); line-height: 1.35; color: var(--ink); margin: 0; max-width: 18ch; }
.sx-ways { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.sx-ways li { position: relative; padding-left: 1.1rem; font-size: var(--t-small); line-height: 1.5; color: var(--text); margin: .25rem 0; }
.sx-ways li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); }
.sx-src { margin-top: var(--s4); }
.sx-big { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.3; color: var(--ink); max-width: 30ch; margin: 0 0 var(--s4); }
.sx-sub { font-family: var(--serif); font-size: var(--t-mid); line-height: 1.45; color: var(--ink); max-width: 40ch; margin: 0; }
.sx .dotgrid .gap { fill: none; }
.sx-only { display: block; font-family: var(--sans); font-size: var(--t-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .sx .rv.in .dotgrid .gap, .js .sx .rv.in .dotgrid .gap-on { animation: sxGap .45s var(--ease) calc(var(--i) * 6ms + 900ms) forwards; }
  @keyframes sxGap { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
}
.sx .dotgrid .gap-on { stroke: var(--signal); stroke-width: 1.4; }
.sx .dotgrid .gap-on { fill: var(--ink) !important; stroke: none !important; }
.sx-now-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--s6); align-items: center; }
@media (max-width: 900px) {
  .sx-now-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .sx-now-art { order: -1; }
}
.sx .dotgrid .gap { stroke: var(--gap-ring) !important; stroke-width: 1.1; }

/* ==== src/css/components/join.css ==== */
/* Join
   The closing band: headline and line (.join-copy), the pill-shaped email field (.pill-field),
   the latest issue (.join-latest), the other ways in (.join-ways), the join drawing's place.
   Library: #join.
   The sign-up opens in place: pressing Subscribe, or tabbing past the email, shows the
   panel (.join-more: names, "I am a…", the Privacy line and one Subscribe button, drawn like the
   Subscribe page's fields in forms.css) and the form becomes .is-open (join.js). Without JavaScript the
   panel stays hidden and the email row goes to the Subscribe page.
   Classes: .iss-go, .issue-list, .join-art, .join-copy, .join-form, .join-grid, .join-latest, .join-more,
   .join-ways, .joinmap, .pill-field
*/
.join-more { display: grid; gap: var(--s4); max-width: 40rem; margin-top: var(--s4); }
.join-form .join-more[hidden] { display: none; }
.join-form.is-open .pill-field .btn { display: none; }
.join-more .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.join-more .f-field { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.join-more label, .join-more legend { font-weight: 700; font-size: var(--t-small); color: var(--ink); padding: 0; }
.join-more .f-opt { font-weight: 400; color: var(--muted); margin-left: .35rem; }
.join-more input[type="text"] { width: 100%; font: 500 var(--fs-body) var(--sans); color: var(--text); background: var(--white); border: var(--line) solid var(--field-border); border-radius: 999px; padding: .85rem 1.1rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.join-more input[type="text"]:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--focus-glow); }
.join-more .f-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.join-more .f-chips label { position: relative; font-weight: 600; }
.join-more .f-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.join-more .f-chips span { display: inline-block; padding: .55rem .95rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); color: var(--ink); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.join-more .f-chips span:hover { border-color: var(--ink); }
.join-more .f-chips input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.join-more .f-chips input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.join-more .f-hint { margin: calc(var(--s4) * -0.5) 0 0; font-size: var(--t-small); line-height: 1.6; color: var(--muted); }
.join-more .f-submit { margin: 0; }
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.join-copy h2 { margin: 0 0 var(--s3) !important; }
.pill-field { display: flex; align-items: center; max-width: 34rem; padding: .35rem; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--white); transition: box-shadow .2s var(--ease); }
/* Focus shows on the whole pill, in the site's focus ring (base.css), following its round shape; the
   input inside draws none of its own (it was a square box inside the pill). */
.pill-field:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.pill-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 1rem var(--sans); color: var(--text); padding: .7rem 1rem; }
.pill-field input:focus-visible { box-shadow: none; }
.pill-field input::placeholder { color: var(--muted); }
.join-latest { margin: var(--s3) 0 0 1.35rem; color: var(--muted); }
.join-latest a { color: var(--ink); font-weight: 600; text-decoration: none; }
.join-latest a:hover { text-decoration: underline; }
.joinmap { width: 100%; height: auto; overflow: visible; }
.join-ways { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s5); position: relative; }
.join-ways::before { content: ""; position: absolute; left: calc(var(--node) / 2); right: 0; top: calc(var(--node) / 2 - .5px); height: 1px; background: var(--rule); }
.join-ways li { position: relative; padding-top: calc(var(--node) + var(--s2)); }
.join-ways li::before { content: ""; position: absolute; left: 0; top: 0; width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); }
.join-ways a { font-family: var(--serif); color: var(--ink); text-decoration: none; }
.join-ways a span { display: inline-block; transition: transform .3s var(--ease); color: var(--aqua); }
.join-ways a:hover span { transform: translateX(4px); }
@media (max-width: 900px) {
  .join-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .join-art { order: -1; max-width: 420px; }
}
@media (max-width: 700px) {
  .pill-field { flex-direction: column; align-items: stretch; border-radius: 1.6rem; padding: .4rem; }
  .pill-field input { text-align: center; }
  .join-latest { margin-left: 0; }
  .join-ways { grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s5); }
  .join-ways::before { left: calc(var(--node) / 2 - .5px); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .join-ways li { padding: 0 0 0 calc(var(--node) + var(--s3)); }
  .join-ways li::before { top: .5em; }
  .join-more .f-row { grid-template-columns: 1fr; }
}
.join-copy h2 { max-width: 20ch; }
.join-ways a { font-size: var(--t-item) !important; }
.join-latest { font-size: var(--t-meta) !important; }
.inner .join-latest { margin-left: 1.35rem; }
@media (max-width: 700px) {
  .inner .join-latest { margin-left: 0; }
}
.inner .issue-list li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); }
.inner .iss-go { justify-self: start; margin-top: .35rem; font-size: var(--t-meta); font-weight: 700; color: var(--aqua-deep); text-decoration: none; }
.inner .iss-go span { display: inline-block; transition: transform .3s var(--ease); }
.inner .iss-go:hover span { transform: translateX(4px); }
@media (max-width: 700px) {
  .inner .issue-list li { grid-template-columns: 1fr; }
}
.pill-field input { min-height: 44px; }
.join-ways li { text-wrap: balance; }
/* Phones: "Read issue" is a 44px tap target. */
@media (max-width: 700px) {
  .inner .iss-go { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
}

/* ==== src/css/components/forms.css ==== */
/* Forms
   The page forms (.c-form): fields (.f-field with .f-req), rows, checkboxes and chips
   (.f-check, .f-chips), the send button row.
   Every field has a label; required fields say so in the label. Library: #forms.
   Classes: .c-form, .f-check, .f-chips, .f-field, .f-hint, .f-opt, .f-req, .f-row, .f-submit, .form-asks
*/
.inner .form-asks { margin: 0 0 var(--s3); color: var(--muted); }
.inner .c-form { max-width: 40rem; display: grid; gap: var(--s4); }
.inner .c-form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.inner .c-form .f-field { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.inner .c-form label, .inner .c-form legend { font-weight: 700; font-size: var(--t-small); color: var(--ink); padding: 0; }
.inner .c-form legend { margin-bottom: .45rem; }
.inner .c-form .f-req, .inner .c-form .f-opt { font-weight: 400; color: var(--muted); margin-left: .35rem; }
.inner .c-form input[type="text"], .inner .c-form input[type="email"], .inner .c-form select, .inner .c-form textarea { width: 100%; font: 500 1rem var(--sans); color: var(--text); background: var(--white); border: var(--line) solid var(--field-border); border-radius: 999px; padding: .85rem 1.1rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.inner .c-form textarea { border-radius: 1.2rem; min-height: 9rem; resize: vertical; line-height: 1.55; }
.inner .c-form select { appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2321495F' stroke-width='1.6'/%3E%3C/svg%3E") right 1.1rem center / .75rem no-repeat; padding-right: 2.6rem; }
.inner .c-form input:focus-visible, .inner .c-form select:focus-visible, .inner .c-form textarea:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--focus-glow); }
.inner .c-form .f-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.inner .c-form .f-chips label { position: relative; font-weight: 600; }
.inner .c-form .f-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inner .c-form .f-chips span { display: inline-block; padding: .55rem .95rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); color: var(--ink); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.inner .c-form .f-chips span:hover { border-color: var(--ink); }
/* A ticked chip looks pressed, like the resource filter's chosen button. */
.inner .c-form .f-chips input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* The ink ring every focus gets (base.css): the yellow alone is under 3:1 on white (QA, 2026-10-15, WCAG 1.4.11). */
.inner .c-form .f-chips input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.inner .c-form .f-check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; color: var(--text); }
.inner .c-form .f-check input { margin: .3rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--ink); flex: none; }
/* A short note under a field or checkbox, such as how a nomination is used. */
.inner .c-form .f-hint { margin: calc(var(--s4) * -0.5) 0 0; font-size: var(--t-small); line-height: 1.6; color: var(--muted); }
/* Under a checkbox it lines up with the checkbox's words: the box (1.05rem) and its gap (.7rem), as .f-check sets them. */
.inner .c-form .f-check + .f-hint { padding-left: 1.75rem; }
.inner .c-form .f-submit { margin: 0; }
@media (max-width: 700px) {
  .inner .c-form .f-row { grid-template-columns: 1fr; }
}

/* ==== src/css/components/resources.css ==== */
/* Resources
   Tools & Resources: the type filter (.res-filter, aria-pressed), the list (.res-list with
   hidden rows), titles and tags (.res-t, .res-tag), a resource's PDF line (.res-file, .res-dl: size, and a link that saves it),
   and the copy button (.copy-btn, .done).
   Library: #resources.
   Classes: .btn, .copy-btn, .res-by, .res-dl, .res-file, .res-filter, .res-list, .res-main, .res-t, .res-tag
*/
.inner .res-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--s5); }
.inner .res-list { list-style: none; margin: 0; padding: 0; position: relative; }
.inner .res-list::before { content: ""; position: absolute; left: calc(var(--node) / 2 - .5px); top: .9rem; bottom: 1.5rem; width: 1px; background: var(--rule); }
.inner .res-list li { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr) minmax(0, .6fr); gap: .4rem var(--s5); padding: 0 0 var(--s4) calc(var(--node) + var(--s4)); }
.inner .res-list li[hidden] { display: none; }
.inner .res-list li::before { content: ""; position: absolute; left: 0; top: .5rem; width: var(--node); height: var(--node); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--g); }
.inner .res-t { display: inline-block; font-family: var(--serif); font-weight: 500; font-size: var(--t-item); line-height: 1.3; color: var(--ink); text-decoration: none; margin: 0 0 .35rem; }
.inner .res-t span[aria-hidden] { display: inline-block; color: var(--aqua); transition: transform .3s var(--ease); }
.inner .res-t:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.inner .res-t:hover span[aria-hidden] { transform: translateX(4px); }
.inner .res-by, .inner .res-tag { font-size: var(--t-small); line-height: 1.5; color: var(--text); margin: .25rem 0 0; }
.inner .res-tag { color: var(--muted); }
.inner .res-file { margin: .5rem 0 0; font-size: var(--t-small); color: var(--muted); }
.inner .res-dl { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .inner .res-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); }
  .inner .res-list .res-main { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .inner .res-list li { grid-template-columns: 1fr; padding-left: calc(var(--node) + var(--s3)); gap: .2rem; }
  .inner .res-by, .inner .res-tag { margin: 0; }
}
.inner .copy-btn.done { background: var(--ink); color: var(--white); }
/* Phones: the filter chips are 44px tall. */
@media (max-width: 700px) {
  .inner .res-filter .btn { min-height: 44px; }
}

/* ==== src/css/motion.css ==== */
/* Motion
   Section reveals (.js .rv -> .in) and the drawings that draw themselves (.rv-map), with the
   shared keyframes. Everything is visible by default; motion is added only when JS is on and
   the visitor hasn't asked for reduced motion.
   Layer 5 of 6 (with pages).
   Classes: .c-line, .col-list, .el-list, .more, .net-stats, .rv, .sec-who, .when-list, .who-v2
*/
@media screen and (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .inner .el-list.rv::before { transform: scaleY(0); transition: transform 1.4s var(--ease) .2s; }
  .js .inner .el-list.rv.in::before { transform: scaleY(1); }
  .js .inner .el-list.rv li::before { opacity: 0; transition: opacity .5s var(--ease); }
  .js .inner .el-list.rv.in li::before { opacity: 1; }
  .js .inner .el-list.rv.in li:nth-child(2)::before { transition-delay: .35s; }
  .js .inner .el-list.rv.in li:nth-child(3)::before { transition-delay: .7s; }
  .js .inner .el-list.rv.in li:nth-child(4)::before { transition-delay: 1.05s; }
  .js .inner .el-list.rv.in li:nth-child(5)::before { transition-delay: 1.4s; }
  .js .inner .col-list.rv > li::before, .js .inner .when-list.rv li::before { opacity: 0; transition: opacity .5s var(--ease), transform .3s var(--ease); }
  .js .inner .col-list.rv.in > li::before, .js .inner .when-list.rv.in li::before { opacity: 1; }
  .js .inner .col-list.rv > li::after { transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
  .js .inner .col-list.rv.in > li::after { transform: scaleY(1); }
  .js .inner .when-list.rv::before { transform: scaleY(0); transition: transform 1.2s var(--ease) .2s; }
  .js .inner .when-list.rv.in::before { transform: scaleY(1); }
  /* A line of items: the line draws left to right and each item arrives as the line
     reaches its node: the node lights, then the item's words rise in under it. The row itself
     stays put. --at is when the line reaches item --i of --cols. */
  .js .inner .c-line.rv { opacity: 1; transform: none; }
  .js .inner .c-line.rv > li { --at: calc(var(--i, 0) * 1.2s / var(--cols, 3)); }
  .js .inner .c-line.rv > li:nth-child(2) { --i: 1; }
  .js .inner .c-line.rv > li:nth-child(3) { --i: 2; }
  .js .inner .c-line.rv > li:nth-child(4) { --i: 3; }
  .js .inner .c-line.rv > li:nth-child(5) { --i: 4; }
  .js .inner .c-line.rv > li:nth-child(6) { --i: 5; }
  .js .inner .c-line.rv::before { transform: scaleX(0); transform-origin: left; transition: transform 1.2s linear; }
  .js .inner .c-line.rv.in::before { transform: scaleX(1); }
  .js .inner .c-line.rv > li::before { opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .5s cubic-bezier(.3, 1.6, .5, 1); }
  .js .inner .c-line.rv.in > li::before { opacity: 1; transform: none; transition-delay: var(--at); }
  .js .inner .c-line.rv > li > * { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .inner .c-line.rv.in > li > * { opacity: 1; transform: none; transition-delay: calc(var(--at) + .08s); }
  .js [data-counting] { font-variant-numeric: lining-nums tabular-nums; } /* count.js: digits keep their width while they count */
  /* Cards come in one by one rather than as a block: Home's levers (off Home since 2026-10-17; kept for their return). */
  .js .rv .trio--cards .tz-item { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .rv.in .trio--cards .tz-item { opacity: 1; transform: none; }
  .js .rv.in .trio--cards .tz-item:nth-child(2) { transition-delay: .12s; }
  .js .rv.in .trio--cards .tz-item:nth-child(3) { transition-delay: .24s; }
}
@media screen and (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .js .inner .c-line.rv::before { transform: scaleY(0); transform-origin: top; }
  .js .inner .c-line.rv.in::before { transform: scaleY(1); }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .js .sec-who .who-v2.rv, .js .sec-who .net-stats.rv, .js .sec-who .more.rv { opacity: 1 !important; transform: none !important; }
}

/* ==== src/css/pages/home.css ==== */
/* Home page
   What only Home does differently (.page-home): its section rhythm and the few placements that
   differ from the shared components.
   Layer 5 of 6. Keep this short: anything a second page needs becomes a component.
   Classes: .actions, .also-tools, .block-ink, .camap, .defn-wrap, .dot, .hero, .hero-copy,
   .hero-grid, .join-ways, .joinmap, .map-wrap, .nd, .page-home, .sec, .sec-join,
   .sec-stories-home, .sec-what, .sec-who, .sub, .sx, .sx-now, .trio, .trio-line, .what-statement,
   .you-ring
*/
.page-home .hero { padding-top: var(--s5); }
.page-home .map-wrap .camap .dot { fill: var(--aqua-grey); }
@media (max-width: 700px) {
  .page-home .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .page-home .hero-copy { display: contents; }
  .page-home .hero-copy h1 { order: 1; }
  .page-home .hero-copy .sub { order: 3; }
  .page-home .actions { order: 4; }
  .page-home .map-wrap { margin: 0 auto; left: 0; }
}
.page-home .defn-wrap { display: grid; align-items: start; }
.page-home .hero { padding-bottom: var(--s6); }
.page-home .block-ink + .sec { padding-top: var(--s6) !important; }
.page-home .sec-what .defn-wrap { grid-template-columns: 1fr; gap: 0; }
.page-home .sec-who { margin-top: 0 !important; }
@media (min-width: 768px) and (max-width: 1024px) {
  .page-home .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s4); align-items: center; }
  .page-home .map-wrap { width: 100%; max-width: 360px; margin: 0 0 0 auto; left: 0; }
}
.page-home .sx { background: var(--surface); }
.page-home .sx-now { background: var(--mist); }
.page-home .sec-what { background: var(--surface) !important; }
.page-home .sec-what .trio:not(.all) .trio-line li:not(.hit) .nd { box-shadow: 0 0 0 4px var(--surface) !important; }
.page-home .sec-stories-home { background: var(--mist) !important; }
.page-home .sec-join { background: var(--surface) !important; }
.page-home .sec-join .join-ways li::before { box-shadow: 0 0 0 4px var(--surface) !important; }
.page-home .sec-join .joinmap .you-ring { fill: var(--surface) !important; }
.page-home .sec-stories-home .also-tools { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); display: grid; column-gap: var(--s5); align-items: end; justify-content: start; }
.page-home .sec-stories-home .also-tools p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--text); }
.page-home .sec-stories-home .also-tools { grid-template-columns: minmax(0, 52ch); row-gap: var(--s3); }
.page-home .sec-what .what-statement { font-size: var(--t-lede) !important; max-width: 72ch; } /* the full shared definition: reads as a definition, not a headline, using more of the width */
.page-home .sec-what .what-statement strong { font-weight: 600; color: var(--ink); } /* key phrases */

/* ==== src/css/pages/about.css ==== */
/* About page
   What only About does differently (.page-about): "Supported by" carries CCEE's logo beside its
   words.
   Layer 5 of 6. Keep this short: anything a second page needs becomes a component.
   Classes: .page-about, .sup, .sup-logo
*/
.page-about .sup { display: grid; grid-template-columns: minmax(0, 36rem) auto; justify-content: start; gap: var(--s5) var(--s6); align-items: center; }
.page-about .sup-logo { display: block; box-sizing: content-box; width: clamp(11rem, 15vw, 14rem); height: auto; padding: var(--s4) 0 var(--s4) var(--s6); border-left: 1px solid var(--rule); }
@media (max-width: 700px) {
  .page-about .sup { grid-template-columns: 1fr; }
  .page-about .sup-logo { grid-row: 1; width: 9rem; padding: 0; border: 0; }
}

/* ==== src/css/utilities.css ==== */
/* Utilities
   Single-purpose helpers: .sr (visually hidden, read by screen readers).
   Layer 6 of 6.
   Classes: .isnt, .not, .sr
*/
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) {
  .inner .isnt .not .sr { display: none; }
}

/* ==== src/css/print.css ==== */
/* Print
   What a printed page needs: every section shown (the scroll-in motion is screen-only, in its own
   rules), and the parts that only work on screen left out (skip link, Menu button and menu, the
   newsletter sign-up form's field). Nothing else changes; the screen design is untouched.
   Library: none. Classes: .menu-btn, .site-nav, .skip
*/
@media print {
  .skip, .menu-btn, .site-nav { display: none; }
  .sec, .hero { break-inside: auto; }
  h1, h2, h3, .eyebrow { break-after: avoid; }
  figure, .proof-item, .story-quote { break-inside: avoid; }
}