/* ============================================================
   AZ AI Alliance — azaialliance.org
   Reference implementation of the Alliance visual system.

   Three rules this file exists to enforce:

   1. THE YELLOW IS A GRAPHIC. NEVER A WORD.
      The mark's own #FFD600 is in the palette and does real work:
      the section rule, the header bar, chip and callout fills,
      one of the three step nodes. What was removed is gold AS
      TEXT — the muddy dark-gold that used to carry card labels
      and links on the dark band. There is no dark gold token to
      reach for, on purpose. Where that role needed a colour it
      is now --navy-mid on light, and --on-dark on the navy band.

   2. NOTHING SMALL SITS ABOVE A HEADING — INCLUDING IN CARDS.
      A section mark is .rule, a graphic. A card's defining line
      is .card-sub, BELOW the heading. A real sequence is
      .card-step, a numbered node. Tags go below. Most of the
      time the answer is nothing at all.

   3. ARIZONA IS A NETWORK, NOT A MAP. The state appears as
      az-network.svg — the outline built from nodes and links,
      the same language as the guidance cover. Decorative only.

   PALETTE: Modern Accessibility, chosen 2026-09-19 and final.
   The tokens below ARE the palette — there is no override file
   and no switcher any more. Its red (#A82027) is the strongest
   of the six Canva options at 7.24:1 on white; its body colour
   is a charcoal rather than the navy Canva suggested, because
   blue body copy reads as unclicked links.

   Every value here is load-bearing. Changing one is a brand
   decision — see docs/BRAND-STANDARDS.md — and must be followed
   by the accessibility sweep in docs/LAUNCH_CHECKLIST.md.
   ============================================================ */

/* ---------- Self-hosted fonts ----------
   Figtree, and nothing else. One family, differentiated by weight,
   size and tabular figures. A mono companion was tried and removed:
   monospace reads as terminal and typewriter, which is the past
   rather than the future.

   Figtree replaced IBM Plex Sans on 2026-09-24. Plex is an
   engineering typeface — flat terminals, tight apertures, an even
   technical grey on the page — and on a site whose whole argument
   is "come and do this work with us", it read cold. Figtree is a
   humanist geometric: open counters, a true double-storey a and g,
   round warm forms, and lining figures that keep a table of dates
   legible. It also sets a little tighter than Plex, so headings
   that were folding onto two lines now fit one. */
@font-face{font-family:'Figtree';src:url('/assets/fonts/figtree-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/assets/fonts/figtree-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Figtree';src:url('/assets/fonts/figtree-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/assets/fonts/figtree-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/assets/fonts/figtree-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --navy:#11194F; --navy-deep:#0B1138; --navy-mid:#28358C;
  --navy-wash:#E7E9F2; --navy-soft:#D2D6EA;
  --clay:#A82027; --clay-deep:#8B181E; --clay-lift:#E5A0A4; --clay-wash:#F6E9EA;
  /* The mark's own yellow. Graphic only — see rule 1. There is deliberately
     no dark-gold companion: nothing warm carries text anywhere on this site. */
  --yellow:#FFD600; --yellow-wash:#FFF6D0;
  /* Links and accents on any navy surface. */
  --on-dark:#9FC2F7;
  --pinyon:#28358C; --pinyon-wash:#E7E9F2;
  --ink:#1C2130; --ink-soft:#4E5468; --stone:#9AA0B2;
  --sand:#E9EBEF; --tint:#DEE1E8; --paper:#FFFFFF; --line:#CDD2DD;

  --display:'Figtree','Segoe UI',Arial,sans-serif;
  --body:'Figtree','Segoe UI',Arial,sans-serif;
  --max:1140px; --radius:6px;
  /* The content grid. --col-text IS the measure. 36rem renders about 77
     characters per line in Plex Sans at body size — measured, not guessed,
     and comfortable at this line-height (1.65). Text in that column needs
     no cap of its own. --measure applies only to prose inside a block that
     spans both columns, where the grid is not protecting it. */
  --col-text:36rem; --col-gap:52px;
  --measure:54ch;

  /* THE TYPE SCALE. Seven steps, and nothing is allowed to invent an
     eighth. Before this existed the site had SEVENTEEN distinct sizes,
     including 15.04px next to 15.2px and 19.2px next to 19.84px — pairs
     too close to read as intentional and the clearest fingerprint of
     type chosen one element at a time instead of from a system. */
  --fs-xs:.82rem;     /* metadata, counts, chips          13.1px */
  --fs-sm:.94rem;     /* notes, captions, defining lines  15.0px */
  --fs-base:1.05rem;  /* body                             16.8px */
  --fs-md:1.1rem;     /* dense headings inside panels     17.6px */
  --fs-lg:1.22rem;    /* h3 and the lede                  19.5px */
  /* h2 and h1 are the two fluid steps, declared with the headings. */
  /* Figures line up in columns wherever they are compared. */
  --focus-ring:var(--clay);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:118px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

body{font-family:var(--body);font-size:var(--fs-base);line-height:1.65;color:var(--ink);
  background:var(--sand);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}

a{color:var(--clay);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--clay) 45%,transparent)}
a:hover{color:var(--navy);text-decoration-color:var(--navy)}

/* Yellow makes an excellent focus ring on navy — 10.6-11.7:1 — and a ring
   is a shape, not a word. */
.band-navy,.site-footer,.hero,.page-head{--focus-ring:var(--yellow)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
[tabindex="-1"]:focus{outline:none}

/* ============================================================
   THE CONTENT GRID
   ============================================================
   Every section container is the same two-column grid. A block
   either sits in the TEXT column or spans TEXT + ASIDE. There
   is no third option, and nothing sets its own width.

   This replaces a measure-per-element scheme that was correct
   about readability and wrong about alignment: capping in `ch`
   means every font size produces a different pixel width, so
   /data-privacy ended up with TEN different right edges in one
   scroll — 599, 661, 702, 718, 739, 783, 806, 858, 910, 1266.
   Each had a defensible reason. Together they read as noise,
   which is exactly what Michelle kept seeing and could not name.

   Now there are two edges. The text column is the measure, so
   prose does not need capping inside it. The aside column is a
   REAL PLACE — a source note, related links, a pull quote, a
   photograph — rather than the space left over after the text
   ran out.
   ============================================================ */
.container{
  max-width:var(--max);margin:0 auto;padding:0 24px;
  display:grid;
  grid-template-columns:
    [text-start] minmax(0,var(--col-text))
    [text-end] var(--col-gap)
    [aside-start] minmax(0,1fr) [aside-end];
  align-content:start;
}
/* Default: the text column. This is the measure — 608px, about 68
   characters at body size — so running text needs no max-width of
   its own and every block lines up on the same right edge. */
.container>*{grid-column:text-start/text-end;min-width:0}

/* Blocks that are structure rather than prose span both columns.
   A card grid, a table, the tracker, a video row, a filter bar —
   these are the things that genuinely want the width, and they all
   stop at the SAME right edge as each other. */
.container>.grid,
.container>.legend,
.container>.table-wrap,
.container>.tracker,
.container>.video-grid,
.container>.partner-grid,
.container>.filters,
.container>.glossary-group,
.container>.section-head,
.container>.wide{grid-column:text-start/aside-end}

/* ---------- The aside column ----------
   One per section. It spans the section's rows and pins to the top, so it
   sits BESIDE the text without ever disturbing the flow of it — no row is
   stretched, no paragraph is pushed down. This is where the caveat, the
   source note, the related link or a photograph goes. Where a section has
   nothing to put here yet, the column stays empty — honest, and a
   placeholder rather than a principle.

   Photographs come from Alliance events, where a release is part of
   attendance and non-consenting attendees are excluded. Real Arizona
   educators in real rooms. Never stock. */
/* A section that opens with the rule: drop the aside so its first line sits
   where the HEADING's letters start, not where the rule does. Before this the
   margin began 37-79px above the text it belongs beside, which reads as two
   unrelated blocks rather than one thought with a note attached. */
.container:has(> .rule) > .aside{padding-top:2.3rem}
.container>.aside{grid-column:aside-start/aside-end;
  /* span, not 1/-1: with no explicitly declared rows, -1 resolves to line 1
     and the aside ends up occupying row ONE, stretching it and shoving the
     heading down the page. A generous span reaches past the last row; the
     surplus implicit rows are zero-height because this grid has no row gap. */
  grid-row:1/span 60;align-self:start;font-size:var(--fs-sm)}
.aside>*+*{margin-top:1rem}
.aside .callout,.aside .card{margin:0}
.aside .callout p,.aside .card p{font-size:var(--fs-sm)}
/* A pull quote is not invented content — it is a line lifted out of the
   section it sits beside, which is the oldest way there is of using a
   margin. It earns the column where a long section has no caveat and no
   source to put there. */
.pullquote{font-family:var(--display);font-weight:600;font-size:var(--fs-lg);
  line-height:1.35;color:var(--navy);letter-spacing:-.015em;
  border-top:3px solid var(--yellow);padding-top:1rem;margin:0}
.pullquote cite{display:block;font-family:var(--body);font-style:normal;font-weight:400;
  font-size:var(--fs-sm);color:var(--ink-soft);margin-top:.7rem;letter-spacing:0}

/* A photograph in this column. Cleared event photography only — never stock. */
.aside figure{margin:0}
.aside figure img{width:100%;height:auto;border-radius:var(--radius);display:block}
.aside figcaption{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:.5rem;
  line-height:1.4}

/* A note in the aside is quieter than the text it sits beside, and carries
   a hairline so it reads as marginalia rather than orphaned body copy. */
.aside-note{color:var(--ink-soft);border-left:2px solid var(--line);
  padding-left:16px}
/* A note that OPENS the margin aligns its own first line with the
   heading's, rather than its line box with the heading's line box. */
.aside>.aside-note:first-child{margin-top:-.5rem}
/* A pull quote opens with a rule of its own, and the section already has one
   on the left. Two yellow bars a few pixels apart read as a mistake; on the
   same line they read as a pair. So this one goes back up to the section
   rule's height rather than dropping to the heading's. */
.container:has(> .rule) > .aside > .pullquote:first-child{margin-top:-2.3rem}
.aside-note strong{display:block;font-family:var(--display);color:var(--navy);
  font-weight:600;margin-bottom:.25rem}
@media (max-width:999px){
  .container>.aside{grid-row:auto;grid-column:1;margin-top:1.4rem}
  .aside-note{border-left:0;padding-left:0}
}

/* Inside a block that spans both columns, running text still needs a
   measure — the grid is not protecting it there. */
.wide p,.tracker p{max-width:var(--measure)}
/* ...but a status line is a rule across the panel, not running text. Capped
   at the measure, its hairline stopped a third of the way across the box. */
.tracker .step-status,.tracker .tracker-status,.tracker-list li{max-width:none}
.tracker .t-note{display:block}
main td,main th{max-width:none}

@media (max-width:999px){
  /* One column. The aside falls below the text it supports, which is
     the right reading order and the order it is already in the DOM. */
  /* Every line name the wide grid uses points at this one column. Without
     them, a block that spans text-start/aside-end (a card grid, a section
     head, the video row) conjures implicit tracks for the missing names,
     and its siblings in column 1 collapse to 0px — which is how a single
     button ended up wrapping onto six lines at half a laptop screen. */
  .container{grid-template-columns:[text-start aside-start] minmax(0,1fr) [text-end aside-end]}
  .container>*,.container>.aside{grid-column:1}
}

/* ---------- A section with nothing beside it ----------
   The grid is right when a section has something in the margin. When it has
   NOTHING there, a text column hugging the left of a 1092px band just looks
   like the page ran out — which is what Michelle kept seeing on "Arizona has
   1.5 million K-12 students."

   So a section with no aside and no full-width block centres itself instead.
   The heading is display type and gets room to set on one line rather than
   being folded by an arbitrary character cap; the body centres under it at a
   readable measure. This is DETECTED, not tagged: put an aside or a card
   grid into one of these sections later and it reverts to the two-column
   layout on its own. */
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)){
  display:block;text-align:center}
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > *{
  margin-left:auto;margin-right:auto}
/* The heading is the one thing allowed the full band. A 38-character line at
   display size fits across it; capping it at 22ch was forcing a wrap that
   nothing asked for. */
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > h2{max-width:none}
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > p{
  max-width:var(--measure);line-height:1.75}
/* Centred lines need more air between them than a left-aligned column does:
   there is no shared left edge to carry the eye back, so the gap between
   paragraphs is the only thing separating them. */
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > p+p{margin-top:1.5rem}
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > h2{margin-bottom:.35rem}
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > .lede{max-width:48ch;line-height:1.7}
/* Bulleted lists and question-and-answer panels cannot be centred and stay
   readable — they keep their alignment inside the centred column. */
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > ul,
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > ol,
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > details{
  text-align:left;max-width:var(--measure)}
main section:not(.cta):not(.hero) > .container:not(:has(> .aside, > .grid, > .table-wrap,
  > .tracker, > .video-grid, > .partner-grid, > .filters, > .results,
  > .glossary-group, > .legend, > .section-head)) > h2 + details{margin-top:1.4rem}

/* These containers carry their own layout and opt out. */
.site-footer .container{display:block}

.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;
  padding:12px 20px;z-index:300;font-family:var(--display);font-weight:600}
.skip-link:focus{left:12px;top:12px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);line-height:1.12;
  letter-spacing:-.022em;text-wrap:balance;font-weight:600}
h1{font-size:clamp(2.3rem,5.2vw,3.75rem);font-weight:700;letter-spacing:-.03em}
/* 2.25rem, not 2.5rem. At 2.5rem a section heading fitted only ~26
   characters into the 36rem text column, so "Guidance on paper doesn't
   change what happens in classrooms" was breaking over four lines. The step
   below still reads clearly under a 3.75rem h1 and lets most headings set
   in one or two. */
h2{font-size:clamp(1.7rem,3vw,2.25rem);font-weight:600;letter-spacing:-.025em}
h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.012em}
h4{font-size:var(--fs-base);font-weight:600;letter-spacing:0}
p+p{margin-top:1rem}
strong{font-weight:600;color:var(--ink)}

.lede{font-size:var(--fs-lg);line-height:1.6;color:var(--ink-soft);font-weight:400}
.band-navy .lede,.hero .lede,.page-head .lede{color:var(--navy-soft)}
.small{font-size:var(--fs-sm);color:var(--ink-soft)}

/* .meta — the replacement for the uppercase kicker. It goes BELOW a heading,
   it is set in the mono face because it is metadata rather than voice, and it
   is never gold. Use it only where the label is real information: which move,
   which consideration, which date. */
.meta{font-family:var(--display);font-size:var(--fs-xs);letter-spacing:.02em;color:var(--ink-soft);
  margin-top:.9rem}
.meta a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.band-navy .meta,.hero .meta,.page-head .meta{color:var(--navy-soft)}
.meta .sep{opacity:.5;padding:0 .45em}

/* .rule — a mark instead of a sentence. The only thing permitted above a
   heading, and the only place the brand gold appears as a graphic. */
.rule{display:block;width:44px;height:3px;background:var(--yellow);margin:0 0 1.3rem;
  border-radius:2px}
.rule--navy{background:var(--navy-mid)}
.header-rule{height:3px;background:linear-gradient(to right,
  var(--navy-mid) 0 46%,var(--clay) 46% 76%,var(--yellow) 76% 100%)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--max);margin:0 auto;padding:11px 24px;display:flex;
  align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;margin-right:auto}
.brand img{width:auto;height:56px;object-fit:contain}
.brand-words{display:flex;flex-direction:column;line-height:1.2}
.brand-words b{font-family:var(--display);font-weight:700;font-size:var(--fs-md);
  color:var(--navy);letter-spacing:-.028em}
.brand-words i{font-style:normal;font-size:var(--fs-xs);color:var(--ink-soft);
  font-family:var(--display);letter-spacing:-.01em}
.site-nav ul{display:flex;gap:26px;list-style:none}
.site-nav a{font-family:var(--display);font-weight:500;font-size:var(--fs-sm);color:var(--navy);
  text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--yellow)}
.site-nav a[aria-current]{border-bottom-color:var(--clay);font-weight:600}
.nav-toggle{display:none;font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  background:var(--navy);color:#fff;border:0;border-radius:4px;padding:10px 16px;cursor:pointer}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{display:none;width:100%;order:3}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:8px 0 4px}
  .site-nav a{display:block;padding:12px 2px;border-bottom:1px solid var(--line)}
  .site-nav a[aria-current]{border-bottom-color:var(--clay)}
  .header-inner{flex-wrap:wrap}
}

/* ---------- Search ----------
   The control sits at the end of the header row: it is a destination, not a
   section of the site, so it never joins the nav list. With scripting off it
   is an ordinary link to /search and everything still works. */
.search-open{order:3;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--display);font-weight:500;font-size:var(--fs-sm);color:var(--navy);
  border:1px solid var(--line);border-radius:20px;padding:7px 15px 7px 13px;background:var(--paper)}
.search-open:hover{border-color:var(--navy-mid);background:var(--navy-wash)}
.search-open:focus-visible{outline:3px solid var(--navy-mid);outline-offset:2px}
.search-open svg{flex:none;display:block}
.site-nav{order:2}
@media (max-width:900px){
  /* Brand, search, Menu — one row, in that order. The search control had
     order:1 with the brand taking margin-right:auto, which wrapped it onto
     a line of its own below the Menu button. */
  .search-open span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
  .search-open{padding:9px 11px;order:2}
  .nav-toggle{order:3}
  .site-nav{order:4}
  .header-inner{gap:10px}
}
@media (max-width:460px){
  /* At phone width the wordmark and the tagline cannot both fit beside two
     controls. The mark and the name carry it; the tagline is on every page
     below anyway. */
  .brand img{height:44px}
  .brand-words b{font-size:var(--fs-sm)}
  .brand-words i{display:none}
  .brand{gap:9px}
  .nav-toggle{padding:9px 12px;font-size:var(--fs-sm)}
}

.search-overlay{position:fixed;inset:0;z-index:200;background:rgba(11,17,56,.55);
  padding:0 20px;overflow-y:auto;overscroll-behavior:contain}
.search-panel{max-width:760px;margin:6vh auto 8vh;background:var(--paper);
  border-radius:var(--radius);box-shadow:0 24px 60px rgba(11,17,56,.4);padding:22px 26px 18px}
.search-bar{display:flex;gap:12px;align-items:center}
.search-bar input{flex:1;min-width:0;font:inherit;font-family:var(--display);font-size:var(--fs-md);
  padding:13px 15px;border:2px solid var(--line);border-radius:5px;background:var(--paper);
  color:var(--ink)}
.search-bar input:focus{outline:none;border-color:var(--navy-mid)}
.search-close{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);background:var(--navy);
  color:#fff;border:0;border-radius:4px;padding:12px 17px;cursor:pointer}
.search-close:hover{background:var(--navy-mid)}
.search-status{margin:.7rem 0 0;color:var(--ink-soft)}
.search-panel .results{max-height:56vh;overflow-y:auto}
html.search-open-state{overflow:hidden}

/* Results are grouped, because an answer and a place to look are different
   kinds of thing and the reader can tell them apart faster than we can. */
.results-head{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  margin:1.5rem 0 .5rem;padding-bottom:.35rem;border-bottom:1px solid var(--line)}
.results-list{list-style:none;margin:0}
.result{padding:.85rem 0 .9rem;border-bottom:1px solid var(--sand)}
.result:last-child{border-bottom:0}
.result>a{font-family:var(--display);font-weight:600;font-size:var(--fs-base);color:var(--navy);
  text-decoration:none}
.result>a:hover{text-decoration:underline;text-underline-offset:3px}
.result-ext{color:var(--ink-soft)}
.result-ctx{font-size:var(--fs-sm);color:var(--ink-soft);margin:.15rem 0 0}
.result-snip{font-size:var(--fs-sm);color:var(--ink-soft);margin:.3rem 0 0;max-width:74ch}
.result mark{background:var(--yellow-wash);color:var(--ink);padding:0 2px;border-radius:2px}
.tag-district{display:inline-block;font-family:var(--display);font-weight:600;font-size:var(--fs-xs);
  background:var(--yellow-wash);color:var(--ink);border-radius:3px;padding:1px 7px;
  margin-left:.35rem;vertical-align:1px}

/* /search — the same engine with room to breathe. */
.searchpage label{display:block;font-family:var(--display);font-weight:600;color:var(--navy);
  margin-bottom:.4rem}
.searchpage input{width:100%;font:inherit;font-family:var(--display);font-size:var(--fs-md);
  padding:15px 17px;border:2px solid var(--line);border-radius:5px;background:var(--paper);
  color:var(--ink)}
.searchpage input:focus{outline:none;border-color:var(--navy-mid)}
.searchpage .small{margin-top:.6rem;color:var(--ink-soft)}

/* ---------- Resource library filters ---------- */
.filters{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:22px 34px;
  align-items:start}
@media (max-width:900px){.filters{grid-template-columns:1fr;gap:18px}}
.filters .field label{display:block;font-family:var(--display);font-weight:600;color:var(--navy);
  margin-bottom:.3rem}
.filters .field input{width:100%;font:inherit;font-family:var(--display);padding:11px 13px;
  border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink)}
.filters fieldset{border:0;padding:0;margin:0}
.filters legend{font-family:var(--display);font-weight:600;color:var(--navy);
  padding:0;margin-bottom:.45rem}
.filters #res-count{grid-column:1/-1;margin:0;color:var(--ink-soft)}
.chip-filters{display:flex;flex-wrap:wrap;gap:8px}
.chip-filters label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--display);font-size:var(--fs-sm);color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:18px;padding:6px 13px 6px 10px}
.chip-filters input{width:18px;height:18px;accent-color:var(--navy-mid);margin:0;flex:none}
.chip-filters label:hover{border-color:var(--navy-mid)}
.chip-filters label:has(input:checked){background:var(--navy-wash);border-color:var(--navy-mid);
  font-weight:600}
.chip-filters label:focus-within{outline:3px solid var(--navy-mid);outline-offset:2px}

.res[hidden]{display:none}
.res .meta{margin-bottom:.6rem}
.res-progress{color:var(--clay-deep);font-family:var(--display);font-weight:600;margin-top:.2rem}

/* ---------- Sections ---------- */
section{padding:80px 0}
@media (max-width:900px){section{padding:56px 0}}
/* Two bands of the same colour in a row read as one section with a seam in
   it. Where a section genuinely continues — filters above the grid they
   filter — join them with these instead of an inline style. */
.section-joins-below{padding-bottom:0}
.section-joins-above{padding-top:34px}
@media (max-width:900px){.section-joins-above{padding-top:26px}}
.band-tint{background:var(--tint)}
.band-paper{background:var(--paper)}
.band-navy{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band-navy h2,.band-navy h3,.band-navy h4{color:#fff}
.band-navy p{color:var(--navy-soft)}
.band-navy a{color:var(--on-dark);
  text-decoration-color:color-mix(in srgb,var(--on-dark) 50%,transparent)}
.band-navy a:hover{color:#fff;text-decoration-color:#fff}
/* The page head is navy too. The default link red measures 2.3:1 on it. */
.page-head a:not(.btn){color:var(--on-dark);
  text-decoration-color:color-mix(in srgb,var(--on-dark) 50%,transparent)}
.page-head a:not(.btn):hover{color:#fff;text-decoration-color:#fff}
.band-navy .rule{background:var(--yellow)}
/* Arizona, drawn as a network. Decorative, so it is a background rather than
   an <img> — nothing to announce and nothing to caption. */
.band-navy::after,.page-head::after{content:"";position:absolute;pointer-events:none;
  background:url('/assets/img/az-network.svg') no-repeat center/contain}
.band-navy::after{right:-64px;bottom:-118px;width:430px;height:494px;opacity:.14}
.page-head::after{right:-52px;top:-96px;width:366px;height:420px;opacity:.15}
@media (max-width:760px){.band-navy::after,.page-head::after{opacity:.08}}
.band-navy .container{position:relative;z-index:1}
/* A section head is the page grid again, one level down: the mark and the
   heading in the text column, the lede in the aside column, aligned to the
   same two edges as everything else on the page. */
.section-head{margin-bottom:2.5rem;display:grid;gap:.5rem 0;
  grid-template-columns:minmax(0,1fr)}
.section-head>.lede{margin-top:0}
@media (min-width:1000px){
  .section-head{
    grid-template-columns:[t] minmax(0,var(--col-text)) var(--col-gap) [a] minmax(0,1fr);
    column-gap:0}
  .section-head>.rule{grid-column:t;grid-row:1}
  .section-head>h2{grid-column:t;grid-row:2}
  .section-head>.lede{grid-column:a;grid-row:2;padding-top:.15rem}
  /* A section head may carry the margin material too, stacked under its
     lede — one column, one place, rather than two asides competing for it. */
  .section-head>.aside{grid-column:a;grid-row:3;padding-top:1.2rem;align-self:start}
}
.section-head>.aside{font-size:var(--fs-sm)}

/* ---------- Hero ----------
   Image-led. The artwork is the same network language as the guidance cover.
   The scrim is not decoration: it guarantees the headline's contrast whatever
   the image does behind it at a given viewport width. */
.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:0}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg, #0B1138 0%, rgba(11,17,56,.97) 34%, rgba(11,17,56,.74) 55%,
  rgba(11,17,56,.30) 78%, rgba(11,17,56,.12) 100%)}
.hero .container{position:relative;z-index:2;padding-top:88px;padding-bottom:76px}
@media (max-width:900px){.hero .container{padding-top:60px;padding-bottom:56px}
  .hero-art img{object-position:72% 50%}
  /* Still dark enough for white type at any zoom, but the artwork is the point
     of this band — do not push it back to a flat fill on small screens. */
  .hero-scrim{background:linear-gradient(180deg,rgba(11,17,56,.90) 0%,rgba(11,17,56,.80) 100%)}}
.hero h1{color:#fff}
.hero .lede{margin-top:1.3rem;font-size:var(--fs-lg)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.1rem}

.page-head{background:var(--navy);color:#fff;padding:62px 0 56px;position:relative;
  overflow:hidden}
.page-head .container{position:relative;z-index:1}
/* The page title gets the whole band. In the 36rem text column a 60px h1
   fits about nineteen characters a line, which broke five page titles over
   three lines for no reason. The lede stays in the text column; the
   metadata sits beside it, on its row, not the title's. */
.page-head h1{color:#fff;grid-column:text-start/aside-end}
.page-head .aside{grid-row:2;align-self:start;padding-top:.5rem}
@media (max-width:999px){
  .page-head h1{grid-column:1}
  .page-head .aside{grid-row:auto}
}
.page-head .lede{margin-top:1.05rem}


/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  padding:13px 24px;border-radius:4px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;letter-spacing:-.005em}
.btn-primary{background:var(--clay);color:#fff}
.btn-primary:hover{background:var(--clay-deep);color:#fff}
.btn-secondary{background:var(--navy-mid);color:#fff}
.btn-secondary:hover{background:var(--navy);color:#fff}
.btn-outline{background:transparent;border-color:var(--navy-mid);color:var(--navy-mid)}
.btn-outline:hover{background:var(--navy-mid);color:#fff}
.btn-ghost{background:transparent;border-color:#fff;color:#fff}
/* Same weight of change as the primary's hover: a step, not an inversion.
   Flipping to solid white beside a red button that only darkens made the
   pair feel mismatched. White on navy + 14% white is still over 10:1. */
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

/* ---------- Cards ----------
   A CARD'S COLOUR MEANS SOMETHING, OR THE CARD IS THE BASE CARD.
   Only two meanings exist on this site: position in the 3ssential's
   numbered sequence (clay / yellow / pinyon, in order), and provenance in
   the resource library (navy = the Alliance made it, yellow = a district
   did). Everywhere else the accent used to rotate for decoration, and a
   reader who asks "why is that one yellow?" deserves an answer. Do not add
   a variant to make a grid look livelier. */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--clay);
  border-radius:var(--radius);padding:26px 26px 28px}
.card h3{margin-bottom:.55rem}
.card p{color:var(--ink-soft);font-size:var(--fs-base)}
.card--yellow{border-left-color:var(--yellow)}
.card--pinyon{border-left-color:var(--pinyon)}
.card--navy{border-left-color:var(--navy)}
.card .card-link{display:inline-block;margin-top:1rem;font-family:var(--display);
  font-weight:600;font-size:var(--fs-sm)}
/* A step number, drawn rather than written. Sequence is real information, so
   it earns a place above the heading — but as a node with a halo, borrowed from
   the network motif, not as another line of small type. The word "Action" is
   there for screen readers, which cannot see that it is a numbered list. */
.card-step{position:relative;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:var(--clay);color:#fff;font-family:var(--display);
  font-weight:700;font-size:var(--fs-lg);font-variant-numeric:tabular-nums;
  margin:0 0 1.15rem;flex:none;line-height:1}
.card-step::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--clay) 32%,transparent)}
.card--navy .card-step{background:var(--navy-mid)}
.card--navy .card-step::after{border-color:color-mix(in srgb,var(--navy-mid) 32%,transparent)}
/* The yellow node carries a navy numeral rather than a white one — 10.6-11.7:1,
   and it puts the mark's yellow on the page at real size without it being type. */
.card--yellow .card-step{background:var(--yellow);color:var(--navy)}
.card--yellow .card-step::after{border-color:color-mix(in srgb,var(--yellow) 55%,transparent)}
.card--pinyon .card-step{background:var(--pinyon)}
.card--pinyon .card-step::after{border-color:color-mix(in srgb,var(--pinyon) 32%,transparent)}
.card--clay .card-step{background:var(--clay)}
.card--clay .card-step::after{border-color:color-mix(in srgb,var(--clay) 32%,transparent)}

/* A card's defining line. Sits UNDER its heading, same rule as everywhere else. */
.card-sub{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--navy-mid);
  margin:-.15rem 0 .75rem}

/* ---------- Legend ----------
   Two cards side by side, built from the real .card so the legend cannot
   drift away from what it explains. Spans both grid columns: a legend is a
   comparison, and a comparison stacked vertically is just a list. */
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:1.6rem 0 0}
@media (max-width:760px){.legend{grid-template-columns:1fr}}
.legend-item h3{margin-bottom:.5rem}
/* The compact legend sits between the resource filters and the cards, so it
   has to read as a key, not as two more resources: tighter box, note-size
   text, the label run in bold rather than set as a heading. */
.legend--compact{gap:16px;margin:1.6rem 0 0}
.legend--compact .legend-item{padding:14px 18px}
.legend--compact .legend-item p{font-size:var(--fs-sm)}
.legend--compact .legend-item .source-tag{margin:0 0 .5rem}

/* ---------- Provenance label ----------
   The resource library's one coloured word-carrier. The board found the 4px
   rule too thin to connect a card to the legend, so the "From ..." line now
   wears the rule's colour as a FILL: white on navy for the Alliance, navy on
   the mark's yellow for a school or district. The yellow stays a graphic --
   it is the ground, never the letters (yellow type is 1.4:1 on white).
   Same label on every card and in the legend, so the key is matched by sight.
   Below the heading, like the .card-sub it replaced. The fill sits on an
   inline span, cloned per line, so a long district name that wraps reads as
   two highlighted lines rather than one heavy block. Scoped under .card so
   it outranks `.card p`, which would otherwise grey the Alliance label. */
.card .source-tag{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  line-height:1.75;margin:-.15rem 0 .7rem}
.source-tag span{padding:3px 9px;border-radius:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.card .source-tag--alliance span{background:var(--navy);color:#fff}
.card .source-tag--district span{background:var(--yellow);color:var(--navy)}

/* ---------- Statement ----------
   A pair of one-sentence declarations — vision and mission — that belong
   side by side rather than stacked as two more headings in a prose column.
   Not cards: a white box on the navy band would fight the band. A hairline
   and a size step do the work, and the yellow stays the section's own mark
   so there are not three bars competing in one band. */
.statement{border-top:1px solid rgba(255,255,255,.3);padding-top:1.05rem}
.statement h3{color:#fff;font-size:var(--fs-lg);margin-bottom:.5rem}
.statement p{color:var(--navy-soft);font-size:var(--fs-md);line-height:1.55;max-width:none}
/* On a light ground the same component takes the page's own colours. */
section:not(.band-navy) .statement{border-top-color:var(--line)}
section:not(.band-navy) .statement h3{color:var(--navy)}
section:not(.band-navy) .statement p{color:var(--ink-soft)}

/* ---------- Chips ---------- */
.chip{display:inline-block;font-family:var(--display);font-weight:500;font-size:var(--fs-xs);
  letter-spacing:.01em;padding:4px 9px;border-radius:3px;background:var(--navy-wash);
  color:var(--navy)}
.chip--clay{background:var(--clay-wash);color:var(--clay)}
.chip--yellow{background:var(--yellow-wash);color:var(--navy)}
.chip--pinyon{background:var(--pinyon-wash);color:var(--pinyon)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:.7rem 0 1rem}

/* ---------- Callout ---------- */
.callout{background:var(--yellow-wash);border:1px solid #F2DE9A;
  border-left:4px solid var(--yellow);border-radius:var(--radius);padding:22px 24px;margin:1.8rem 0}
.callout h3{font-size:var(--fs-md);margin-bottom:.4rem}
.callout--navy{background:var(--navy-wash);border-color:#C2C8E2;border-left-color:var(--navy-mid)}
.callout--clay{background:var(--clay-wash);border-color:#E7C3C5;border-left-color:var(--clay)}

/* ---------- Prose ---------- */
.prose h2{margin:2.6rem 0 1rem}
/* ...except the one that opens a section under the rule, or the one that
   opens a box. A stacking margin on a heading that has nothing above it
   inside its own container is 32-42px of unexplained space — it was making
   every callout in the margin sit a third lower than it should. */
.container > .rule + h2{margin-top:0}
/* NOT :where() — it has zero specificity, so this lost to `.prose h3`
   {margin:2rem 0 .6rem} and every callout in a prose page's margin kept a
   32px gap above its own heading. :is() takes the specificity of its most
   specific argument, which is what this needs. */
:is(.callout,.card,.aside,.tracker,.step,.legend-item,.video,.details-body,
    .section-head)
  :is(h2,h3,h4):first-child{margin-top:0}
.prose h2:first-child{margin-top:0}
.prose h3{margin:2rem 0 .6rem}
.prose ul,.prose ol{margin:1rem 0 1rem 1.3rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--clay)}

/* ---------- Glossary ---------- */
.glossary-group{margin-bottom:3rem}
.glossary-group>h2{padding-bottom:.6rem;border-bottom:2px solid var(--line)}
.terms{margin-top:1.6rem}
.terms dt{font-family:var(--display);font-weight:600;color:var(--navy);font-size:var(--fs-base);
  margin-top:1.5rem}
.terms dd{margin:.35rem 0 0;color:var(--ink-soft)}
.terms dt:first-child{margin-top:0}
/* Flush under the sticky header (82px wherever this is sticky; the 1px of
   overlap tucks under its border). At 104px a 22px strip of the glossary
   scrolled past in the gap between the two bars. */
.glossary-tools{position:sticky;top:81px;z-index:6;background:var(--tint);
  padding:18px 0 22px;border-bottom:1px solid var(--line);margin-bottom:2.4rem}

.glossary-tools label{font-family:var(--display);font-weight:600;color:var(--navy);
  display:block;margin-bottom:.3rem}
.glossary-tools input{width:100%;font:inherit;font-family:var(--display);padding:11px 13px;
  border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.glossary-tools .small{margin-top:.5rem}
@media (max-width:900px){.glossary-tools{position:static}}

/* ---------- Steps and tracker ---------- */
.steps{counter-reset:step;list-style:none;margin:1.6rem 0 0}
.steps>li{counter-increment:step;position:relative;padding:0 0 1.6rem 52px;
  border-left:2px solid var(--line);margin-left:15px}
.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
.steps>li::before{content:counter(step);position:absolute;left:-16px;top:-2px;width:32px;
  height:32px;border-radius:50%;background:var(--navy-mid);color:#fff;font-family:var(--display);
  font-weight:600;font-size:var(--fs-sm);display:grid;place-items:center}
.steps h3{font-size:var(--fs-md);margin-bottom:.3rem}
.steps p{color:var(--ink-soft);font-size:var(--fs-sm)}

.tracker{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px}
.tracker h3{margin-bottom:.3rem}
.tracker-list{list-style:none;margin:1.2rem 0 0}
.tracker-list li{border-top:1px solid var(--line)}
.tracker-list li:first-child{border-top:0}
.tracker-list label{display:flex;gap:14px;align-items:flex-start;padding:14px 2px;cursor:pointer}
.tracker-list input[type=checkbox]{width:24px;height:24px;margin-top:1px;
  accent-color:var(--clay);flex:none}
.tracker-list .t-title{font-family:var(--display);font-weight:600;color:var(--navy);display:block}
.tracker-list .t-note{font-size:var(--fs-sm);color:var(--ink-soft)}
.tracker-status{margin-top:1.2rem;padding-top:1.1rem;border-top:2px solid var(--line);
  font-family:var(--display);font-weight:500;color:var(--navy)}
.tracker-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1rem}

/* ---------- The three actions, as three checklists ----------
   Each .step is one of the 3ssential's three actions. The whole point of the
   panel is that a district can finish ONE of them and see that it did, rather
   than staring at a list of nine and feeling no further along. */
.tracker .step{border:1px solid var(--line);border-left:4px solid var(--clay);
  border-radius:var(--radius);background:var(--paper);padding:20px 22px;margin-bottom:18px;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:46px;align-content:start}
.step-head{grid-column:1;grid-row:1}
.tracker .step .tracker-list{grid-column:2;grid-row:1;margin-top:0}
.step-status{grid-column:1/-1;grid-row:2}
@media (max-width:900px){
  .tracker .step{grid-template-columns:minmax(0,1fr)}
  .step-head,.tracker .step .tracker-list,.step-status{grid-column:1;grid-row:auto}
  .tracker .step .tracker-list{margin-top:1rem}
}
.tracker .step:nth-of-type(2){border-left-color:var(--yellow)}
.tracker .step:nth-of-type(3){border-left-color:var(--pinyon)}
.tracker .step:last-of-type{margin-bottom:0}
.step-head{display:flex;gap:16px;align-items:flex-start}
.step-head>div{flex:1;min-width:0}
/* Keep position:relative — .card-step::after is the halo ring and is inset
   against it. Only the bottom margin goes. */
.step-head .card-step{flex:none;margin:0}
/* The node takes its panel's rule colour, so the number and the edge agree. */
.tracker .step:nth-of-type(2) .card-step{background:var(--yellow);color:var(--navy)}
.tracker .step:nth-of-type(2) .card-step::after{border-color:color-mix(in srgb,var(--yellow) 55%,transparent)}
.tracker .step:nth-of-type(3) .card-step{background:var(--pinyon)}
.tracker .step:nth-of-type(3) .card-step::after{border-color:color-mix(in srgb,var(--pinyon) 32%,transparent)}
.step-title{font-family:var(--display);font-weight:600;font-size:var(--fs-md);color:var(--navy);
  margin:0;line-height:1.3}
.step-head .card-sub{margin-top:.35rem}
.step-status{margin:.9rem 0 0;padding-top:.75rem;border-top:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:var(--fs-xs);color:var(--ink-soft)}
/* A finished action is marked on the panel, not just in a number. */
.tracker .step.is-done{background:var(--navy-wash);border-color:var(--navy-mid)}
.tracker .step.is-done .step-status{color:var(--navy);border-top-color:var(--navy-soft)}
.tracker .step.is-done .tracker-list li{border-top-color:var(--navy-soft)}
@media (max-width:600px){
  .tracker .step{padding:16px 15px}
  .step-head{gap:12px}
}


/* ---------- Acronym ----------
   A mnemonic is only useful if you can watch it spell itself. The initial is
   set in the rule colour and one step larger, but stays INLINE — it is the
   first letter of the word, not a bullet beside it. Because it is first,
   every line already starts at the same x, so T-E-A-C-H reads straight down
   the left edge without a second column faking the alignment. The hanging
   indent keeps a wrapped line clear of it. */
.acronyms{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:16px 26px;margin:1.1rem 0 .2rem;padding:16px 18px;background:var(--sand);
  border-radius:var(--radius)}
.acronym-name{font-family:var(--display);font-weight:700;font-size:var(--fs-sm);
  color:var(--navy);letter-spacing:.1em;margin:0 0 .5rem}
.acronym-name span{font-weight:400;letter-spacing:0;color:var(--ink-soft)}
.acronym ul{list-style:none;margin:0}
.acronym li{font-size:var(--fs-sm);color:var(--ink);line-height:1.5;
  margin-bottom:.28rem;padding-left:1em;text-indent:-1em;max-width:none}
.acronym li b{font-family:var(--display);font-weight:700;color:var(--clay);
  font-size:var(--fs-base)}


/* ---------- Video ---------- */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:1.6rem}
@media (max-width:820px){.video-grid{grid-template-columns:1fr}}
.video{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.video .frame{position:relative;padding-top:56.25%;background:var(--navy-wash)}
.video .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .meta{padding:16px 18px 18px;font-family:inherit;font-size:inherit;color:inherit;
  margin-top:0;letter-spacing:normal}
.video .meta h3{font-size:var(--fs-base);margin-bottom:.2rem}
.video .meta p{font-size:var(--fs-sm);color:var(--ink-soft)}

/* ---------- Partners ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:2rem;
  list-style:none;padding:0}
@media (max-width:940px){.partner-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
.partner{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
/* The whole tile is the link. The organization's name is NOT printed under
   the logo — Michelle's call, 2026-09-24, and she is right: fourteen names
   set in three lines each turned a wall of marks into a wall of text, and
   every one of those logos already contains its own name. The name still
   exists three times over: as the link's accessible name (a visually-hidden
   span), as a title tooltip for a sighted reader who does not recognise a
   mark, and in the search index. Do not put it back on the page.
   No underline, so hover and focus have to carry the affordance. */
.partner > a{display:block;padding:16px;text-decoration:none;border-radius:var(--radius)}
.partner > a:hover{background:var(--sand)}
/* All fourteen member PNGs are the same 440x294 canvas, with each mark
   padded inside it so a tall crest and a wide wordmark read at the same
   optical weight. Do not crop that padding out — it is what keeps the row
   even. Instead the image box carries the SAME 440:294 ratio, so the
   canvas fills the tile edge to edge and the mark is as large as the grid
   allows. Setting a fixed pixel height instead is what made these look
   shrunken once the names came off: a 226-wide tile holding a 144-wide
   image is 40% empty margin, and the mark inside the canvas is smaller
   again. Change the columns, not the height. */
.partner img{width:100%;height:auto;aspect-ratio:440/294;object-fit:contain}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
caption{text-align:left;font-family:var(--display);font-size:var(--fs-xs);color:var(--ink-soft);
  margin-bottom:.6rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:500;
  font-size:var(--fs-xs)}
tbody tr:nth-child(even){background:var(--paper)}
/* WCAG 2.2 SC 2.5.8 — a link in a table cell still needs a 24px target. */
td a{display:inline-block;padding:3px 0}
.table-wrap{overflow-x:auto}

/* ---------- Details ---------- */
details{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  margin-bottom:12px}
summary{padding:16px 20px;cursor:pointer;font-family:var(--display);font-weight:600;
  color:var(--navy)}
details[open] summary{border-bottom:1px solid var(--line)}
details .details-body{padding:18px 20px}

/* ---------- CTA ----------
   On the page grid like everything else: the pitch in the text column, the
   button in the aside column. It used to lay itself out with flex and ended
   at 698px on fourteen pages — the last stray edge on the site. */
.cta{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta .container{align-items:center}
.cta .container>div{grid-column:text-start/text-end}
.cta .container>.btn{grid-column:aside-start/aside-end;justify-self:start;align-self:center}
.cta h2{font-size:clamp(1.5rem,2.4vw,1.8rem)}
.cta p{color:var(--ink-soft);margin-top:.5rem}
@media (max-width:999px){
  .cta .container>div,.cta .container>.btn{grid-column:1}
  .cta .container>.btn{margin-top:1.4rem}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--navy-soft);padding:60px 0 28px;
  font-size:var(--fs-sm);position:relative;overflow:hidden}
.site-footer .container{position:relative;z-index:1}
.site-footer .footer-head{color:#fff;font-family:var(--display);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.02em;margin-bottom:.9rem}
.site-footer a{color:var(--on-dark);text-decoration:none}
.footer-lede a,.footer-legal a{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr;gap:32px}}
.footer-logo{background:#fff;border-radius:var(--radius);padding:10px;width:auto;height:92px;
  object-fit:contain;margin-bottom:1rem}
.footer-lede{color:var(--navy-soft);max-width:42ch}
.site-footer ul{list-style:none}
/* WCAG 2.2 SC 2.5.8 wants a 24x24 target. These links were 20px tall and
   passed only on the spacing exception, which is a thin margin to be
   standing on. Padding costs nothing. */
.site-footer li{margin-bottom:.3rem}
.site-footer li a{display:inline-block;padding:3px 0}
.footer-legal{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:8px 28px;font-size:var(--fs-xs);color:#B4BAD8}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}