/* ==========================================================================
   Knights of the Future — design system
   Lane: a school-gym tournament poster. Flat saturated blue drench, amber
   scoring accents, oversized grotesque display, real photographs of the kids.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  /* Brand palette. Supplied hexes, plus an ivory ground and two derived
     golds so gold-coloured text can sit on either a dark or a light surface.
     The bands run navy and near-black now; there is no light blue left. */
  --ink-950:  #0A101A;   /* deepest  — footer, deep bands            */
  --navy-900: #0C1F34;   /* dark navy — benefit cells, callouts       */
  --navy-800: #102945;   /* navy      — hero and every primary band   */
  --navy-700: #16375C;   /* one step up, for hover states only        */
  --grey-500: #B3B3B3;   /* dim text on dark                          */
  --grey-200: #CFCED0;   /* bright text on dark                       */
  --gold:     #C18021;   /* the accent                                */

  --ivory:    #F8F5EC;   /* the page ground — replaces every white    */
  --ivory-2:  #EFEADC;   /* the alternate light band                  */

  /* derived from the above */
  --gold-hi:  #D99A34;   /* gold hover                                */
  --gold-ink: #8A5A12;   /* the only gold that passes AA on ivory     */
  --ink-soft: #3A4351;   /* body text on ivory                        */
  --shadow:   10 16 26;  /* rgb channels of --ink-950, for shadows    */

  /* legacy names kept so the rest of the sheet needs no rewriting */
  --blue-950: var(--ink-950);
  --blue-900: var(--navy-900);
  --blue-800: var(--navy-900);
  --blue-700: var(--navy-800);
  --blue-600: var(--navy-700);
  --blue-500: var(--navy-700);
  --blue-200: var(--grey-200);
  --blue-100: var(--ivory-2);
  --blue-50:  var(--ivory-2);

  --paper: var(--ivory);
  --ink:   var(--ink-950);

  --amber:      var(--gold);
  --amber-warm: var(--gold-hi);
  --amber-ink:  var(--gold-ink);

  /* semantic */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --rule: #DCD6C6;

  /* Type. Two variable families, one file each.

     Archivo (Omnibus-Type) for display and UI: a late-19th-century American
     grotesque drawn for headlines, with a real width axis, so nav labels and
     poster-sized headings come from the same file at different widths.

     Literata (TypeTogether) for reading: commissioned by Google for Play Books
     specifically to hold up "across a wide variety of screen sizes, resolutions
     and rendering software", and it carries an optical-size axis that retunes
     stroke contrast as the rendered size changes. That is the phone/tablet/
     desktop requirement answered by the typeface itself rather than by
     breakpoints.

     Each has a metric-matched local fallback (measured, see @font-face below)
     so a slow connection shows a correctly-sized fallback instead of reflowing
     the page when the webfont lands. */
  --display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --text: "Literata", "Literata Fallback", Georgia, "Times New Roman", serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.0625rem, 1rem + 0.30vw, 1.19rem);
  --step-1:  clamp(1.32rem, 1.2rem + 0.55vw, 1.6rem);
  --step-2:  clamp(1.72rem, 1.5rem + 1.05vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.75rem + 2.2vw, 3.4rem);
  --step-4:  clamp(2.8rem, 1.9rem + 4.2vw, 5.2rem);

  /* space */
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.75rem);
  --band: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --band-tight: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  /* NOTE: 1ch is the width of "0", which in Literata is ~0.58em while the
     average lowercase letter is ~0.47em. So a 62ch cap actually renders ~76
     characters per line — past the 65–75 comfort range. 55ch lands at ~68. */
  --measure: 55ch;

  /* form */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 14px;

  /* motion — easing per the cheat sheet: out for entering, in-out for
     moving, in for exiting, plain ease for hover. */
  --ease-out-quint:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-cubic:     cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-cubic:  cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-cubic:      cubic-bezier(0.32, 0, 0.67, 0);

  --t-hover: 150ms;   /* hover / press */
  --t-enter: 280ms;   /* element entering */
  --t-move:  240ms;   /* element moving on screen */
  --t-exit:  180ms;   /* exits run ~75% of enters */
  --t-reveal: 620ms;  /* scroll reveals get room to breathe */

  --out: var(--ease-out-quint);       /* alias, kept for existing rules */
  --out-quart: var(--ease-out-cubic);

  /* z */
  --z-sticky: 100;
  --z-nav: 200;
  --z-chip: 300;

  color-scheme: light;
}

/* Deliberate single-look design: the brand is a daylight blue. No dark
   variant — but the surface is painted explicitly so a dark host never
   shows through. */


/* --- metric-matched fallbacks --------------------------------------------- */
/* size-adjust = webfont advance width / fallback advance width (measured);
   ascent/descent overrides are the webfont's own metrics divided by that
   ratio, so the fallback occupies the same box and nothing shifts on swap. */

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 90.5%;
  ascent-override: 99.4%;
  descent-override: 27.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Literata Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 91%;
  ascent-override: 98.9%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.62;
  font-optical-sizing: auto;   /* drives Literata's opsz axis by rendered size */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;          /* Archivo's width axis — poster-wide headings */
  line-height: 1.02;
  letter-spacing: -0.026em;    /* floor is -0.04em; Archivo needs less than a
                                  tighter grotesque would */
  text-wrap: balance;
}
h3, h4 { line-height: 1.12; letter-spacing: -0.02em; }

p { text-wrap: pretty; }
/* long unbroken strings (email addresses, URLs) must not push the page wide */
/* `anywhere` (not `break-word`) is what actually reduces min-content width,
   so a long address can no longer stretch its grid track. */
p, li, dd, blockquote, .prose { overflow-wrap: anywhere; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--amber); color: var(--blue-950); }

/* --- layout primitives ---------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), 74rem);
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 52rem); }

.band { padding-block: var(--band); }
.band--tight { padding-block: var(--band-tight); }

.band--blue { background: var(--blue-700); color: var(--paper); }
.band--deep { background: var(--blue-950); color: var(--paper); }
.band--tint { background: var(--blue-50); }

.band--blue h1, .band--blue h2, .band--deep h1, .band--deep h2 { color: var(--paper); }
.band--blue p, .band--deep p { line-height: 1.7; } /* light-on-dark needs air */

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 44ch;
  color: var(--fg-soft);
}
.band--blue .lede, .band--deep .lede { color: var(--blue-200); }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }

.skip {
  position: absolute; left: -9999px;
  background: var(--amber); color: var(--blue-950);
  padding: 0.75rem 1.25rem; font-family: var(--display); font-weight: 700;
  z-index: calc(var(--z-nav) + 1);
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- header --------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in oklab, var(--blue-950) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--paper) 14%, transparent);
  color: var(--paper);
}
.masthead {
  transition: background var(--t-move) var(--ease-in-out-cubic),
              box-shadow var(--t-move) var(--ease-in-out-cubic);
}
.masthead[data-scrolled="true"] {
  background: color-mix(in oklab, var(--blue-950) 97%, transparent);
  box-shadow: 0 10px 30px -22px rgb(var(--shadow) / 0.85);
}
.masthead__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem;
  transition: min-height var(--t-move) var(--ease-in-out-cubic);
}
.masthead[data-scrolled="true"] .masthead__inner { min-height: 3.5rem; }
.brand img { transition: transform var(--t-move) var(--ease-in-out-cubic); }
.masthead[data-scrolled="true"] .brand img { transform: scale(0.86); }
.brand small { transition: opacity var(--t-move) var(--ease-in-out-cubic); }
.masthead[data-scrolled="true"] .brand small { opacity: 0; }
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; margin-right: auto;
  font-family: var(--display); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.05;
  font-size: 1.02rem;
}
.brand img {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  flex: none;
}
.brand span { display: block; }
.brand small {
  display: block; font-size: 0.66rem; font-weight: 600;
  font-stretch: 96%;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber);
}

@media (max-width: 30rem) { .brand small { display: none; } }

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav a:not(.btn) {
  font-family: var(--display); font-weight: 600; font-size: 0.94rem;
  letter-spacing: -0.01em;
  text-decoration: none; padding: 0.5rem 0.7rem; border-radius: var(--r-sm);
  position: relative;
  transition: color var(--t-hover) ease;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.28rem;
  height: 2px; background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--t-move) var(--ease-out-quint);
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn):focus-visible::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--amber); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; background: none; border: 1px solid color-mix(in oklab, var(--paper) 30%, transparent);
  color: inherit; border-radius: var(--r-sm); padding: 0.5rem 0.7rem;
  font-family: var(--display); font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
}

@media (max-width: 56rem) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 4.25rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blue-950);
    border-bottom: 1px solid color-mix(in oklab, var(--paper) 14%, transparent);
    padding: 0.5rem var(--gutter) 1.25rem;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity var(--t-exit) var(--ease-in-cubic),
                transform var(--t-exit) var(--ease-in-cubic),
                visibility 0s linear var(--t-exit);
    visibility: hidden;
  }
  .nav[data-open="true"] {
    transform: none; opacity: 1; pointer-events: auto; visibility: visible;
    transition: opacity var(--t-enter) var(--ease-out-quint),
                transform var(--t-enter) var(--ease-out-quint),
                visibility 0s;
  }
  .nav a { opacity: 0; transform: translateY(-6px); transition: none; }
  .nav[data-open="true"] a {
    opacity: 1; transform: none;
    transition: opacity var(--t-enter) var(--ease-out-quint) calc(60ms + var(--i, 0) * 40ms),
                transform var(--t-enter) var(--ease-out-quint) calc(60ms + var(--i, 0) * 40ms);
  }
  .nav a { padding: 0.85rem 0.25rem; font-size: 1.1rem; border-bottom: 1px solid color-mix(in oklab, var(--paper) 10%, transparent); border-radius: 0; }
  .nav .btn { margin-top: 0.9rem; justify-content: center; border-bottom: 0; }
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.012em;
  padding: 0.85rem 1.35rem; border-radius: var(--r-md);
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform var(--t-hover) ease,
              box-shadow var(--t-hover) ease,
              background var(--t-hover) ease,
              color var(--t-hover) ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); transition-duration: 100ms; }

.btn--primary { background: var(--amber); color: var(--blue-950); }
.btn--primary:hover { background: var(--amber-warm); box-shadow: 0 8px 18px -8px rgb(138 90 18 / 0.5); }

.btn--ghost {
  background: transparent; color: var(--paper);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--paper) 42%, transparent);
}
.btn--ghost:hover { background: color-mix(in oklab, var(--paper) 12%, transparent); }

.btn--ink { background: var(--blue-700); color: var(--paper); }
.btn--ink:hover { background: var(--blue-600); box-shadow: 0 8px 18px -8px rgb(var(--shadow) / 0.55); }

.btn--lg { font-size: 1.08rem; padding: 1rem 1.6rem; }

/* A long address in a button would otherwise break mid-word ("gmail.co / m").
   Shrinking it on narrow screens keeps it on one line. */
/* Buttons must never break mid-word. They break only where the markup
   offers a <wbr>, which for an address means after the "@". */
.btn { overflow-wrap: normal; word-break: normal; text-align: center; }
@media (max-width: 30rem) {
  .callout .btn { font-size: 0.9rem; padding-inline: 1rem; }
}

.btn__arrow { transition: transform var(--t-move) var(--ease-out-quint); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --- hero ----------------------------------------------------------------- */

.hero {
  background: var(--blue-700);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) 0;
  align-items: end;
}
@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
    padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
    align-items: center;
  }
}

.hero__title {
  font-size: var(--step-4);
  letter-spacing: -0.035em;
  max-width: 13ch;
}
.hero__title em {
  font-style: normal;
  color: var(--amber);
  display: block;
}
.hero__lede {
  margin-top: 1.4rem;
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 34ch;
  color: var(--blue-200);
}
.hero__motto {
  margin-top: 1rem;
  font-family: var(--display); font-weight: 700;
  font-size: var(--step-1); letter-spacing: -0.02em;
  color: var(--amber);
  max-width: 30ch;
}
html.js .hero__motto { animation: rise 760ms var(--ease-out-quint) 270ms backwards; }

.hero__actions {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.85rem;
}
@media (max-width: 30rem) {
  .hero__actions { display: grid; }
  .hero__actions .btn { justify-content: center; }
}

.hero__photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgb(var(--shadow) / 0.7);
}
.hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero__photo figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 1.1rem 0.9rem;
  background: linear-gradient(to top, rgb(var(--shadow) / 0.92), transparent);
  font-family: var(--display); font-weight: 600; font-size: 0.85rem;
  letter-spacing: -0.01em; color: var(--paper);
}

/* fact strip — the answers the old site never gave */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: color-mix(in oklab, var(--paper) 20%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--paper) 20%, transparent);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.facts > div { background: var(--blue-700); padding: 1.1rem 0.25rem 1.25rem; }
.facts dt {
  font-family: var(--display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue-200);
}
.facts dd {
  font-family: var(--display); font-weight: 800; font-size: 1.18rem;
  letter-spacing: -0.02em; margin-top: 0.3rem; color: var(--amber);
}


/* --- landing ---------------------------------------------------------------
   Full-bleed photograph with a centred card over it. The scrim is what makes
   the card and the header legible over a photo that varies wildly in
   brightness — without it, contrast depends on whatever the picture happens
   to be doing behind the text. */

.landing {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(30rem, 82svh, 46rem);
  background: var(--navy-800);
  overflow: hidden;
}

.landing__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}

.landing__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      rgb(var(--shadow) / 0.80) 0%,
      rgb(var(--shadow) / 0.56) 26%,
      rgb(var(--shadow) / 0.56) 74%,
      rgb(var(--shadow) / 0.78) 100%);
}

.landing__inner {
  display: flex; justify-content: center;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

.landing__card {
  background: var(--ivory);
  color: var(--ink);
  text-align: center;
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1.4rem + 3.4vw, 3.75rem) clamp(1.5rem, 1rem + 3.4vw, 4rem);
  width: min(100%, 44rem);
  box-shadow: 0 34px 80px -34px rgb(var(--shadow) / 0.7);
}

.landing__title {
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.8rem);
  letter-spacing: -0.03em;
}

.landing__lede {
  margin-top: 1.15rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
  margin-inline: auto;
}

.landing__motto {
  margin-top: 0.9rem;
  font-family: var(--display); font-weight: 700;
  font-size: var(--step-0); letter-spacing: -0.01em;
  color: var(--gold-ink);
}

.landing__actions {
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center;
}
@media (max-width: 30rem) {
  .landing__actions { display: grid; }
  .landing__actions .btn { justify-content: center; }
}

/* the landing card gets the same orchestrated entrance the hero had */
html.js .landing__card  { animation: settle 900ms var(--ease-out-quint) 60ms backwards; }
html.js .landing__lede  { animation: rise 760ms var(--ease-out-quint) 260ms backwards; }
html.js .landing__motto { animation: rise 760ms var(--ease-out-quint) 340ms backwards; }
html.js .landing__actions { animation: rise 760ms var(--ease-out-quint) 420ms backwards; }

/* --- page head (interior pages) ------------------------------------------- */

.pagehead { background: var(--blue-700); color: var(--paper); padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem); }
.pagehead h1 { font-size: var(--step-3); max-width: 18ch; }
.pagehead .lede { margin-top: 1.1rem; color: var(--blue-200); }
.pagehead .tk { border-bottom-color: var(--amber); }

/* --- section heading ------------------------------------------------------ */

.sechead { max-width: 44ch; }
.sechead h2 { max-width: 20ch; }
.sechead h2 { font-size: var(--step-3); }
.sechead p { margin-top: 1rem; font-size: var(--step-1); line-height: 1.5; color: var(--fg-soft); }
.band--blue .sechead p, .band--deep .sechead p { color: var(--blue-200); }

/* --- the session walk-through (a real sequence, so it's numbered) --------- */

.moves { margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); display: grid; gap: 0; }
.move {
  display: grid; gap: 0.35rem 1.4rem;
  grid-template-columns: auto 1fr;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.move:last-child { border-bottom: 1px solid var(--rule); }
.move__n {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  color: var(--amber-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.move__t { font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; }
.move__d { grid-column: 2; color: var(--fg-soft); max-width: 50ch; }
@media (max-width: 34rem) {
  .move { grid-template-columns: 1fr; }
  .move__d { grid-column: 1; }
}

/* --- benefit list --------------------------------------------------------- */

.benefits {
  margin-top: clamp(2rem, 1.4rem + 2.5vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 1px;
  background: color-mix(in oklab, var(--paper) 22%, transparent);
}
.benefit {
  flex: 1 1 20rem;
  background: var(--blue-950);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
}
.benefit h3 { font-size: var(--step-1); color: var(--amber); }
.benefit > p:only-child {
  margin-top: 0; color: var(--paper);
  font-size: var(--step-0); line-height: 1.6;
  max-width: 42ch;   /* ~52 characters — the cell still spans, the line does not */
}
.benefit p { margin-top: 0.6rem; color: var(--blue-200); font-size: var(--step--1); line-height: 1.65; }

/* --- proof numbers -------------------------------------------------------- */

.tally {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.tally div { border-top: 3px solid var(--amber-warm); padding-top: 0.9rem; }
.tally dt { font-family: var(--display); font-weight: 800; font-size: var(--step-3); letter-spacing: -0.035em; line-height: 1; }
.tally dd { margin-top: 0.5rem; color: var(--fg-soft); font-size: var(--step--1); line-height: 1.5; }

/* --- split (photo + copy) ------------------------------------------------- */

.split {
  display: grid; gap: clamp(1.75rem, 1rem + 3.5vw, 3.5rem);
  align-items: center;
}
/* grid items default to min-width:auto and refuse to shrink below their
   content; this lets the track do its job */
.split > * { min-width: 0; }
@media (min-width: 58rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
}
.split figure { border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 58rem) {
  .split--wide-left > figure { position: sticky; top: 6rem; align-self: start; }
}
.split figure img { width: 100%; object-fit: cover; }
.split figcaption {
  margin-top: 0.7rem; font-size: var(--step--1); color: var(--fg-soft);
  font-family: var(--display); font-weight: 500;
}
.band--blue .split figcaption, .band--deep .split figcaption { color: var(--blue-200); }

/* --- quote ---------------------------------------------------------------- */

.quote { max-width: 40ch; }
.quote--centred { max-width: 46ch; margin-inline: auto; text-align: center; }
.quote blockquote {
  font-family: var(--display); font-weight: 600;
  font-size: var(--step-2); line-height: 1.22; letter-spacing: -0.025em;
  text-wrap: balance;
}
.quote figcaption { margin-top: 1.1rem; font-size: var(--step--1); color: var(--fg-soft); }
.band--blue .quote figcaption,
.band--deep .quote figcaption { color: var(--blue-200); }

/* --- sponsor -------------------------------------------------------------- */

.sponsor {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.sponsor__logo {
  background: var(--paper); border-radius: var(--r-md);
  padding: 1.25rem 1.5rem; flex: none;
}
.sponsor__logo img { width: clamp(11rem, 22vw, 15rem); }

/* --- team ----------------------------------------------------------------- */

.roster { display: grid; gap: 0; margin-top: 2rem; }
.member {
  display: grid; gap: 0.5rem 2.5rem;
  padding-block: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 52rem) { .member { grid-template-columns: 17rem 1fr; } }
/* blog headlines are sentences, not names — they need a wider column and a
   smaller size or they stack four lines deep */
@media (min-width: 52rem) {
  .roster--posts .member { grid-template-columns: 21rem 1fr; }
}
.roster--posts .member h2 { font-size: var(--step-1); letter-spacing: -0.022em; }

/* blog cover images sit at the head of the body column, cropped to one ratio
   so a page of seven posts reads as a column rather than a ragged stack */
.post__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  margin-bottom: 1.4rem;
  background: var(--ivory-2);
}
@media (max-width: 52rem) {
  .member__id {
    display: grid; grid-template-columns: 7.5rem 1fr;
    gap: 0 1.1rem; align-items: center;
  }
  .member__photo { margin-bottom: 0; max-width: none; }
  .member__id h2, .member__id .member__role { grid-column: 2; }
}
.member:last-child { border-bottom: 1px solid var(--rule); }
.member__photo {
  width: 100%; max-width: 13.5rem;
  aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%;
  border-radius: var(--r-md);
  margin-bottom: 1.1rem;
  background: var(--blue-100);
}
.member h2 { font-size: var(--step-2); letter-spacing: -0.03em; }
.member__role {
  margin-top: 0.4rem; font-family: var(--display); font-weight: 600;
  font-size: var(--step--1); line-height: 1.4; color: var(--amber-ink);
}
.member__bio { max-width: 52ch; }
.member__bio p + p { margin-top: 0.9em; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { margin-top: 2rem; }
.faq details {
  border-top: 1px solid var(--rule);
  padding-block: 1.15rem;
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  font-family: var(--display); font-weight: 700; font-size: var(--step-1);
  letter-spacing: -0.02em; cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary { transition: color var(--t-hover) ease; }
.faq summary:hover { color: var(--blue-600); }
.faq summary::after {
  content: "+"; font-weight: 700; color: var(--amber-ink);
  flex: none; transition: transform var(--t-move) var(--ease-in-out-cubic);
}
.faq details[open] summary::after { transform: rotate(135deg); }

/* Height is a layout property, but a disclosure has no other axis to animate.
   One small element, and the collapsed state is grid-rows 0fr so nothing
   reflows around it. Closing is animated too — see closeDetails() in main.js. */
.faq__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-enter) var(--ease-out-quint),
              opacity var(--t-enter) var(--ease-out-quint);
  opacity: 0;
}
.faq details[open] .faq__body { grid-template-rows: 1fr; opacity: 1; }
.faq details.is-closing .faq__body {
  grid-template-rows: 0fr; opacity: 0;
  transition-duration: var(--t-exit);
  transition-timing-function: var(--ease-in-cubic);
}
.faq__body > div { overflow: hidden; min-height: 0; }
.faq details p { margin-top: 0.85rem; max-width: 52ch; color: var(--fg-soft); }
html:not(.js) .faq__body { grid-template-rows: 1fr; opacity: 1; transition: none; }
.faq details p + p { margin-top: 0.8em; }

/* --- form ----------------------------------------------------------------- */

.form { display: grid; gap: 1.15rem; max-width: 34rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--display); font-weight: 700; font-size: 0.92rem;
  letter-spacing: -0.01em;
}
.field .hint { font-size: 0.84rem; color: var(--fg-soft); font-family: var(--display); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
  width: 100%;
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.field input::placeholder, .field textarea::placeholder { color: #5C6472; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C9C2B0; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue-600) 16%, transparent);
}
.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: var(--step--1); color: var(--fg-soft); max-width: 40ch; }

/* --- link list / contact -------------------------------------------------- */

.linkrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px; background: var(--rule); border-block: 1px solid var(--rule);
}
.linkrow a {
  background: var(--paper); padding: 1.4rem 1.25rem;
  text-decoration: none; display: block;
  transition: background var(--t-hover) ease;
}
.linkrow a:hover, .linkrow a:focus-visible { background: var(--blue-50); }
.linkrow strong {
  display: block; font-family: var(--display); font-size: var(--step-1); letter-spacing: -0.02em;
  transition: transform var(--t-move) var(--ease-out-quint);
}
.linkrow strong::after {
  content: " \2192"; color: var(--amber-ink);
  display: inline-block; opacity: 0; transform: translateX(-4px);
  transition: opacity var(--t-move) var(--ease-out-quint),
              transform var(--t-move) var(--ease-out-quint);
}
.linkrow a:hover strong::after, .linkrow a:focus-visible strong::after {
  opacity: 1; transform: none;
}
.linkrow span { transition: color var(--t-hover) ease; }
.linkrow span { display: block; margin-top: 0.3rem; color: var(--fg-soft); font-size: var(--step--1); }

/* --- callout -------------------------------------------------------------- */

.callout {
  background: var(--blue-950); color: var(--paper);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
}
.callout h3 { font-size: var(--step-2); color: var(--paper); }
.callout p { margin-top: 0.8rem; color: var(--blue-200); max-width: 42ch; }
.callout .btn { margin-top: 1.4rem; }

/* --- donate --------------------------------------------------------------- */

.donate { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: center; }
@media (min-width: 48rem) { .donate { grid-template-columns: minmax(0, 22rem) 1fr; } }
.donate img { border-radius: var(--r-md); width: 100%; background: var(--paper); }

/* --- footer --------------------------------------------------------------- */

.foot { background: var(--blue-950); color: var(--paper); padding-block: var(--band-tight) 2.5rem; }
.foot__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.foot h2 { font-size: var(--step-2); max-width: 14ch; color: var(--paper); }
.foot h3 {
  font-family: var(--display); font-size: 0.7rem; font-weight: 700;
  font-stretch: 96%;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--amber);
}
.foot ul { list-style: none; padding: 0; margin-top: 0.9rem; display: grid; gap: 0.55rem; }
.foot a { color: var(--grey-500); text-decoration: none; font-size: var(--step--1); }
.foot a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.foot__base {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid color-mix(in oklab, var(--paper) 16%, transparent);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
  font-size: 0.84rem; color: var(--grey-500);
}
.foot__base p { max-width: 46ch; }

/* --- prototype markers ---------------------------------------------------- */

.tk {
  border-bottom: 2px dotted var(--amber-warm);
  cursor: help;
}
.band--blue .tk, .band--deep .tk, .hero .tk, .facts .tk { border-bottom-color: var(--amber); }

.protochip {
  position: fixed; inset: auto auto 0.85rem 0.85rem; z-index: var(--z-chip);
  background: var(--blue-950); color: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: 0.74rem;
  padding: 0.45rem 0.8rem; border-radius: 999px; opacity: 0.9;
  box-shadow: 0 8px 24px -10px rgb(var(--shadow) / 0.6);
  display: none; align-items: center; gap: 0.5rem;
}
.protochip b { color: var(--amber); }
.protochip[data-show="true"] { display: flex; }

/* --- motion --------------------------------------------------------------- */

/* Everything here ENHANCES content that is already visible and laid out.
   If the script never runs, or the tab is hidden, or the observer never
   fires, the page still reads. Only transform and opacity are animated
   (the one exception is the FAQ disclosure, noted above).
   Rules: enter with ease-out, move with ease-in-out, exit with ease-in;
   exits run about 75% of the enter duration. */

/* ---- scroll reveals ------------------------------------------------------ */

[data-lift], [data-stagger] > * {
  transition: opacity var(--t-reveal) var(--ease-out-quint),
              transform var(--t-reveal) var(--ease-out-quint);
}

html.js [data-lift]:not(.is-in),
html.js [data-stagger]:not(.is-in) > * {
  opacity: 0;
  transform: translateY(16px);
}

/* Children of a staggered container come in one after another. --i is set
   by main.js so the delay survives any number of items. */
html.js [data-stagger] > * { transition-delay: calc(var(--i, 0) * 65ms); }

/* Each reveal is shaped to what it reveals, rather than one uniform fade. */

/* Photographs settle rather than slide — a small scale-down reads as the
   image coming to rest, not as a card flying in. */
html.js figure[data-lift]:not(.is-in),
html.js [data-lift].hero__photo:not(.is-in) {
  transform: scale(1.025);
}

/* Tally rules draw themselves left to right under each number. */
.tally div { position: relative; border-top-color: transparent; }
.tally div::before {
  content: ""; position: absolute; inset: -3px auto auto 0;
  height: 3px; width: 100%; background: var(--amber-warm);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 520ms var(--ease-out-quint) calc(120ms + var(--i, 0) * 65ms);
}
html.js [data-stagger].is-in .tally div::before,
html.js .tally[data-stagger].is-in div::before { transform: scaleX(1); }
html:not(.js) .tally div::before { transform: scaleX(1); }

/* Move numbers arrive from the left, like a hand placing them down. */
html.js .moves[data-stagger]:not(.is-in) .move__n { transform: translateX(-8px); }
.move__n { transition: transform var(--t-reveal) var(--ease-out-quint) calc(var(--i, 0) * 65ms); }

/* ---- hero: one orchestrated load ---------------------------------------- */

/* Each title line sits in its own clipping band and rises into it. The
   padding/margin pair keeps descenders from being sheared off. */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hero__line > span { display: block; }

html.js .hero__line > span { animation: line-rise 900ms var(--ease-out-quint) backwards; }
html.js .hero__line--2 > span { animation-delay: 110ms; }

html.js .hero__lede   { animation: rise 760ms var(--ease-out-quint) 220ms backwards; }
html.js .hero__actions{ animation: rise 760ms var(--ease-out-quint) 320ms backwards; }
html.js .hero__photo  { animation: settle 1000ms var(--ease-out-quint) 140ms backwards; }
html.js .hero__photo figcaption { animation: rise 700ms var(--ease-out-quint) 700ms backwards; }
html.js .facts > div  { animation: rise 700ms var(--ease-out-quint) calc(460ms + var(--i, 0) * 70ms) backwards; }

@keyframes line-rise {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes settle {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

/* Page heads on interior pages get the same treatment, shorter. */
html.js .pagehead h1   { animation: rise 700ms var(--ease-out-quint) backwards; }
html.js .pagehead .lede{ animation: rise 700ms var(--ease-out-quint) 100ms backwards; }

/* ---- reduced motion ------------------------------------------------------ */

/* Not a nicety. Every animation above needs a still alternative, and the
   content must end up in exactly the same place. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-lift]:not(.is-in),
  html.js [data-stagger]:not(.is-in) > * { opacity: 1; transform: none; }

  html.js .moves[data-stagger]:not(.is-in) .move__n { transform: none; }
  .tally div::before { transform: scaleX(1); transition: none; }

  html.js .hero__line > span,
  html.js .hero__lede, html.js .hero__actions,
  html.js .hero__photo, html.js .hero__photo figcaption,
  html.js .facts > div, html.js .hero__motto,
  html.js .landing__card, html.js .landing__lede,
  html.js .landing__motto, html.js .landing__actions,
  html.js .pagehead h1, html.js .pagehead .lede { animation: none; }

  .hero__line { overflow: visible; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The disclosure still needs to open and close — just instantly. */
  .faq__body { transition: none; }
}

/* --- print ---------------------------------------------------------------- */
@media print {
  .masthead, .protochip, .hero__actions { display: none; }
  body { background: #fff; color: #000; }
}