/* ─────────────────────────────────────────────────────────────────────────
   site.css, ONE WORLD (1.15), THE STANDARD (1.18): the website in the
   game's look, on one system.

   One stylesheet for every page on meetkurus.com outside the game itself:
   the home, the app's page, the written lessons, the teacher pages, the
   documents, the 404 and the six stations' shells. The tokens are the
   game's own (public/dip/style.css :root), by the same names, so the site
   reads as the game's lobby extended: gold on the void, mono labels,
   hairlines, Space Grotesk for the statements and the numbers, Spline Sans
   for the body, Spline Sans Mono for labels and money, Fraunces italic for
   Kurus's voice only.

   1.18 (docs/design/site-v2-direction.md): a type scale with a poster
   statement at the top (96 px against 18 px body), gold as light (a stroke,
   a glow, a word, one lit button; never a wash), the machined press ported
   from the game's own .cta (no candy ledge), a 12 px floor under every
   piece of text, a phone menu, a colophon footer. The sections' own
   archetypes and the data components live in sections.css.

   Every page links this file through scripts/site-chrome.mjs; the build
   content-versions the link (scripts/hash-css-links.mjs), so a change here
   is never served stale beside fresh HTML.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* the game's palette, by the game's names */
  --void: #0B0E16;
  --panel: #0d121e;
  --panel2: #10141F;
  --hair: rgba(140, 160, 190, 0.14);
  --hair-strong: rgba(140, 160, 190, 0.3);
  --rim: rgba(255, 255, 255, 0.08);
  --ink: #eef2f7;
  --ink2: #aeb8c7;
  --ink3: #6f7c8f;
  /* the quiet text ink (1.18): ink3 fell under 4.5:1 on a panel; this
     holds 6.2:1 on the void and 5.9:1 on panel2. ink3 is for strokes. */
  --ink-mute: #8593a6;
  --gold: #E6BD5C;
  --gold-lt: #f0cd75;
  --gold-sh: #8a6f31;
  --gold-rgb: 230, 189, 92;
  --up: #26A69A;
  --up-rgb: 38, 166, 154;
  --down: #EF5350;
  --down-rgb: 239, 83, 80;
  --pearl: #AEBFE8;
  --pearl-rgb: 174, 191, 232;
  --info: #7fb4ff;
  --void-rgb: 11, 14, 22;

  /* motion: one ease for the UI, one for the reveals, one for the draws */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --d-press: 80ms;
  --d-ui: 180ms;
  --d-reveal: 700ms;
  --d-draw: 1400ms;
  --d-count: 1200ms;
  --d-stage: 900ms;

  /* the game's four faces (public/fonts/fonts.css) */
  --disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Spline Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
  --num: 'Space Grotesk', 'Spline Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* the names /quant/'s btq-*.css and app.css still resolve */
  --obs-panel: var(--panel);
  --obs-panel2: var(--panel2);
  --obs-hair: var(--hair);
  --candle-up: var(--up);
  --candle-down: var(--down);
  --eye-pink: #E06A84;
  --eye-pink-rgb: 224, 106, 132; /* Kurus's eyes (kurus.css) */

  /* rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --s10: 128px; --s11: 160px; --s12: 192px;
  --sec-y: clamp(96px, 11vw, 160px);
  --sec-y-minor: clamp(64px, 7vw, 96px);
  --w-prose: 640px;
  --w-page: 1280px;
  --gutter: clamp(20px, 4.2vw, 56px);
  --radius: 14px;
  /* the sticky header's height (60 + its hairline + the notch): the
     stations' bar sticks under it and the Feed's deck is sized by it */
  --site-head-h: calc(61px + env(safe-area-inset-top));

  color-scheme: dark;
}

/* ── base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--ink2);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) { body { font-size: 18px; } }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-lt); text-decoration: none; }
/* a link in running text wears a quiet underline, solid on hover */
.prose a, .t-body a, .t-lede a, p a, dd a, li a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--gold-rgb), 0.4);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--d-ui) var(--ease);
}
.prose a:hover, .t-body a:hover, p a:hover, dd a:hover { text-decoration-color: var(--gold-lt); }
a:active { filter: brightness(0.9); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(var(--gold-rgb), 0.28); color: var(--ink); }

/* ── type (A2): the scale, as classes any element can wear ─────────────
   Every size is at or above the floor: nothing under 12 px, no sentence
   under 14 px, body 17 px (18 from 900). Figures are tabular everywhere. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--num);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-variant-numeric: tabular-nums;
}
h1 { font-size: clamp(36px, 7.5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.0; letter-spacing: -0.032em; }
h3 { font-size: clamp(21px, 2vw, 28px); line-height: 1.18; font-weight: 600; letter-spacing: -0.018em; }
h4 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.t-statement { font: 700 clamp(44px, 6.7vw, 96px)/0.94 var(--num); letter-spacing: -0.04em; color: var(--ink); margin: 0; text-wrap: balance; }
.t-h2 { font: 700 clamp(32px, 4.4vw, 60px)/1 var(--num); letter-spacing: -0.032em; color: var(--ink); max-width: 22ch; }
.t-h3 { font: 600 clamp(21px, 2vw, 28px)/1.18 var(--num); letter-spacing: -0.018em; color: var(--ink); max-width: 30ch; }
.t-h4 { font: 600 18px/1.3 var(--num); letter-spacing: -0.01em; color: var(--ink); }
.t-lede { font: 400 clamp(18px, 1.6vw, 22px)/1.5 var(--sans); letter-spacing: -0.004em; color: var(--ink); max-width: 52ch; }
.t-body { font: 400 17px/1.62 var(--sans); color: var(--ink2); max-width: 64ch; }
@media (min-width: 900px) { .t-body { font-size: 18px; } }
.t-small { font: 400 15px/1.5 var(--sans); max-width: 56ch; }
.t-caption { font: 400 14px/1.45 var(--sans); color: var(--ink-mute); max-width: 44ch; }
.t-label { font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.t-label-l { font: 600 13px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.t-data-xl { font: 700 clamp(56px, 9vw, 128px)/0.9 var(--num); letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.t-data-l { font: 700 clamp(36px, 4vw, 56px)/1 var(--num); letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.t-data-m { font: 700 24px/1.1 var(--num); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.t-data-s { font: 600 16px/1.2 var(--num); letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.t-voice, .voice { font: italic 500 clamp(17px, 1.4vw, 20px)/1.45 var(--disp); color: var(--ink2); max-width: 30ch; }
p { margin: 0 0 var(--s4); }
sup, sub { font-size: max(12px, 0.7em); line-height: 0; }
strong, b { font-weight: 600; }
b.up { color: var(--up); }
b.down { color: var(--down); }
b.gold { color: var(--gold); }
.up { color: var(--up); }
.down { color: var(--down); }
hr, .rule { border: 0; border-top: 1px solid var(--hair); margin: var(--s7) 0; }

.lede, .intro {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--s6);
}
.eyebrow {
  font: 600 12px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s4);
}
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-mute); }
.small { font-size: 15px; }

/* ── layout ──────────────────────────────────────────────────────────── */
.wrap { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); }
main.wrap { padding-top: var(--s6); padding-bottom: var(--s8); }
.prose { max-width: var(--w-prose); margin: 0 auto; }
.prose h1 { margin: 0 0 var(--s4); }
.prose h2 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -0.02em; margin: var(--s7) 0 var(--s3); }
.prose h3 { font-size: clamp(19px, 1.6vw, 22px); margin: var(--s6) 0 var(--s2); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 var(--s4); }
.prose li { margin: 0 0 var(--s2); }
.prose strong { color: var(--ink); }
.section { padding: var(--s8) 0; }
.section + .section { border-top: 1px solid var(--hair); }
@media (min-width: 900px) { .section { padding: var(--s9) 0; } }
.crumb {
  font: 400 12px/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin: 0 0 var(--s7);
}
.crumb a { color: var(--ink-mute); }
/* the grid (A3): twelve columns from 900, eight from 720, four below */
.cols { display: grid; gap: var(--s3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 720px) { .cols { gap: 20px; grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cols { gap: var(--s5); grid-template-columns: repeat(12, minmax(0, 1fr)); } }
/* a panel holds an instrument, never prose (A4) */
.panel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--rim);
}

/* ── the header: one wordmark, one nav, one gold button, a phone menu ── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--hair);
  padding-top: env(safe-area-inset-top);
}
/* the glass is a layer under the header, never on it: a backdrop-filter on
   .site-head would make it the containing block of the phone menu's fixed
   sheet and clip the sheet to the header's 60 px (site-v2-style-test) */
.site-head::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(11, 14, 22, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* the skip link (EVERY VISITOR, 1.19): the page's first stop for a keyboard,
   above the header and out of sight until it has the focus */
.skip-link {
  position: absolute; z-index: 2;
  left: var(--gutter); top: calc(env(safe-area-inset-top) + 8px);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid rgba(var(--gold-rgb), 0.5);
  background: var(--void); color: var(--gold-lt);
  font: 600 15px/1 var(--sans); text-decoration: none;
  transform: translateY(-200%); opacity: 0;
}
.skip-link:focus { transform: none; opacity: 1; }
/* its targets land under the sticky header, not behind it */
#main, #bar, #deck { scroll-margin-top: var(--site-head-h); }
.site-head__in {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.22em;
  color: var(--ink);
  text-decoration: none !important;
}
.wordmark::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-lt);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.7);
}
.site-nav { display: none; gap: 2px; margin-left: var(--s3); }
@media (min-width: 720px) { .site-nav { display: flex; } }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font: 500 15px/1 var(--sans);
  color: var(--ink2);
  text-decoration: none !important;
}
.site-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.site-nav a[aria-current] { color: var(--gold-lt); text-decoration: underline !important; text-decoration-thickness: 1.5px; text-underline-offset: 7px; text-decoration-color: var(--gold); }
.site-head__cta { margin-left: auto; transition: opacity var(--d-ui) var(--ease), transform var(--d-ui) var(--ease), filter var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease); }
/* quiet while the hero's own button is on screen (src/art/sections.js) */
.site-head__cta.is-quiet { opacity: 0; pointer-events: none; }
@media (max-width: 380px) { .site-head__cta { padding: 0 14px; font-size: 14px; } }
/* the phone menu (A11): a details element, no script, a full sheet */
.menu { position: relative; display: block; margin-left: var(--s2); }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 24px; height: 24px; }
.menu summary .i-close, .menu[open] summary .i-menu { display: none; }
.menu[open] summary .i-close { display: block; }
.menu__sheet {
  position: fixed; left: 0; right: 0; top: var(--site-head-h); bottom: 0; z-index: 49;
  overflow-y: auto;
  padding: var(--s6) var(--gutter) calc(var(--s8) + env(safe-area-inset-bottom));
  background: var(--void);
  display: grid; align-content: start; gap: var(--s6);
}
.menu__sheet nav { display: grid; }
.menu__sheet a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none !important; }
.menu__sheet nav:first-child a { font: 700 clamp(28px, 7vw, 36px)/1 var(--num); letter-spacing: -0.03em; min-height: 64px; }
.menu__sheet a[aria-current] { color: var(--gold-lt); }
.menu__sheet a svg { width: 20px; height: 20px; color: var(--ink-mute); flex: none; }
@media (min-width: 720px) { .menu { display: none; } }

/* ── buttons (A5): the machined press, the game's own .cta ──────────────
   A hairline of light on the top edge, an ambient glow under it, a 1 px
   press that dims it: metal, not a candy ledge. No hover lift. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid transparent;
  font: 700 16px/1 var(--num);
  letter-spacing: 0.01em;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--d-ui) var(--ease), filter var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease), border-color var(--d-ui) var(--ease), background var(--d-ui) var(--ease);
}
.btn:active { transform: translateY(1px); filter: brightness(0.94); transition-duration: var(--d-press); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; border-radius: 16px; }
.btn-gold {
  color: var(--void);
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 34px -14px rgba(var(--gold-rgb), 0.55);
}
.btn-gold:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 44px -14px rgba(var(--gold-rgb), 0.7); }
.btn-gold:active { filter: brightness(0.94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 1px rgba(0, 0, 0, 0.5), 0 8px 22px -14px rgba(var(--gold-rgb), 0.45); }
.btn-gold:focus-visible { outline-color: #fff; }
.btn-ghost {
  color: var(--ink);
  border-color: var(--hair-strong);
  background: linear-gradient(180deg, #1a1f2a, #121722);
  box-shadow: inset 0 1px 0 var(--rim), 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -16px rgba(var(--pearl-rgb), 0.35);
}
.btn-ghost:hover { border-color: rgba(140, 160, 190, 0.55); }
.btn-ghost:active { background: linear-gradient(180deg, #151a24, #10151f); }
.btn-quiet { color: var(--ink2); border-color: transparent; background: transparent; }
.btn-quiet:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn .ico { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ── icons (A7): one inline sprite, a 24 grid, 1.5 px strokes ───────── */
.ico { display: inline-block; width: 24px; height: 24px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico-12 { width: 12px; height: 12px; }
.ico-16 { width: 16px; height: 16px; }
.ico-20 { width: 20px; height: 20px; }
.ico-32 { width: 32px; height: 32px; }
.ico--solid { fill: currentColor; stroke: none; }

/* ── the pieces the written pages already use, restated on the tokens ── */
.cta {
  position: relative;
  margin: var(--s7) 0;
  padding: var(--s6) var(--s5);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--rim);
  text-align: center;
}
.cta b {
  display: block;
  font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--num);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s2);
}
.cta p { margin: 0; color: var(--ink2); }
.cta .btn { margin-top: var(--s4); }
.cta a.alt {
  display: block;
  margin-top: var(--s4);
  font: 500 14px/1.4 var(--sans);
  color: var(--gold-lt);
}
img.hero {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--hair);
  margin: var(--s5) 0 var(--s6);
}
/* ── the stations' bar: the station's name and its one live chip, sticky
   under the site header (the back arrow each station drew went: the
   wordmark is the way home). A station sets its own .bar-title colour. ── */
.station-bar {
  position: sticky;
  top: var(--site-head-h);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: 0 max(var(--gutter), calc((100% - var(--w-page)) / 2 + var(--gutter)));
  background: rgba(11, 14, 22, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.bar-title { font: 600 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
/* the station's moon glyph (THE ART, 1.16): its star-chart mark from the
   Named Sky, a small glass disc in the title's own colour */
.station-bar .bar-title { display: inline-flex; align-items: center; }
.bar-glyph {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; margin-right: 10px; border-radius: 50%;
  color: currentColor;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22), transparent 40%), radial-gradient(circle at 56% 60%, color-mix(in srgb, currentColor 22%, transparent), transparent 70%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 14px -4px currentColor;
}
.bar-glyph svg { width: 15px; height: 15px; }
.bar-spacer { flex: 1; }

/* ── the footer (A11): a colophon, four columns, the brand, the legal line ── */
.site-foot {
  margin-top: var(--s9);
  border-top: 1px solid var(--hair);
  padding: var(--s8) 0 calc(var(--s7) + env(safe-area-inset-bottom));
  color: var(--ink-mute);
  font-size: 15px;
}
.site-foot__in { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: var(--s6); }
.site-foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .site-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-foot__col-h { font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--s3); }
.site-foot__col a { display: flex; align-items: center; min-height: 40px; color: var(--ink2); text-decoration: none !important; }
.site-foot__col a:hover { color: var(--ink); }
.site-foot__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: 0; color: var(--ink2); }
.site-foot__brand img { width: 56px; height: 56px; }
.site-foot__brand .wordmark { font-size: 13px; }
.site-foot__brand > span { max-width: 36ch; }
.site-foot__legal { margin: 0; font: 400 12px/1.6 var(--mono); letter-spacing: 0.04em; color: var(--ink-mute); }
.site-foot__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink2); }
#em-foot { min-height: 0; }
.site-foot__updates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); color: var(--ink-mute); }

/* ── the front door (index.html, scripts/site-home.mjs) ──────────────── */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.hero { position: relative; isolation: isolate; overflow: hidden; padding: var(--s7) 0 var(--s8); }
.hero::before {
  /* one warm light from above, the lobby's own */
  content: ''; position: absolute; z-index: -2; inset: -40% -20% auto;
  height: 120%;
  background: radial-gradient(50% 60% at 70% 30%, rgba(var(--gold-rgb), 0.10), transparent 70%),
              radial-gradient(40% 50% at 15% 10%, rgba(174, 191, 232, 0.06), transparent 70%);
  pointer-events: none;
}
.hero__in {
  max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: var(--s7); align-items: center;
}
.hero__copy .crumb { margin-bottom: var(--s5); }
.hero h1 { font-size: clamp(40px, 6.6vw, 76px); line-height: 1.0; letter-spacing: -0.025em; margin: 0 0 var(--s5); max-width: 13ch; text-wrap: balance; }
.hero .lede { color: var(--ink2); max-width: 42ch; margin: 0; }
.hero__cta { margin: var(--s6) 0 var(--s5); }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.hero__facts span { display: inline-flex; align-items: center; gap: var(--s2); }
.hero__facts span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px rgba(38, 166, 154, 0.6); }
@media (max-width: 560px) {
  .hero__cta .btn { width: 100%; }
  .hero__facts { display: grid; grid-template-columns: repeat(2, max-content); }
}
/* the stage's layers, the pearl, the tape and the wordmark: art.css (1.16) */

.home + .site-foot { margin-top: 0; } /* the last section's own padding is the gap */

/* the footer's Get-updates line and its dialog (src/subscribe.js) */
.sub-trigger { min-height: 40px; padding: 0 16px; font-size: 14px; }
.sub-trigger:disabled { opacity: 0.7; cursor: default; }
.sub-dialog {
  width: min(420px, calc(100vw - 32px)); padding: var(--s6) var(--s5) var(--s5);
  border: 1px solid var(--hair-strong); border-radius: 18px;
  background: var(--panel); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.sub-dialog::backdrop { background: rgba(5, 7, 12, 0.72); backdrop-filter: blur(4px); }
.sub-form { margin: 0; }
.sub-title { font-size: 22px; margin: 0 0 var(--s2); }
.sub-copy { color: var(--ink2); font-size: 15px; margin: 0 0 var(--s5); }
.sub-label { display: block; font: 600 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--s2); }
.sub-input {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--hair-strong); background: var(--void); color: var(--ink);
  font: 400 16px/1 var(--sans);
}
.sub-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.sub-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sub-msg { min-height: 20px; margin: var(--s3) 0; font-size: 14px; color: var(--ink2); }
.sub-actions { display: flex; gap: var(--s3); justify-content: flex-end; }

/* ── the social card render (scripts/shot-og.mjs opens /?og=1) ───────── */
html.og .site-head, html.og .site-foot, html.og .after-hero { display: none !important; }
html.og body { overflow: hidden; }
/* the stage's own card rules: art.css (1.16) */

/* ── motion and data respect the person ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-data: reduce) {
  body::before { background-image: none !important; }
}