/* =====================================================================
   THE WORLD WAS YOUNG — site stylesheet
   Six sections, eight named palette pairings.
   Derived from twwy-style-guide.pdf + twwy-website-brief.pdf.
   ===================================================================== */

/* Note: Westfalia is reserved for the wordmark and is NOT loaded as
   a webfont. Wordmark text ships as pre-rendered transparent PNGs
   in assets/brand/. */

:root {
  /* Parchment — the page ground */
  --parchment-light: #F5EDD8;
  --parchment-base:  #E1D9C1;
  --parchment-dark:  #C4B895;

  /* Ink Brown — the default text family */
  --ink-light: #7E6448;
  --ink-base:  #3A2E1F;
  --ink-dark:  #1C1610;

  /* Bleak — storm sky, blue */
  --bleak-light: #D7E1EB;
  --bleak-base:  #5F738C;
  --bleak-dark:  #374150;

  /* Twilight — dusk, heather */
  --twilight-light: #EADDE2;
  --twilight-base:  #AF919B;
  --twilight-dark:  #6B4A54;

  /* Bright — meadow, sage */
  --bright-light: #D9DFCB;
  --bright-base:  #808B73;
  --bright-dark:  #4A5344;

  /* Type */
  --serif: 'EB Garamond', 'Adobe Garamond Pro', Garamond, 'Times New Roman', serif;
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --hand: 'Caveat', 'Caveat Brush', 'Permanent Marker', cursive;

  /* Scale */
  --max-wide: 1280px;
  --max-narrow: 760px;
  --max-prose: 640px;
  --pad-block: clamp(5rem, 10vw, 9rem);
  --pad-inline: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
*[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-base);
  background: var(--parchment-light);
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(196, 184, 149, 0.22), transparent 70%),
    radial-gradient(ellipse 80% 60% at 80% 90%, rgba(126, 100, 72, 0.12), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed, fixed;
  background-size: 100% 100%, 100% 100%, 400px 400px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink-base); text-decoration: none; }
a:hover { color: var(--bleak-dark); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   Containers
   --------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--pad-inline);
}
.container.narrow { max-width: var(--max-narrow); }

.section {
  position: relative;
  padding: var(--pad-block) 0;
}

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink-dark);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}

.display {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0.1em 0 0.6em;
}
.display-light { color: var(--parchment-light); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }
strong { font-weight: 600; color: var(--ink-dark); }

.eyebrow {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bleak-base);
  margin: 0 0 1.5em;
}
.eyebrow-light { color: var(--parchment-dark); }

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.22rem);
  font-style: italic;
  color: var(--ink-base);
  max-width: 46ch;
  margin: 0 0 2rem;
  line-height: 1.5;
}

.lead-quiet {
  font-style: italic;
  color: var(--ink-base);
  font-size: 1.15rem;
  margin: 0 0 2.25em;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  border-radius: 2px;
  border: 1.5px solid var(--ink-dark);
  background: var(--ink-dark);
  color: var(--parchment-light);
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 220ms ease;
}
.btn:hover {
  background: var(--bleak-dark);
  border-color: var(--bleak-dark);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--parchment-light);
  border-color: rgba(245, 237, 216, 0.85);
}
.btn-ghost:hover {
  background: rgba(245, 237, 216, 0.12);
  color: var(--parchment-light);
  border-color: var(--parchment-light);
}
.btn-parchment {
  background: var(--parchment-light);
  border-color: var(--parchment-light);
  color: var(--ink-dark);
}
.btn-parchment:hover {
  background: var(--parchment-base);
  border-color: var(--parchment-base);
  color: var(--ink-dark);
}

/* ---------------------------------------------------------------------
   The Compass — primary navigation
   The crescent is the brand mark used as a navigation primitive.
   ‣ Always visible. Color tracks the active section's text color via
     --compass-tint, set by JS on the body via [data-nav-section="..."].
   ‣ Hover: weighty rotation lift + faint glow ring.
   ‣ Open: panel reveals a typeset Index. Backdrop dims the page.
   --------------------------------------------------------------------- */

:root {
  --compass-tint: var(--parchment-light);
  --compass-glow: rgba(245, 237, 216, 0.35);
  --compass-shadow: rgba(0, 0, 0, 0.45);
  --compass-ease: cubic-bezier(0.7, 0.05, 0.3, 1);
}

/* Per-section tint mapping. Body[data-nav-section] is set by IntersectionObserver. */
body[data-nav-section="top"] {
  --compass-tint: var(--parchment-light);
  --compass-glow: rgba(245, 237, 216, 0.32);
  --compass-shadow: rgba(0, 0, 0, 0.55);
}
/* §2 — visible content is the tan map, not the dark section bg → use ink */
body[data-nav-section="turn-v2"] {
  --compass-tint: var(--ink-base);
  --compass-glow: rgba(28, 22, 16, 0.20);
  --compass-shadow: rgba(28, 22, 16, 0.35);
}
body[data-nav-section="how"] {
  --compass-tint: var(--ink-base);
  --compass-glow: rgba(28, 22, 16, 0.18);
  --compass-shadow: rgba(28, 22, 16, 0.30);
}
body[data-nav-section="session-zero"] {
  --compass-tint: var(--bleak-light);
  --compass-glow: rgba(215, 225, 235, 0.30);
  --compass-shadow: rgba(0, 0, 0, 0.55);
}
body[data-nav-section="signup"] {
  --compass-tint: var(--twilight-light);
  --compass-glow: rgba(234, 221, 226, 0.30);
  --compass-shadow: rgba(0, 0, 0, 0.55);
}
body[data-nav-section="signup-2"] {
  --compass-tint: var(--bright-light);
  --compass-glow: rgba(217, 223, 203, 0.30);
  --compass-shadow: rgba(0, 0, 0, 0.55);
}
/* Takeaways sits on parchment like §how → use ink */
body[data-nav-section="takeaways"] {
  --compass-tint: var(--ink-base);
  --compass-glow: rgba(28, 22, 16, 0.18);
  --compass-shadow: rgba(28, 22, 16, 0.30);
}

.compass {
  font-family: var(--serif);
}

/* ── The Drawer — left-anchored slide-out sidebar ─────────────── */
.compass-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(360px, 86vw);
  height: 100vh;
  height: 100svh;
  background: linear-gradient(180deg, var(--ink-dark) 0%, #08060a 100%);
  border-right: 1px solid rgba(245, 237, 216, 0.10);
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.55);
  transform: translateX(-100%);
  transition: transform 600ms var(--compass-ease);
  z-index: 80;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
.compass[data-open="true"] .compass-drawer {
  transform: translateX(0);
}

/* On phones the drawer takes the full viewport — header stays put,
   body scrolls. */
@media (max-width: 600px) {
  .compass-drawer { width: 100vw; }
}

/* Header — sticks at the top of the drawer. The page-anchored crescent
   (fixed to the page corner at top:clamp(1rem,2vw,1.75rem) /
   left:clamp(1rem,2vw,1.75rem)) sits ABOVE the stacked wordmark and
   reads as one vertical signature:
       ◐
       THE
       WORLD
       WAS
       YOUNG
   padding-top clears the crescent's bottom (top-inset + crescent height
   + small gap). padding-left is bumped past the crescent's left inset
   so the short top word "THE" sits visually centered under the
   crescent rather than left-aligned with it — the rest of the stack
   reads as a flag hanging from that center point. */
.compass-drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  padding:
    calc(clamp(1rem, 2vw, 1.75rem) + clamp(48px, 5.6vw, 62px) + 0.85rem)
    1.5rem
    1.25rem
    clamp(1.65rem, 3vw, 2.4rem);
  border-bottom: 1px solid rgba(245, 237, 216, 0.10);
}

/* Stacked card-back wordmark, 4-line left-justified. Same image used
   on the hero (wordmark-stacked-header.png is the smaller render).
   Intrinsic ratio ~164:256 ≈ 0.64. */
.compass-drawer-wordmark {
  display: block;
  width: clamp(4.5rem, 7vw, 6rem);
  height: auto;
  /* Subtle glow so the cream text doesn't feel flat on the deep ink. */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

/* Body — fills remaining height; scrolls if nav grows past the panel */
.compass-drawer-body {
  flex: 1 1 auto;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(2rem, 5vh, 3rem) clamp(1.75rem, 4vw, 2.75rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 237, 216, 0.18) transparent;
}
.compass-drawer-body::-webkit-scrollbar { width: 6px; }
.compass-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(245, 237, 216, 0.18);
  border-radius: 3px;
}

/* ── Backdrop scrim — dims the page behind the drawer ─────────── */
.compass-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--compass-ease);
  z-index: 70;
}
.compass[data-open="true"] .compass-scrim {
  opacity: 1;
  pointer-events: auto;
}

/* ── Trigger (the always-visible crescent) ────────────────────────
   Mounted on the drawer's right edge so it rides along when the
   drawer slides. Closed: appears in the page's top-left corner
   (drawer is offscreen, trigger pokes out at right:0 of drawer).
   Open: drawer is at translateX(0), so the trigger sits at the
   right edge of the open sidebar — now serving as the close handle. */
.compass-trigger {
  /* Always anchored to the page corner. Lives on top of the drawer
     when the drawer is open (z-index above .compass-drawer). */
  position: fixed;
  top: clamp(1rem, 2vw, 1.75rem);
  left: clamp(1rem, 2vw, 1.75rem);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 90;
}
.compass-trigger:focus-visible {
  outline: 2px solid var(--compass-tint);
  outline-offset: 4px;
}

/* Hover halo — a soft glow that bleeds out from the crescent */
.compass-trigger::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--compass-glow), transparent 70%);
  opacity: 0;
  transition: opacity 400ms var(--compass-ease);
  pointer-events: none;
}
.compass-trigger:hover::before { opacity: 1; }

/* The crescent shape — masked PNG filled with the live tint */
.compass-crescent {
  display: block;
  width: clamp(48px, 5.6vw, 62px);
  height: clamp(48px, 5.6vw, 62px);
  background: var(--compass-tint);
  -webkit-mask: url('../assets/brand/arc-mark.png') center / contain no-repeat;
          mask: url('../assets/brand/arc-mark.png') center / contain no-repeat;
  filter: drop-shadow(0 6px 14px var(--compass-shadow));
  transition:
    background-color 600ms var(--compass-ease),
    filter 600ms var(--compass-ease),
    transform 750ms var(--compass-ease);
  transform-origin: 50% 50%;
}

/* Open state — crescent flips to face inward, becoming a close handle.
   Override the tint to parchment-light so the crescent stays visible
   against the always-dark drawer panel beneath it. */
.compass[data-open="true"] .compass-crescent {
  transform: rotate(180deg);
  background: var(--parchment-light);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

/* ── The Nav List — destinations inside the drawer ────────────── */
.compass-nav {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.8vh, 0.65rem);
  /* JS sets these to position the gliding crescent indicator. */
  --indicator-y: 0px;
  --indicator-h: 0px;
  --indicator-shown: 0; /* 0 = hidden, 1 = visible */
}
.compass-nav li { position: relative; }

.compass-nav a {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: rgba(245, 237, 216, 0.72);
  text-decoration: none;
  padding: clamp(0.45rem, 0.9vh, 0.7rem) 0 clamp(0.45rem, 0.9vh, 0.7rem) 2rem;
  position: relative;
  opacity: 0;
  transform: translateX(-12px);
  white-space: nowrap;
  transition:
    opacity 500ms var(--compass-ease),
    transform 600ms var(--compass-ease),
    color 350ms var(--compass-ease);
}

/* Stagger the nav items in as the drawer opens */
.compass[data-open="true"] .compass-nav a {
  opacity: 1;
  transform: translateX(0);
}
.compass[data-open="true"] .compass-nav li:nth-child(1) a { transition-delay: 280ms; }
.compass[data-open="true"] .compass-nav li:nth-child(2) a { transition-delay: 340ms; }
.compass[data-open="true"] .compass-nav li:nth-child(3) a { transition-delay: 400ms; }
.compass[data-open="true"] .compass-nav li:nth-child(4) a { transition-delay: 460ms; }
.compass[data-open="true"] .compass-nav li:nth-child(5) a { transition-delay: 520ms; }
.compass[data-open="true"] .compass-nav li:nth-child(6) a { transition-delay: 580ms; }
.compass[data-open="true"] .compass-nav li:nth-child(7) a { transition-delay: 640ms; }
.compass[data-open="true"] .compass-nav li:nth-child(n+8) a { transition-delay: 700ms; }

/* HOVER — row brightens; the indicator doesn't move on hover */
.compass-nav a:hover { color: var(--parchment-light); }

/* ACTIVE — text becomes brighter, slightly tighter spacing */
.compass-nav a[data-active="true"] {
  color: var(--parchment-light);
  letter-spacing: -0.01em;
}

/* ── The Glide Indicator — a small crescent that slides between rows.
       The crescent body is always parchment-light (the drawer is
       always dark, so it must read at all times). The section's tint
       lives in the surrounding glow halo, so the indicator still
       feels alive when you scroll between sections — just without
       going invisible on the dark sections. */
.compass-nav-indicator {
  position: absolute;
  left: 0.05rem;
  top: 0;
  width: 1.35rem;
  height: 1.35rem;
  /* Aligned to the active row's vertical center via JS */
  transform: translateY(calc(var(--indicator-y) - 50%));
  background: var(--parchment-light);
  -webkit-mask: url('../assets/brand/arc-mark.png') center / contain no-repeat;
          mask: url('../assets/brand/arc-mark.png') center / contain no-repeat;
  /* Layered glow: a warm parchment near-halo + a section-tinted aura */
  filter:
    drop-shadow(0 0 4px rgba(245, 237, 216, 0.85))
    drop-shadow(0 0 14px var(--compass-tint))
    drop-shadow(0 0 24px var(--compass-tint));
  opacity: var(--indicator-shown);
  pointer-events: none;
  transition:
    transform 550ms var(--compass-ease),
    filter 550ms var(--compass-ease),
    opacity 550ms var(--compass-ease);
}

/* The indicator only appears once the drawer has finished opening,
   so it doesn't streak across the panel during the slide. */
.compass[data-open="true"] .compass-nav-indicator {
  transition:
    transform 550ms var(--compass-ease),
    background-color 550ms var(--compass-ease),
    filter 550ms var(--compass-ease),
    opacity 400ms var(--compass-ease) 700ms;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .compass-drawer, .compass-scrim,
  .compass-trigger, .compass-crescent,
  .compass-nav a {
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
  }
  .compass[data-open="true"] .compass-crescent { transform: none; }
}

/* ---------------------------------------------------------------------
   Named palette pairings
   --------------------------------------------------------------------- */

.pairing-ink-on-parchment { background: var(--parchment-light); color: var(--ink-base); }
.pairing-night-reverse { background: var(--ink-dark); color: var(--parchment-light); }
.pairing-morning-field { background: var(--bright-light); color: var(--bright-dark); }
.pairing-moss-shade { background: var(--bright-dark); color: var(--bright-light); }
.pairing-heather-hour { background: var(--twilight-light); color: var(--twilight-dark); }
.pairing-evening-velvet { background: var(--twilight-dark); color: var(--twilight-light); }
.pairing-storm-light { background: var(--bleak-light); color: var(--bleak-dark); }
.pairing-deep-storm { background: var(--bleak-dark); color: var(--bleak-light); }

/* =====================================================================
   §1 · HERO
   Two-column layout: stacked card-back wordmark on the left, the
   "inscribed passage" on the right — eyebrow, three serif italic
   prose lines beside a tonal gradient rule (sage → heather → storm),
   close, sage-fill CTA. Locked in from hero-lab variant G1.
   ===================================================================== */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  color: var(--parchment-light);
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 45% at 50% 52%, rgba(10,6,3,0.72) 0%, rgba(15,10,6,0.6) 45%, rgba(18,12,8,0.4) 75%, rgba(20,15,10,0.6) 100%),
    linear-gradient(180deg, rgba(28,22,16,0.45) 0%, rgba(28,22,16,0.18) 40%, rgba(28,22,16,0.88) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(3rem, 7vh, 6rem) clamp(1.5rem, 4vw, 4rem);
  max-width: 1320px;
  margin: 0 auto;
}

/* Left column — the stacked card-back wordmark, packed against the
   column gap so it sits close to the right-column content. */
.hero-wordmark {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hero-wordmark img {
  display: block;
  /* Stacked PNG is 855×1316 ⇒ ratio ~0.65. Drive sizing by height so
     the wordmark always fits the hero vertically; width follows. */
  height: clamp(14rem, 55vh, 28rem);
  width: auto;
  max-width: 100%;
  filter:
    drop-shadow(0 0 24px rgba(0, 0, 0, 0.7))
    drop-shadow(0 6px 28px rgba(0, 0, 0, 0.55));
}

/* Right column — the inscribed passage. */
.hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(1rem, 2.2vh, 1.75rem);
  width: 100%;
  max-width: 44ch;
}

/* Arc-mark crown — the brand crescent, top of the column. The PNG
   is black-on-transparent so we invert it to parchment. */
.hero-arc-mark {
  display: block;
  width: clamp(48px, 5.5vh, 64px);
  height: auto;
  margin: 0;
  opacity: 0.92;
  filter: invert(1) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
}

/* Eyebrow — small-caps preamble in the Twilight (heather) tone. */
.hero-eyebrow {
  font-family: var(--ui);
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--twilight-light);
  margin: 0;
  line-height: 1.5;
  text-wrap: balance;
}

/* Passage — three serif italic prose lines. The hairline rule on
   the left is a gradient walking through all three Tones (sage →
   heather → storm), so the eye carries the game's mechanic
   top-to-bottom without ever naming it. */
.hero-passage {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.3;
  color: var(--parchment-light);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  text-wrap: balance;
  padding-left: 1.1rem;
  max-width: none;
}
.hero-passage::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2em; bottom: 0.2em;
  width: 1.5px;
  background: linear-gradient(
    to bottom,
    var(--bright-base) 0%,
    var(--bright-base) 28%,
    var(--twilight-base) 50%,
    var(--bleak-base) 72%,
    var(--bleak-base) 100%
  );
}
.hero-passage p { margin: 0; }

/* Close — italic dedication in the Bleak (storm) tone, mirroring
   the bottom of the passage rule. */
.hero-passage-close {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--bleak-light);
  opacity: 0.92;
  margin: 0;
  line-height: 1.4;
}

/* Narrow viewports — collapse the two columns. Wordmark centers,
   right-column content sits below it, still left-aligned inside
   the centered column. */
@media (max-width: 860px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vh, 2.5rem);
    padding: clamp(3rem, 6vh, 5rem) 1.25rem clamp(2.5rem, 5vh, 4rem);
  }
  .hero-wordmark { justify-content: center; }
  .hero-wordmark img { height: clamp(12rem, 38vh, 20rem); }
  .hero-aside { max-width: 38ch; margin: 0 auto; align-items: flex-start; }
  /* narrow crop: keep the Age III pile and the dice in frame */
  .hero-image img { object-position: 72% center; }
}

/* =====================================================================
   §2 · THE TURN  ·  Full-bleed world map — the interactive centerpiece
   The whole section becomes the world. Map bleeds edge-to-edge. The
   deck sits on the map. The card lands on the map. The pin marks the
   map. The note is scrawled on the map. One unified cinematic space.
   ===================================================================== */

.section-turn-v2 {
  position: relative;
  padding: 0;
  background: #0d0804;
  overflow: hidden;
}

.turn-v2-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
}

/* the map is a "sheet" (base image + SVG marks layer) sharing one
   1344×768 coordinate system. JS sizes/positions the sheet to emulate
   object-fit: cover, so marks always sit exactly on their geography. */
.turn-v2-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.turn-v2-sheet {
  position: absolute;
  /* width/height/left/top set by turn.js (cover emulation + pan focus) */
  transition: left 750ms ease, top 750ms ease;
}
.turn-v2-sheet > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.turn-v2-marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ----- marks: each turn inks one onto the map, and it stays ----- */
.turn-v2-mark {
  opacity: 0;
  transform: scale(0.55);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 550ms ease, transform 700ms cubic-bezier(.2,.7,.3,1.35);
  pointer-events: none;
}
.turn-v2-mark.on {
  opacity: 1;
  transform: scale(1);
}
.turn-v2-mark image {
  /* beat layers are pixel-registered slices of the same table render —
     draw them verbatim, no blending, or their colors shift against the base */
}
.turn-v2-mark-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 600;
  fill: var(--ink-base);
  paint-order: stroke;
  stroke: rgba(245, 237, 216, 0.92);
  stroke-width: 5px;
  stroke-linejoin: round;
}
/* the highway — part of the world's geography, visible before any mark */
.turn-v2-highway {
  fill: none;
  stroke: rgba(74, 54, 38, 0.65);
  stroke-width: 3;
  stroke-dasharray: 10 8;
  stroke-linecap: round;
}
.turn-v2-mark-road {
  fill: none;
  stroke: #4a3626;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.turn-v2-mark-route {
  fill: none;
  stroke: rgba(74, 54, 38, 0.75);
  stroke-width: 2.2;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
}
.turn-v2-mark-crack {
  fill: none;
  stroke: #4a3626;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.turn-v2-mark-flag {
  fill: #4a3626;
  stroke: #4a3626;
  stroke-width: 1.4;
}

/* warm inky vignette — darkens the edges slightly so the map feels
   like a world continuing past the frame rather than a printed page */
.turn-v2-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(13, 8, 4, 0) 40%,
      rgba(13, 8, 4, 0.35) 80%,
      rgba(13, 8, 4, 0.75) 100%);
}

/* ----- intro text, sitting on the map like a cartographer's title ----- */

.turn-v2-intro {
  position: absolute;
  top: clamp(2.5rem, 6vw, 4.5rem);
  left: clamp(4rem, 8vw, 6.5rem);
  z-index: 5;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(250, 240, 215, 0.92) 0%, rgba(240, 226, 195, 0.85) 100%);
  padding: clamp(1rem, 1.8vw, 1.6rem) clamp(1.3rem, 2.2vw, 2rem);
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 14px -6px rgba(40, 20, 8, 0.3),
    0 20px 40px -16px rgba(40, 20, 8, 0.35);
  transform: rotate(-0.6deg);
}
.turn-v2-intro .eyebrow {
  color: rgba(90, 42, 18, 0.85);
  margin-bottom: 0.3rem;
}
.turn-v2-intro .display {
  margin: 0;
  color: var(--ink-base);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

/* ----- the handwritten note scrap (shown after mark) ----- */

.turn-v2-note {
  position: absolute;
  top: 8%;
  right: 5%;
  left: auto;
  z-index: 11;
  width: clamp(240px, 24vw, 340px);
  transform: rotate(1.4deg) translateY(-8px);
  opacity: 0;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.3,1.1);
  pointer-events: none;
}
.turn-v2-stage[data-state="marked"] .turn-v2-note {
  opacity: 1;
  transform: rotate(1.4deg) translateY(0);
}
.turn-v2-note-paper {
  background: var(--parchment-light);
  padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2vw, 1.7rem);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 2px 6px rgba(60, 30, 10, 0.2),
    0 18px 30px -10px rgba(40, 20, 8, 0.55);
  position: relative;
  transition: background-color 300ms ease;
}
.turn-v2-note-paper::before,
.turn-v2-note-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* subtle paper fiber */
.turn-v2-note-paper::before {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.28  0 0 0 0 0.16  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.35;
  mix-blend-mode: multiply;
}
/* torn edge hint — a thin highlight along the top-left */
.turn-v2-note-paper::after {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 2px;
}
.turn-v2-note-body {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: 'Caveat', cursive;
  font-size: clamp(1.3rem, 1.65vw, 1.75rem);
  line-height: 1.4;
  color: var(--ink-base);
  transition: color 300ms ease;
}

/* tone-matched paper and ink — mirrors the Take-a-turn original */
.turn-v2-note[data-tone="twilight"] .turn-v2-note-paper { background: var(--twilight-light); }
.turn-v2-note[data-tone="twilight"] .turn-v2-note-body  { color: var(--twilight-dark); }
.turn-v2-note[data-tone="bright"]   .turn-v2-note-paper { background: var(--bright-light); }
.turn-v2-note[data-tone="bright"]   .turn-v2-note-body  { color: var(--bright-dark); }
.turn-v2-note[data-tone="bleak"]    .turn-v2-note-paper { background: var(--bleak-light); }
.turn-v2-note[data-tone="bleak"]    .turn-v2-note-body  { color: var(--bleak-dark); }

/* ----- the drawn card, mirrored on the left opposite the deck ----- */

.turn-v2-drawn-wrap {
  position: absolute;
  left: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  z-index: 9;
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 2 / 3;
  pointer-events: none;
  opacity: 0;
  transform: translateX(60vw) rotate(14deg);
  transition: opacity 400ms ease, transform 850ms cubic-bezier(.25,.8,.3,1.05);
}
.turn-v2-stage[data-state="marked"] .turn-v2-drawn-wrap {
  opacity: 1;
  transform: translateX(0) rotate(-4deg);
}
/* every fresh card re-deals — JS retriggers this by toggling .is-dealing
   (NOT ".deal" — that's the takeaways card fan, ~line 3000) */
@keyframes turnV2Deal {
  from { opacity: 0; transform: translateX(60vw) rotate(14deg); }
  to   { opacity: 1; transform: translateX(0) rotate(-4deg); }
}
.turn-v2-drawn-wrap.is-dealing {
  animation: turnV2Deal 850ms cubic-bezier(.25, .8, .3, 1.05) both;
}
.turn-v2-drawn-card {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  filter: drop-shadow(0 18px 30px rgba(30, 15, 5, 0.55));
  overflow: hidden;
}
.turn-v2-drawn-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- deck, lower-right — the demo's one control -----
   Sits above the closing overlay (z 12) so "Play the Age again"
   stays clickable through the dark curtain. */

.turn-v2-deck-wrap {
  position: absolute;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.turn-v2-deck {
  position: relative;
  width: clamp(180px, 16vw, 240px);
  aspect-ratio: 2 / 3;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  transition: transform 200ms ease, opacity 500ms ease;
}
.turn-v2-deck:hover { transform: translateY(-3px); }
.turn-v2-deck:active { transform: translateY(-1px); }
/* while a mark is being inked, the card stack steps back so it can't
   cover marks in the map's east (Lands End sits under it otherwise);
   the pill beneath stays solid — it's the button. Hover brings the
   stack back. */
.turn-v2-stage[data-state="marked"] .turn-v2-deck {
  opacity: 0.25;
}
.turn-v2-stage[data-state="marked"] .turn-v2-deck-wrap:hover .turn-v2-deck {
  opacity: 1;
}
.turn-v2-deck-stack-1,
.turn-v2-deck-stack-2,
.turn-v2-deck-stack-3 {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 240, 210, 0.15) inset,
    0 14px 24px -6px rgba(20, 10, 5, 0.55),
    0 28px 50px -14px rgba(20, 10, 5, 0.5);
}
.turn-v2-deck-stack-1 img,
.turn-v2-deck-stack-2 img,
.turn-v2-deck-stack-3 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.turn-v2-deck-stack-3 { transform: translate(8px, 8px) rotate(2deg); }
.turn-v2-deck-stack-2 { transform: translate(4px, 4px) rotate(-1.2deg); }
.turn-v2-deck-stack-1 { transform: rotate(0.4deg); }
/* the pill under the deck — a real button. Its label names the one
   thing a click does next: Draw a card → Next turn / Next prompt →
   Play the Age again. */
.turn-v2-deck-hint {
  margin: 0;
  border: 0;
  cursor: pointer;
  padding: 0.7rem 1.5rem;
  background: var(--ink-dark, #1c1610);
  color: var(--parchment-light, #f5edd8);
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.5);
  transition: transform 200ms ease, background 200ms ease;
}
.turn-v2-deck-hint:hover {
  background: #000;
  transform: translateY(-2px);
}
.turn-v2-deck-hint:active { transform: translateY(0); }

/* ----- closing overlay — the dramatic end-of-turn moment -----
   After the handwritten note finishes typing, JS sets data-overlay
   to 'beat1' (first line fades in) then 'beat2' a few seconds later
   (first line fades out, second line fades in from the same spot).
   The overlay sits above the map/pin/note but below the actions row
   so the "Draw another" button remains tappable throughout. */

.turn-v2-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 2rem;
  background: radial-gradient(ellipse at center,
    rgba(13, 8, 4, 0.68) 0%,
    rgba(13, 8, 4, 0.88) 70%,
    rgba(13, 8, 4, 0.95) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}
.turn-v2-stage[data-overlay="beat1"] .turn-v2-overlay,
.turn-v2-stage[data-overlay="beat2"] .turn-v2-overlay {
  opacity: 1;
}

/* beats stack vertically — beat 1 stays; beat 2 fades in beneath it */
.turn-v2-overlay-beat {
  margin: 0;
  text-align: center;
  max-width: min(90%, 820px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1100ms ease, transform 1100ms cubic-bezier(.2,.7,.3,1.05);
  pointer-events: none;
}
.turn-v2-overlay-beat-1 {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.15;
  color: rgba(245, 225, 190, 0.98);
}
.turn-v2-overlay-beat-2 {
  font-size: clamp(1.5rem, 4.2vw, 2.8rem);
  color: rgba(212, 158, 102, 0.96);
}

/* beat 1 on: line 1 visible */
.turn-v2-stage[data-overlay="beat1"] .turn-v2-overlay-beat-1 {
  opacity: 1;
  transform: translateY(0);
}

/* beat 2 on: line 1 stays, line 2 fades in below */
.turn-v2-stage[data-overlay="beat2"] .turn-v2-overlay-beat-1 {
  opacity: 1;
  transform: translateY(0);
}
.turn-v2-stage[data-overlay="beat2"] .turn-v2-overlay-beat-2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}

/* ----- responsive tuning -----
   Three modes:
     ≥ 961px   — full cinematic: drawn card slides in left, deck bottom-right
     641-960px — tighten cinematic: same layout, smaller components
     ≤ 640px   — restructure: drawn card flips in-place on the deck,
                 note becomes a top strip, intro compacts, actions sit
                 above the deck. The left-mirrored drawn card is abandoned
                 because there's no room for it on a phone. */

/* tablet — keep the cinematic layout, tighten proportions */
@media (max-width: 960px) and (min-width: 641px) {
  .turn-v2-stage {
    aspect-ratio: 4 / 5;
    min-height: 560px;
    max-height: 820px;
  }
  .turn-v2-intro {
    top: 1.25rem;
    left: 1.25rem;
    right: auto;
    max-width: min(62%, 380px);
  }
  .turn-v2-intro .display { font-size: clamp(1.6rem, 4vw, 2.2rem); }
  .turn-v2-note {
    top: 1.25rem;
    right: 1.25rem;
    width: min(42%, 300px);
  }
  .turn-v2-note-body { font-size: clamp(1.1rem, 1.9vw, 1.45rem); }
  .turn-v2-drawn-wrap {
    width: clamp(150px, 24vw, 210px);
    left: 1.25rem;
    bottom: 1.25rem;
  }
  .turn-v2-deck,
  .turn-v2-deck-wrap { width: clamp(150px, 24vw, 210px); }
  .turn-v2-deck-wrap {
    right: 1.25rem;
    bottom: 1.25rem;
  }
}

/* ----- PHONE / SHORT-SCREEN  ·  two scenes -----
   On phones the cinematic multi-element layout collapses into two
   full-screen scenes driven by data-state:
     idle    — deck back fills the screen; tap to draw
     marked  — map fills the screen, focused on the pin's region; the
               fresh card flashes over it (deal animation) then fades;
               the note slides in from the edge OPPOSITE the pin; the
               pill button docks bottom-center
   JS sets data-pin-half to pick the note's entry edge. */
@media (max-width: 640px), (max-height: 500px) and (max-width: 960px) {
  .turn-v2-stage {
    height: 100svh;
    min-height: 100svh;
    aspect-ratio: auto;
    background: #0d0804;
  }

  /* MAP — hidden until marked; then JS pans the sheet to the new mark */
  .turn-v2-map {
    opacity: 0;
    transition: opacity 600ms ease;
  }
  .turn-v2-stage[data-state="marked"] .turn-v2-map { opacity: 1; }

  /* vignette only in the marked scene — idle/drawn sit on clean black */
  .turn-v2-vignette {
    opacity: 0;
    transition: opacity 500ms ease;
  }
  .turn-v2-stage[data-state="marked"] .turn-v2-vignette { opacity: 1; }

  /* INTRO — small tab at top of the idle scene only */
  .turn-v2-intro {
    top: 1.25rem;
    left: 1rem;
    right: 1rem;
    max-width: none;
    padding: 0.8rem 1rem;
    background: linear-gradient(180deg, #faf0d7 0%, #f0e2c3 100%);
    opacity: 0;
    transform: rotate(-0.6deg) translateY(-12px);
    transition: opacity 400ms ease, transform 400ms ease;
    pointer-events: none;
  }
  .turn-v2-stage[data-state="idle"] .turn-v2-intro {
    opacity: 1;
    transform: rotate(-0.6deg) translateY(0);
  }
  .turn-v2-intro .eyebrow { font-size: 0.7rem; margin-bottom: 0.2rem; }
  .turn-v2-intro .display { font-size: 1.4rem; line-height: 1.15; }

  /* DECK — hero of the idle scene; once playing, the stack hides and
     the pill button docks bottom-center as the one persistent control */
  .turn-v2-deck-wrap {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(64vw, 48vh);
    gap: 1.1rem;
  }
  .turn-v2-deck { width: 100%; }
  .turn-v2-stage[data-state="marked"] .turn-v2-deck-wrap {
    top: auto;
    bottom: 1.25rem;
    width: auto;
    transform: translateX(-50%);
    transition: none;
  }
  .turn-v2-stage[data-state="marked"] .turn-v2-deck { display: none; }
  .turn-v2-deck-hint { font-size: 0.8rem; }

  /* DRAWN CARD — flashes over the map when a fresh card deals, then
     fades so the mark and note underneath take the scene. Resting
     state is hidden; the .is-dealing animation is the only appearance. */
  .turn-v2-drawn-wrap {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(68vw, 52vh);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: none;
  }
  @keyframes turnV2DealMobile {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    10%  { opacity: 1; transform: translate(-50%, -50%) rotate(-1.2deg) scale(1); }
    72%  { opacity: 1; transform: translate(-50%, -50%) rotate(-1.2deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  }
  .turn-v2-drawn-wrap.is-dealing {
    animation: turnV2DealMobile 2600ms ease both;
  }

  /* NOTE — slides in from the edge OPPOSITE the pin's half of the map */
  .turn-v2-note {
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: none;
    opacity: 0;
    pointer-events: none;
  }
  .turn-v2-note-paper { padding: 1rem 1.2rem; }
  .turn-v2-note-body  { font-size: 1.3rem; line-height: 1.4; }

  /* pin in top half → note docks at bottom, enters from below */
  .turn-v2-stage[data-pin-half="top"] .turn-v2-note {
    top: auto;
    bottom: 5.5rem;
    transform: translateY(60vh) rotate(1.4deg);
    transition: opacity 500ms ease 200ms, transform 750ms cubic-bezier(.2,.7,.3,1.1) 200ms;
  }
  .turn-v2-stage[data-state="marked"][data-pin-half="top"] .turn-v2-note {
    opacity: 1;
    transform: translateY(0) rotate(1.4deg);
  }

  /* pin in bottom half → note docks at top, enters from above */
  .turn-v2-stage[data-pin-half="bottom"] .turn-v2-note {
    top: 1.25rem;
    bottom: auto;
    transform: translateY(-60vh) rotate(1.4deg);
    transition: opacity 500ms ease 200ms, transform 750ms cubic-bezier(.2,.7,.3,1.1) 200ms;
  }
  .turn-v2-stage[data-state="marked"][data-pin-half="bottom"] .turn-v2-note {
    opacity: 1;
    transform: translateY(0) rotate(1.4deg);
  }
  /* note at the top shares the corner with the fixed crescent nav —
     indent the script title so they don't collide */
  .turn-v2-stage[data-pin-half="bottom"] .turn-v2-note-name { padding-left: 1.8rem; }

}

/* landscape phones — tiny extra tightening so the deck/card don't spill */
@media (max-height: 500px) and (max-width: 960px) {
  .turn-v2-deck-wrap { width: min(36vh, 42vw); gap: 0.5rem; }
  .turn-v2-drawn-wrap { width: min(40vh, 46vw); }
  /* intro anchored top-left, narrow so it doesn't overlap the center deck */
  .turn-v2-intro {
    top: 0.6rem;
    left: 0.75rem;
    right: auto;
    max-width: 220px;
    padding: 0.5rem 0.85rem;
  }
  .turn-v2-intro .eyebrow { font-size: 0.6rem; }
  .turn-v2-intro .display { font-size: 1.15rem; line-height: 1.2; }
  .turn-v2-deck-hint { padding: 0.55rem 1.2rem; font-size: 0.72rem; }
  .turn-v2-stage[data-state="marked"] .turn-v2-deck-wrap { bottom: 0.75rem; }
  .turn-v2-stage[data-pin-half="top"] .turn-v2-note { bottom: 3.5rem; }
  .turn-v2-stage[data-pin-half="bottom"] .turn-v2-note { top: 0.6rem; }
  .turn-v2-stage[data-pin-half="bottom"] .turn-v2-note-name { padding-left: 2.2rem; }
  .turn-v2-note-body { font-size: 1.1rem; line-height: 1.35; }
  .turn-v2-note-paper { padding: 0.65rem 0.95rem; }
}
/* =====================================================================
   §3 · HOW THE GAME WORKS  ·  The Shape of an Age
   Four beats: opening → anatomy of a card → end of an age → the world finished.
   ===================================================================== */

.section-how {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

/* ---------- Beat 1 · The Opening ---------- */

.how-open {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.how-open .eyebrow { color: var(--bleak-base); }
.how-open-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 1.75rem;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.08;
  font-style: italic;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.how-open-line:nth-child(1) { color: var(--ink-base); }
.how-open-line:nth-child(2) { color: var(--ink-light); }
.how-open-line:nth-child(3) { color: var(--bleak-base); }
.how-open-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-base);
  max-width: 38ch;
  margin: 0 auto;
  line-height: 1.55;
}

/* ---------- Shared beat shell ---------- */

.how-beat {
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.how-beat:last-child { padding-bottom: 0; }

.eyebrow-quiet {
  color: var(--ink-light);
  opacity: 0.75;
}

/* ---------- Beat 2 · Anatomy of a card ---------- */

.how-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

.how-card-wrap {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.how-card-hero {
  display: block;
  width: clamp(320px, 42vw, 480px);
  height: auto;
  box-shadow:
    0 30px 64px rgba(28, 22, 16, 0.34),
    0 10px 18px rgba(28, 22, 16, 0.18);
  border-radius: 10px;
  transform: rotate(-0.6deg);
}

.how-annots {
  display: flex;
  flex-direction: column;
}
.how-annots-left {
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
  padding-bottom: clamp(6rem, 10vw, 9.5rem);
}
.how-annots-right {
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  padding-top: clamp(4rem, 6.5vw, 7rem);
  padding-bottom: clamp(7rem, 11vw, 11rem);
}

.how-annot {
  display: block;
  font-family: var(--ui);
  line-height: 1.5;
  max-width: 24rem;
}
.how-annot-kind {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bleak-base);
  margin-bottom: 0.35rem;
}
.how-annot-word {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 500;
  color: var(--ink-dark);
  line-height: 1.05;
  margin-bottom: 0.55rem;
}
.how-annot-hook {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  color: var(--ink-base);
  line-height: 1.55;
}
.how-annot-hook em {
  font-style: italic;
  color: var(--ink-dark);
}

/* Tone row — visible inside the top annotation, teaches the icon-to-tone link */
.how-tones {
  display: flex;
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  margin: 0.65rem 0 1rem;
  align-items: flex-start;
  justify-content: flex-end;
}
.how-tone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.how-tone img {
  width: clamp(32px, 3.4vw, 42px);
  height: auto;
  display: block;
}
.how-tone-label {
  font-family: var(--ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.how-tone-bleak .how-tone-label { color: var(--bleak-base); }
.how-tone-twilight .how-tone-label { color: var(--twilight-base); }
.how-tone-bright .how-tone-label { color: var(--bright-base); }

/* Desktop — connector ticks point toward the card from the annotation side */
@media (min-width: 900px) {
  /* Left-column annotations: tick on the right, pointing at the card */
  .how-annots-left .how-annot { position: relative; padding-right: 2.25rem; }
  .how-annots-left .how-annot::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0.95rem;
    width: 1.75rem;
    height: 1px;
    background: var(--ink-light);
    opacity: 0.42;
  }

  /* Right-column annotation: tick on the left, pointing at the card */
  .how-annots-right .how-annot { position: relative; padding-left: 2.25rem; }
  .how-annots-right .how-annot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 1.75rem;
    height: 1px;
    background: var(--ink-light);
    opacity: 0.42;
  }
}

/* Mobile / tablet: flatten to single column; card first, annotations in card reading order */
@media (max-width: 899px) {
  .how-anatomy-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
  /* Flatten column wrappers so individual annotations become direct grid children */
  .how-annots-left, .how-annots-right {
    display: contents;
  }
  .how-card-wrap { order: 0; justify-content: center; }
  .how-card-hero {
    transform: none;
    width: clamp(260px, 65vw, 360px);
  }
  .how-annot {
    order: 1;
    max-width: 28rem;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }
  .how-annot-top { order: 1; }
  .how-annot-mid { order: 2; }
  .how-annot-mid2 { order: 3; }
  .how-annot-bot { order: 4; }
  .how-tones { justify-content: center; }
}

/* ---------- Beat 3 · The End of an Age ---------- */

.how-ending-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}

.how-ending-copy {
  padding-right: 1rem;
}
.how-ending-prelude {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--ink-base);
  margin: 0 0 0.6rem;
  line-height: 1.5;
}
.how-ending-head {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  color: var(--ink-dark);
  margin: 0 0 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.how-ending-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  color: var(--ink-base);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0;
}

/* The arc's closing line — the beat the whole section builds to */
.how-ending-final {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 500;
  color: var(--ink-dark);
  line-height: 1.3;
  margin: 1.5rem 0 0;
}

.how-ending-figure {
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.how-ending-figure img {
  width: clamp(280px, 38vw, 420px);
  height: auto;
  border-radius: 10px;
  box-shadow:
    0 30px 64px rgba(28, 22, 16, 0.34),
    0 10px 18px rgba(28, 22, 16, 0.18);
  transform: rotate(0.9deg);
}

@media (max-width: 899px) {
  .how-ending-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .how-ending-copy {
    padding-right: 0;
    text-align: center;
    max-width: 32rem;
    margin: 0 auto;
  }
  .how-ending-body { margin: 0 auto; }
  .how-ending-figure { justify-content: center; }
  .how-ending-figure img {
    transform: none;
    width: clamp(260px, 65vw, 360px);
  }
  /* Visual rhythm on mobile: card first, copy below */
  .how-ending-figure { order: -1; }
}

/* ---------- Beat 4 · The Payoff ---------- */

.how-payoff {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(58, 46, 31, 0.14);
}
.how-payoff-open {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-base);
  margin: 0 auto 1.75rem;
  max-width: 44ch;
  line-height: 1.55;
}
.how-payoff-hero {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.15;
  color: var(--ink-dark);
  margin: 0 auto 2.5rem;
  max-width: 22ch;
  font-weight: 500;
}
.how-takeaways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 0.5rem;
  text-align: left;
}
.takeaway {
  border-radius: 0.5rem;
  padding: clamp(1rem, 1.8vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.takeaway-bleak    { background: var(--bleak-light); }
.takeaway-twilight { background: var(--twilight-light); }
.takeaway-bright   { background: var(--bright-light); }
.takeaway-icon {
  width: clamp(26px, 2.6vw, 32px);
  height: auto;
  margin-bottom: 0.15rem;
}
.takeaway-head {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}
.takeaway-bleak    .takeaway-head { color: var(--bleak-dark); }
.takeaway-twilight .takeaway-head { color: var(--twilight-dark); }
.takeaway-bright   .takeaway-head { color: var(--bright-dark); }
.takeaway-body {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.5;
  margin: 0;
  color: var(--ink-base);
}
@media (max-width: 720px) {
  .how-takeaways { grid-template-columns: 1fr; }
}
.how-payoff-coda {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-base);
  margin: 2.25rem auto 0;
  max-width: 44ch;
  line-height: 1.55;
}

/* ---------- Beat 3 · The map ---------- */

/* The map beat reuses the how-ending grid; the figure just carries a
   map sheet instead of a card, so square it up and let it breathe. */
.how-map-figure img {
  width: clamp(300px, 42vw, 480px);
  transform: rotate(-0.8deg);
}

/* ---------- Beat 5 · Nutshell box + handoff ---------- */

/* At-a-glance box (The Quiet Year pattern) — scannable without
   reading the section. */
.how-nutshell {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1.5px solid rgba(58, 46, 31, 0.28);
  border-radius: 6px;
  background: rgba(245, 237, 216, 0.55);
  box-shadow: 0 12px 28px rgba(28, 22, 16, 0.08);
}
.how-nutshell-label {
  font-family: var(--ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bleak-base);
  margin: 0 0 1rem;
}
.how-nutshell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.how-nutshell-list li {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--ink-base);
  line-height: 1.45;
  padding-left: 1.5rem;
}
/* Crescent bullets — the arc mark, tinted ink */
.how-nutshell-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 0.8em;
  height: 0.8em;
  background: var(--bleak-base);
  -webkit-mask: url('../assets/brand/arc-mark.png') center / contain no-repeat;
          mask: url('../assets/brand/arc-mark.png') center / contain no-repeat;
}
.how-nutshell-note {
  color: var(--ink-light);
  font-style: italic;
}

/* One-line handoff into the demo below */
.how-handoff {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-base);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: 44ch;
  line-height: 1.55;
}

/* =====================================================================
   §6 · TAKEAWAYS  ·  after the demo, before the final ask
   Reuses the payoff/takeaway card styles — centered wrap, no top rule
   (the dark demo section above already provides the break).
   ===================================================================== */

.takeaways-wrap {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

/* =====================================================================
   §4 · SESSION NEGATIVE ONE  ·  pairing-deep-storm
   Dark storm-blue ground breaks the run of beige/tan above.
   Warm parchment pops on the title + climax quote; bleak-light carries body.
   (former §3.5 punch line is folded into this section's header eyebrow)
   ===================================================================== */

.section-session-zero {
  padding: clamp(5rem, 10vw, 8rem) 0;
}

/* ─── ONE header · matches §3's how-open anatomy ─── */
.sz-open {
  text-align: center;
  margin: 0 auto clamp(3.5rem, 7vw, 5.5rem);
  max-width: 50rem;
}
.sz-eyebrow {
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bleak-light);
  opacity: 0.65;
  margin: 0 0 1.4rem;
}
.sz-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3rem, 8.5vw, 6.75rem);
  line-height: 0.96;
  color: var(--parchment-light);
  margin: 0 0 2rem;
  letter-spacing: -0.012em;
}
.sz-title-row { display: block; }
/* ─── The definition lockup — the thesis, not a lead paragraph ─── */
.sz-lockup {
  margin: 0 auto;
  max-width: 46ch;
}
.sz-lockup-zero {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--bleak-light);
  opacity: 0.6;
  margin-bottom: 0.7rem;
}
.sz-lockup-one {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  color: var(--parchment-light);
  line-height: 1.3;
  text-wrap: balance;
}

/* ─── The Table — oversized cards around the reading surface,
       cropped by the section edges, dimmed and softened like objects
       just outside the lamplight. Content floats above the scene. ─── */
.section-session-zero { overflow: hidden; }
.section-session-zero .container {
  position: relative;
  z-index: 2;
}
.sz-table {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sz-table img {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  opacity: 0.42;
  filter: blur(2px) saturate(0.85);
}
.sz-table-c1 { width: clamp(220px, 24vw, 360px); top: -70px; left: -90px; transform: rotate(-24deg); }
.sz-table-c2 { width: clamp(200px, 21vw, 320px); top: 24%; right: -110px; transform: rotate(18deg); }
.sz-table-c3 { width: clamp(210px, 22vw, 340px); bottom: 6%; left: -80px; transform: rotate(14deg); }
.sz-table-c4 { width: clamp(170px, 18vw, 260px); bottom: -90px; right: 8%; transform: rotate(-12deg); opacity: 0.34; }
/* keep the reading center calm */
.sz-table::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 70% at 50% 42%, rgba(55, 65, 80, 0.88), transparent 72%);
}

/* ─── Prose — one measured column above the scene ─── */
.sz-prose {
  max-width: 58ch;
  margin: 0 auto;
}
.sz-prose > p {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.7vw, 1.24rem);
  line-height: 1.75;
  color: var(--bleak-light);
  opacity: 0.95;
  margin: 0 0 1.6em;
}
.sz-prose > p:last-child { margin-bottom: 0; }

/* ─── The callout — the phrase is coined, the product enters.
       The one sharp card in the scene. ─── */
.sz-callout {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4.5vw, 3.25rem);
  margin: clamp(3rem, 6vw, 4.5rem) auto;
  max-width: 56rem;
}
.sz-callout::before {
  content: "";
  position: absolute;
  inset: -22% -4%;
  background: radial-gradient(ellipse 55% 75% at 50% 50%, rgba(245, 237, 216, 0.10), transparent 70%);
  pointer-events: none;
}
.sz-callout-card {
  margin: 0;
  flex: 0 0 auto;
}
.sz-callout-card img {
  display: block;
  width: clamp(110px, 13vw, 160px);
  transform: rotate(-5deg);
  border-radius: 8px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 10px 20px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(215, 225, 235, 0.10);
}
.sz-callout-quote { margin: 0; }
.sz-callout-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  line-height: 1.18;
  color: var(--parchment-light);
  margin: 0;
  max-width: 18ch;
  letter-spacing: -0.005em;
}

/* ─── The closing line — GM agency, folds the section shut ─── */
.sz-close {
  font-style: italic !important;
  border-top: 1px solid rgba(215, 225, 235, 0.18);
  padding-top: 1.6em !important;
  margin-top: 0.4em !important;
}

@media (max-width: 820px) {
  .sz-callout {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  .sz-callout-quote p { max-width: none; }
  /* push the scene cards further out so phones keep a calm center */
  .sz-table-c1 { left: -130px; }
  .sz-table-c2 { right: -150px; }
  .sz-table-c3 { left: -140px; }
}


/* =====================================================================
   §5 · STILL BEING MADE  ·  pairing-evening-velvet
   ===================================================================== */

.section-signup {
  padding: clamp(6rem, 12vw, 10rem) 0;
  position: relative;
  overflow: hidden;
}
.section-signup::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(234, 221, 226, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(175, 145, 155, 0.12), transparent 60%);
  pointer-events: none;
}

/* Two-column: large tinted crescent flanks the ask. */
.signup-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.signup-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  justify-self: center;
}
.signup-crescent {
  width: 100%;
  height: 100%;
  background: linear-gradient(155deg, var(--twilight-light) 0%, var(--parchment-light) 100%);
  -webkit-mask: url('../assets/brand/arc-mark.png') center / contain no-repeat;
          mask: url('../assets/brand/arc-mark.png') center / contain no-repeat;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.35));
  opacity: 0.92;
}

.signup-body {
  position: relative;
  text-align: left;
}
.signup-body .eyebrow-light { color: var(--twilight-light); opacity: 0.8; }
.signup-body .display-light {
  color: var(--twilight-light);
  margin-bottom: 2rem;
  max-width: 18ch;
  margin-inline: 0;
}
/* The three-sentence offer headline runs longer than the old display
   line — size down a notch and let it wrap wider. */
.signup-body .signup-head {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  max-width: 22ch;
  line-height: 1.12;
}

.signup-copy {
  max-width: 50ch;
  margin: 0 0 2.5rem;
}
.signup-copy p {
  color: var(--twilight-light);
  font-size: 1.08rem;
  line-height: 1.6;
  opacity: 0.94;
}
.signup-ask {
  margin-top: 1.5rem !important;
  font-style: italic;
  color: var(--parchment-light) !important;
  font-size: 1.18rem !important;
  opacity: 1 !important;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 420px;
  margin: 0 0 1rem;
}
.signup-form input[type="email"],
.signup-form button {
  width: 100%;
  box-sizing: border-box;
}
.signup-form button { justify-content: center; }
.signup-form input[type="email"] {
  min-width: 0;
  padding: 1em 1.25em;
  border-radius: 2px;
  border: 1.5px solid rgba(245, 237, 216, 0.35);
  background: rgba(245, 237, 216, 0.08);
  color: var(--parchment-light);
  font-family: var(--serif);
  font-size: 1rem;
  transition: all 220ms ease;
}
.signup-form input[type="email"]::placeholder {
  color: rgba(245, 237, 216, 0.55);
  font-style: italic;
}
.signup-form input[type="email"]:focus {
  outline: none;
  border-color: var(--parchment-light);
  background: rgba(245, 237, 216, 0.14);
}

/* Reward line — a small callout under the form, distinct from the
   body copy. One sentence; deliberately not a second button. */
.signup-reward {
  margin: 1.75rem 0 0;
  padding: 0.85rem 1.1rem;
  border-left: 2px solid var(--parchment-dark);
  background: rgba(245, 237, 216, 0.07);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--twilight-light);
  max-width: 46ch;
}

.signup-fine {
  font-family: var(--ui);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(234, 221, 226, 0.7);
  margin-top: 1rem;
  font-weight: 400;
}
.signup-success,
.signup-error {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--parchment-light);
  font-size: 1.08rem;
}

@media (max-width: 860px) {
  .signup-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .signup-art {
    max-width: 280px;
    justify-self: center;
  }
  .signup-body { text-align: center; }
  .signup-body .display-light { margin-inline: auto; }
  .signup-copy { margin-inline: auto; }
  .signup-form { margin-inline: auto; justify-content: center; }
  .signup-reward { margin-inline: auto; text-align: left; }
}

/* =====================================================================
   §6 · FOOTER
   ===================================================================== */

.site-footer {
  background: var(--ink-dark);
  color: var(--parchment-base);
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(245, 237, 216, 0.08);
}
.footer-mark {
  width: 38px;
  margin: 0 auto 1.25rem;
  opacity: 0.65;
  filter: invert(1);
}
.footer-quote {
  font-family: var(--serif);
  font-style: italic;
  color: var(--parchment-light);
  font-size: 1.05rem;
  margin: 0 0 0.6em;
  opacity: 0.9;
}
.footer-descriptor {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-dark);
  margin: 0 0 2rem;
  font-weight: 500;
}
.footer-descriptor a { color: inherit; }
.footer-descriptor a:hover { color: var(--parchment-light); }
.footer-meta {
  font-family: var(--ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 184, 149, 0.55);
  margin: 0;
  font-weight: 500;
}


/* ---------------------------------------------------------------------
   THE TURN — answered-question line on the handwritten note.
   On your turn you answer exactly ONE of the card's three questions;
   this names which one the note below answers.
   --------------------------------------------------------------------- */

.turn-v2-note-name {
  position: relative;
  z-index: 2;
  margin: 0 0 0.1em;
  font-family: 'Caveat', cursive;
  font-size: clamp(1.7rem, 2.2vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-base);
  transition: color 300ms ease;
}
.turn-v2-note-name:empty { display: none; }
.turn-v2-note[data-tone="twilight"] .turn-v2-note-name { color: var(--twilight-dark); }
.turn-v2-note[data-tone="bleak"] .turn-v2-note-name { color: var(--bleak-dark); }
.turn-v2-note[data-tone="bright"] .turn-v2-note-name { color: var(--bright-dark); }

.turn-v2-note-question {
  position: relative;
  z-index: 2;
  margin: 0 0 0.35em;
  font-family: var(--ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.turn-v2-note-question:empty { display: none; }
.turn-v2-note[data-tone="twilight"] .turn-v2-note-question { color: var(--twilight-dark); }
.turn-v2-note[data-tone="bleak"] .turn-v2-note-question { color: var(--bleak-dark); }
.turn-v2-note[data-tone="bright"] .turn-v2-note-question { color: var(--bright-dark); }

/* ---------------------------------------------------------------------
   SUBPAGES — Setup & How to Play, Playtest landing.
   Quiet ink-on-parchment reading pages that reuse the site tokens.
   --------------------------------------------------------------------- */

.page-masthead {
  padding: clamp(2rem, 4vw, 3rem) var(--pad-inline) 0;
  display: flex;
  justify-content: center;
}
.page-masthead a { display: inline-block; }
.page-masthead img { width: clamp(120px, 16vw, 170px); }

.page-header {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-inline) 0;
  text-align: center;
}
.page-header .display { margin-bottom: 0.4em; }
.page-lead {
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-base);
  max-width: 56ch;
  margin: 0 auto;
}

.page-body {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 0 var(--pad-inline) var(--pad-block);
}
.page-section { padding-top: clamp(3rem, 6vw, 4.5rem); }
.page-section h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  scroll-margin-top: 4.5rem;
}
.page-section h3 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  margin-top: 1.6em;
}
.page-section ol,
.page-section ul { padding-left: 1.3em; margin: 0 0 1.05em; }
.page-section li { margin-bottom: 0.55em; }
.page-note {
  font-size: 0.95rem;
  color: var(--ink-base);
}

/* Boxed callout, as in the PnP — Bright-tinted advice box */
.page-callout {
  border: 0;
  border-left: 4px solid var(--bright-base);
  background: rgba(217, 223, 203, 0.5);
  border-radius: 2px;
  padding: 1.1em 1.4em;
  margin: 1.6em 0;
  color: var(--bright-dark);
}
.page-callout p { margin: 0; }

/* Setup reference table — breaks out of the prose column so it fits,
   zebra-striped (see rules further down), with scroll shadows when it
   still overflows on phones */
.page-table-wrap {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - 2 * var(--pad-inline)));
  overflow-x: auto;
  margin: 1.5em 0;
  background-image:
    linear-gradient(to right, var(--parchment-light), var(--parchment-light)),
    linear-gradient(to right, var(--parchment-light), var(--parchment-light)),
    linear-gradient(to right, rgba(28, 22, 16, 0.14), transparent),
    linear-gradient(to left, rgba(28, 22, 16, 0.14), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.page-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 820px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.page-table th,
.page-table td {
  border: 1px solid var(--parchment-dark);
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
}
.page-table th {
  font-family: var(--ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dark);
  background: rgba(196, 184, 149, 0.25);
}

/* The two doors — the playtest page's main actions */
.page-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: 2.25em 0 0;
}
@media (max-width: 720px) { .page-doors { grid-template-columns: 1fr; } }
.page-door {
  border: 1.5px solid var(--parchment-dark);
  background: rgba(245, 237, 216, 0.6);
  border-radius: 2px;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.page-door h3 { margin-top: 0; }
.page-door .btn { margin-top: auto; align-self: flex-start; }
.page-door p { margin-bottom: 1.2em; }

/* Forms on subpages — parchment context (ink inputs on light ground) */
.page-form { margin-top: 1.5em; }
.page-form fieldset {
  border: 1.5px solid var(--parchment-dark);
  border-radius: 2px;
  padding: 1.2em 1.4em 1.4em;
  margin: 0 0 1.5em;
}
.page-form legend {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dark);
  padding: 0 0.5em;
}
.page-form label {
  display: block;
  font-family: var(--ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-dark);
  margin: 1em 0 0.35em;
}
.page-form label:first-of-type { margin-top: 0; }
.page-form input[type="text"],
.page-form input[type="email"],
.page-form input[type="number"],
.page-form select,
.page-form textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-dark);
  background: var(--parchment-light);
  border: 1.5px solid var(--parchment-dark);
  border-radius: 2px;
}
.page-form input:focus,
.page-form select:focus,
.page-form textarea:focus {
  outline: none;
  border-color: var(--ink-light);
}
.page-form textarea { min-height: 7em; resize: vertical; }
.page-form .form-help {
  font-family: var(--ui);
  font-size: 0.78rem;
  color: var(--ink-light);
  margin: 0.35em 0 0;
}
.page-form .form-note {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-light);
  margin: 0 0 1em;
}
.form-inline-group { display: flex; gap: 1.5em; flex-wrap: wrap; }
.form-inline-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0.5em 0 0;
  font-weight: 400;
}
.form-rating { margin-bottom: 0.5em; }
.form-rating-scale {
  display: flex;
  align-items: center;
  gap: 0.9em;
  flex-wrap: wrap;
}
.form-rating-scale .form-scale-cap {
  font-family: var(--ui);
  font-size: 0.72rem;
  color: var(--ink-light);
}
.form-rating-scale label {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  font-weight: 400;
}
.form-check label {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 500;
}
.form-repeater-list { display: flex; flex-direction: column; gap: 0.6em; margin-bottom: 0.6em; }
.btn-quiet {
  background: transparent;
  color: var(--ink-dark);
  border-color: var(--ink-light);
}
.btn-quiet:hover {
  background: rgba(58, 46, 31, 0.08);
  color: var(--ink-dark);
  border-color: var(--ink-dark);
}
.page-form-success {
  border: 1.5px solid var(--bright-dark);
  background: rgba(217, 223, 203, 0.5);
  border-radius: 2px;
  padding: 1.1em 1.4em;
  color: var(--bright-dark);
  font-weight: 500;
}

/* Newsletter block on subpages reuses the signup form pattern on parchment */
.page-newsletter-form {
  display: flex;
  gap: 0.75em;
  flex-wrap: wrap;
  margin-top: 1.25em;
}
.page-newsletter-form input[type="email"] {
  flex: 1 1 260px;
  padding: 0.9em 1.1em;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-dark);
  background: var(--parchment-light);
  border: 1.5px solid var(--parchment-dark);
  border-radius: 2px;
}
.page-newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--ink-light);
}

/* Masthead mark on parchment subpages — the wordmark PNGs are
   light-on-dark assets; the arc mark carries the brand here. */
.page-masthead-mark { width: clamp(56px, 7vw, 76px); }

/* =====================================================================
   §7 · SUBSCRIBE  ·  pairing-moss-shade — the quiet second ask.
   A different register from the velvet CTA above: centered, spare,
   deep Bright green. Just "keep in touch."
   ===================================================================== */

.section-subscribe {
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}
.section-subscribe::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(217, 223, 203, 0.10), transparent 70%),
    radial-gradient(ellipse 45% 40% at 8% 0%, rgba(128, 139, 115, 0.25), transparent 60%);
  pointer-events: none;
}

.subscribe-wrap {
  position: relative;
  text-align: center;
}
.subscribe-eyebrow { color: var(--bright-light); opacity: 0.75; }
.subscribe-head {
  color: var(--bright-light);
  margin-bottom: 0.5em;
}
.subscribe-body {
  color: var(--bright-light);
  opacity: 0.92;
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto 2.25rem;
}

/* Single-row form — overrides the stacked .signup-form defaults */
.subscribe-form {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto 0.75rem;
}
.subscribe-form input[type="email"] {
  flex: 1 1 240px;
  width: auto;
  border-color: rgba(217, 223, 203, 0.4);
  background: rgba(217, 223, 203, 0.1);
  color: var(--bright-light);
}
.subscribe-form input[type="email"]::placeholder {
  color: rgba(217, 223, 203, 0.6);
}
.subscribe-form input[type="email"]:focus {
  border-color: var(--bright-light);
  background: rgba(217, 223, 203, 0.16);
}
.subscribe-form button {
  width: auto;
  flex: 0 0 auto;
}

.section-subscribe .signup-success,
.section-subscribe .signup-error {
  color: var(--bright-light);
  text-align: center;
}
.subscribe-fine {
  font-family: var(--ui);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(217, 223, 203, 0.65);
  margin: 1rem 0 0;
  font-weight: 400;
}

@media (max-width: 560px) {
  .subscribe-form { flex-direction: column; }
  .subscribe-form input[type="email"],
  .subscribe-form button { width: 100%; }
  .subscribe-form button { justify-content: center; }
}

/* =====================================================================
   CONTENT PAGES — the shared template for non-homepage pages.
   Anatomy: compass nav (same component as the homepage) → dark
   content-hero band → optional sticky TOC → parchment body → footer.
   ===================================================================== */

/* Crescent tint over the two content-page zones */
body[data-nav-section="content-hero"] {
  --compass-tint: var(--parchment-light);
  --compass-glow: rgba(245, 237, 216, 0.32);
  --compass-shadow: rgba(0, 0, 0, 0.55);
}
body[data-nav-section="content-body"] {
  --compass-tint: var(--ink-base);
  --compass-glow: rgba(28, 22, 16, 0.18);
  --compass-shadow: rgba(28, 22, 16, 0.30);
}

/* The dark hero band — ties every content page back to the homepage */
.content-hero {
  background: var(--ink-dark);
  color: var(--parchment-light);
  text-align: center;
  padding: clamp(5.5rem, 9vw, 7.5rem) var(--pad-inline) clamp(3.5rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.content-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 120%, rgba(126, 100, 72, 0.28), transparent 70%),
    radial-gradient(ellipse 45% 50% at 90% 0%, rgba(95, 115, 140, 0.16), transparent 60%);
  pointer-events: none;
}
.content-hero > * { position: relative; }
/* The lockup mirrors the card back: the stacked wordmark seated inside
   the brush crescent. The crescent is the arc-mark PNG used as a mask
   (oversized + nudged so the visible circle fills the box — the source
   canvas has transparent padding and an off-center crescent). */
.content-hero-wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(190px, 22vw, 244px);
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
}
.content-hero-wordmark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--parchment-dark);
  opacity: 0.9;
  -webkit-mask: url('../assets/brand/arc-mark.png') 46% 54% / 158% no-repeat;
          mask: url('../assets/brand/arc-mark.png') 46% 54% / 158% no-repeat;
}
.content-hero-wordmark img {
  position: relative;
  width: 43%;
  opacity: 0.96;
  margin: 0 auto;
  /* The brush stroke is thick on the left, so the crescent's open
     center sits right of the box center — seat the wordmark there. */
  transform: translateX(10%);
}
.content-hero .display-light {
  margin: 0 auto 0.45em;
  max-width: 26ch;
}
.content-hero-lead {
  color: var(--parchment-light);
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto;
}

/* Contents — a rulebook-style index. The parchment panel overlaps the
   hero's bottom edge like a card dealt onto the dark band. Each row is
   a full-width link: Age-style Roman numeral, section title, dotted
   leader, and the section's eyebrow phrase where a book would put the
   page number. */
.page-contents {
  position: relative;
  z-index: 2;
  max-width: var(--max-narrow);
  margin: clamp(-2.75rem, -4vw, -2.25rem) auto 0;
  padding: 0 var(--pad-inline);
}
.page-contents-panel {
  background: var(--parchment-light);
  border: 1px solid var(--parchment-dark);
  border-radius: 3px;
  box-shadow: 0 18px 40px -18px rgba(28, 22, 16, 0.45);
  padding: clamp(1.15rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem) clamp(0.9rem, 2vw, 1.3rem);
}
.page-contents .eyebrow { margin-bottom: 0.7em; }
.page-contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-contents li + li { border-top: 1px solid rgba(196, 184, 149, 0.5); }
.page-contents a {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  padding: 0.62em 0.15em;
  color: var(--ink-base);
}
.pc-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bleak-base);
  min-width: 1.9em;
  transition: color 0.2s ease;
}
.pc-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.15rem);
  transition: color 0.2s ease;
}
.pc-leader {
  flex: 1;
  min-width: 1.5em;
  border-bottom: 2px dotted rgba(126, 100, 72, 0.45);
  transform: translateY(-0.3em);
}
.pc-note {
  font-family: var(--ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-light);
  white-space: nowrap;
}
.page-contents a:hover .pc-title { color: var(--bleak-dark); }
.page-contents a:hover .pc-num { color: var(--bleak-dark); }
@media (max-width: 560px) {
  .pc-leader,
  .pc-note { display: none; }
}

/* Section eyebrows reuse the site eyebrow above each h2 */
.page-section .eyebrow { margin-bottom: 0.6em; }

/* Numbered play steps — big serif numerals in the accent color */
.steps-list {
  list-style: none;
  counter-reset: step;
  padding-left: 0 !important;
  margin: 0 0 1.05em;
}
.steps-list > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.1rem;
  margin-bottom: 1.1em;
  min-height: 2.2rem;
}
.steps-list > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--bleak-base);
}

/* Tone chips — the three Tones, in their colors, wherever they're named */
.tone-chips {
  display: inline-flex;
  gap: 0.5em;
  vertical-align: middle;
  flex-wrap: wrap;
}
.tone-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.65em 0.15em 0.45em;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tone-chip img { width: 15px; height: 15px; }
.tone-chip-bright   { background: var(--bright-light);   color: var(--bright-dark); }
.tone-chip-twilight { background: var(--twilight-light); color: var(--twilight-dark); }
.tone-chip-bleak    { background: var(--bleak-light);    color: var(--bleak-dark); }

/* Age deck cards — each Age carries its End-of-Age Tone */
.age-cards {
  display: grid;
  gap: 1.25rem;
  margin: 1.75em 0;
}
.age-card {
  border-radius: 3px;
  padding: 1.4em 1.6em 1.5em;
  border-left: 4px solid;
}
.age-card-bleak    { background: rgba(215, 225, 235, 0.45); border-color: var(--bleak-base); }
.age-card-twilight { background: rgba(234, 221, 226, 0.45); border-color: var(--twilight-base); }
.age-card-bright   { background: rgba(217, 223, 203, 0.5);  border-color: var(--bright-base); }
.age-card-header {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-wrap: wrap;
  margin-bottom: 0.9em;
}
.age-card-header img { width: 26px; height: 26px; }
.age-card-header h3 { margin: 0; font-size: 1.35rem; }
.age-card-tag {
  font-family: var(--ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.age-card-bleak    .age-card-tag { color: var(--bleak-dark); }
.age-card-twilight .age-card-tag { color: var(--twilight-dark); }
.age-card-bright   .age-card-tag { color: var(--bright-dark); }
.age-card ol { margin-bottom: 0; }
.age-card li:last-child { margin-bottom: 0; }

/* Setup reference table — zebra stripes + emphasis columns */
.page-table tbody tr:nth-child(even) { background: rgba(196, 184, 149, 0.16); }
.page-table td:first-child,
.page-table td:last-child {
  font-weight: 700;
  color: var(--ink-dark);
  font-size: 1rem;
}

/* =====================================================================
   LANDING TEMPLATE — full-scene landing pages (playtest, future
   showcases). One continuous night scene: a replaceable full-bleed
   image (.landing-scene img) melts into the dark table ground, and
   everything the visitor can act on is a lamplit parchment object.
   To make a new landing page: swap the scene image, the copy, and
   the dealt cards. Everything else is the template.
   ===================================================================== */

body.landing-page {
  background: var(--ink-dark);
  color: var(--parchment-light);
}
/* The crescent reads parchment over the whole scene, hero to footer */
body.landing-page,
body.landing-page[data-nav-section="content-hero"],
body.landing-page[data-nav-section="content-body"] {
  --compass-tint: var(--parchment-light);
  --compass-glow: rgba(245, 237, 216, 0.32);
  --compass-shadow: rgba(0, 0, 0, 0.55);
}

/* ── The hero scene ─────────────────────────────────────────────── */
.landing-hero {
  position: relative;
  isolation: isolate;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.4rem, 3vh, 2.4rem) var(--pad-inline) clamp(5rem, 10vh, 7.5rem);
}
.landing-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.landing-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.82) saturate(0.85) contrast(1.04);
}
/* Night scrim: a lamplit-dark pool behind the words, vignetted edges,
   and a bottom melt into the page ground so the scene and the sections
   below read as one continuous surface. */
.landing-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 22, 16, 0.44) 0%, rgba(28, 22, 16, 0.18) 38%, rgba(28, 22, 16, 0.62) 70%, rgba(28, 22, 16, 0.99) 86%, var(--ink-dark) 100%),
    radial-gradient(ellipse 60% 48% at 50% 44%, rgba(10, 6, 3, 0.62) 0%, rgba(15, 10, 6, 0.46) 45%, rgba(18, 12, 8, 0.3) 75%, rgba(20, 15, 10, 0.55) 100%);
}

/* Same lockup as the setup guide's hero: the stacked wordmark seated
   inside the brush crescent (arc-mark PNG as a mask, oversized + nudged
   because the source canvas has transparent padding and an off-center
   crescent). */
.landing-wordmark {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 17vw, 210px);
  aspect-ratio: 1;
}
.landing-wordmark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--parchment-dark);
  opacity: 0.9;
  -webkit-mask: url('../assets/brand/arc-mark.png') 46% 54% / 158% no-repeat;
          mask: url('../assets/brand/arc-mark.png') 46% 54% / 158% no-repeat;
}
.landing-wordmark img {
  position: relative;
  width: 43%;
  margin: 0 auto;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65));
  /* The brush stroke is thick on the left — seat the wordmark in the
     crescent's open center, right of the box center. */
  transform: translateX(10%);
}

.landing-hero-content {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(1.75rem, 4vh, 3rem);
}
.landing-eyebrow {
  font-family: var(--ui);
  font-size: clamp(0.74rem, 0.85vw, 0.88rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--twilight-light);
  margin: 0 0 1.5rem;
  line-height: 1.5;
  text-wrap: balance;
}
.landing-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.15rem, 4.8vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--parchment-light);
  margin: 0;
  max-width: 21ch;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.6);
}
/* The tri-tone thread — the game's three Tones as one hairline */
.landing-rule {
  width: clamp(150px, 22vw, 230px);
  height: 2px;
  border: 0;
  margin: clamp(1.5rem, 3vh, 2rem) auto;
  background: linear-gradient(to right, var(--bright-base) 0%, var(--twilight-base) 50%, var(--bleak-base) 100%);
}
.landing-lead {
  font-size: clamp(1.08rem, 1.5vw, 1.26rem);
  line-height: 1.7;
  color: rgba(245, 237, 216, 0.94);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

.deal-hand {
  font-family: var(--hand);
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  color: rgba(245, 237, 216, 0.88);
  margin: clamp(2rem, 4.5vh, 3rem) auto 0;
  rotate: -2deg;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* ── The deal — the two actions, dealt as TWWY cards onto the night
      table. Each mimics the printed card anatomy: tone-tinted ground,
      inner frame, tone icon + verb in the hand-drawn caps, a prompt
      line, then the action. The pair straddles the hero's lower edge. ── */
.deal {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  max-width: 880px;
  margin: clamp(-4.5rem, -8vh, -3.25rem) auto 0;
  padding: 0 var(--pad-inline);
}
@media (max-width: 720px) {
  .deal { grid-template-columns: 1fr; max-width: 480px; }
}

.deal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.5rem, 2.8vw, 2rem) clamp(1.5rem, 2.8vw, 1.9rem);
  border-radius: 12px;
  box-shadow:
    0 40px 80px -26px rgba(0, 0, 0, 0.85),
    0 6px 22px rgba(0, 0, 0, 0.4);
  transform: rotate(-1.7deg);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s ease;
}
.deal-card:last-child { transform: rotate(1.9deg) translateY(12px); }
.deal-card:hover,
.deal-card:focus-within {
  transform: rotate(0deg) translateY(-6px);
  box-shadow:
    0 50px 90px -28px rgba(0, 0, 0, 0.9),
    0 8px 26px rgba(0, 0, 0, 0.45);
}
/* The printed card's inner frame */
.deal-card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 2px solid;
  border-radius: 8px;
  opacity: 0.75;
  pointer-events: none;
}
.deal-card-bright   { background: var(--bright-light); }
.deal-card-bright::before   { border-color: var(--bright-base); }
.deal-card-twilight { background: var(--twilight-light); }
.deal-card-twilight::before { border-color: var(--twilight-base); }

.deal-card-header {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-bottom: 1.05rem;
}
.deal-card-header img { width: 32px; height: 32px; }
.deal-card-verb {
  font-family: 'Caveat Brush', var(--hand);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dark);
}
.deal-card-prompt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.1vw, 1.55rem);
  line-height: 1.28;
  color: var(--ink-dark);
  margin: 0 0 0.55em;
}
.deal-card-body {
  font-size: 0.99rem;
  line-height: 1.62;
  color: var(--ink-base);
  margin: 0 0 1.5em;
  flex: 1;
}
.deal-card .btn {
  align-self: flex-start;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

/* ── The callout — the report ask, pulled out of the deal and laid
      across the table beneath the cards. Parchment on the night table
      so it's the brightest thing below the fold. ── */
.deal-callout {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  max-width: 720px;
  margin: clamp(2.5rem, 5vh, 3.5rem) auto 0;
  padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.6rem);
  background: var(--parchment-light);
  border-radius: 12px;
  transform: rotate(-0.6deg);
  box-shadow:
    0 34px 70px -24px rgba(0, 0, 0, 0.85),
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 110px rgba(245, 237, 216, 0.16);
}
@media (max-width: 760px) {
  .deal-callout { margin-left: var(--pad-inline); margin-right: var(--pad-inline); }
}
/* Same inner frame as the cards, in Bright */
.deal-callout::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 2px solid var(--bright-base);
  border-radius: 8px;
  opacity: 0.75;
  pointer-events: none;
}
.deal-callout-icon { width: 46px; height: 46px; }
/* Hand-written aside above the headline, like a note on the card */
.deal-callout-eyebrow {
  font-family: var(--hand);
  font-size: clamp(1.3rem, 2.1vw, 1.55rem);
  line-height: 1;
  color: var(--ink-light);
  rotate: -2deg;
  margin: -0.2rem 0 0;
}
/* Marker underline in the three tones, borrowed from the landing rule */
.deal-callout-underline {
  background: linear-gradient(to right, var(--bright-base), var(--twilight-base), var(--bleak-base));
  background-size: 100% 0.12em;
  background-position: 0 96%;
  background-repeat: no-repeat;
  padding-bottom: 0.06em;
}
/* Highlighter swipe over the key phrase */
.deal-callout-mark {
  background: linear-gradient(transparent 30%, var(--bright-light) 30%, var(--bright-light) 94%, transparent 94%);
  padding: 0 0.12em;
  font-weight: 600;
  color: var(--ink-dark);
}
.deal-callout-body strong { font-weight: 600; color: var(--ink-dark); }
.deal-callout-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  color: var(--ink-dark);
  margin: 0;
}
.deal-callout-body {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-base);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}
.deal-callout-body a {
  color: var(--twilight-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(107, 74, 84, .5);
}
.deal-callout-body a:hover { text-decoration-color: var(--twilight-dark); }

/* ── Page-load reveal — one staggered rise, hero through cards ── */
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-wordmark,
.landing-eyebrow,
.landing-title,
.landing-hero .landing-rule,
.landing-lead,
.deal-hand,
.deal,
.deal-callout {
  animation: landing-rise 0.9s cubic-bezier(0.19, 0.7, 0.22, 1) both;
}
.landing-wordmark { animation-delay: 0.05s; }
.landing-eyebrow  { animation-delay: 0.15s; }
.landing-title    { animation-delay: 0.24s; }
.landing-hero .landing-rule { animation-delay: 0.34s; }
.landing-lead     { animation-delay: 0.42s; }
.deal-hand        { animation-delay: 0.56s; }
.deal             { animation-delay: 0.68s; }
.deal-callout     { animation-delay: 0.84s; }
@media (prefers-reduced-motion: reduce) {
  .landing-wordmark,
  .landing-eyebrow,
  .landing-title,
  .landing-hero .landing-rule,
  .landing-lead,
  .deal-hand,
  .deal,
  .deal-callout { animation: none; }
}

/* ── Below the fold — the night table ───────────────────────────── */
.landing-body {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(5rem, 9vw, 7.5rem);
}
/* faint lamplight pools keep the long dark stretch breathing */
.landing-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 34% at 50% 10%, rgba(245, 237, 216, 0.05), transparent 70%),
    radial-gradient(ellipse 52% 30% at 50% 90%, rgba(245, 237, 216, 0.04), transparent 70%);
  pointer-events: none;
}
/* two sleeping card-backs at the table's edges, just outside the light */
.landing-table {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.landing-table img {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  opacity: 0.15;
  filter: blur(2px) saturate(0.8);
}
.landing-table-c1 { width: clamp(200px, 20vw, 300px); top: 7%; left: -90px; transform: rotate(-22deg); }
.landing-table-c2 { width: clamp(180px, 18vw, 280px); bottom: 4%; right: -80px; transform: rotate(16deg); }
@media (max-width: 760px) {
  .landing-table { display: none; }
}

.landing-section {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--pad-inline);
  text-align: center;
}
.landing-section h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--parchment-light);
  margin: 0 0 0.55em;
  text-wrap: balance;
}
.landing-section .eyebrow-light {
  display: block;
  margin-bottom: 1em;
  letter-spacing: 0.28em;
}
.landing-section > p {
  color: rgba(245, 237, 216, 0.84);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.7;
}
/* the tri-tone thread doubles as the divider between scenes */
.landing-body .landing-rule {
  margin: clamp(4rem, 8vw, 6rem) auto;
  opacity: 0.9;
}

/* Why report — three supports for the primary action */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  text-align: left;
}
@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}
.why-item {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(245, 237, 216, 0.22);
}
.why-num {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--parchment-dark);
  margin-bottom: 0.35em;
}
.why-item h3 {
  margin: 0 0 0.45em;
  font-size: 1.28rem;
  color: var(--parchment-light);
}
.why-item p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.66;
  color: rgba(245, 237, 216, 0.76);
}
.landing-section > p.why-cta {
  max-width: none;
  margin: clamp(2.75rem, 5vw, 3.5rem) auto 0;
}

/* Aside scenes (share, etc.) — quieter, narrower */
.landing-aside p { max-width: 44ch; }
.landing-aside a,
.landing-lead a {
  color: var(--parchment-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245, 237, 216, 0.45);
}
.landing-aside a:hover,
.landing-lead a:hover { text-decoration-color: var(--parchment-light); }

/* Newsletter — reuses the homepage signup form on the night ground */
.landing-page .signup-form {
  margin: 1.9rem auto 0;
  max-width: 420px;
}
.landing-fine {
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 237, 216, 0.5);
  margin: 2rem 0 0;
}
.landing-page .signup-success,
.landing-page .signup-error {
  margin: 1.9rem auto 0;
  max-width: 46ch;
}