/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --teal:        #6ee7da;
  --teal-bright: #86f0e3;
  --teal-deep:   #05bdba;
  --teal-ink:    #056f6b;
  --ink:         #0b0f14;
  --ink-soft:    #111820;
  --night:       #060a0d;
  --mist:        #dcf9f5;
  --paper:       #ffffff;
  --line:        rgba(255, 255, 255, .13);
  --muted:       rgba(255, 255, 255, .58);

  --shell: clamp(1rem, 3.2vw, 3.25rem);
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer: short pages (/links, /judges, /404) used to end wherever the
     content did, leaving the footer partway up the window. 100vh first as the
     fallback; 100dvh wins where supported and excludes the collapsing URL bar. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1rem;
  font: 500 .75rem/1 var(--mono);
}
.skip:focus { left: 0; }

/* For section headings that the design carries visually (a page hero title
   plus a grid) but that the outline still needs, so h1 -> h3 does not skip. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Shared type ────────────────────────────────────────────── */
.display {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .95;
  font-size: clamp(2.4rem, 6.2vw, 5.1rem);
}

.index, .kicker, .chip, .date-pill, .mono-link, .btn-teal, .btn-dark,
.scan-btn, .site-footer, .credits-card-foot,
.nav-link, .card-tag, .date-when, .field-label, .btn-ghost,
.prize-unit, .support-tag, .form-legend, .footer-link,
.copy-btn, .step-tag, .prim-name, .faq-tag {
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lede {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.55;
  max-width: 40ch;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(11, 15, 20, .1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem var(--shell);
}

.lockup { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.1rem); }

.wordmark { display: inline-flex; align-items: center; }
.wordmark img { height: clamp(28px, 3.4vw, 38px); width: auto; }

.lockup-x { color: rgba(11, 15, 20, .3); font-size: 1.05rem; }

.partner { display: inline-flex; align-items: center; gap: .55rem; }
.partner-logo { height: clamp(13px, 1.55vw, 17px); width: auto; }
.partner-name {
  font-family: var(--mono);
  font-size: clamp(.75rem, .9vw, .8rem);
  letter-spacing: .1em;
  font-weight: 500;
}
/* The two logos carry the lockup once the header gets tight. */
@media (max-width: 1120px) { .partner-name { display: none; } }

.scan-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.05rem;
  background: var(--teal);
  border: 1.5px solid var(--teal-deep);
  font-size: clamp(.75rem, .8vw, .78rem);
  font-weight: 500;
  color: var(--ink);
  transition: transform .18s ease, background .18s ease;
}
.scan-btn:hover { background: var(--teal-bright); transform: translateY(-1px); }
.scan-btn-icon { width: 17px; height: 17px; }
/* Below 620px the button is the icon alone. Hidden the `.sr-only` way rather
   than with `display: none`, because `display: none` also drops the label from
   the accessibility tree — and with CREDITS out of the nav at this width, this
   button is the header's only route to /credits. An abspos child is not a flex
   item, so it neither shows nor takes up the row's gap. */
@media (max-width: 620px) {
  .scan-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero-frame {
  margin: clamp(1rem, 2.4vw, 2rem) var(--shell);
  padding: clamp(.5rem, .9vw, .9rem);
  border: 1.5px dashed var(--teal);
  border-radius: 30px;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  background: #0a1518;
  padding: clamp(1.6rem, 3.6vw, 3.2rem);
  min-height: min(78vh, 820px);
  display: flex;
  flex-direction: column;
  color: #fff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 90% at 62% 46%, #1b5c60 0%, #143f4a 34%, #0c2029 62%, #070d12 100%),
    #070d12;
}

.hero-scan {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 2px,
    rgba(0, 0, 0, 0) 2px 7px);
  mix-blend-mode: overlay;
}

.hero-beam {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 150%;
  z-index: -1;
  background: linear-gradient(103deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(180, 255, 246, .16) 45%,
    rgba(255, 255, 255, .05) 52%,
    rgba(255, 255, 255, 0) 60%);
  filter: blur(6px);
  pointer-events: none;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.chip {
  background: var(--teal);
  color: var(--ink);
  padding: .55rem 1rem;
  font-size: clamp(.75rem, .82vw, .78rem);
  font-weight: 500;
}

.hero-title {
  margin: clamp(1.6rem, 4vw, 2.6rem) 0 0;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .92;
  font-size: clamp(2.8rem, 8.4vw, 8.4rem);
  max-width: 15ch;
}
.hero-title .accent { color: var(--teal); }

.hero .actions { margin-top: clamp(1.6rem, 3.4vw, 2.6rem); }

.hero-bottom {
  margin-top: auto;
  padding-top: clamp(1.4rem, 3.4vw, 2.4rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hero-copy {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.35vw, 1.32rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, .93);
}

.date-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  font-size: clamp(.75rem, .8vw, .76rem);
  color: #fff;
  white-space: nowrap;
}
.date-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

/* ── Layout & buttons ──────────────────────────────────────── */
.wrap { padding: 0 var(--shell); }

.btn-teal, .btn-dark {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 1.05rem 1.5rem;
  font-size: clamp(.75rem, .82vw, .78rem);
  font-weight: 500;
  transition: transform .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn-teal { background: var(--teal); color: var(--ink); }
.btn-teal:hover { background: var(--teal-bright); transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1c262f; transform: translateY(-2px); }

/* ── Community ──────────────────────────────────────────────── */
.community { color: var(--ink); }

.community-copy {
  background: var(--mist);
  padding: clamp(2rem, 4.4vw, 4rem) var(--shell);
  display: flex;
  flex-direction: column;
}

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1.75rem, 3.6vw, 2.75rem);
}
.index { font-size: clamp(.75rem, .82vw, .78rem); margin: 0; }
.panel-icon { width: 24px; height: 24px; color: var(--ink); }

.kicker { margin: 0 0 1.25rem; font-size: clamp(.75rem, .82vw, .78rem); }
.community-copy .display { margin-bottom: 1.75rem; }
.community-copy .lede { color: rgba(11, 15, 20, .8); }

.mono-link {
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  align-self: flex-start;
  font-size: clamp(.75rem, .95vw, .88rem);
  letter-spacing: .06em;
  text-transform: none;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: .5rem;
}
.mono-link:hover { color: var(--teal-deep); border-color: var(--teal-deep); }

/* ── Credits ────────────────────────────────────────────────── */
.credits {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  flex-wrap: wrap;
  background: var(--paper);
  padding: clamp(2rem, 4vw, 3.5rem) var(--shell);
  border-top: 1px solid rgba(11, 15, 20, .12);
}

/* The whole card is the link — the QR points at /credits, and on a phone, where
   you cannot scan the screen you are holding, "TAP" is the only half of "SCAN OR
   TAP" that applies. Internal target, so no UTM tags. */
.credits-card {
  display: block;
  position: relative;
  background: var(--teal);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: .75rem .75rem 0;
  transform: rotate(-3deg);
  flex: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.credits-card:hover {
  transform: rotate(-3deg) translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--ink);
}
/* Overrides the global --teal-deep ring. The card is a teal block on white, and
   the ring sits 3px off its edge — teal on teal on white is the one place that
   ring reads as decoration rather than focus. --ink matches the card's own border
   and drop shadow and is unmistakable against both. */
.credits-card:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .credits-card { transition: none; }
  /* The other four transforms are 1-2px hover nudges — under what 2.3.3 is
     aimed at, but there is no reason to keep them once motion is opted out.
     Colour, border and shadow still carry every one of these hover states. */
  .scan-btn:hover, .btn-teal:hover, .btn-dark:hover, .btn-ghost:hover { transform: none; }
}
.credits-card img { width: clamp(120px, 10vw, 132px); height: auto; }
.credits-card-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 0;
  font-size: .75rem;
}
.credits-card-foot svg { width: 14px; height: 14px; }

.credits-copy { flex: 1 1 20rem; }
.credits-copy .index { margin-bottom: 1rem; color: rgba(11, 15, 20, .75); }
.credits-copy .display { font-size: clamp(1.9rem, 4.2vw, 3.4rem); margin-bottom: .9rem; }
.credits-copy .lede { color: rgba(11, 15, 20, .72); max-width: 52ch; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding: 1.5rem var(--shell);
  background: var(--night);
  color: rgba(255, 255, 255, .6);
  font-size: .75rem;
}

/* ── Reveal ─────────────────────────────────────────────────── */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}

.site-header.is-stuck {
  box-shadow: 0 10px 30px -22px rgba(11, 15, 20, .55);
  background: rgba(255, 255, 255, .95);
}

/* ── Site nav ───────────────────────────────────────────────── */
.header-inner { flex-wrap: wrap; }

.site-nav {
  display: flex;
  align-items: center;
  /* Six labels no longer fit one phone-width row, so the nav wraps rather
     than scrolling silently. The column gap is >= 3x the width of a space at
     .75rem mono with .14em tracking (27.2px vs 8.88px), which is where the eye
     starts reading the gap as a separator instead of a word space. */
  flex-wrap: wrap;
  gap: .5rem 1.7rem;
  margin-left: auto;
  margin-right: clamp(.85rem, 1.7vw, 1.7rem);
}
.nav-link {
  display: inline-block;
  font-size: .75rem;
  font-weight: 500;
  /* .72 alpha composites to 7.8:1 where the page behind the header is white.
     Over the dark hero it is lower: 6.9:1 for the first 24px of scroll, while the
     header is still at .88 alpha, then 7.4:1 once `.is-stuck` raises it to .95.
     Comfortably past AA at every one of those; .6 alpha only reached 5:1. */
  color: rgba(11, 15, 20, .72);
  /* Symmetrical padding plus a floor keeps the target past 24x24 (SC 2.5.8)
     while leaving the underline close to the text. */
  min-height: 24px;
  padding: .4rem 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.nav-link:hover { color: var(--ink); border-color: var(--teal-deep); }
.nav-link[aria-current="page"] { color: var(--ink); border-color: var(--teal-deep); }

/* Larger type and a wider gap mean the inline nav stops fitting beside the
   lockup and the credits button below ~1240px, so it drops to its own row
   there and wraps. Nothing is clipped and nothing scrolls out of sight. */
@media (max-width: 1240px) {
  .site-nav {
    order: 3;
    width: 100%;
    margin: 0;
    padding-top: .7rem;
    border-top: 1px solid rgba(11, 15, 20, .09);
  }
}

/* Six labels need 544.5px and a 360px phone gives the nav 328px, so the nav
   wrapped to two rows and the sticky header ate 161px — a quarter of the
   screen, permanently. The type, the tracking and the 27.2px column gap are all
   at their floors, so the only thing left to cut is what the row carries:

     CREDITS   is `.scan-btn` immediately to its right, and `UNLOCK CREDITS`
               in the footer. Three routes to one page in one viewport.
     KEY DATES is an anchor into the home page, not a page. It moves to the
               footer nav (all seven pages) rather than being dropped.
     KEY       drops off `KEY LINKS`; `LINKS` still names the page.

   What is left is four labels at 312.5px, which is one row from 360px up. */
@media (max-width: 620px) {
  .site-nav a[href$="#dates"],
  .site-nav a[href="/credits"],
  .nav-word { display: none; }

  /* The header is sticky with no mobile override, so its height is spent on
     every screen of every page. Trimmed here, not on the desktop layout. */
  .header-inner { padding: .6rem var(--shell); gap: .75rem; }
  .site-nav { padding-top: .5rem; }
}

/* ── Subpage hero ───────────────────────────────────────────── */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  background: #0a1518;
  color: #fff;
  padding: clamp(2rem, 5vw, 4.25rem) clamp(1.5rem, 3.6vw, 3.2rem) clamp(2.25rem, 5vw, 4rem);
}
.page-hero-inner { max-width: 46rem; }
.page-hero .chip { display: inline-block; margin-bottom: clamp(1.5rem, 3.4vw, 2.5rem); }
.page-title {
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  margin-bottom: 1.5rem;
}
.page-lede {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem, 1.35vw, 1.26rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
/* The page hero sits on the dark stack, so `.text-link` (teal-ink, tuned for
   white) is unreadable here — links in the lede take the bright teal instead. */
.page-lede a { color: var(--teal); border-bottom: 1.5px solid currentColor; }
.page-lede a:hover { color: var(--teal-bright); }
.page-hero-actions, .actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: clamp(1.75rem, 3.4vw, 2.75rem);
}
/* Buttons that close out a full block of content (the timeline, the prize grid)
   want more air above them than buttons sitting under a lede. Kept as a modifier
   rather than folded into `.actions`, so the hero pair keeps `.hero .actions`. */
.actions-spaced { margin-top: clamp(2rem, 4vw, 3rem); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 1.05rem 1.5rem;
  font-size: clamp(.75rem, .82vw, .78rem);
  font-weight: 500;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .35);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn-ghost:hover {
  border-color: var(--teal);
  background: rgba(110, 231, 218, .1);
  transform: translateY(-2px);
}

/* ── Generic panels ─────────────────────────────────────────── */
.panel { padding: clamp(2.75rem, 6vw, 5rem) 0; }
.panel-mist { background: var(--mist); }
.panel-night { background: var(--night); color: #fff; }
.panel-night .lede,
.panel-night .section-lede { color: rgba(255, 255, 255, .74); }

.section-head { margin-bottom: clamp(1.75rem, 3.6vw, 2.75rem); }
.section-head .index { margin-bottom: 1.1rem; }
.section-head .display { font-size: clamp(2rem, 4.4vw, 3.5rem); }
.section-lede {
  margin: 1.1rem 0 0;
  max-width: 58ch;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.55;
  color: rgba(11, 15, 20, .72);
}

/* ── Tiles (links + resources) ──────────────────────────────── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1px;
  background: rgba(11, 15, 20, .16);
  border: 1px solid rgba(11, 15, 20, .16);
}
.panel-night .tile-grid { background: var(--line); border-color: var(--line); }

.tile {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transition: background .18s ease;
}
.panel-mist .tile { background: var(--mist); }
.panel-night .tile { background: var(--night); }
a.tile:hover { background: var(--mist); }
.panel-mist a.tile:hover { background: var(--paper); }
.panel-night a.tile:hover { background: var(--ink-soft); }
a.tile:hover .mono-link-sm { color: var(--teal-ink); border-color: var(--teal-ink); }
.panel-night a.tile:hover .mono-link-sm { color: var(--teal); border-color: var(--teal); }

.card-tag { font-size: .69rem; color: var(--teal-ink); }
.panel-night .card-tag { color: var(--teal); }
.tile h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.15;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}
.tile p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  color: rgba(11, 15, 20, .72);
}
.panel-night .tile p { color: rgba(255, 255, 255, .68); }

.mono-link-sm {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: .75rem;
  word-break: break-all;
}
/* Nearly every .mono-link-sm is a label inside a whole-tile link; the one on
   /resources wraps an anchor of its own, which needs the same 24x24 minimum
   as the nav and footer links. */
.mono-link-sm > a { display: inline-block; padding: .3rem 0; }
.panel-night .mono-link-sm { border-color: rgba(255, 255, 255, .45); }
.panel-night .mono-link-sm:hover { color: var(--teal); border-color: var(--teal); }

/* ── About / support ────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

.about-copy .index { margin-bottom: 1.15rem; }
.about-copy .display { font-size: clamp(2rem, 4.4vw, 3.5rem); }
.about-cards .kicker { margin-bottom: 1.1rem; }

.support-list { display: grid; gap: 1px; background: rgba(11, 15, 20, .16); border: 1px solid rgba(11, 15, 20, .16); }
.support {
  background: var(--paper);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
.support-tag { font-size: .69rem; color: var(--teal-ink); }
.support h3 {
  margin: .7rem 0 .5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}
.support p { margin: 0; font-size: .94rem; line-height: 1.55; color: rgba(11, 15, 20, .7); }
.support p a { border-bottom: 1px solid rgba(11, 15, 20, .35); }
.support p a:hover { color: var(--teal-ink); border-color: var(--teal-ink); }
.support code {
  font-family: var(--mono);
  font-size: .82em;
  background: var(--mist);
  padding: .15rem .4rem;
  word-break: break-all;
}

/* ── Key dates ──────────────────────────────────────────────── */
.date-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(11, 15, 20, .18);
}
.date-row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: .4rem 1.75rem;
  align-items: baseline;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  border-bottom: 1px solid rgba(11, 15, 20, .18);
}
.date-when { font-size: .75rem; color: var(--teal-ink); white-space: nowrap; }
.date-what {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  letter-spacing: -.022em;
  line-height: 1.25;
}
.date-note { margin: .4rem 0 0; font-size: .85rem; color: rgba(11, 15, 20, .55); }
@media (max-width: 620px) { .date-row { grid-template-columns: 1fr; } }

/* ── Prizes ─────────────────────────────────────────────────── */
.prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.prize { background: var(--night); padding: clamp(1.75rem, 3.4vw, 2.75rem); }
.prize-figure {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  color: var(--teal);
}
.prize-unit { margin: .7rem 0 1.1rem; font-size: .75rem; color: rgba(255, 255, 255, .68); }
.prize p { margin: 0; font-size: .98rem; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }

.form-shell {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 12px 12px 0 var(--teal);
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
}
.form-legend { font-size: .75rem; color: var(--teal-ink); margin: 0 0 1.75rem; }
.form-shell h2 {
  margin: 0 0 .8rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}
.form-intro { margin: 0 0 2rem; font-size: .98rem; line-height: 1.6; color: rgba(11, 15, 20, .72); }
.form-note { margin-top: .9rem; text-align: center; }

.field { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.75rem; }
.field-label { font-size: .75rem; color: var(--ink); }
.req { color: var(--teal-ink); }
.field-help { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(11, 15, 20, .62); }
.field-help a { border-bottom: 1px solid rgba(11, 15, 20, .35); }
.field-help a:hover { color: var(--teal-ink); border-color: var(--teal-ink); }
.field-help code, .form-intro code {
  font-family: var(--mono);
  font-size: .84em;
  background: var(--mist);
  padding: .12rem .38rem;
  word-break: break-all;
}

.form-submit { width: 100%; justify-content: center; margin-top: .5rem; }

.form-aside { display: flex; flex-direction: column; gap: 1.5rem; }
.aside-card {
  border: 1px solid rgba(11, 15, 20, .18);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--paper);
}
.panel-mist .aside-card { background: var(--mist); }
.aside-card h3 {
  margin: .7rem 0 .6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
}
.aside-card p { margin: 0; font-size: .94rem; line-height: 1.55; color: rgba(11, 15, 20, .7); }

/* ── Footer lockup and links ────────────────────────────────── */
.site-footer { align-items: center; }

.footer-lockup { display: inline-flex; align-items: center; gap: clamp(.55rem, 1.2vw, .9rem); }
.footer-lockup .lockup-x { color: rgba(255, 255, 255, .35); }
.footer-logo { height: 26px; width: auto; }
.footer-logo-openai { height: 12px; }

.footer-links { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; }
.footer-link {
  display: inline-block;
  min-height: 24px;
  padding: .4rem 0;
  color: rgba(255, 255, 255, .6);
}
.footer-link:hover { color: var(--teal); }

/* ── Code blocks ────────────────────────────────────────────── */
/* Block-level counterpart to the inline `code` treatment used in `.support`
   and `.field-help`: same mono token, same square edges, but on the --night
   surface so a terminal transcript reads as a terminal on a light panel. */
.code-block {
  position: relative;
  background: var(--night);
  border: 1px solid rgba(11, 15, 20, .2);
}
.panel-night .code-block { border-color: var(--line); }

.code-block pre {
  margin: 0;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  overflow-x: auto;
}
.code-block code {
  font-family: var(--mono);
  font-size: clamp(.75rem, .86vw, .8rem);
  line-height: 1.85;
  color: rgba(255, 255, 255, .92);
  white-space: pre;
}
/* Comments, dimmed against the commands themselves. */
.code-block .c { color: var(--teal); opacity: .75; }

.copy-btn {
  position: absolute;
  top: .7rem;
  right: .7rem;
  padding: .5rem .7rem;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  background: var(--night);
  border: 1px solid rgba(255, 255, 255, .24);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.copy-btn:hover { color: #fff; border-color: var(--teal); background: rgba(110, 231, 218, .1); }
.copy-btn.is-copied { color: var(--night); background: var(--teal); border-color: var(--teal); }

.code-note {
  margin: .9rem 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(11, 15, 20, .62);
}
.panel-night .code-note { color: rgba(255, 255, 255, .6); }
.code-note a { border-bottom: 1px solid rgba(11, 15, 20, .35); }
.code-note a:hover { color: var(--teal-ink); border-color: var(--teal-ink); }
.panel-night .code-note a { border-bottom-color: rgba(255, 255, 255, .35); }
.panel-night .code-note a:hover { color: var(--teal); border-color: var(--teal); }

/* ── Quickstart steps ───────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.step-tag { font-size: .75rem; color: var(--teal-ink); margin: 0 0 .9rem; }
.step p { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba(11, 15, 20, .72); }
.step p + p { margin-top: .8rem; }
.step p code {
  font-family: var(--mono);
  font-size: .84em;
  background: var(--mist);
  padding: .12rem .38rem;
  overflow-wrap: break-word;
}
.step a { border-bottom: 1px solid rgba(11, 15, 20, .35); }
.step a:hover { color: var(--teal-ink); border-color: var(--teal-ink); }

/* ── Primitives map ─────────────────────────────────────────── */
.prim-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.prim-row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: .35rem 1.75rem;
  align-items: baseline;
  padding: clamp(.9rem, 1.8vw, 1.25rem) 0;
  border-bottom: 1px solid var(--line);
}
.prim-name {
  font-size: .75rem;
  color: var(--teal);
  border-bottom: 1px solid transparent;
  justify-self: start;
}
.prim-name:hover { border-bottom-color: var(--teal); }
.prim-row p { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .74); }
@media (max-width: 620px) { .prim-row { grid-template-columns: 1fr; } }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1px;
  background: rgba(11, 15, 20, .16);
  border: 1px solid rgba(11, 15, 20, .16);
}
.panel-mist .faq-list { background: rgba(11, 15, 20, .18); border-color: rgba(11, 15, 20, .18); }
.faq {
  background: var(--paper);
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
}
.panel-mist .faq { background: var(--mist); }
.faq-tag { font-size: .69rem; color: var(--teal-ink); margin: 0 0 .9rem; }
.faq h3 {
  margin: 0 0 .6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}
.faq p { margin: 0; font-size: .93rem; line-height: 1.6; color: rgba(11, 15, 20, .72); }
.faq code {
  font-family: var(--mono);
  font-size: .84em;
  background: var(--paper);
  border: 1px solid rgba(11, 15, 20, .14);
  padding: .1rem .34rem;
  overflow-wrap: break-word;
}
.panel-mist .faq code { background: var(--paper); }
.faq a { border-bottom: 1px solid rgba(11, 15, 20, .35); }
.faq a:hover { color: var(--teal-ink); border-color: var(--teal-ink); }

/* ── Judges grid ────────────────────────────────────────────── */
/* Seven judges in the auto-fit `.tile-grid` leave an empty track on the last
   row, which shows up as a hole in the hairline grid. Flex lets the final row
   grow to fill the width instead. */
.judge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgba(11, 15, 20, .16);
  border: 1px solid rgba(11, 15, 20, .16);
}
.judge-grid .tile { flex: 1 1 17rem; }

/* ── Inline prose links ─────────────────────────────────────── */
.lede-note { margin-top: 1.75rem; }
.text-link {
  color: var(--teal-ink);
  border-bottom: 1.5px solid var(--teal-ink);
}
.text-link:hover { color: var(--teal-deep); border-bottom-color: var(--teal-deep); }