/* =====================================================================
   ENGLISH LOVERS · 30-YEAR CAMPAIGN — LANDING PROTOTYPE v3
   ---------------------------------------------------------------------
   Black bold Archivo on warm white, one red accent. The type performs.
   Layout goal: nothing overflows the window at ANY width. Type is sized
   against its container (or fitted by JS), not against the raw viewport.
   ===================================================================== */

:root {
  --bg: #fbfaf7;
  --ink: #090909;
  --muted: #68635d;
  --soft: #e9e5de;
  --soft-2: #d8d2c8;
  --accent: #ff3b1f;

  --max: 1180px;                       /* content column width */
  --pad: clamp(20px, 4vw, 58px);       /* outer gutter */
  --nav-gutter: 0px;                   /* right space reserved for scene-nav; set at wide widths */

  --ease: cubic-bezier(.2, 1.35, .25, 1);
  --ease-snap: cubic-bezier(.15, 1.6, .35, 1);
  --chaos: 0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--ink);
}

body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-variation-settings: "wdth" 100, "wght" 520;
  overflow-x: hidden;                  /* last-resort guard against horizontal spill */
  -webkit-tap-highlight-color: transparent;   /* no blue/grey flash on tap (iOS) */
}

body.more-chaos { --chaos: 1; }

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute;
  left: 10px; top: -50px;
  background: #fff;
  border: 2px solid var(--ink);
  padding: 10px;
  z-index: 100;
}
.skip-link:focus { top: 10px; }

/* --- cursor orb ---------------------------------------------------- */
.cursor-orb {
  position: fixed;
  left: 0; top: 0;
  width: 24px; height: 24px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 80;
  opacity: .7;
  mix-blend-mode: multiply;
  transition: width .18s var(--ease), height .18s var(--ease), opacity .18s;
}
.cursor-orb.big { width: 50px; height: 50px; opacity: .35; }

/* =====================================================================
   AMBIENT ART — cleared drawings live on here as a blurred, accumulating
   backdrop for the whole site (see initDrawFrame's clear handler).
   ===================================================================== */
#artCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;                 /* above the paper, below the content (main = z1) */
  pointer-events: none;
  opacity: 0;
  filter: blur(6px) saturate(1.15);   /* soft, but the drawing still reads */
  mix-blend-mode: multiply;
  transition: opacity .8s var(--ease);
}
body.has-art #artCanvas { opacity: .5; }
main, .site-footer { position: relative; z-index: 1; }   /* keep content above the art */

/* the "we appreciate your contribution" toast */
#artToast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 24px);
  z-index: 90;
  max-width: min(88vw, 460px);
  padding: 14px 20px;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--accent);
  font-variation-settings: "wdth" 92, "wght" 760;
  font-size: clamp(15px, 1.8vw, 19px);
  text-transform: uppercase;
  letter-spacing: -.01em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease);
}
#artToast.show { opacity: 1; transform: translate(-50%, 0); }

/* the "win" burst when two draggable elements are pushed together */
.scene-pop {
  position: fixed;
  z-index: 88;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-variation-settings: "wdth" 108, "wght" 900;
  font-size: clamp(22px, 4vw, 46px);
  text-transform: uppercase;
  letter-spacing: -.03em;
  white-space: nowrap;
  pointer-events: none;
  animation: scenePop .9s var(--ease-snap) forwards;
}
@keyframes scenePop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1) rotate(-3deg); }
}

/* draggable elements advertise themselves */
.draggable { cursor: grab; touch-action: none; }
.draggable.dragging { cursor: grabbing; z-index: 50; transition: none; }

/* =====================================================================
   HEADER + SCENE NAV
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px var(--pad);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.site-header a, .site-header div { pointer-events: auto; }
.brand {
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-variation-settings: "wdth" 85, "wght" 850;
  letter-spacing: .02em;
}
.header-copy { font-size: 13px; color: var(--muted); }
.header-cta {
  margin-left: auto;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  font-variation-settings: "wght" 720;
}
.header-cta:hover { color: var(--accent); border-color: var(--accent); }

/* Scene nav is a fixed side rail. It is only shown when the window is
   wide enough to hold it WITHOUT overlapping the content column; at that
   point --nav-gutter reserves matching space on the right (see @media). */
.scene-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 65;
  width: 165px;
  max-height: 80vh;
  overflow: auto;
  padding: 14px 12px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: rgba(251, 250, 247, .82);
  backdrop-filter: blur(8px);
  font-size: 12px;
  display: none;                       /* shown at >=1160px */
}
.scene-nav-title {
  text-transform: uppercase;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  margin-bottom: 10px;
  font-variation-settings: "wdth" 85, "wght" 700;
}
.scene-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.scene-nav a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
  align-items: baseline;
  text-decoration: none;
  color: var(--muted);
  transition: color .2s, transform .2s;
}
.scene-nav a span { font-size: 10px; color: var(--muted); }
.scene-nav a strong { font-variation-settings: "wdth" 82, "wght" 620; line-height: 1.05; }
.scene-nav a.visited strong { color: var(--ink); }
.scene-nav a.active { color: var(--accent); transform: translateX(-5px); }
.scene-nav a.active strong { font-variation-settings: "wdth" 100, "wght" 850; }
.scene-nav a:not(.visited):not(.active) { filter: blur(.2px); }
.scene-nav a:not(.visited)::after {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: var(--soft);
  transform: scaleX(.55);
  transform-origin: left;
}

/* =====================================================================
   SECTION SHELL + SHARED TYPE
   ===================================================================== */
main { position: relative; }

.stage-section {
  min-height: 100svh;
  padding: 110px calc(var(--pad) + var(--nav-gutter)) 90px var(--pad);
  display: grid;
  align-content: center;               /* stack centered vertically */
  justify-items: start;                /* everything left-aligned, like the hero */
  position: relative;
  border-bottom: 1px solid var(--soft);
  overflow: hidden;
}
.stage-section > * { max-width: var(--max); width: 100%; }

.eyebrow, .section-kicker {
  text-transform: uppercase;
  color: var(--muted);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .08em;
  font-variation-settings: "wdth" 90, "wght" 760;
  margin: 0 0 18px;
}
.body-large {
  font-size: clamp(19px, 2.2vw, 31px);
  line-height: 1.14;
  font-variation-settings: "wdth" 100, "wght" 480;
  max-width: 40ch;
}
.small-copy {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.4;
  color: var(--muted);
  max-width: 62ch;
}

/* Section titles: fluid, allowed to wrap, balanced. Never nowrap. */
.section-title {
  font-size: clamp(40px, 7vw, 116px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.045em;
  font-variation-settings: "wdth" 85, "wght" 820;
  margin: 0 0 24px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.section-title .line { display: block; }
.no-overflow-title { font-size: clamp(38px, 6.4vw, 92px); }
.small-title { font-size: clamp(40px, 7vw, 104px); }

.word {
  display: inline-block;
  will-change: transform, font-variation-settings;
  color: var(--ink);
  transition: font-variation-settings .28s var(--ease), transform .28s var(--ease), letter-spacing .28s var(--ease);
}
/* punctuation is nested inside its word (see index.html) and kept inline
   so a trailing full stop can never wrap onto a line of its own */
.punct { display: inline; }
.accent { color: var(--accent); }

/* =====================================================================
   1 · HERO / OPENING
   ---------------------------------------------------------------------
   The two title lines are sized independently so the long line ("THE
   PLAN IS MISSING.") fits its column and "PERFECT." lands as the bigger
   punchline. Lines may wrap on narrow screens instead of overflowing.
   ===================================================================== */
.hero-inner { max-width: 1120px; }

.hero-title {
  line-height: .82;
  text-transform: uppercase;
  letter-spacing: -.055em;
  margin: 0 0 34px;
}
.title-line { display: block; overflow-wrap: break-word; }

.line-plan {
  font-size: clamp(42px, 8vw, 96px);
  font-variation-settings: "wdth" 84, "wght" 790;
}
.line-perfect {
  font-size: clamp(58px, 14vw, 168px);
  font-variation-settings: "wdth" 105, "wght" 900;
  margin-top: .02em;
}
.line-plan .word { white-space: nowrap; }   /* keep individual words intact; the LINE can still wrap */

.word-plan { font-variation-settings: "wdth" 84, "wght" 800; }
.word-missing { font-variation-settings: "wdth" 88, "wght" 740; }
.word-perfect { font-variation-settings: "wdth" 105, "wght" 900; }

/* cursor-proximity reactions (kept meaningful: the words behave like the
   thing they say — MISSING thins out, PERFECT swells, PLAN tries to leave) */
.hero-title:hover .word-missing, .word-missing.cursor-near {
  font-variation-settings: "wdth" 78, "wght" 300;
  letter-spacing: .03em;
  transform: translateY(-.05em) scaleX(.97);
}
.hero-title:hover .word-perfect, .word-perfect.cursor-near {
  font-variation-settings: "wdth" 122, "wght" 900;
  transform: translateY(.015em);
}
.hero-title:hover .word-plan, .word-plan.cursor-near {
  transform: translateX(-.12em) rotate(-2deg);
  font-variation-settings: "wdth" 80, "wght" 620;
}

.hero-note {
  font-size: clamp(17px, 1.9vw, 25px);
  line-height: 1.28;
  max-width: 46ch;
  color: #2b2926;
}
.hero-actions, .button-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 28px;
}

/* buttons + text links */
.primary-action, .secondary-action, .ghost-action, .signup-form button {
  font: inherit;
  cursor: pointer;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  padding: 15px 18px;
  background: var(--ink);
  color: #fff;
  font-variation-settings: "wdth" 90, "wght" 820;
  letter-spacing: -.02em;
  transition: transform .18s var(--ease), background .18s, color .18s, border .18s;
}
.primary-action:hover, .secondary-action:hover, .signup-form button:hover {
  transform: translateY(-3px) rotate(-.7deg);
  background: var(--accent);
  border-color: var(--accent);
}
.secondary-action { background: var(--accent); border-color: var(--accent); }
.ghost-action { background: transparent; color: var(--ink); }
.ghost-action[aria-pressed="true"] { background: var(--ink); color: #fff; }
.secondary-link, .text-link {
  color: var(--ink);
  font-variation-settings: "wght" 760;
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
}
.secondary-link:hover, .text-link:hover { color: var(--accent); border-color: var(--accent); }

/* decorative marks — positioned in vmin so they scale with the smaller
   window dimension and stay inside the frame */
.stage-mark {
  position: absolute;
  height: 3px;
  background: var(--ink);
  transform-origin: left;
  opacity: .9;
}
.long-line { left: 6vw; bottom: 15vh; width: min(38vw, 460px); transform: rotate(-2deg); }
.crooked-line { right: 12vw; top: 26vh; width: min(20vw, 240px); transform: rotate(12deg); }
.accent-dot { position: absolute; width: 18px; height: 18px; background: var(--accent); border-radius: 50%; will-change: transform; }
/* the hero dot flees the cursor and the lines react to it — driven by
   initHeroPlay() in script.js. It sits still if that never runs. */
.hero-dot { right: 20vw; bottom: 24vh; }

/* =====================================================================
   2 · INTRO / TEXT PERFORMS
   ===================================================================== */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(240px, 400px) 1fr;
  gap: clamp(32px, 7vw, 96px);
  align-items: center;
}
.offer-stack { position: relative; min-height: clamp(300px, 40vw, 430px); }
.offer {
  position: absolute;
  display: inline-block;
  max-width: min(340px, 90%);
  background: #fff;
  border: 2px solid var(--ink);
  padding: 16px 18px 18px;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1.04;                   /* breathing room so no line kisses the border */
  text-transform: uppercase;
  letter-spacing: -.035em;
  overflow-wrap: break-word;           /* a long word wraps instead of escaping the box */
  font-variation-settings: "wdth" 82, "wght" 820;
  box-shadow: 9px 9px 0 var(--soft-2);
  transition: transform .28s var(--ease), font-variation-settings .28s var(--ease);
}
.offer-1 { left: 0; top: 4px; transform: rotate(-6deg); }
.offer-2 { right: 4px; top: 27%; transform: rotate(8deg); }
.offer-3 { left: 12px; bottom: 0; font-size: clamp(18px, 2.2vw, 34px); transform: rotate(-2deg); }
/* the cards are draggable (see makeDraggable) — the pointer just brings one
   to the front and lifts it slightly; JS owns its position once grabbed */
.offer:hover { z-index: 5; box-shadow: 12px 12px 0 var(--soft-2); }
.offer-3:hover { font-variation-settings: "wdth" 98, "wght" 900; }

.phrase-built { font-size: clamp(44px, 7vw, 112px); }
.no-script { font-variation-settings: "wdth" 82, "wght" 780; position: relative; }
.no-script::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: 52%;
  height: .08em;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.no-script:hover::after, .no-script.cursor-near::after { transform: scaleX(1); }
.full-commitment { font-variation-settings: "wdth" 96, "wght" 900; }
.full-commitment:hover, .full-commitment.cursor-near { font-variation-settings: "wdth" 116, "wght" 900; transform: translateX(.05em); }

/* =====================================================================
   3 · RESHUFFLE
   ---------------------------------------------------------------------
   The phrase box has a stable height; JS fits the phrase font-size so
   every controlled line (short or long) sits centered without spilling.
   ===================================================================== */
/* Top-anchored like the "what happens next" scene: the RESHUFFLE headline
   holds its position and the phrase box / buttons only grow downward. */
.reshuffle { align-content: start; padding-top: clamp(120px, 18vh, 200px); }

.phrase-stage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(200px, 30vh, 360px);
  padding: clamp(26px, 4vw, 48px) clamp(16px, 4vw, 64px);
  margin: 34px 0 18px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.phrase-display {
  margin: 0;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: -.045em;
  line-height: .9;
  font-variation-settings: "wdth" 88, "wght" 840;
  overflow-wrap: anywhere;
  font-size: clamp(34px, 6vw, 82px);   /* fallback; JS overrides with a fitted px size */
}
.phrase-display .phrase-word {
  display: inline-block;
  margin-right: .12em;
  will-change: transform, font-variation-settings;
  transition: transform .38s var(--ease-snap), font-variation-settings .38s var(--ease), opacity .2s;
}
.phrase-display.animating .phrase-word { animation: wordIn .55s var(--ease-snap) both; }
.phrase-display .thin { font-variation-settings: "wdth" 80, "wght" 320; }
.phrase-display .heavy { font-variation-settings: "wdth" 115, "wght" 900; }
.phrase-display .accent-word { color: var(--accent); }
body.more-chaos .phrase-display .phrase-word:nth-child(odd) { transform: translateY(calc(-8px * var(--chaos))) rotate(-2deg); }
body.more-chaos .phrase-display .phrase-word:nth-child(even) { transform: translateY(calc(7px * var(--chaos))) rotate(1.5deg); }
@keyframes wordIn {
  0% { opacity: 0; transform: translateY(36px) rotate(5deg); font-variation-settings: "wdth" 75, "wght" 360; }
  70% { opacity: 1; transform: translateY(-8px) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
.phrase-rail {
  position: absolute;
  left: clamp(12px, 4vw, 64px);
  right: clamp(12px, 4vw, 64px);
  bottom: 20px;
  height: 3px;
  background: var(--ink);
  transform: rotate(-1deg);
  transform-origin: left;
}
.phrase-dot {
  position: absolute;
  right: clamp(16px, 4vw, 68px);
  top: 24px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .4s var(--ease);
}
body.more-chaos .phrase-dot { transform: translate(-46px, 60px) scale(1.3); }

/* =====================================================================
   4 · TYPOGRAPHIC STAGE
   ---------------------------------------------------------------------
   The stage-world is a CONTAINER: everything inside is sized in cqw so
   the whole scene scales with the box, not the viewport, and never
   overflows (overflow:hidden clips the playful parallax at the edges).
   ===================================================================== */
.typographic-stage { justify-items: start; }
.stage-copy { align-self: end; }
.stage-title { font-size: clamp(36px, 6vw, 96px); }
.stage-title span { display: block; }

.stage-world {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: clamp(420px, 46vw, 600px);
  border-top: 2px solid var(--ink);
  margin-top: 34px;
  overflow: hidden;
  --mx: 0;
  --my: 0;
}
.world-label {
  position: absolute;
  left: 4%; top: 7%;
  font-size: clamp(15px, 2.6cqw, 26px);
  text-transform: uppercase;
  font-variation-settings: "wdth" 90, "wght" 780;
  color: var(--muted);
}
.world-note {
  position: absolute;
  left: 4%; top: 16%;
  font-size: clamp(11px, 1.6cqw, 14px);
  text-transform: uppercase;
  color: var(--muted);
}
.stage-frame {
  position: absolute;
  right: 6%; top: 13%;
  width: 27%; height: 46%;
  border: 4px solid var(--ink);
  transform: rotate(calc(-2deg + var(--mx) * 2deg));
  transition: transform .2s;
}
/* The empty poster is a real drawing surface — click/drag to fill it with
   your own chaos (see initDrawFrame in script.js). Kept axis-aligned and
   static so the drawing coordinates stay honest while you scribble. */
.draw-frame {
  transform: none;
  background: #fff;
  cursor: crosshair;
  z-index: 3;
  overflow: hidden;
  box-shadow: 10px 10px 0 var(--soft-2);
}
.draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;            /* let touch drag draw instead of scrolling */
}
.draw-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35em;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
  transition: opacity .25s;
}
.draw-hint__big {
  font-size: clamp(16px, 3.6cqw, 30px);
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-variation-settings: "wdth" 86, "wght" 850;
}
.draw-hint__sm {
  font-size: clamp(10px, 1.8cqw, 14px);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-variation-settings: "wght" 640;
}
.draw-frame.has-drawing .draw-hint { opacity: 0; }
.draw-clear {
  position: absolute;
  right: 8px;
  bottom: 8px;
  appearance: none;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-variation-settings: "wght" 780;
  padding: 4px 9px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .15s, color .15s;
}
.draw-frame.has-drawing .draw-clear { opacity: 1; pointer-events: auto; }
.draw-clear:hover { background: var(--ink); color: var(--bg); }

.stage-line { position: absolute; background: var(--ink); height: 4px; transform-origin: left; }
.ramp { left: 6%; bottom: 24%; width: 40%; transform: rotate(calc(-9deg + var(--mx) * 10deg)); }
.ladder { width: 4px; height: 42%; bottom: 16%; background: var(--ink); }
.rail-left { left: 56%; transform: rotate(calc(-6deg + var(--my) * 5deg)); }
.rail-right { left: 63%; transform: rotate(calc(4deg + var(--mx) * -4deg)); }
.rung { left: 55%; width: 10%; height: 4px; }
.rung-1 { bottom: 24%; transform: rotate(1deg); }
.rung-2 { bottom: 34%; transform: rotate(-3deg); }
.rung-3 { bottom: 44%; transform: rotate(2deg); }
.rolling-circle {
  position: absolute;
  left: 20%; bottom: 30%;
  width: clamp(48px, 8cqw, 76px);
  height: clamp(48px, 8cqw, 76px);
  border: 5px solid var(--accent);
  border-radius: 50%;
  transform: translate(calc(var(--mx) * 80px), calc(var(--my) * 30px)) rotate(calc(var(--mx) * 180deg));
  transition: transform .22s var(--ease);
}
.stage-word {
  position: absolute;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: -.055em;
  font-size: clamp(30px, 10.5cqw, 104px);
  line-height: .85;
  font-variation-settings: "wdth" 84, "wght" 840;
  transition: font-variation-settings .2s var(--ease), transform .2s var(--ease);
}
.actor-a { left: 5%; top: 28%; transform: translate(calc(var(--mx) * 22px), calc(var(--my) * -14px)); }
.actor-b { left: 30%; top: 52%; font-variation-settings: "wdth" 78, "wght" 340; transform: translate(calc(var(--mx) * -40px), calc(var(--my) * 14px)) rotate(calc(var(--mx) * 4deg)); }
.actor-c { left: 44%; bottom: 10%; font-variation-settings: "wdth" 112, "wght" 900; transform: translate(calc(var(--mx) * -16px), calc(var(--my) * -24px)); }
.stage-world:hover .actor-a, .actor-a.cursor-near { font-variation-settings: "wdth" 118, "wght" 820; }
.stage-world:hover .actor-b, .actor-b.cursor-near { font-variation-settings: "wdth" 75, "wght" 300; }
.stage-world:hover .actor-c, .actor-c.cursor-near { font-variation-settings: "wdth" 125, "wght" 900; }
.stage-placeholder {
  position: absolute;
  background: #fff;
  border: 3px solid var(--ink);
  padding: 14px;
  font-size: clamp(14px, 3.2cqw, 28px);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: -.035em;
  font-variation-settings: "wdth" 86, "wght" 850;
  box-shadow: 10px 10px 0 var(--soft-2);
}
.placeholder-a { right: 7%; bottom: 12%; transform: rotate(4deg); }
.placeholder-b { left: 6%; bottom: 7%; transform: rotate(-5deg); }
body.more-chaos .placeholder-a { animation: cardWorry .9s var(--ease) infinite alternate; }
body.more-chaos .placeholder-b { animation: cardWorry 1.1s var(--ease) infinite alternate-reverse; }
@keyframes cardWorry {
  from { transform: rotate(2deg) translateY(0); }
  to { transform: rotate(-4deg) translateY(-12px); }
}

/* =====================================================================
   5 · WHAT HAPPENS NEXT
   ===================================================================== */
/* Top-anchored so "WHAT HAPPENS NEXT:" holds its position; the answer
   line only ever grows DOWNWARD (1, 2 or 3 lines) instead of re-centring
   the whole block — steadier, more deliberate. */
.blank { justify-items: start; align-content: start; padding-top: clamp(140px, 22vh, 240px); }
.blank-line {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 4px solid var(--ink);
  width: 100%;
  max-width: min(760px, 90%);
  padding: 12px 10px 18px;
  font: inherit;
  font-size: clamp(32px, 6vw, 88px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.045em;
  font-variation-settings: "wdth" 86, "wght" 820;
  color: var(--ink);                   /* iOS renders <button> text blue without this */
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
  transition: font-variation-settings .18s var(--ease), transform .18s var(--ease), border-color .18s;
}
#blankAnswer { color: var(--accent); }   /* the revealed answer pops red; empty = just the line */
/* only real pointers get the hover morph — on touch it would stick after a tap */
@media (hover: hover) {
  .blank-line:hover { font-variation-settings: "wdth" 100, "wght" 900; transform: rotate(-.7deg); border-color: var(--accent); }
}

/* =====================================================================
   6 · TIMELINE
   ===================================================================== */
.timeline-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
  position: relative;
}
.timeline-track::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%;
  top: 26px;
  height: 3px;
  background: var(--ink);
  z-index: 0;
  transform: rotate(-1deg);
}
.time-card {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 2px solid var(--ink);
  padding: 22px;
  min-height: 240px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.time-card:hover, .time-card:focus { transform: translateY(-12px) rotate(-1.2deg); box-shadow: 10px 10px 0 var(--soft-2); outline: none; }
.time-label {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  padding: 6px 8px;
  font-size: 12px;
  font-variation-settings: "wdth" 90, "wght" 850;
}
.time-card h3 {
  font-size: clamp(24px, 3.2vw, 48px);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: -.045em;
  font-variation-settings: "wdth" 86, "wght" 860;
  margin: 22px 0 10px;
  overflow-wrap: break-word;
}
.time-card p { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.3; color: #333; margin: 0; }

/* =====================================================================
   7 · SIGNUP
   ===================================================================== */
.signup-card {
  border: 3px solid var(--ink);
  padding: clamp(24px, 5vw, 64px);
  box-shadow: 16px 16px 0 var(--soft-2);
  background: #fff;
}
.signup-form { margin-top: 30px; }
.signup-form label, .signup-form legend {
  display: block;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  font-variation-settings: "wdth" 90, "wght" 760;
}
.form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;                        /* let the input shrink instead of overflowing the row */
  border: 2px solid var(--ink);
  padding: 17px;
  font: inherit;
  font-size: 20px;
  background: var(--bg);
}
.signup-form input[type="email"]:focus { outline: 3px solid var(--accent); outline-offset: 3px; }
.signup-form button { flex: 0 0 auto; }
.checkboxes { border: 0; padding: 20px 0 0; margin: 0; display: grid; gap: 8px; }
.checkboxes label { font-size: 16px; text-transform: none; color: #222; font-variation-settings: "wght" 520; }
.form-note, .form-success { color: var(--muted); font-size: 15px; }
.form-success { font-variation-settings: "wdth" 95, "wght" 850; color: var(--accent); text-transform: uppercase; }

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 30px var(--pad);
  font-size: 14px;
  color: var(--muted);
}
.site-footer a { color: var(--ink); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Wide: there is room for the side rail — show it and reserve space so
   it never overlaps the content column. */
@media (min-width: 1160px) {
  :root { --nav-gutter: 186px; }
  .scene-nav { display: block; }
}

/* Tablet / small desktop */
@media (max-width: 1000px) {
  .intro-grid { grid-template-columns: 1fr; }
  .offer-stack { min-height: clamp(280px, 62vw, 380px); order: 2; }
  .stage-copy { align-self: start; }
}

/* Mobile */
@media (max-width: 700px) {
  .stage-section { padding: 92px var(--pad) 72px; }
  .site-header { padding: 14px var(--pad); }
  .header-copy { display: none; }
  .timeline-track { grid-template-columns: 1fr; }
  .timeline-track::before { display: none; }
  .line-plan { font-size: clamp(36px, 10.5vw, 72px); }
  .line-perfect { font-size: clamp(44px, 15vw, 104px); }
  /* Stage-world: on touch the cursor parallax is dead, so drop the
     cursor-only props (ladder, rungs, rolling circle) and lay the scene
     out as a clean, non-overlapping composition. */
  .stage-world { height: clamp(460px, 128vw, 640px); }
  .ladder, .rung, .rolling-circle { display: none; }
  /* the big ACTORS/ENTER/HERE words already say this — hide the small
     duplicate label so it doesn't sit on top of them */
  .world-label, .world-note { display: none; }
  /* words = a tidy left column; the drawable frame = the right side, with
     a real gap between them (see .stage-frame below) */
  .stage-word { font-size: clamp(28px, 11cqw, 54px); }
  .actor-a { left: 5%; top: 8%; }
  .actor-b { left: 5%; top: 26%; }
  .actor-c { left: 5%; top: 44%; bottom: auto; }
  /* drawable frame = the right column, clear of the words on the left */
  .stage-frame { right: 3%; top: 8%; width: 46%; height: 42%; }
  .placeholder-a { right: 5%; bottom: 6%; top: auto; }
  .placeholder-b { left: 5%; bottom: 6%; }
  .ramp { left: 5%; bottom: 34%; width: 52%; }

  .form-row { flex-direction: column; align-items: stretch; }
  /* in a column, flex-basis becomes the HEIGHT — reset it so the field
     stays one row tall instead of growing to 240px */
  .signup-form input[type="email"] { flex: 0 0 auto; width: 100%; }
  .signup-form button { width: 100%; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .cursor-orb { display: none; }
}