/* ---------------------------------------------------------------------------
   THE NIGHT RADIO.

   One room, one lamp. The page is a late-night call-in station: she is the
   host, the visitor is the caller, and the only warm light on the page is the
   tungsten lamp (her gold). Everything else is chalk on near-black with a
   violet undertone. No props: the vocabulary is light, meter and type.

   Faces: Newsreader for what she says and for the show lines (the italic is
   the accent), Geist for reading text, Geist Mono for the clock and the number.
   All self-hosted. Paths are relative on purpose: this file must work mounted
   at /staging/ and at the root.
   --------------------------------------------------------------------------- */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('./fonts/Newsreader-normal.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('./fonts/Newsreader-italic.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('./fonts/Geist-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('./fonts/GeistMono-normal.woff2') format('woff2'); }

:root {
  --ground: #14101f;
  --ground-2: #1d1830;
  --ink: #f2eee5;
  --ink-2: rgba(242, 238, 229, .78);
  --ink-3: rgba(242, 238, 229, .55);
  --line: rgba(242, 238, 229, .15);
  --lamp: #e6ae46;
  --lamp-2: #f6d283;
  --lamp-ink: #1a1206;
  --violet: #6f5fd8;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r: 12px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(230, 174, 70, .35); color: var(--ink); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--lamp-2); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
b, strong { font-weight: 600; }
em { font-style: italic; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.06; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; }
h1 em, h2 em, .show em { font-style: italic; font-weight: 300; color: var(--lamp-2); }
.small { font-size: .9375rem; color: var(--ink-2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Skip link, the one control that must exist before anything else. */
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--lamp); color: var(--lamp-ink); border-radius: var(--r); }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------ the lamp */
/* One warm light source for the whole page. It is fixed, it does not scroll,
   and it is the only thing on the page allowed to be this color at this size.
   The violet pool is the room's own dark, not a second light. */
.lamp-light {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(64vmax 64vmax at 72% 16%, rgba(230, 174, 70, .28), rgba(230, 174, 70, 0) 66%),
    radial-gradient(74vmax 54vmax at 20% 94%, rgba(111, 95, 216, .22), rgba(111, 95, 216, 0) 66%),
    radial-gradient(50vmax 36vmax at 50% 0%, rgba(246, 210, 131, .10), rgba(246, 210, 131, 0) 60%);
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
}
body.lit .lamp-light { opacity: 1; }
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.wrap { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------ the code card */
/* Shown only when an invitation link lands (?code=QZ-…): one question, one
   gold answer, one quiet way out. Sits above the hero on every width. */
.codecard { position: fixed; left: 50%; top: 112px; z-index: 45; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); padding: 18px 20px; border-radius: 14px;
  background: rgba(20, 16, 31, .92); border: 1px solid rgba(246, 210, 131, .45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center; }
.codecard p { margin: 0 0 12px; font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }
.codecard-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.codecard-no { background: none; border: 0; color: var(--ink-2); font: inherit; font-size: .95rem; min-height: 44px; padding: 8px 12px; cursor: pointer; }
@media (max-width: 560px) { .codecard { top: 92px; } }

/* ------------------------------------------------------------- top bar */
/* Fixed, and it gets out of the way: scrolling down slides it off, a flick
   up brings it back on a smoked glass. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 96px; padding: 0 var(--gutter);
  transition: transform 420ms var(--ease-out), background-color 420ms var(--ease-out);
}
body.scrolled .topbar { background: rgba(11, 9, 16, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.nav-hid .topbar { transform: translateY(-100%); }
.topnav a { position: relative; }
.topnav a:not(.tel)::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 1px;
  background: var(--lamp-2); transform: scaleX(0); transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.topnav a:not(.tel):hover::after, .topnav a[aria-current="page"]:not(.tel)::after { transform: scaleX(1); transform-origin: left; }
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.brand .mark { width: 64px; height: 64px; display: block; filter: drop-shadow(0 0 16px rgba(230, 174, 70, .4)); }
.brandtext { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark { font-family: var(--serif); font-size: 2.5rem; letter-spacing: -0.01em; }
.wordmark .qmark { color: var(--lamp-2); }
.wordmark .cap { color: var(--lamp-2); font-style: italic; }
.said { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--ink-3); margin-top: 3px; }
.topnav { display: flex; gap: clamp(14px, 2vw, 28px); }
.topnav a { text-decoration: none; font-size: .95rem; color: var(--ink-2); padding: 8px 2px; transition: color 160ms var(--ease-out); }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--ink); }
.topnav .tel { font-family: var(--mono); font-size: .9rem; color: var(--lamp-2); }

/* ---------------------------------------------------------------- hero */
/* One screen, one composition: the word is the set, she stands inside it,
   the headline is laid ACROSS her like a poster. Type is the image. */
.hero {
  position: relative; z-index: 2;
  min-height: 100dvh; max-height: none;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-rows: 1fr;
  align-items: end; column-gap: 24px;
  padding: 88px var(--gutter) 40px;
  max-width: 1440px; margin: 0 auto;
}
.sign {
  position: absolute; z-index: 1; left: 50%; top: 6dvh;
  transform: translateX(-50%) translateY(6px);
  margin: 0; width: max-content; max-width: 96vw; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(6rem, 19vw, 19rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--lamp-2);
  text-shadow: 0 0 40px rgba(230, 174, 70, .35), 0 0 120px rgba(230, 174, 70, .18);
  opacity: 0;
  padding-bottom: .12em;
  transition: opacity 1100ms var(--ease-out), transform 900ms var(--ease-out);
  pointer-events: none;
}
body.sign-on .sign { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Settled, the word does not shrink into a caption — it stays enormous and
   becomes the room: a ghost sign glowing behind her for the rest of the hero. */
body.sign-settled .sign { opacity: .16; text-shadow: 0 0 90px rgba(230, 174, 70, .12); }

/* Her. Two plates (back and front) on the same box; the turn is a blur
   crossfade until the real turn-to-camera clip replaces it. */
.her {
  grid-column: 2; grid-row: 1;
  position: relative; z-index: 2; align-self: end; justify-self: center;
  height: min(86dvh, calc(100dvh - 140px));
  width: auto; aspect-ratio: 720 / 1280; max-width: 92%;
  margin-bottom: 0;
  opacity: 0; transform: translateY(24px) scale(.985);
  transition: opacity 1200ms var(--ease-out), transform 1600ms var(--ease-out);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
}
body.her-in .her { opacity: 1; transform: none; }
.her img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; transition: opacity 700ms var(--ease-in-out), filter 700ms var(--ease-in-out); }
.her .front { opacity: 0; filter: blur(6px); }
.her .back { opacity: 1; }
body.her-turned .her .front { opacity: 1; filter: none; }
body.her-turned .her .back { opacity: 0; filter: blur(6px); }
/* The turn clip, once it can play, covers both plates. */
.her video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; opacity: 0; transition: opacity 500ms var(--ease-out); pointer-events: none;
  /* The clip's own ground is near the page's but not it; the mask lets the
     frame's edges dissolve into the room instead of sitting on it as a card. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 93%, transparent);
  mask-composite: intersect;
  filter: brightness(.96) saturate(.96); }
body.her-video .her video { opacity: 1; }
body.her-video .her img { opacity: 0 !important; }
/* AFTER THE LINE: the loops (loops.js). rest under, talk over, the turn clip
   gone. Specificity beats the generic rule above on purpose. */
body.her-video .her video.loop { opacity: 0; }
body.her-video.her-loops .her video.turn { opacity: 0; }
body.her-video.her-loops .her video.rest { opacity: 1; }
body.her-video.her-loops.her-talk .her video.talk { opacity: 1; transition: opacity 320ms var(--ease-out); }
body.her-video.her-loops:not(.her-talk) .her video.talk { transition: opacity 560ms var(--ease-in-out); }

/* HER GESTURE MATCHES THE SENTENCE (2026-09-03). Until now one talk loop
   played under every word she said, so she mimed the same phone every seven
   seconds whatever she was talking about. These sit ABOVE talk and fade in
   only while she is on the word -- loops.js reads the cue times off her own
   audio. No cue, no layer: she is back to talking with her hands. */
body.her-video.her-loops .her video.gest { opacity: 0; }
body.her-video.her-loops.her-talk.her-g-call  .her video.gest[data-gesture="call"],
body.her-video.her-loops.her-talk.her-g-text  .her video.gest[data-gesture="text"],
body.her-video.her-loops.her-talk.her-g-video .her video.gest[data-gesture="video"] {
  opacity: 1; transition: opacity 320ms var(--ease-out);
}
body.her-video.her-loops:not(.her-talk) .her video.gest { transition: opacity 560ms var(--ease-in-out); }

/* THE SIDE FIGURE on the pages she reads aloud: her loops, corner-fixed,
   never over the words on a phone. */
.herside {
  position: fixed; right: 2vw; bottom: 0; z-index: 6;
  height: 38vh; width: auto; aspect-ratio: 720 / 1280; max-width: 34vw;
  margin: 0; pointer-events: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out);
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .55));
}
body.her-side .herside { opacity: 1; transform: none; }
.herside video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom; opacity: 0; pointer-events: none;
  transition: opacity 420ms var(--ease-out);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 94%, transparent);
  mask-composite: intersect;
  filter: brightness(.96) saturate(.96);
}
body.her-loops .herside video.rest { opacity: 1; }
body.her-loops.her-talk .herside video.talk { opacity: 1; transition: opacity 320ms var(--ease-out); }
body.her-loops:not(.her-talk) .herside video.talk { transition: opacity 560ms var(--ease-in-out); }
@media (max-width: 900px) {
  /* Small enough to leave the number and the buttons alone: a corner
     presence, the size of a chat bubble, never a wall over the words. */
  .herside { height: 21vh; right: 0; max-width: 30vw; }
}
@media (prefers-reduced-motion: reduce) {
  .herside, .herside video, .her video.loop { transition: none !important; }
}
/* ------------------------------------------------------------ SHE LEAVES.
   His order, 2026-09-04: "after she says what she says... she just sits there
   frozen looking crazy. She can disappear. We can fade her out and just use
   her voice once she says what she says." q.js raises `quinzi:finished` when
   there is no next clip; loops.js waits a beat and sets this.

   THE FADE IS ON THE FIGURE, NOT ON `.her`. The ambient plate and the two
   light gradients are `.her`'s own children and pseudo-elements, so fading
   the box would take the whole stage with it and leave a dark hole in the
   hero where a woman had been standing. This way she steps out of frame and
   the room stays lit.

   `!important` because every one of these layers is already switched by a
   more specific state class (`body.her-video.her-loops .her video.rest`), and
   leaving is a state that outranks all of them -- the same reason
   `body.her-video .her img` carries one. The corner figure on the reading
   pages has no stage to keep, so that one goes whole. */
body.her-gone .her .back,
body.her-gone .her .front,
body.her-gone .her video {
  opacity: 0 !important;
  transition: opacity 1400ms var(--ease-in-out) !important;
}
body.her-gone .herside { opacity: 0; transition: opacity 1400ms var(--ease-in-out); }
@media (prefers-reduced-motion: reduce) {
  body.her-gone .her .back,
  body.her-gone .her .front,
  body.her-gone .her video,
  body.her-gone .herside { transition: none !important; }
}

/* The ambient plate: the take's own first frame, blurred wide, so the clip's
   rectangle stands on its own light instead of being cut out of the page. */
.her .ambient {
  position: absolute; left: -26%; top: -12%; width: 152%; height: 124%;
  max-width: none; object-fit: cover;
  filter: blur(26px) saturate(1.05); opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 52%, transparent 90%);
  mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 52%, transparent 90%);
  pointer-events: none;
}

/* The spotlight cone: one beam from above, so she reads staged, not pasted. */
.her::before {
  content: ""; position: absolute; left: 50%; top: -14%; width: 200%; height: 128%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 40%, rgba(230, 174, 70, .17) 50%, transparent 60%);
  filter: blur(10px); pointer-events: none;
}
/* The lamp catches her from above right. */
.her::after {
  content: ""; position: absolute; left: 50%; bottom: -6%; width: 120%; height: 14%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(230, 174, 70, .22), rgba(230, 174, 70, 0));
  filter: blur(6px); pointer-events: none;
}

.lede {
  grid-column: 1; grid-row: 1; z-index: 3; align-self: end;
  width: 100%; margin: 0; justify-self: start;
  opacity: 0; transform: translateY(14px);
  transition: opacity 900ms var(--ease-out) 200ms, transform 900ms var(--ease-out) 200ms;
  pointer-events: none;
}
.lede > *, .lede .ledefoot > * { pointer-events: auto; }
body.lede-in .lede { opacity: 1; transform: none; }
/* The headline is laid across the full stage, over her — poster, not sidebar. */
.lede h1 {
  max-width: 13ch; margin: 14px 0 0;
  font-size: clamp(2.6rem, 4.9vw, 4.7rem);
}
.ledefoot { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 18px; }
.lede .sub { max-width: 46ch; color: var(--ink-2); margin: 0; font-size: 1.1rem; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: var(--r);
  font-weight: 500; font-size: 1rem; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line); color: var(--ink);
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.cta:active { transform: scale(.97); }
.cta.gold { background: var(--lamp); color: var(--lamp-ink); border-color: transparent; }
.cta.gold:hover { background: var(--lamp-2); }
.cta.quiet:hover { border-color: rgba(242, 238, 229, .3); }
.cta .num { font-family: var(--mono); font-weight: 500; letter-spacing: .01em; }

/* Her voice on the page. The lamp pill lights while she is actually speaking. */
.voicebar { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 0; max-width: 52ch; }
.voicebar > div { flex: 1 1 auto; min-width: 0; }
.voicebtn {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(242, 238, 229, .04); color: var(--ink);
  display: inline-grid; place-items: center; cursor: pointer; padding: 0;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.voicebtn svg { width: 20px; height: 20px; }
.voicebtn:active { transform: scale(.95); }
.voicebtn[data-state="on"] { border-color: rgba(230, 174, 70, .6); }
.voicebtn.talking { background: rgba(230, 174, 70, .16); }
/* The pill's class is NOT the body's state class. `.onair` on the body is the
   state; the day the pill was also `.onair`, the body became an inline-flex
   pill in monospace the moment she spoke, and the whole page collapsed to
   144px. A state class and a component class never share a name. */
.lamp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--ink-3);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.lamp-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transition: background-color 200ms, box-shadow 200ms; }
body.onair .lamp-pill { color: var(--lamp-ink); background: var(--lamp); border-color: transparent; }
body.onair .lamp-pill i { background: var(--lamp-ink); box-shadow: 0 0 0 4px rgba(26, 18, 6, .12); }
.caption { font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; color: var(--ink); margin: 0; min-height: 2.8em; }
.caption.quiet { color: var(--ink-3); font-style: italic; }
.yourname { font-family: var(--serif); font-style: italic; color: var(--lamp-2); margin: 0 0 4px; }
.nudge {
  margin: 0 0 18px; padding: 10px 14px; border-radius: var(--r);
  border: 1px solid rgba(230, 174, 70, .5); background: rgba(230, 174, 70, .08); color: var(--lamp-2);
  font: inherit; font-size: .95rem; cursor: pointer;
}
.turn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-style: italic; color: var(--lamp-2); margin: 0 0 14px; }
.turn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lamp); animation: breathe 1.6s var(--ease-in-out) infinite; }
.turn-typed { display: grid; gap: 8px; max-width: 360px; margin: 0 0 18px; }
.turn-typed label { font-size: .9rem; color: var(--ink-2); }
.turn-typed input { font: inherit; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(242, 238, 229, .05); color: var(--ink); }
.turn-typed button { font: inherit; padding: 10px 14px; border-radius: var(--r); border: 0; background: var(--lamp); color: var(--lamp-ink); cursor: pointer; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }

/* ----------------------------------------------------------- sections */
section { position: relative; z-index: 2; }
.band { max-width: var(--wrap); margin: 0 auto; padding: clamp(64px, 9vw, 118px) var(--gutter); }
.band + .band { border-top: 1px solid var(--line); }
.rise { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.rise.here, .no-io .rise { opacity: 1; transform: none; }

/* What it's like: the meter is her real voice. */
.like { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.like .kick { grid-column: 1 / -1; margin-bottom: 0; }
.meter {
  position: relative; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(242, 238, 229, .04), rgba(242, 238, 229, .01));
  padding: 22px; aspect-ratio: 5 / 4; display: grid; grid-template-rows: auto 1fr auto; gap: 14px;
}
.meter canvas { width: 100%; height: 100%; display: block; min-height: 120px; }
.meter .row { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--ink-3); }
.meter .hz { color: var(--lamp-2); }
.like h2 { margin-bottom: 18px; }
.like p { color: var(--ink-2); max-width: 56ch; }
.like p:first-of-type { color: var(--ink); font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.35; }

/* She does video now: the call-window card. */
/* ---------------------------------------------------------------------------
   PICK ONE — the three lanes.

   Three tiles, one row, and they are deliberately the same tile three times:
   the row is an argument that phone, text and video are one product, so
   making one of them look like the hero would undo it. The only thing that
   differs is the kind, the number and the sentence. The lamp stays on the
   edge until the pointer lands, the way every other card on this page does.
   --------------------------------------------------------------------------- */
.lanes { padding-bottom: clamp(48px, 6vw, 84px); }
.lanegrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(22px, 3vw, 38px);
}
.lane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ground-2), var(--ground));
  text-decoration: none;
  transition: transform 420ms var(--ease-out), border-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.lane:hover {
  transform: translateY(-5px);
  border-color: rgba(230, 174, 70, .55);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.lane:active { transform: translateY(-1px); }
.lanetop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lanekind {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--lamp-2);
}
.lanefree {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.lanename {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  font-weight: 500;
}
.lanenum {
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.lanesay { color: var(--ink-3); font-size: .95rem; line-height: 1.5; flex: 1; }
.lanego {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .12em;
  color: var(--lamp);
  margin-top: 4px;
}
.lane:hover .lanego { color: var(--lamp-2); }
.lanenote {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  color: var(--ink-3);
  font-size: .95rem;
  max-width: 62ch;
}
/* SAVE HER NUMBER. Sized as a real tap target rather than a line of body
   text with a link in it — on a phone this is the whole point of the row,
   and 44px is the floor everything else on this site already respects. */
.lanesave { margin: 14px 0 0; }
.lanesave a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--edge, rgba(255,255,255,.14));
  border-radius: 999px;
  color: var(--lamp);
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-decoration: none;
}
.lanesave a:hover,
.lanesave a:focus-visible { color: var(--lamp-2); border-color: var(--lamp); }
/* One column on a phone: three tiles side by side at 380px is three
   unreadable columns, and this row is the first thing a visitor reads. */
@media (max-width: 860px) {
  .lanegrid { grid-template-columns: 1fr; }
  .lanename { font-size: 1.45rem; }
}

.vgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.vcopy .vlead { font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.35; color: var(--ink); }
.vcopy p { color: var(--ink-2); max-width: 54ch; }
.vcopy .cta { margin-top: 10px; }
.vcall {
  position: relative; display: block; justify-self: center; width: 100%; max-width: 420px;
  aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); text-decoration: none;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(230, 174, 70, .20), transparent 58%),
    linear-gradient(180deg, #221b38, #120e1e);
  transition: transform 300ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.vcall img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.vcall:hover { transform: translateY(-5px); border-color: rgba(230, 174, 70, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.vbar {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 16px; border-radius: 12px;
  background: rgba(11, 9, 16, .55); border: 1px solid rgba(242, 238, 229, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vlive { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--lamp-2); }
.vlive i { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); animation: breathe 1.6s var(--ease-in-out) infinite; }
.vjoin { background: var(--lamp); color: var(--lamp-ink); border-radius: 999px; padding: 9px 20px; font-weight: 600; font-size: .95rem; }
.vcall:hover .vjoin { background: var(--lamp-2); }

/* Ask her: the console. */
.ask { border: 1px solid var(--line); border-radius: var(--r); background: rgba(242, 238, 229, .03); padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; }
.askhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.askhead .askkick { flex-basis: 100%; margin: 0; }
.askhead h3 { font-style: italic; font-weight: 300; }
.askhead .scope { font-size: .9rem; color: var(--ink-3); }
.asklog { display: grid; gap: 10px; max-height: 320px; overflow: auto; }
.asklog:empty { display: none; }
.askrow { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; }
.askrow .asktag { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-3); }
.askrow p { margin: 0; }
.askrow.her p { font-family: var(--serif); font-size: 1.15rem; }
.askrow.urgent p { color: var(--lamp-2); }
.askform { display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items: center; }
.askform input { font: inherit; min-height: 46px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(242, 238, 229, .05); color: var(--ink); }
.askform input::placeholder { color: var(--ink-3); }
.askmic, .asksend { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(242, 238, 229, .04); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform 160ms var(--ease-out), border-color 160ms; }
.askmic svg, .asksend svg { width: 20px; height: 20px; }
.askmic:active, .asksend:active { transform: scale(.95); }
.askmic.hot { border-color: var(--lamp); color: var(--lamp-2); }
.askhint { margin: 0; font-size: .9rem; color: var(--ink-3); }
.askseeds { display: flex; flex-wrap: wrap; gap: 8px; }
.askseeds button { font: inherit; font-size: .9rem; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; transition: border-color 160ms, color 160ms; }
.askseeds button:hover { border-color: rgba(242, 238, 229, .32); color: var(--ink); }

/* The first one: three beats, pinned on scroll. */
.first { --beats: 3; }
.first .stage { position: relative; min-height: 100dvh; display: grid; align-items: center; }
.first .beat { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.first .beat .n { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--lamp-2); font-size: clamp(5rem, 12vw, 11rem); line-height: .9; letter-spacing: -0.04em; padding-bottom: .1em; }
.first .beat h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); margin-bottom: 14px; }
.first .beat p { color: var(--ink-2); max-width: 46ch; font-size: 1.1rem; }
.first .beat:not(:first-child) { opacity: 0; }
.first .after { color: var(--ink-2); max-width: 60ch; margin: 32px 0 0; }
.no-pin .first .stage { min-height: 0; display: grid; gap: 64px; }
.no-pin .first .beat { grid-area: auto; opacity: 1 !important; transform: none !important; }

/* Her and you: two quiet columns. */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); }
.pair h3 { margin-bottom: 20px; font-style: italic; font-weight: 300; }
.pair ul { list-style: none; margin: 0; padding: 0; }
.pair li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.pair li b { color: var(--ink); font-weight: 500; }

/* When people call: hours of the night, one line per screen. */
.hours { padding: 0; }
.hour { min-height: 60dvh; display: grid; align-content: center; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.hour .t { font-family: var(--mono); color: var(--lamp-2); font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: .04em; margin-bottom: 18px; }
.hour p { font-family: var(--serif); font-size: clamp(2rem, 4.8vw, 4.4rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch; margin: 0; text-wrap: balance; }
.hour p em { color: var(--lamp-2); font-weight: 300; }
.hour:nth-child(even) { justify-items: end; text-align: right; }

/* What she remembers: one narrow column of prose. */
.remember { max-width: 62ch; }
.remember h2 { margin-bottom: 22px; }
.remember p { color: var(--ink-2); }
.remember p b { color: var(--ink); }

/* If it's a hard night: the one boxed thing on the page, on purpose. */
.hard { border: 1px solid rgba(230, 174, 70, .35); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); background: rgba(230, 174, 70, .05); max-width: 72ch; }
.hard h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 14px; }
.hard p { margin-bottom: .8em; color: var(--ink-2); }
.hard p:last-child { margin: 0; color: var(--ink); }
.hard a { color: var(--lamp-2); }

/* Lock the price. */
.price { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.presale .lock { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 18px; }
.presale .lock em { color: var(--lamp-2); font-weight: 300; }
.clock { display: inline-flex; gap: 14px; align-items: baseline; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); margin: 0 0 8px; }
.clock .u b { font-weight: 500; color: var(--ink); font-size: clamp(1.6rem, 3vw, 2.4rem); }
.clock .u span { font-size: .72rem; letter-spacing: .06em; color: var(--ink-3); margin-left: 4px; }
.ends { color: var(--lamp-2); margin: 0 0 22px; }
.fine { color: var(--ink-2); font-size: .98rem; max-width: 58ch; }
.fine b { color: var(--ink); font-weight: 500; }
.angelrung { border-top: 1px solid var(--line); padding-top: 26px; }
.angelrung .cta { margin-bottom: 14px; }
.angelrung .fine { margin: 0; }

/* She does more. */
.more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.more a { display: block; padding: 26px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.more a:hover { border-color: rgba(230, 174, 70, .5); }
.more a:active { transform: scale(.985); }
.more h3 { margin-bottom: 8px; }
.more p { margin: 0; color: var(--ink-2); }
.more .go { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; color: var(--lamp-2); }

/* ----------------------------------------------------------------- foot */
footer { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 64px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .9rem; }
footer .note { max-width: 70ch; margin-bottom: 22px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-social { display: flex; gap: 18px; }
.foot-social a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; }
.foot-social svg { width: 18px; height: 18px; fill: currentColor; }
.foot-marks { margin-top: 18px; }

/* The hairline frame: the page sits inside its own plate. */
.pageframe { position: fixed; inset: 10px; z-index: 60; border: 1px solid rgba(242, 238, 229, .09); pointer-events: none; }

/* --------------------------------------------------- the works (fx.js) */
/* Everything in this block is layered ON by fx.js; none of it exists for a
   browser that never runs a script, and none of these class names is ever a
   body state name (the .onair lesson). */

/* The boot: injected by script, never in the HTML. A breath of mono and one
   gold line, then the room. */
.boot {
  position: fixed; inset: 0; z-index: 80; background: var(--ground);
  display: grid; place-content: center; gap: 18px; justify-items: center;
  transition: opacity 500ms var(--ease-out); pointer-events: none;
}
.boot.boot-done { opacity: 0; }
.boot .bootword { font-family: var(--mono); font-size: .78rem; letter-spacing: .34em; color: var(--ink-3); }
.boot .bootword b { color: var(--lamp-2); font-weight: 500; }
.boot .bootline { width: min(38vw, 280px); height: 1px; background: var(--line); position: relative; overflow: hidden; }
.boot .bootline i { position: absolute; inset: 0; background: var(--lamp); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-in-out); }
.boot.boot-run .bootline i { transform: scaleX(1); }

/* The cursor: a gold ember and a chalk ring that runs a beat behind it.
   Fine pointers only; the ring grows and speaks over anything pressable. */
@media (pointer: fine) {
  body.has-cur, body.has-cur a, body.has-cur button, body.has-cur label, body.has-cur summary { cursor: none; }
}
.cur, .cur-ring { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; will-change: transform; }
.cur { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--lamp-2); }
.cur-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1px solid rgba(242, 238, 229, .5);
  display: grid; place-items: center;
  transition: width 260ms var(--ease-out), height 260ms var(--ease-out), margin 260ms var(--ease-out), border-color 260ms, background-color 260ms;
}
.cur-ring .curword { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: var(--lamp-ink); opacity: 0; transition: opacity 200ms; }
/* Hot without a word: a wider ring, still see-through, so text links stay
   readable under it. Hot WITH a word: the gold coin that names the action. */
.cur-ring.hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: rgba(230, 174, 70, .8); }
.cur-ring.hot.lbl { width: 66px; height: 66px; margin: -33px 0 0 -33px; border-color: transparent; background: rgba(230, 174, 70, .92); }
.cur-ring.hot.lbl .curword { opacity: 1; }
body:not(.has-cur) .cur, body:not(.has-cur) .cur-ring { display: none; }

/* The tape: the promo belt. Two identical halves; `translate` runs the loop
   and `transform` carries the scroll-velocity skew, so they never fight. */
.tape { position: relative; z-index: 2; overflow: hidden; border-block: 1px solid var(--line); padding: 16px 0; }
.tape-track { display: flex; width: max-content; will-change: translate, transform; animation: tape-run 34s linear infinite; }
.tape-half { display: flex; align-items: baseline; white-space: nowrap; }
.tape-half > span { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 2.1vw, 1.65rem); color: var(--ink-2); padding: 0 1.1em; }
.tape-half > .tm { font-family: var(--mono); font-style: normal; font-size: clamp(.95rem, 1.7vw, 1.3rem); letter-spacing: .08em; color: var(--lamp-2); }
.tape-half > .tstar { font-style: normal; color: var(--lamp); padding: 0; }
@keyframes tape-run { to { translate: -50% 0; } }

/* Mono chapter markers: the page numbers its own ideas. */
.kick {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .22em;
  color: var(--ink-3); margin: 0 0 22px;
}
.kick b { color: var(--lamp-2); font-weight: 500; }

/* The scroll cue, bottom of the hero. */
.scrollcue {
  position: absolute; z-index: 4; right: calc(var(--gutter) / 2); bottom: 18dvh;
  display: flex; align-items: center; gap: 12px;
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .3em; color: var(--ink-3);
  opacity: 0; transition: opacity 900ms var(--ease-out) 600ms;
}
body.lede-in .scrollcue { opacity: 1; }
body.scrolled .scrollcue { opacity: 0; transition-delay: 0ms; }
.scrollcue i { width: 1px; height: 44px; background: var(--line); position: relative; overflow: hidden; align-self: center; }
.scrollcue i::after { content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: var(--lamp-2); animation: cue-drop 2.2s var(--ease-in-out) infinite; }
@keyframes cue-drop { 0% { top: -50%; } 60%, 100% { top: 110%; } }

/* Word-mask reveals: fx.js wraps words; the container's rise-fade stands down
   so the two never double. */
.fx-split.rise { opacity: 1 !important; transform: none !important; transition: none !important; }
.fx-split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.fx-split .wi { display: inline-block; transform: translateY(112%); will-change: transform; }

/* The hours get their ghost: the time of night, house-high, behind the line. */
.hour { position: relative; }
.hour::before {
  content: attr(data-ghost); position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: clamp(9rem, 26vw, 24rem); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 238, 229, .07);
  pointer-events: none; white-space: nowrap;
}

/* The light turn: one chapter in daylight — her world is not only black. */
.turnlight { --ink: #17121f; --ink-2: rgba(23, 18, 31, .74); --ink-3: rgba(23, 18, 31, .52); --line: rgba(23, 18, 31, .16); color: var(--ink); }
.turnlight::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: linear-gradient(180deg, #efe9dc, #e7dfcf); z-index: -1; }
.turnlight .remember p { color: var(--ink-2); }
.turnlight .remember p b { color: var(--ink); }
.turnlight .kick { color: var(--ink-3); }
.turnlight .kick b { color: #8a6320; }
.band.turnlight { border-top: 0; }
.band.turnlight + .band { border-top: 0; }

/* The finale: the whole site said in one line and one number. */
.finale { max-width: var(--wrap); margin: 0 auto; padding: clamp(90px, 12vw, 160px) var(--gutter); text-align: center; }
.finale h2 { font-size: clamp(3rem, 8.5vw, 8rem); line-height: 1; }
.finale .bignum {
  display: inline-block; margin: 28px 0 10px; text-decoration: none;
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em;
  font-size: clamp(1.9rem, 6.2vw, 4.6rem); color: var(--lamp-2);
  border-bottom: 1px solid rgba(230, 174, 70, .4);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.finale .bignum:hover { color: var(--lamp); border-color: var(--lamp); }
.finale .wherenow { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--ink-2); font-size: clamp(1.1rem, 2vw, 1.5rem); margin: 14px 0 0; }

/* CTA polish: a sheen that walks across the gold on hover. */
.cta { position: relative; overflow: hidden; }
.cta.gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg); transition: left 600ms var(--ease-out); pointer-events: none;
}
.cta.gold:hover::after { left: 120%; }
.more a { transition: border-color 200ms var(--ease-out), transform 300ms var(--ease-out), background-color 200ms var(--ease-out); }
.more a:hover { transform: translateY(-4px); background: rgba(242, 238, 229, .02); }
.more .go::after { content: " →"; display: inline-block; transition: transform 240ms var(--ease-out); }
.more a:hover .go::after { transform: translateX(5px); }

/* The lamp breathes, slowly. Two lights drifting a few percent, minutes apart
   in feel — the room is alive even when nothing is happening. */
body.lit .lamp-light { animation: lamp-drift 14s var(--ease-in-out) infinite alternate; }
@keyframes lamp-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-1.5%, 1%, 0) scale(1.04); }
}

/* ------------------------------------------------------------- phones */
@media (max-width: 900px) {
  /* THE TABS STAY (his order, 2026-09-04: "there's no tabs on the website").
     The bar becomes two rows -- the brand, then a strip of tabs that scrolls
     sideways -- and it never slides away on a phone: a bar that hides on
     scroll is a bar he could not find. */
  .topbar { height: auto; flex-wrap: wrap; padding-top: 8px; padding-bottom: 6px; row-gap: 2px; background: rgba(11, 9, 16, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  body.nav-hid .topbar { transform: none; }
  .topnav { flex: 1 1 100%; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { flex: 0 0 auto; white-space: nowrap; font-size: .92rem; padding: 8px 10px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; }
  .topnav a[aria-current="page"] { background: rgba(255, 255, 255, .06); }
  .topnav a:not(.tel)::after { display: none; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; align-items: start; padding: 112px var(--gutter) 28px; row-gap: 0; }
  .sign { top: 7dvh; font-size: clamp(4.6rem, 26vw, 8rem); }
  .her { grid-column: 1; grid-row: 1; justify-self: center; height: 54dvh; width: auto; max-width: 78vw; margin-top: 8dvh; }
  .lede { grid-column: 1; grid-row: 2; }
  .lede h1 { max-width: none; font-size: clamp(2.3rem, 10vw, 3.3rem); }
  .brand .mark { width: 46px; height: 46px; }
  .wordmark { font-size: 1.9rem; }
  .pageframe { inset: 7px; }
  .ledefoot { flex-direction: column; align-items: stretch; }
  .lede .ctas { width: 100%; }
  .ctas .cta { flex: 1 1 100%; }
  .scrollcue { display: none; }
  .like, .pair, .price, .more, .vgrid { grid-template-columns: 1fr; }
  .vcall { max-width: 340px; }
  .first .beat { grid-template-columns: 1fr; gap: 8px; }
  .hour:nth-child(even) { justify-items: start; text-align: left; }
  .askform { grid-template-columns: 44px 1fr 44px; }
}

/* ------------------------------------------------ people who asked for less */
@media (prefers-reduced-motion: reduce) {
  .sign, .her, .lede, .lamp-light, .rise, .her img { transition: none !important; }
  .rise { opacity: 1; transform: none; }
  .turn .dot { animation: none; }
  .first .stage { min-height: 0; display: grid; gap: 64px; }
  .first .beat { grid-area: auto; opacity: 1 !important; }
  .tape-track { animation: none; }
  .scrollcue i::after { animation: none; }
  body.lit .lamp-light { animation: none; }
  .fx-split .wi { transform: none; }
  .topbar { transition: none; }
}