/* ==================================================================
   AITourPilot — museums site
   Built on the approved design system. tokens.css is imported, not
   restyled. Every colour below is a token; there are no new colours.

   Grounds, and the job each one does (decided by WCX-02, see NOTES):
     limewash   default. Anything that is simply the site talking.
     clay       warm  — the visitor's side: the gallery, the person,
                        the experience.
     grisaille  cool  — the museum's side: evidence, insight,
                        implementation, security.
     hall       dark  — one moment per page at most, and not on
                        every page.
   Accent (oxblood) marks one thing only: Henry's own spoken words.
   On --hall it becomes --accent-onDark (oxblood there is 1.04:1).
   Primary action is ink-filled (14.38:1), never oxblood-filled.
   ================================================================== */

@import url("tokens.css");

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ---------- scale ----------
   The label scales with the same vw term as the heading it sits over,
   in proportion to its size, so it cannot overtake the heading at
   high browser zoom (DESIGN_SYSTEM.md, type warning).             */
:root {
  --statement: clamp(1.6rem, 5.4vw, 4.25rem);
  --heading:   clamp(1.6rem, 3.4vw, 2.4rem);
  --heading-s: clamp(1.25rem, 2.1vw, 1.5rem);
  --lede:      clamp(1.1rem, 1.55vw, 1.2rem);
  --body:      1.0625rem;
  --scan:      .95rem;
  --label:     clamp(.72rem, 1.1vw, .78rem);

  --gutter:    clamp(1.25rem, 5vw, 3.5rem);
  --band:      clamp(3.5rem, 8vw, 7rem);
  --shelf:     72rem;

  --ground:      var(--limewash);
  --fg:          var(--ink);
  --fg-soft:     var(--ink-soft);
  --hairline:    var(--rule);
  --accent-here: var(--accent);
}

/* ---------- page ---------- */
body {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;   /* the reason Literata was chosen */
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--limewash);
  -webkit-font-smoothing: antialiased;
}

.shelf { width: 100%; max-width: var(--shelf); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
/* .shelf carries the page margins. Adding .measure to it must narrow the
   text, never centre the column - the page reads from one left edge. */
.shelf.measure { max-width: var(--shelf); }
.shelf.measure > * { max-width: var(--measure); }

/* ---------- grounds ---------- */
.ground { background: var(--ground); color: var(--fg); }
.g-limewash  { --ground: var(--limewash);  --fg: var(--ink); --fg-soft: var(--ink-soft); --hairline: var(--rule);        --accent-here: var(--accent); }
.g-clay      { --ground: var(--clay);      --fg: var(--ink); --fg-soft: var(--ink-soft); --hairline: #CFC2B4;            --accent-here: var(--accent); }
.g-grisaille { --ground: var(--grisaille); --fg: var(--ink); --fg-soft: var(--ink-soft); --hairline: #AFBFC7;            --accent-here: var(--accent); }
.g-hall      { --ground: var(--hall);      --fg: var(--ink-onDark); --fg-soft: var(--ink-onDark-soft); --hairline: var(--rule-onDark); --accent-here: var(--accent-onDark); }

/* ---------- rhythm ---------- */
.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band + .band.same-ground { padding-top: 0; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.14; letter-spacing: -.005em; }
h1 { font-size: var(--statement); }
h2 { font-size: var(--heading); }
h3 { font-size: var(--heading-s); font-weight: 400; line-height: 1.25; }
p + p, p + ul, ul + p, p + .stack, h2 + p, h3 + p { margin-top: 1em; }
h2 + p.lede, h1 + p.lede { margin-top: .8em; }

.lede { font-size: var(--lede); line-height: 1.5; color: var(--fg); }
.soft { color: var(--fg-soft); }
.small { font-size: var(--scan); line-height: 1.6; }

.label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  display: block;
  margin-bottom: 1.4em;
}
.scan { font-family: var(--sans); font-size: var(--scan); line-height: 1.6; }

a { color: inherit; }
.link {
  font-family: var(--sans); font-size: var(--scan); font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  color: var(--fg);
}
.link:hover { color: var(--fg-soft); }

/* ---------- actions ----------
   Ink fill, limewash text: 14.38:1. A large oxblood button reads as
   SaaS, so the accent is nowhere near this.                        */
.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 500; font-size: var(--scan);
  line-height: 1;
  padding: .95em 1.5em;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--limewash);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--ghost:hover { background: var(--ink); color: var(--limewash); border-color: var(--ink); }
.g-hall .btn { background: var(--limewash); color: var(--ink); border-color: var(--limewash); }   /* 14.38:1 */
.g-hall .btn:hover { background: transparent; color: var(--ink-onDark); }
.g-hall .btn--ghost { background: transparent; color: var(--ink-onDark); border-color: var(--rule-onDark); }
.g-hall .btn--ghost:hover { background: var(--limewash); color: var(--ink); border-color: var(--limewash); }

.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2rem; }

/* ---------- header ---------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--limewash); }
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }
.wordmark {
  font-family: var(--serif); font-weight: 400; font-size: 1.2rem;
  letter-spacing: .01em; text-decoration: none; color: var(--ink);
  white-space: nowrap; margin-right: auto;
}
/* No logotype: the mark is being redrawn, so the name is set in the
   reading face rather than invented as a graphic. */

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); font-family: var(--sans); font-size: var(--scan); }
.nav a { text-decoration: none; color: var(--ink); padding-block: .4rem; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav__group { position: relative; }
.nav__panel {
  position: absolute; top: 100%; left: -1rem; z-index: 20;
  min-width: 15rem;
  background: var(--limewash);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .6rem 0;
  display: none;
}
.nav__group:hover .nav__panel, .nav__group:focus-within .nav__panel { display: block; }
.nav__panel a { display: block; padding: .5rem 1.1rem; border-bottom: 0; }
.nav__panel a:hover { background: var(--clay); border-bottom: 0; }
.masthead .btn { padding: .7em 1.1em; }

/* the menu button. Hidden on wide screens, where the nav is the nav. */
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
  padding: 0; background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; width: 1.15rem; height: 1.5px; margin: 0 auto;
  background: var(--ink); border-radius: 1px;
  transition: transform .2s ease, opacity .15s ease;
}
.masthead[data-open="true"] .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.masthead[data-open="true"] .burger span:nth-child(2) { opacity: 0; }
.masthead[data-open="true"] .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.burger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* Small screens: one row - wordmark, Try Henry, menu button - and the navigation
   folds out underneath. The For Museums panel is not a hover dropdown here; its
   links sit indented under the parent, so a phone gets the whole navigation
   rather than a shortened one. */
@media (max-width: 60rem) {
  .masthead__inner { flex-wrap: wrap; row-gap: 0; padding-block: .9rem; min-height: 0;
                     gap: .9rem; }
  .burger { display: flex; order: 3; }
  .masthead .btn { order: 2; }

  .nav { order: 4; width: 100%; display: none; flex-direction: column;
         align-items: stretch; gap: 0; }
  .masthead[data-open="true"] .nav { display: flex; padding-block: .5rem .9rem; }

  .nav > a, .nav__group > a {
    display: block; padding: .85rem 0; border-bottom: 1px solid var(--rule);
  }
  .nav > a:hover, .nav__group > a:hover,
  .nav > a:focus-visible, .nav__group > a:focus-visible { border-bottom-color: var(--ink); }

  .nav__group { position: static; display: block; }
  .nav__panel {
    position: static; display: block; min-width: 0;
    background: none; border: 0; border-radius: 0; padding: 0;
  }
  .nav__panel a {
    padding: .7rem 0 .7rem 1.1rem; color: var(--ink-soft);
    border-bottom: 1px solid var(--rule);
  }
  .nav__panel a:hover { background: none; color: var(--ink); }
  .nav a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); }
}

/* sub-navigation for the For Museums cluster */
.subnav { border-bottom: 1px solid var(--rule); background: var(--limewash); font-family: var(--sans); font-size: var(--scan); }
.subnav ul { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-block: .9rem; }
.subnav a { text-decoration: none; color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- hero ---------- */
.hero { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .hero { grid-template-columns: 1.05fr .95fr; } }
.hero__words > * + * { margin-top: 1.1rem; }
/* a statement that shares its row with a picture is set smaller, so a long
   headline does not run to five lines */
.hero__words h1 { font-size: clamp(1.55rem, 3.9vw, 3.05rem); }

/* a hero with no picture: the statement runs wider than the reading measure,
   because the measure governs prose and not headlines */
.hero--text { display: block; }
.hero--text h1 { max-width: 20ch; font-size: clamp(1.55rem, 4.6vw, 3.4rem); }
.hero--text > * + * { margin-top: 1.1rem; }

.hero--stacked { display: block; }
.hero--stacked h1 { max-width: 16ch; }
.hero--stacked .hero__under { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 3.25rem); align-items: start; }
@media (min-width: 62rem) { .hero--stacked .hero__under { grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); } }
.hero__figure figcaption, .figure figcaption {
  font-family: var(--sans); font-size: .8rem; line-height: 1.5;
  color: var(--fg-soft); margin-top: .7rem;
}
.figure img { border-radius: var(--radius); }

/* ---------- the exchange ----------
   Placeholder component for the four visitor–Henry exchanges. Audio
   and words are produced separately; nothing here claims to be real
   until src and text are filled in.                                 */
.exchange {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  background: color-mix(in srgb, var(--ground) 88%, #fff);
}
.g-hall .exchange { background: color-mix(in srgb, var(--hall) 88%, #000); }
/* Fixed order on every exchange, everywhere on the site (Hermann, 2026-09-02):
   title, location beneath it, rule, player, then the words.                    */
.exchange__head { margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--hairline); }
.exchange__head .exchange__who { display: block; }
/* the museum the guide was built for - provenance, not a headline */
.exchange__where { display: block; margin-top: .3rem; font-family: var(--serif); font-style: normal;
  font-size: var(--scan); color: var(--fg-soft); }
.exchange__audio { margin-bottom: 1.4rem; }

/* ---------- folding a long exchange ----------
   Collapsed: the visitor's question in full, then three lines of Henry, the last
   of them fading out - the text goes on behind the fold rather than being cut
   off with a mark. The mask fades the glyphs themselves, so it works on every
   ground without knowing the card colour. Everything after the first answer
   sits in __rest. The button removes itself when nothing was folded away. */
/* One standard folded height for every card, so the chevron always sits at the
   same place in a row. The question takes whatever it needs and Henry gets the
   rest - a short question buys a line or two of answer. 14.25rem is a 3-line
   question plus 3 lines of Henry, which is the tallest case in both rows. */
.exchange { --fold: 14.25rem; }
.exchange[data-open="false"] .exchange__turns {
  height: var(--fold);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7em), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7em), transparent 100%);
}
.exchange[data-open="false"] .exchange__rest { display: none; }
/* the wrapper breaks the p + p sibling rule, so the first turn inside it needs
   the paragraph spacing back */
.exchange__rest > .exchange__who:first-child { margin-top: 1.15rem; }
.exchange__rest > .exchange__gloss:first-child { margin-top: .4rem; }
/* the box shrinks with its content instead of being stretched to the tallest
   card in the row - only foldable cards, so plain rows stay level */
.exchange[data-open] { align-self: start; }

/* the disclosure control. Checked against how sites that get this right do it
   (MoMA "Show more results +", Apple "Learn more >", Apple's own accordions):
   every one of them is border: 0, background: transparent, and typographic.
   None of them is a filled or outlined button. So this is the bare chevron,
   with padding only for the tap target.                                     */
.exchange__toggle {
  display: flex; align-items: center; justify-content: center;
  align-self: center; width: auto;
  margin-top: .5rem; padding: .75rem 1.5rem;
  background: none; border: 0; color: var(--fg-soft);
  cursor: pointer;
  transition: color .15s ease;
}
.exchange__toggle::after {
  content: ""; width: .6rem; height: .6rem;
  border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor;
  transform: translateY(-.2em) rotate(45deg);
  transition: transform .2s ease;
}
.exchange__toggle[aria-expanded="true"]::after { transform: translateY(.15em) rotate(-135deg); }
.exchange__toggle:hover { color: var(--fg); }
.exchange__toggle:focus-visible { outline: 2px solid var(--accent-here); outline-offset: 2px; }
/* English under a line spoken in another language - slot 13 */
.exchange__gloss { font-family: var(--sans); font-size: .875rem; line-height: 1.5;
  color: var(--fg-soft); margin-top: .4rem; }
/* an opening with no visitor turn - the two modes on control.html. The player is
   followed straight by Henry, which is what tells these apart from an answer. */
.exchange__audio + .exchange__who + .exchange__line--henry { font-size: 1.1rem; }
.exchange { display: flex; flex-direction: column; }
.exchange__who { font-family: var(--sans); font-size: var(--label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft); }
.exchange__line { font-size: 1.0625rem; line-height: 1.55; }
.exchange__line + .exchange__who { margin-top: 1.15rem; }
.exchange__who + .exchange__line { margin-top: .35rem; }
.exchange__line--henry { color: var(--accent-here); }      /* the accent's one job */
.exchange__pending {
  display: inline-block;
  border-bottom: 1px dashed currentColor;
  color: var(--fg-soft);
  font-family: var(--sans); font-size: var(--scan);
}
.exchange__line--henry .exchange__pending { color: var(--accent-here); opacity: .8; }
.audio { display: flex; align-items: center; gap: .7rem; font-family: var(--sans); font-size: var(--scan); color: var(--fg-soft); }
.audio__btn {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  border: 1px solid var(--hairline); background: transparent; color: var(--fg);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.audio__btn:hover { background: var(--ink); color: var(--limewash); border-color: var(--ink); }
.g-hall .audio__btn:hover { background: var(--limewash); color: var(--ink); border-color: var(--limewash); }
.audio__btn svg { width: .75rem; height: .75rem; fill: currentColor; }
.audio__btn .icon-pause { display: none; }
.audio__btn[aria-pressed="true"] .icon-play { display: none; }
.audio__btn[aria-pressed="true"] .icon-pause { display: block; }
.audio__btn[aria-pressed="true"] { background: var(--ink); color: var(--limewash); border-color: var(--ink); }
/* a hairline that fills as the exchange plays, and doubles as the scrubber:
   click to jump, drag to scrub, arrow keys to step. The ::before is an invisible
   grab area - two pixels is not something anyone can hit. */
.audio__bar {
  flex: 1; height: 2px; background: var(--hairline); position: relative; min-width: 2rem;
  cursor: pointer; touch-action: none;
}
.audio__bar::before { content: ""; position: absolute; inset: -12px 0; }
.audio__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fg-soft); display: block; }
/* the playhead, so the bar reads as something you can take hold of */
.audio__bar i::after {
  content: ""; position: absolute; right: -4px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--fg-soft);
  transition: transform .15s ease;
}
.audio__bar:hover i::after,
.audio__bar:focus-visible i::after { transform: scale(1.4); }
.audio__bar:focus-visible { outline: 2px solid var(--accent-here); outline-offset: 6px; }
.audio__time { font-variant-numeric: tabular-nums; flex: none; }

/* ---------- blocks ---------- */
/* argument on the left at the reading measure, enumerated detail on the right */
.spread { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 6vw, 5rem); align-items: start; }
@media (min-width: 62rem) { .spread { grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); } }
.spread__lead > * + * { margin-top: 1em; }
.spread__lead .actions { margin-top: 2rem; }

.cols { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); }
.cols--2 { grid-template-columns: 1fr; }
.cols--3 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .cols--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56rem) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }

.panel { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); }
.panel--clay { background: var(--clay); }
.panel--grisaille { background: var(--grisaille); }
.panel h3 { margin-bottom: .6rem; }

.stack > li { padding-block: 1.05rem; border-top: 1px solid var(--hairline); }
.stack > li:last-child { border-bottom: 1px solid var(--hairline); }
.stack h3 { font-size: 1.15rem; }
.stack p { margin-top: .35rem; color: var(--fg-soft); }

.ticks { font-family: var(--sans); font-size: var(--scan); }
.ticks li { padding-left: 1.4rem; position: relative; margin-top: .55rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: 1px; background: var(--fg-soft); }

.steps { counter-reset: step; }
.steps > li { border-top: 1px solid var(--hairline); padding-block: 1.35rem; display: grid; gap: .2rem 1.5rem; }
.steps > li:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 44rem) { .steps > li { grid-template-columns: 5rem 1fr; } }
.steps__n { font-family: var(--sans); font-size: var(--scan); font-weight: 600; color: var(--fg-soft); letter-spacing: .06em; }

.compare { display: grid; gap: 1.25rem; }
@media (min-width: 44rem) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__side { border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.25rem, 2.6vw, 1.75rem); }
.compare__seq { font-family: var(--sans); font-size: 1.05rem; font-weight: 500; line-height: 1.9; }
.compare__seq span { color: var(--fg-soft); }

.flow { font-family: var(--sans); font-size: var(--scan); display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; }
.flow li { border: 1px solid var(--hairline); border-radius: 999px; padding: .45rem 1rem; }
.flow li.is-arrow { border: 0; padding: 0; color: var(--fg-soft); }

.facts { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
@media (min-width: 44rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts h3 { font-size: 1.6rem; font-weight: 300; }
.facts p { font-family: var(--sans); font-size: var(--scan); color: var(--fg-soft); margin-top: .35rem; }

blockquote.pull { font-size: clamp(1.25rem, 2.4vw, 1.65rem); font-weight: 300; line-height: 1.4; }
blockquote.pull cite { display: block; font-family: var(--sans); font-size: var(--scan); font-style: normal; color: var(--fg-soft); margin-top: 1rem; }

/* a note that is honest about what is not built yet */
.note {
  border-left: 2px solid var(--hairline);
  padding-left: 1.25rem;
  font-family: var(--sans); font-size: var(--scan); line-height: 1.6;
  color: var(--fg-soft);
}

/* a to-be-produced slot, unmistakably empty */
.slot {
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--sans); font-size: var(--scan); color: var(--fg-soft);
}
.slot strong { font-weight: 600; color: var(--fg); }

/* legal pages: long-form reading, more air between the clauses */
.legal > li { padding-block: 1.6rem; }
.legal h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.legal p { color: var(--fg); }
.legal p + p { margin-top: .85em; }

/* founders: side by side and centred. The only centred block on the site, and
   the only circles - both deliberate, because a headshot row reads as nothing
   else. Everything inside still uses the site's own faces. */
.founder { text-align: center; }
.founder img {
  width: clamp(8rem, 14vw, 11rem); aspect-ratio: 1; object-fit: cover;
  object-position: 50% 20%; border-radius: 50%; margin-inline: auto;
}
.founder h3 { margin-top: 1.4rem; font-size: 1.15rem; font-weight: 500; }
.founder__role { font-family: var(--sans); font-size: var(--scan); color: var(--fg-soft); margin-top: .1rem; }
.founder__bio { max-width: 22rem; margin: 1.1rem auto 0; }

/* ---------- form ---------- */
.form { display: grid; gap: 1.15rem; max-width: 32rem; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--sans); font-size: var(--scan); font-weight: 500; }
.field input, .field textarea {
  font-family: var(--sans); font-size: var(--scan);
  padding: .8rem .9rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ground) 70%, #fff);
  color: var(--ink);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* consent checkboxes: the marketing one is never pre-ticked */
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.check + .check { margin-top: .9rem; }
.check input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }
.check label { font-family: var(--sans); font-size: .875rem; line-height: 1.5; color: var(--fg-soft); }
.check label a { color: var(--fg); }

/* the numbered "what happens next" list */
.next { counter-reset: n; font-family: var(--sans); font-size: var(--scan); }
.next li { counter-increment: n; position: relative; padding-left: 2.2rem; }
.next li + li { margin-top: 1.1rem; }
.next li::before {
  content: counter(n); position: absolute; left: 0; top: -.05em;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--hairline); color: var(--fg-soft);
  display: grid; place-items: center; font-size: .72rem; font-weight: 600;
}

/* form status. Deliberately NOT oxblood: the accent has one job on this site
   (Henry's spoken words) and an error state must not become a second one.
   Normal = soft ink, error = full ink with a rule. */
.form__status:empty { display: none; }
.form__status { margin-top: 1rem; font-family: var(--sans); font-size: var(--scan); line-height: 1.55; color: var(--fg-soft); }
.form__status[data-error="true"] { color: var(--fg); border-left: 2px solid var(--fg); padding-left: .9rem; }
/* the form is gone once it has been sent - a reset form reads as "nothing happened" */
.form__done { border: 1px solid var(--hairline); border-radius: var(--radius);
  background: color-mix(in srgb, var(--ground) 88%, #fff);
  padding: clamp(1.5rem, 3vw, 2.25rem); }
.form__done h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin: 0; }
.form__done p { margin-top: .75rem; max-width: 30rem; }
/* the field that needs attention says so */
.form input:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--fg); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 5vw, 4rem); font-family: var(--sans); font-size: var(--scan); color: var(--ink-soft); }
.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .foot__grid { grid-template-columns: 1.05fr .8fr 1.15fr; } }

/* the backers block: the award badge, then the two grant marks */
.marks img { max-width: 100%; }
.marks__award { max-width: 17rem; background: var(--hall); border-radius: 11px; }
.marks__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.1rem 1.9rem; margin-top: 1.5rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
/* set to a common optical weight, not a common box */
.marks__row img { width: auto; opacity: .85; }
.mark--elevenlabs { height: 1.15rem; }
.mark--google { height: 2.25rem; opacity: 1; }   /* the "for Startups" line is pale; it needs the size */
.foot a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot a:hover { border-bottom-color: var(--ink-soft); }
.foot h4 { font-size: var(--label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .8rem; font-family: var(--sans); }
.foot li + li { margin-top: .4rem; }
.foot__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; font-size: .8rem; }
/* the award mark is the transparent onDark artwork: white type, gold rule.
   It carries its own dark plate so it works on any of the light grounds. */
.award-badge { max-width: 21rem; background: var(--hall); border-radius: 11px; }

/* ---------- focus, motion, print ---------- */
:where(a, button, input, textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: .6rem; z-index: 50; background: var(--ink); color: var(--limewash); padding: .6rem 1rem; border-radius: 8px; font-family: var(--sans); }