/* Konvoo waitlist — the design system.
   Fourth pass, 2026-09-16: bold pastel states on a neutral ground, an organic
   wave between them, one icon family, one motion scale. Same structure, same
   mechanism as before. Spec: docs/superpowers/specs/2026-09-15-waitlist-building-book.md */

/* State tokens are registered so the chrome can crossfade between states. */
@property --field   { syntax: '<color>'; inherits: true; initial-value: #e9e9f5; }
@property --dish    { syntax: '<color>'; inherits: true; initial-value: #f6f6fc; }
@property --tint    { syntax: '<color>'; inherits: true; initial-value: #fdfdfe; }
@property --wave    { syntax: '<color>'; inherits: true; initial-value: #c4c4ff; }
@property --strong  { syntax: '<color>'; inherits: true; initial-value: #7970d5; }
@property --object  { syntax: '<color>'; inherits: true; initial-value: #ab91f2; }
@property --soft    { syntax: '<color>'; inherits: true; initial-value: #e1e1ff; }
@property --btn     { syntax: '<color>'; inherits: true; initial-value: #13161c; }
@property --btn-ink { syntax: '<color>'; inherits: true; initial-value: #ffffff; }

:root {
  /* ── colour: neutrals and semantics ───────────────────────────────────── */
  --ink: #13161c;            /* primary text        17:1 on tint */
  --ink-2: #3a3f48;          /* supporting text     10:1 on tint */
  --mid: #5c6069;            /* secondary text       6:1 on tint */
  --faint: #8b909a;          /* non-essential labels only */
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --line: rgba(19, 22, 28, .10);
  --line-strong: rgba(19, 22, 28, .18);
  --brand: #7970d5;          /* the Konvoo orb, the wordmark bead */
  --success: #0e7f56;
  --warning: #9a6b04;
  --error: #b93c28;          /* 5.3:1 on white */
  --focus: #13161c;

  /* ── type ─────────────────────────────────────────────────────────────── */
  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-display: clamp(34px, 3.55vw, 54px);
  --t-lead: 18px;
  --t-body: 15px;
  --t-label: 13.5px;
  --t-micro: 12px;

  /* ── motion ───────────────────────────────────────────────────────────── */
  --m-micro: 120ms;
  --m-short: 200ms;
  --m-medium: 400ms;
  --m-signature: 760ms;
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* ── shape, depth, space ──────────────────────────────────────────────── */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(19, 22, 28, .06);
  --sh-2: 0 1px 2px rgba(19, 22, 28, .05), 0 6px 16px -6px rgba(19, 22, 28, .12);
  --sh-3: 0 2px 4px rgba(19, 22, 28, .05), 0 20px 40px -16px rgba(19, 22, 28, .22);
  --sh-hi: inset 0 1px 0 rgba(255, 255, 255, .75);
  --sh-pressed: inset 0 1px 3px rgba(19, 22, 28, .16);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --nav-h: 72px;
  --edge: 5.5%;
  --band: 140px;

  transition: --field var(--m-medium) var(--e-out), --dish var(--m-medium) var(--e-out), --tint var(--m-medium) var(--e-out),
              --strong var(--m-medium) var(--e-out), --object var(--m-medium) var(--e-out), --soft var(--m-medium) var(--e-out),
              --btn var(--m-medium) var(--e-out), --btn-ink var(--m-medium) var(--e-out);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f-body); font-size: var(--t-body); line-height: 1.5; color: var(--ink);
  background: var(--tint); overflow: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ─── The grid every layer shares ─────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: var(--edge) 38% 5% 1fr var(--edge);
  grid-template-rows: var(--nav-h) minmax(0, 1fr) var(--band) 36px;
  width: 100%; height: 100%;
}

/* ─── Pages: tint + a bold pastel stage field + fallback + text ───────────── */
#pages { position: fixed; inset: 0; z-index: 1; }
.page { position: absolute; inset: 0; background: var(--tint); pointer-events: none; }
.page[hidden] { display: none; }
.page .panel {
  grid-column: 2; grid-row: 2 / 4; margin: 4px -28px -18px;
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: var(--field);
}
/* texture: a quiet dot grid that fades toward the panel's edges */
.page .panel::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--field-dot) 1.1px, transparent 1.5px);
  background-size: 22px 22px; background-position: 11px 11px; opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 30%, transparent 100%);
}
.page .panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 42%);
}
/* the illustrated fallback: shown until the 3D has rendered, or if it never can */
.page .fb {
  grid-column: 2; grid-row: 2; align-self: center; justify-self: center; position: relative;
  width: min(62%, 300px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: var(--strong);
  background: var(--dish); box-shadow: var(--sh-3), var(--sh-hi);
  transition: opacity var(--m-medium) var(--e-out);
}
.page .fb svg { width: 44%; height: 44%; }
.has3d .page .fb { opacity: 0; transition-duration: 120ms; }

.page .content {
  grid-column: 4; grid-row: 2; align-self: center; position: relative;
  max-width: 540px; min-height: 0; max-height: 100%; overflow: hidden; padding: var(--s-2) 0;
}
.content > * { margin: 0; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px !important;
  font-size: var(--t-label); font-weight: 500; color: var(--mid);
}
.eyebrow .e-num { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--ink-2); letter-spacing: .02em; }
.eyebrow .e-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--strong); box-shadow: 0 0 0 3px var(--soft); }
.content h1 {
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-display);
  line-height: 1.05; letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
  margin-bottom: 18px !important;
}
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; will-change: transform; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }
.example {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px !important; max-width: 100%;
  padding: 8px 16px 8px 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.ex-mark { flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--field); color: var(--ink); }
.ex-text { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.quote { margin-top: 26px !important; padding-left: 14px; border-left: 2px solid var(--brand); font-size: 16px; font-weight: 500; color: var(--ink-2); min-height: 1.5em; }
.quote span { display: inline-block; }
@media (max-height: 760px) {
  :root { --t-display: clamp(30px, 3.2vw, 44px); --t-lead: 16px; }
  .eyebrow { margin-bottom: 12px !important; }
  .example, .quote { margin-top: 16px !important; }
}

/* ─── The 3D layer ────────────────────────────────────────────────────────── */
#stage3d { position: fixed; inset: 0; z-index: 2; display: block; touch-action: none; opacity: 0; transition: opacity 500ms var(--e-out) 120ms; }
.has3d #stage3d { opacity: 1; }

/* ─── The wave ────────────────────────────────────────────────────────────── */
#wave { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; visibility: hidden; }
#wave.on { visibility: visible; }
#waveFringe { fill-opacity: .85; }

/* ─── Chrome: never moves ─────────────────────────────────────────────────── */
#chrome { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#chrome > * { pointer-events: auto; }
#chrome .stage-slot, #chrome .content-slot { pointer-events: none; }
.stage-slot { grid-column: 2; grid-row: 2; }
.content-slot { grid-column: 4; grid-row: 2; }

nav { grid-column: 2 / 5; grid-row: 1; display: flex; align-items: center; justify-content: space-between; }
.wordmark {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 2px; border: 0; background: none; cursor: pointer;
  font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.wordmark::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #e7e5fb; }
.wordmark span { color: var(--mid); font-weight: 500; }
.chips { display: flex; gap: var(--s-2); }
.chip {
  height: 36px; padding: 0 14px; border-radius: var(--r-pill); cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  font-size: var(--t-label); font-weight: 500;
  transition: background var(--m-short) var(--e-out), border-color var(--m-short) var(--e-out), box-shadow var(--m-short) var(--e-out);
}
.chip:hover { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--sh-1); }
.chip:active { box-shadow: var(--sh-pressed); }

/* ─── Pills ───────────────────────────────────────────────────────────────── */
.pills { grid-column: 2; grid-row: 3; align-self: end; display: grid; gap: 10px; position: relative; }
.pill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.pill {
  height: 44px; padding: 0 12px 0 14px; border-radius: var(--r-pill); cursor: pointer;
  display: flex; align-items: center; gap: 9px; min-width: 0;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line); color: var(--ink);
  font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  box-shadow: var(--sh-1), var(--sh-hi);
  transition: transform var(--m-micro) var(--e-out), box-shadow var(--m-short) var(--e-out),
              background var(--m-short) var(--e-out), border-color var(--m-short) var(--e-out);
}
.pill .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pill-strong); transition: box-shadow var(--m-short) var(--e-out), background var(--m-short) var(--e-out); }
.pill .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.pill .idx { font-family: var(--f-mono); font-size: 11.5px; color: var(--faint); }
.pill .pin { display: none; color: var(--ink); }
.pill:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: var(--sh-2), var(--sh-hi); }
.pill:hover .dot { box-shadow: 0 0 0 3px var(--pill-soft); }
.pill.active {
  background: var(--pill-field); border-color: color-mix(in srgb, var(--pill-strong) 38%, transparent);
  font-weight: 600; box-shadow: 0 1px 2px rgba(19, 22, 28, .06), 0 6px 14px -8px color-mix(in srgb, var(--pill-strong) 60%, transparent), var(--sh-hi);
}
.pill.active .dot { background: var(--pill-deep); box-shadow: 0 0 0 2px #fff; }
.pill.active .idx { color: var(--ink-2); }
.pill.locked { transform: none; box-shadow: var(--sh-pressed); }
.pill.locked .idx { display: none; }
.pill.locked .pin { display: inline-flex; }
.pill.activating .dot { animation: dotOn 380ms var(--e-spring); }
.pill.nudge .dot { animation: dotOn 380ms var(--e-spring); }
@keyframes dotOn { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.hint { margin: 0; font-size: var(--t-micro); color: var(--ink-2); padding-left: 4px; }

/* ─── The form ────────────────────────────────────────────────────────────── */
.form { grid-column: 4; grid-row: 3; align-self: end; justify-self: end; width: min(100%, 440px); display: grid; gap: 10px; }
.slab {
  display: flex; gap: 6px; padding: 5px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  transition: border-color var(--m-short) var(--e-out), box-shadow var(--m-short) var(--e-out);
}
.slab:focus-within { border-color: var(--line-strong); box-shadow: var(--sh-2), 0 0 0 4px var(--soft); }
.slab.error { border-color: color-mix(in srgb, var(--error) 55%, transparent); box-shadow: var(--sh-2), 0 0 0 4px rgba(185, 60, 40, .12); }
.slab.shake { animation: shake 280ms var(--e-out); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 33% { transform: translateX(-4px); } 66% { transform: translateX(4px); } }
.field { position: relative; flex: 1; height: 46px; min-width: 0; }
.field input {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 14px; border: 0; background: transparent; outline: none;
  font-family: var(--f-mono); font-size: 15px; letter-spacing: .01em; color: transparent; caret-color: transparent;
}
.field input::placeholder { color: var(--faint); }
.field input:focus + .mirror .caret { display: inline-block; }
.mirror {
  position: absolute; inset: 0; padding: 0 14px; display: flex; align-items: center; pointer-events: none;
  font-family: var(--f-mono); font-size: 15px; letter-spacing: .01em; white-space: pre; overflow: hidden; color: var(--ink);
}
.mirror .ch { display: inline-block; }
.mirror .ch.new { animation: typeIn 160ms var(--e-out); }
.mirror .ch.at { color: var(--strong); }
.mirror .ch.domain { color: var(--mid); }
.mirror.invalid .ch { color: var(--error); }
.mirror .caret { display: none; width: 1.5px; height: 18px; margin-left: 1px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes typeIn { 0% { transform: translateY(3px); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
.join {
  height: 46px; padding: 0 14px 0 18px; border-radius: var(--r-md); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); color: var(--mid); border: 1px solid var(--line);
  font-size: 15px; font-weight: 600;
  transition: background var(--m-short) var(--e-out), color var(--m-short) var(--e-out), border-color var(--m-short) var(--e-out),
              transform var(--m-micro) var(--e-out), box-shadow var(--m-short) var(--e-out);
}
.join .j-ic { display: inline-flex; transition: transform var(--m-short) var(--e-out); }
.join.ready { background: var(--btn); color: var(--btn-ink); border-color: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: var(--sh-1), var(--sh-hi); }
.join.ready:hover { transform: translateY(-1px); box-shadow: var(--sh-2), var(--sh-hi); }
.join.ready:hover .j-ic { transform: translateX(2px); }
.join:active { transform: none; box-shadow: var(--sh-pressed); }
.join[disabled] { cursor: progress; }
.join .spin { animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.note { display: flex; align-items: center; gap: 6px; margin: 0; min-height: 1.5em; font-size: var(--t-micro); color: var(--ink-2); padding-left: 4px; }
.note.err { color: var(--error); }
.receipt {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px 12px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  font-size: 14.5px; font-weight: 500; color: var(--ink);
}
.receipt .r-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #dff4ea; color: var(--success); }

/* ─── The badge ───────────────────────────────────────────────────────────── */
#veil {
  position: fixed; inset: 0; z-index: 5; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--tint) 42%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#veil.on { pointer-events: auto; cursor: pointer; }
#ceremony { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.fly { position: fixed; font-family: var(--f-mono); font-size: 15px; letter-spacing: .01em; color: var(--ink); will-change: transform; }
.lanyard { position: fixed; top: 0; transform-origin: 50% 0; pointer-events: auto; cursor: grab; will-change: transform; }
.lanyard.dragging { cursor: grabbing; }
.cord { width: 1.5px; margin: 0 auto; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.badge {
  width: 320px; height: 184px; position: relative; overflow: hidden; user-select: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.badge .band { height: 42px; background: var(--field); position: relative; }
.badge .band::after { content: ""; position: absolute; left: 50%; top: 14px; width: 26px; height: 8px; margin-left: -13px; border-radius: var(--r-pill); background: var(--tint); box-shadow: var(--sh-pressed); }
.badge .x {
  position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); color: var(--ink);
}
.badge .who { padding: 22px 20px 0; font-family: var(--f-mono); font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge .who .ch { opacity: 0; display: inline-block; }
.badge .who .ch.landed { opacity: 1; }
.badge .when { padding: 8px 20px 0; font-size: var(--t-micro); color: var(--mid); }
.badge .stamp {
  position: absolute; right: 16px; bottom: 16px; padding: 5px 10px; border-radius: var(--r-xs);
  border: 1.5px solid var(--strong); color: var(--ink); background: var(--surface);
  font-family: var(--f-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(-5deg) scale(0); opacity: 0;
}
.badge .stamp.in { animation: stamp 300ms var(--e-spring) forwards; }
@keyframes stamp { 0% { transform: rotate(-5deg) scale(1.35); opacity: 0; } 100% { transform: rotate(-5deg) scale(1); opacity: 1; } }

/* ─── Notes ───────────────────────────────────────────────────────────────── */
#sheets { position: fixed; inset: 0; z-index: 7; display: none; }
#sheets.open { display: block; }
.backdrop { position: absolute; inset: 0; background: rgba(19, 22, 28, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet {
  position: absolute; top: calc(var(--nav-h) - 6px); right: var(--edge); width: min(560px, calc(100% - 2 * var(--edge)));
  max-height: calc(100vh - var(--nav-h) - 24px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 30px 34px 34px;
}
.sheet h2 { font-family: var(--f-display); font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 16px; }
.sheet p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.sheet .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; height: 42px; padding: 0 16px; border-radius: var(--r-md); background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; box-shadow: var(--sh-1); }
.sheet .close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }

/* ─── Laptops ─────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) and (min-width: 900px) {
  .grid { grid-template-columns: 4% 40% 4% 1fr 4%; }
  .pill { font-size: 13.5px; padding: 0 10px 0 12px; }
  .pill .idx { display: none; }
}

/* ─── Tablet and phone ────────────────────────────────────────────────────── */
/* The page scrolls here, but the page layers stay fixed so the wave still
   reveals them. The engine writes the stage slot's live position into
   --slot-top / --slot-h, and the field and fallback follow it. */
#mobileContent { display: none; }
@media (max-width: 899px) {
  body { overflow: auto; }
  .grid { display: block; height: auto; }
  .page .content { display: none; }
  .page .panel { position: absolute; left: 16px; right: 16px; top: var(--slot-top, 70px); height: var(--slot-h, 320px); margin: 0; }
  .page .fb { position: absolute; left: 50%; top: calc(var(--slot-top, 70px) + var(--slot-h, 320px) / 2); transform: translate(-50%, -50%); width: min(52vw, 220px); }
  #chrome { position: relative; inset: auto; min-height: 100vh; display: block; }
  nav { padding: 14px 20px; }
  .wordmark { font-size: 17px; }
  .chip { height: 34px; padding: 0 12px; font-size: 13px; }
  .stage-slot { position: relative; height: min(78vw, 380px); margin: 4px 16px 0; }
  #mobileContent { display: block; padding: 24px 20px 20px; }
  #mobileContent .content { max-width: none; }
  #mobileContent h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px, 8vw, 40px); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; }
  #mobileContent .lead { font-size: 16px; }
  .pills { padding: 4px 16px 20px; }
  .pill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pill { height: 46px; }
  .form { padding: 0 16px 40px; width: auto; }
  .content-slot { display: none; }
  .sheet { left: 12px; right: 12px; width: auto; padding: 26px 22px 28px; }

}

/* ─── Reduced motion: state changes stay, movement goes ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  #wave { display: none; }
}

/* ─── Phones: three chips share the row, so each loses its long half ──────── */
@media (max-width: 560px) {
  .chip .more { display: none; }
}

/* ─── Narrow phones: the nav may wrap rather than overflow ────────────────── */
@media (max-width: 420px) {
  nav { padding: 12px 16px; flex-wrap: wrap; row-gap: 8px; }
  .wordmark span { display: none; }
  .chips { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .chip { height: 32px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
}

/* ─── A scene that failed to build shows its own illustration ─────────────── */
.has3d .page.model-failed .fb { opacity: 1; }

/* The page’s words for readers that do not run JavaScript (search and AI crawlers, link
   unfurlers). The engine renders the same words itself, so this steps aside as soon as
   the inline script in <head> marks the document. See index.html. */
.static-copy { position: relative; z-index: 3; max-width: 44rem; margin: 0 auto; padding: 96px 24px 48px; font-family: var(--f-body); color: var(--ink); line-height: 1.55; }
.static-copy h1 { font-family: var(--f-display); font-size: 2.4rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; }
.static-copy h2 { font-family: var(--f-display); font-size: 1.15rem; margin: 32px 0 6px; }
.static-copy p { margin: 0 0 8px; }
.js .static-copy { display: none; }

/* The story chip: locked until the visitor joins, then a link. The receipt offers
   the same link once the address has landed. */
.chip.story { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.chip.story.locked { color: var(--mid); }
.chip.story.locked svg { opacity: .75; }
.receipt .r-story { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.receipt .r-story:hover { text-decoration: underline; }