/* Every colour and face resolves to ../shared/brand-tokens.css. The hero rules are the homepage's
   (src/styles/homepage.css, "hero" and "THE WHEEL"), ported with the .lvf scope dropped and the literals
   replaced by the tokens they were copied from. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); }
p { text-wrap: pretty; }

/* the entity colours the wheel wears (docs/nav-contract.md section 4), as classes: no inline style here */
.c-emerald { color: var(--emerald); }
.c-gold { color: var(--gold-light); }
.c-amethyst { color: var(--amethyst-light); }
.c-models { color: var(--models-light); }
.c-coral { color: var(--coral); }
.c-orange { color: var(--orange); }

/* ---------- hero ---------- */
.hero { position: relative; flex: 1; display: flex; align-items: center; overflow: hidden; }
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7,14,28,.55) 0%, rgba(7,14,28,.12) 40%, rgba(7,14,28,.55) 82%, var(--bg) 100%); }
.herobody {
  position: relative; z-index: 5; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 72px 40px; display: flex; flex-direction: column; gap: 44px;
}
.lockup { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.lockup-mark { display: flex; flex-direction: column; gap: 20px; }
.mark { line-height: 0; }
.mark svg { width: 100%; max-width: 620px; height: auto; display: block; filter: drop-shadow(0 6px 40px rgba(46,209,149,.12)); }

/* ---------- the wheel ---------- */
.wheel {
  --wheel-h: 76px; --wheel-vis: 5;
  position: relative; overflow: hidden; padding-left: 34px;
  height: calc(var(--wheel-h) * var(--wheel-vis));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.88) 20%, #000 40%, #000 60%, rgba(0,0,0,.42) 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.88) 20%, #000 40%, #000 60%, rgba(0,0,0,.42) 80%, transparent 100%);
}
.wheel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.16) 34%, rgba(255,255,255,.16) 66%, transparent);
}
.wheel-track { display: flex; flex-direction: column; will-change: transform; }
.wheel-item {
  height: var(--wheel-h, 76px); flex: none; display: flex; align-items: center;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 3.9vw, 52px); line-height: 1; letter-spacing: -.015em; white-space: nowrap;
  opacity: .22;
}
.wheel-sub { margin: 0; max-width: 560px; text-align: right; font-family: var(--font-display); font-size: clamp(17px, 1.32vw, 22px); font-weight: 600; line-height: 1.5; letter-spacing: -.02em; color: var(--text); }
.subslot { position: relative; min-height: 112px; display: flex; align-items: center; justify-content: flex-end; }
.hero-tag {
  position: absolute; left: 0; bottom: 100%; margin: 0 0 64px; white-space: nowrap;
  font-family: var(--font-display); font-size: 26px;
  font-weight: 600; letter-spacing: -.02em; line-height: 1.16; color: var(--text);
}
.wheelcol { position: relative; }
.wheel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }

/* ---------- below the hero: the lede and the waitlist, side by side ---------- */
/* the wheel is pushed down by a transform that takes no space (alignWheel), so its lower rows hang below the
   lockup; on wide screens the block below leaves them room rather than sitting under them */
.below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 64px; }
.lede p { margin: 0 0 14px; color: var(--text); font-size: 16px; line-height: 1.65; }
.lede p:last-child { margin-bottom: 0; }
.waitlist { width: 100%; }
.join { margin: 0 0 6px; font: 600 20px/1.3 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.join-note { margin: 0 0 18px; color: var(--text-2); }
/* The input and the button share one row, about 70% of the column, so the input does not stretch beside the
   lede. The Turnstile container under it carries no rules at all: the widget is invisible by its mode and takes
   no space, and if Cloudflare does show a challenge it gets the room it needs. The form script hides .row on
   success; .row is a flex box, so its [hidden] needs saying. */
#waitlist { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; max-width: 70%; }
.row input { flex: 1; }
.row button { flex: none; }
.row[hidden] { display: none; }
label {
  display: block; margin-bottom: -4px;
  font: 600 var(--fs-label) var(--font-display);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-3);
}
input {
  min-width: 0; padding: 11px 12px;
  border: 1px solid var(--stroke-strong); border-radius: var(--r-md);
  background: rgba(7,14,28,.72); color: var(--text); font: inherit; font-size: 15px;
}
input:focus { outline: none; border-color: var(--blue-light); }
/* the homepage's emerald button (.go) */
button {
  padding: 11px 18px; border-radius: 8px; cursor: pointer;
  background: rgba(46,209,149,.5); border: 1px solid var(--emerald); color: #f7fdfb;
  box-shadow: 0 2px 18px rgba(46,209,149,.35);
  font: 700 13.5px var(--font-display); transition: filter .16s, transform .16s;
}
button:hover { filter: brightness(1.06); transform: translateY(-1px); }
button:disabled { opacity: 0.6; cursor: default; transform: none; }
.note { margin: 0; color: var(--text-3); }
.note:empty { display: none; }
.note.ok { color: var(--emerald); }
.note.err { color: var(--coral); }

footer {
  display: flex; gap: 16px; justify-content: center;
  padding: 24px 16px; border-top: 1px solid var(--stroke);
  color: var(--text-3); font-size: 12px;
}
footer a { color: var(--text-2); text-decoration: none; }

/* tablet: at 70% the input gets too narrow, so the row takes the column and the button drops under the input,
   right-aligned */
@media (min-width: 768px) and (max-width: 1100px) {
  .row { flex-wrap: wrap; max-width: none; justify-content: flex-end; }
  .row input { flex: 0 0 100%; }
}

/* ---------- SMALL SCREENS: a layout of its own, not the wheel folded down ----------
   (10 Oct 2026, tasks/brief-the-splash-two-columns.md: the cutoff moved from 1080px to 767px, the repo's mobile
   cutoff, which was also where the two columns stopped fitting the old visible 300px Turnstile box. Probed with
   the wheel forced on down to 640px, its lit row stayed on the subhead's line at every width; what narrows is the
   tagline and subhead, which the mechanism sizes to the wheel column and which reach their 13px floor near 780px.)
   The homepage stacks the wheel under the wordmark below 1081px and leaves the live term's subhead in the slot
   under the mark, so on a phone nothing joins a term to its own line. The wheel's mechanism is a window five rows
   tall whose lit row is aligned to the subhead beside it; with one column there is no "beside", so it cannot
   fold. Here, at 767px and below, the wheel and the subhead slot are not shown, the tagline sits directly under
   the wordmark, and the screen-reader list becomes the visible one: every term with its own subhead on the
   right, all seven at once. hero.js keys the same 768px query and runs a short entrance instead of the wheel. */
@media (max-width: 767px) {
  .herobody { padding: 56px 24px 48px; gap: 32px; }
  .lockup { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .mark svg { max-width: 360px; }
  .subslot, .wheel { display: none; }
  .hero-tag { position: static; margin: 0; white-space: normal; font-size: clamp(22px, 5.6vw, 30px); text-wrap: balance; }
  .pairs {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    list-style: none; display: grid; gap: 0; border-top: 1px solid var(--stroke);
  }
  .pairs li {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: baseline;
    padding: 12px 0; border-bottom: 1px solid var(--stroke);
  }
  .pair-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pair-term { font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 1.1; }
  .pair-sub { font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--text); }
  .below { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 8px; }
}
@media (max-width: 767px) {
  .herobody { padding: 44px 16px 40px; }
  .mark svg { max-width: 300px; }
  .pairs li { grid-template-columns: 146px minmax(0, 1fr); gap: 12px; }
  .pair-term { font-size: 20px; }
  .pair-sub { font-size: 13.5px; }
  .lede p { font-size: 15px; }
  /* phone: full-width input, full-width button beneath it */
  .row { flex-direction: column; max-width: none; }
}

/* ---------- the 404 page (src/404.html) shares this sheet; its rules are unchanged from before the hero ---------- */
body > main:not(.herobody) { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 72px 16px 48px; display: flex; flex-direction: column; justify-content: center; }
.wordmark { margin: 0 0 40px; font: italic 40px/1 var(--font-serif); }
.wordmark span { color: var(--emerald); }
main:not(.herobody) h1 { margin: 0 0 16px; font: italic 400 clamp(32px, 6vw, 48px)/1.1 var(--font-serif); }