/* ─────────────────────────────────────────────────────────────────────────
   Venture · Modern Night — the app's default look, on the web (2026-11-01).

   Linked after every page's own <style> by scripts/postprocess.mjs. The colour
   swap (gold → ion, warm blacks → graphite) is done in place by
   scripts/skin.mjs; this sheet carries what a colour swap cannot: the faces and
   the shapes. Tokens follow the app's Modern Night table
   (BRAND NEW DESIGN!/design_handoff_venture_themes 2/README.md).

   Fonts: Geist and Geist Mono (SIL OFL 1.1, /fonts/OFL.txt), self-hosted.
   ───────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Geist';src:url(/fonts/Geist-Light.woff2) format('woff2');font-weight:100 300;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url(/fonts/Geist-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url(/fonts/Geist-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url(/fonts/Geist-SemiBold.woff2) format('woff2');font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/fonts/GeistMono-Regular.woff2) format('woff2');font-weight:100 400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/fonts/GeistMono-Medium.woff2) format('woff2');font-weight:500 900;font-style:normal;font-display:swap}

/* The design's display role — titles and big numerals — is Geist Light at any
   weight or style the old serif rules ask for (skin.mjs renames the serif to
   this family), so no rule needs editing and nothing is faux-bolded or slanted. */
@font-face{font-family:'Venture Display';src:url(/fonts/Geist-Light.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Venture Display';src:url(/fonts/Geist-Light.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

/* Graphite with the ion glow at the top of the page (bgGrad). */
html{background:#050608}
body{
  background:radial-gradient(140% 60% at 50% -12%, rgba(111,242,220,.09) 0%, rgba(5,6,8,0) 58%) top center / 100% 1100px no-repeat, #050608 !important;
}
::selection{background:rgba(111,242,220,.28);color:#F2F4F7}

/* Data labels: Geist Mono, uppercase, tracked (the app's MonoText). */
.eyebrow{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace !important;font-weight:400 !important;letter-spacing:.14em !important}

/* Shapes: pills for every button, as in the app. */
.gold-btn,.retry-btn,.btn,.nav-cta,.sound-btn{border-radius:999px !important}
.gold-btn{font-weight:500 !important;letter-spacing:-.005em !important}
.gold-btn.solid{background:#6FF2DC !important;color:#04110E !important;border-color:#6FF2DC !important}
.gold-btn.solid:hover{background:#8FF5E4 !important;border-color:#8FF5E4 !important}

/* The wordmark is set like the app's: light, not italic. */
.brand .name{letter-spacing:-.02em !important}

/* ── After the design-judge pass (2026-11-01, mean 5.6/10 on the first cut) ── */

/* One grey ladder at the app's contrast (ink2 68%, ink3 52%), one surface,
   one hairline. */
:root{
  --text-2:rgba(242,244,247,.68) !important;
  --text-3:rgba(242,244,247,.52) !important;
  --hair:rgba(255,255,255,.08) !important;
  --surface-2:#0E0F11 !important;
}

/* Ion marks data and state only. Labels are grey, secondary pills neutral,
   dividers hairlines; the primary CTA, live dots and counts keep the accent. */
.eyebrow{color:rgba(242,244,247,.52) !important}
.gold-btn:not(.solid){background:transparent !important;border-color:rgba(255,255,255,.14) !important;color:#F2F4F7 !important}
.gold-btn:not(.solid):hover{background:rgba(255,255,255,.03) !important;border-color:rgba(255,255,255,.32) !important}
.sound-btn{border-color:rgba(255,255,255,.18) !important;color:#F2F4F7 !important}
.hr{background:rgba(255,255,255,.14) !important}
.answer strong{color:#F2F4F7 !important;font-weight:500}

/* Light only comes from the top of the page (as in the app), never from a box
   that starts under the breadcrumb. */
.m-hero::before,.c-hero::before,.g-hero::before{background:none !important}

/* Titles: a real measure and balanced lines. (Forced <br>s stay: the markup
   has no space around them, so hiding one glues two words together.) */
h1,h2,h3{text-wrap:balance}
.film-head{max-width:880px !important}
.film-hero h1{font-size:clamp(34px,6.2vw,64px) !important;line-height:1.02 !important}
/* The video frame is positioned and casts a 120px shadow, which painted over
   the (static) CTA row below it and dimmed the primary button. */
.film-hero .hero-cta,.film-hero .trust{position:relative;z-index:1}

/* The app's signature: big light numerals. */
.stat-value{font-size:52px !important;letter-spacing:-.04em !important;line-height:1 !important}
.fact .v{font-family:'Venture Display','Geist',sans-serif !important;font-size:22px !important;letter-spacing:-.02em !important;margin-top:8px !important}

/* Leaderboard: one row component; the podium is marked by tint, not shape. */
.lb-row{border-radius:16px !important;border:1px solid rgba(255,255,255,.08) !important;background:#0E0F11 !important}
.lb-row.top{border-color:rgba(111,242,220,.28) !important}
.lb-row.rank-1{background:rgba(111,242,220,.05) !important}
.lb-rank{font-family:'Geist Mono',ui-monospace,monospace !important;letter-spacing:.04em !important}
.lb-row.top .lb-rank{font-size:14px !important}

/* Feature cards: text starts at the top so eyebrows line up across a row;
   the app shots are big enough to read. */
.feature{align-items:flex-start !important}
.feature .shot{width:128px !important}

/* Museum hub cards: a fixed column width so the last row does not stretch. */
.chips>.chip[style*="flex-direction:column"]{max-width:calc((100% - 24px)/3)}
@media (max-width:820px){.chips>.chip[style*="flex-direction:column"]{max-width:calc((100% - 12px)/2)}}
@media (max-width:540px){.chips>.chip[style*="flex-direction:column"]{max-width:none}}

/* Phone nav: the scrolling link row fades out instead of cutting a word. */
@media (max-width:1100px){
  .nav-links{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
}