/* ══════════════════════════════════════════════════════════════════════
   Scout.DM — marketing page
   Night sky and vellum. Gold leaf used sparingly, so it still means something.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* night */
  --night-0:   #070b15;
  --night-1:   #0a0f1c;
  --night-2:   #0f1626;
  --night-3:   #162034;
  --night-4:   #1e2a42;

  /* vellum */
  --vellum-0:  #efe4ca;
  --vellum-1:  #e6d8b8;
  --vellum-2:  #d8c69f;
  --vellum-3:  #c3ad84;

  /* metal + ember */
  --gold:      #c9a24c;
  --gold-lt:   #f0d894;
  --gold-dk:   #8f6f2a;
  --ember:     #c2572c;
  --verdigris: #4e8177;
  --wax:       #7d2b26;

  /* ink */
  --ink:       #241c12;
  --ink-soft:  #4a3d2c;

  /* text on night */
  --tx:        #dfe4ee;
  --tx-soft:   #9fabc2;
  --tx-faint:  #6c7a94;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1140px;
  --r: 3px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night-1);
  color: var(--tx);
  font-family: var(--serif);
  font-size: clamp(16px, 0.55vw + 14.4px, 18px);
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

.defs { position: absolute; width: 0; height: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--night-0);
  padding: .7rem 1.2rem; font-family: var(--sans); font-size: .85rem;
}
.skip:focus { left: 1rem; top: 1rem; }

img, svg { max-width: 100%; }

a { color: var(--gold-lt); text-decoration-color: rgba(201,162,76,.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }

::selection { background: rgba(201,162,76,.3); color: #fff; }

:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); }

/* ─────────────────────────── type ─────────────────────────── */

h1, h2, h3 { font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -0.012em; }

h1 {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  margin: .35em 0 .5em;
}
.h1-line { display: block; }
.h1-gold {
  background: linear-gradient(100deg, #a07c2c 0%, #f4dc95 22%, #fff6d8 38%, #c9a24c 58%, #f0d894 80%, #9a7527 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 9s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -0.005em; }

.eyebrow {
  font-family: var(--sans);
  font-size: .74rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin: 0;
}
.eyebrow::before, .eyebrow::after { content: "—"; opacity: .45; margin: 0 .8em; }

.lede {
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  color: var(--tx-soft); max-width: 34em; margin: 0 auto;
  text-shadow: 0 1px 18px rgba(7,11,21,.95), 0 1px 4px rgba(7,11,21,.8);
}
.lede em { color: var(--vellum-1); font-style: italic; }

/* ─────────────────────────── buttons ─────────────────────────── */

.btn {
  display: inline-block; font-family: var(--sans); font-size: .92rem;
  letter-spacing: .04em; padding: .95em 1.9em; border-radius: var(--r);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn-sm { padding: .6em 1.1em; font-size: .82rem; }
.btn-big { padding: 1.15em 2.4em; font-size: 1rem; }

.btn-primary {
  background: linear-gradient(165deg, var(--gold-lt), var(--gold) 55%, var(--gold-dk));
  color: #241a05; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,245,210,.5) inset, 0 10px 30px -12px rgba(201,162,76,.75);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,245,210,.6) inset, 0 18px 40px -14px rgba(201,162,76,.9); }

.btn-ghost { border-color: rgba(201,162,76,.42); color: var(--gold-lt); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,162,76,.09); }

.btn-quiet { color: var(--tx-soft); padding-inline: .4em; text-shadow: 0 1px 14px rgba(7,11,21,.95); }
.btn-quiet:hover { color: var(--gold-lt); }

/* ═══════════════════════════ HERO ═══════════════════════════ */

.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--night-0);
  overflow: hidden;
  isolation: isolate;
}

/* Sky only. The painting lives at the horizon (.map-wrap) so the headline
   always sits on clean darkness rather than fighting a composition. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 85% at 50% 0%, #16223c 0%, transparent 62%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-0) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 82% 18%, rgba(78,129,119,.14) 0%, transparent 60%),
    radial-gradient(75% 55% at 12% 32%, rgba(194,87,44,.12) 0%, transparent 62%);
  mix-blend-mode: screen;
}

.stars, .aurora, .vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.stars {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px   at 28% 42%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 44% 12%, rgba(240,216,148,.9), transparent),
    radial-gradient(1px 1px   at 61% 33%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 77% 21%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px   at 88% 47%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 8% 62%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 34% 71%, rgba(240,216,148,.7), transparent),
    radial-gradient(1px 1px   at 55% 58%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 70% 66%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px   at 94% 74%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.4px 1.4px at 19% 88%, rgba(255,255,255,.5), transparent);
  animation: twinkle 7s ease-in-out infinite alternate;
}
.stars-dim { opacity: .4; z-index: 2; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }

.aurora {
  background:
    radial-gradient(45% 30% at 25% 22%, rgba(78,129,119,.30), transparent 70%),
    radial-gradient(38% 26% at 72% 14%, rgba(201,162,76,.16), transparent 72%);
  filter: blur(28px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.08); }
}

.vignette { box-shadow: inset 0 90px 120px -70px rgba(0,0,0,.6); }

/* topbar */
.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(100% - 2.5rem, var(--wrap)); margin: 1.6rem auto 0;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text {
  font-family: var(--sans); font-weight: 600; font-size: 1.05rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vellum-0);
}
.brand-dot { color: var(--gold); }
.topbar-links { display: flex; align-items: center; gap: 1.7rem; font-family: var(--sans); font-size: .86rem; }
.topbar-links a { color: var(--tx-soft); text-decoration: none; }
.topbar-links a:hover { color: var(--gold-lt); }
.topbar-links .btn { color: var(--gold-lt); }

/* hero body */
.hero-inner {
  position: relative; z-index: 4;
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 4rem 1.25rem 15rem;
  width: min(100% - 2.5rem, 980px); margin-inline: auto;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; justify-content: center; margin-top: 2.4rem; }

.hero-oaths {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center;
  list-style: none; margin: 3.4rem 0 0; padding: 0;
  font-family: var(--sans); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tx-soft);
}
.hero-oaths li {
  position: relative; padding: .45em 1em .45em 2.1em;
  border-radius: 999px;
  background: rgba(7,11,21,.55);
  border: 1px solid rgba(160,180,215,.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-oaths li::before {
  content: "✕"; position: absolute; left: 1em; top: .55em;
  color: var(--ember); font-size: .8em; opacity: .9;
}

/* the horizon — the painting, feathered into the sky, with the route over it */
.map-wrap {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(300px, 52vh, 560px); z-index: 3; pointer-events: none;
}
.map-wrap::before {
  content: ""; position: absolute; inset: 0;
  background: url("art/hero-pano.webp") center bottom/cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 18%, #000 44%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 18%, #000 44%, #000 100%);
}
/* Only enough grading to tie it to the palette and to close the seam at the
   foot. The painting is the point; drowning it defeats the exercise. */
.map-wrap::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(7,11,21,.5) 86%, var(--night-0) 100%),
    linear-gradient(180deg, rgba(20,32,58,.28), rgba(10,15,28,.12));
}
/* `width: 100%` is load-bearing. An <svg> is a replaced element, so with a
   height set and width left auto, its width resolves from the viewBox aspect
   ratio and `right: 0` is ignored — which left the trail stopping ~850px short
   of the right edge on anything wider than about 1900px. */
.map { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; display: block; z-index: 2; }

.ridge { fill: none; }
.ridge-far  { fill: rgba(30,42,66,.55); }
.ridge-near { fill: rgba(10,15,28,.9); }
.glyphs path { fill: rgba(120,140,175,.35); }

.road {
  fill: none; stroke: rgba(215,228,250,.3); stroke-width: 1.6;
  stroke-dasharray: 1 7; stroke-linecap: round;
}
.road-ahead {
  fill: none; stroke: var(--gold-lt); stroke-width: 1.8; opacity: .8;
  stroke-dasharray: 6 10; stroke-linecap: round;
  animation: crawl 2.6s linear infinite;
}
@keyframes crawl { to { stroke-dashoffset: -16; } }

.party circle { fill: rgba(226,236,255,.9); }
.scout-mark { fill: var(--gold-lt); }
.scout-halo { fill: rgba(240,216,148,.3); animation: pulse 3.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { r: 10; opacity: .55; } 50% { r: 17; opacity: .18; } }

/* ═══════════════════════ shared section furniture ═══════════════════════ */

section { position: relative; padding: clamp(5rem, 11vw, 9rem) 0; }

.section-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(3rem, 6vw, 4.5rem); }
.section-head h2 { margin: .5rem 0 1rem; }
.section-sub { color: var(--tx-soft); font-size: 1.05rem; margin: 0; }
.art .section-sub, .art .section-head h2 { text-shadow: 0 1px 20px rgba(7,11,21,.95), 0 1px 5px rgba(7,11,21,.85); }
.section-sub em { color: var(--vellum-1); }
.section-sub strong { color: var(--vellum-0); font-weight: 400; }

.rune {
  display: block; width: 26px; height: 26px; margin: 0 auto .2rem;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L23 17 L38 20 L23 23 L20 38 L17 23 L2 20 L17 17 Z' fill='%23c9a24c'/%3E%3C/svg%3E");
  opacity: .9;
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }


/* ══════════════════ section artwork ══════════════════
   Each painting sits behind its section, dimmed hard and feathered at both
   edges so it reads as atmosphere rather than as a picture with a border. */

.art { isolation: isolate; }
.art > .wrap { position: relative; z-index: 2; }
.art::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.art::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}

.moment::before    { background-image: url("art/tavern.webp");     opacity: .55; }
.partition::before { background-image: url("art/crossroads.webp"); opacity: .48; }
.alpha::before     { background-image: url("art/prep-desk.webp");  opacity: .42; }

.moment::after {
  background:
    radial-gradient(78% 58% at 50% 42%, rgba(7,11,21,.78), transparent 78%),
    linear-gradient(180deg, var(--night-0) 0%, rgba(10,15,28,.34) 26%, rgba(10,15,28,.42) 72%, var(--night-0) 100%);
}
.partition::after {
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(7,11,21,.8), transparent 76%),
    linear-gradient(180deg, var(--night-0) 0%, rgba(10,15,28,.32) 28%, rgba(10,15,28,.40) 70%, var(--night-0) 100%);
}
.alpha::after {
  background:
    radial-gradient(85% 62% at 50% 48%, rgba(7,11,21,.86), transparent 80%),
    linear-gradient(180deg, var(--night-1) 0%, rgba(10,15,28,.38) 26%, rgba(7,11,21,.55) 74%, var(--night-0) 100%);
}

/* ═══════════════════════ THE MOMENT ═══════════════════════ */

.moment { background: var(--night-2); }

.stage {
  display: grid; grid-template-columns: 1.32fr .92fr; gap: 1.6rem;
  align-items: start; max-width: 1040px; margin-inline: auto;
  /* Positioned so the narrow-screen trail — and the offsetTop the script
     measures against it — both resolve to this element. */
  position: relative;
}
/* Side by side, the two columns already say "these happened together"; the
   trail is only needed once they stack. */
.stage-trail { display: none; }
/* The replay control is a grid child, so it needs placing explicitly or it
   takes the whisper's column. */
.stage-table   { grid-column: 1; grid-row: 1; }
.replay        { grid-column: 1; grid-row: 2; }
.stage-whisper { grid-column: 2; grid-row: 1 / span 2; }

.stage-label {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tx-faint); display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tx-faint); flex: none; }
.dot-gold { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.whisper-label { color: var(--gold); }

.stage-table {
  position: relative;
  background: linear-gradient(165deg, rgba(30,42,66,.55), rgba(10,15,28,.55));
  border: 1px solid rgba(160,180,215,.13);
  border-radius: 6px; padding: 1.5rem 1.6rem 1.3rem;
}

.script { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.line {
  display: grid; grid-template-columns: 5.6rem 1fr; gap: 1rem; align-items: baseline;
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.line.on { opacity: 1; transform: none; }
.who {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  text-align: right; padding-top: .3em;
}
.line-dm .who { color: var(--gold); }
.line-player .who { color: var(--verdigris); }
.says { color: var(--tx); }
.says strong { color: var(--vellum-0); font-weight: 600; }
.line-player .says { color: var(--tx-soft); font-style: italic; }

.replay {
  justify-self: start; margin-top: .9rem;
  background: none; border: 1px solid rgba(160,180,215,.16); border-radius: 3px;
  padding: .5em 1em; cursor: pointer;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-faint); opacity: 0; transition: opacity .4s ease, color .2s ease, border-color .2s ease;
}
.replay.on { opacity: 1; }
.replay:hover { border-color: rgba(201,162,76,.45); }
.replay:hover { color: var(--gold-lt); }

.whisper-card {
  position: relative;
  background: linear-gradient(160deg, rgba(38,30,12,.92), rgba(20,16,8,.92));
  border: 1px solid rgba(201,162,76,.42);
  border-radius: 5px; padding: 1.25rem 1.35rem 1rem;
  box-shadow: 0 22px 50px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(201,162,76,.07) inset;
  opacity: 0; transform: translateY(-8px) scale(.97);
  transition: opacity .5s cubic-bezier(.2,.8,.3,1), transform .5s cubic-bezier(.2,.8,.3,1);
}
.whisper-card.on { opacity: 1; transform: none; }
.whisper-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: 5px; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,243,198,.16) 48%, transparent 62%);
  background-size: 260% 100%;
  animation: sheen 5.5s ease-in-out infinite;
}
@keyframes sheen { 0%,100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }

.whisper-name { font-size: 1.75rem; color: var(--gold-lt); line-height: 1.1; }
.whisper-hook { color: var(--vellum-2); font-style: italic; margin-top: .15rem; }
.whisper-meta {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: 1rem;
  padding-top: .7rem; border-top: 1px solid rgba(201,162,76,.18);
  font-family: var(--sans); font-size: .66rem; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(201,162,76,.62);
}
.whisper-dismiss { color: var(--tx-faint); }

.stage-note {
  margin: 1.3rem 0 0; font-size: .95rem; color: var(--tx-soft);
  opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease;
}
.stage-note.on { opacity: 1; transform: none; }
.stage-note strong { color: var(--vellum-0); font-weight: 600; }

/* payoff */
.payoff { max-width: 46rem; margin: clamp(3.5rem, 7vw, 5.5rem) auto 0; text-align: center; }
.payoff-rule {
  display: flex; align-items: center; gap: 1.2rem;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.payoff-rule::before, .payoff-rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,76,.45), transparent);
}
.payoff-text { font-size: clamp(1.05rem, 1.4vw, 1.24rem); color: var(--tx-soft); margin: 0; }
.payoff-text strong { color: var(--vellum-0); font-weight: 400; }

/* three scales */
.scales { margin-top: clamp(3.5rem, 7vw, 5rem); }
.scales-intro {
  text-align: center; font-family: var(--sans); font-size: .7rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--tx-faint); margin: 0 0 1.6rem;
}
.scale-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.scale {
  border: 1px solid rgba(160,180,215,.12); border-radius: 5px;
  padding: 1.3rem 1.35rem; background: rgba(15,22,38,.5);
  transition: border-color .3s ease, transform .3s ease;
}
.scale:hover { border-color: rgba(201,162,76,.35); transform: translateY(-3px); }
.scale-trigger { color: var(--tx-soft); font-style: italic; }
.scale-out {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed rgba(201,162,76,.25);
  color: var(--vellum-0);
}
.scale-out span {
  display: block; margin-top: .35rem;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); opacity: .8;
}

/* ═══════════════════════ THE LOOP (vellum) ═══════════════════════ */

.loop {
  background:
    linear-gradient(170deg, rgba(239,228,202,.86) 0%, rgba(230,216,184,.8) 55%, rgba(216,198,159,.86) 100%),
    url("art/vellum.webp") center/cover no-repeat, var(--vellum-1);
  color: var(--ink);
}
.loop::before {
  content: ""; position: absolute; inset: 0; background-image: var(--grain);
  mix-blend-mode: multiply; opacity: .38; pointer-events: none;
}
.loop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 120px 20px rgba(120,95,55,.28);
}
.loop .rune {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L23 17 L38 20 L23 23 L20 38 L17 23 L2 20 L17 17 Z' fill='%238f6f2a'/%3E%3C/svg%3E");
}
.loop .section-sub { color: var(--ink-soft); }
.loop .section-sub strong { color: var(--ink); font-weight: 600; }
.loop .section-sub em { color: var(--ink); }

.clocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; z-index: 2; }
.clock {
  padding: 2rem 1.9rem 1.9rem;
  background: rgba(255,252,242,.42);
  border: 1px solid rgba(90,70,40,.18);
  border-radius: 4px;
  box-shadow: 0 20px 40px -30px rgba(60,45,20,.7);
  position: relative;
}
.clock::before {
  content: ""; position: absolute; left: 1.9rem; right: 1.9rem; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.clock-num {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-dk); margin-bottom: .9rem;
}
.clock h3 { color: var(--ink); margin-bottom: .8rem; }
.clock p { color: var(--ink-soft); margin: 0 0 .9rem; font-size: .97rem; }
.clock p em { color: var(--ink); font-style: italic; }
.clock-foot {
  margin: 1.1rem 0 0 !important; padding-top: .9rem;
  border-top: 1px dashed rgba(90,70,40,.28);
  font-size: .87rem !important; color: rgba(74,61,44,.85) !important;
}

/* ═══════════════════════ THE DIFFERENTIATOR ═══════════════════════ */

.ahead {
  background: linear-gradient(180deg, var(--night-0), var(--night-1) 45%, var(--night-0));
  text-align: center;
}
.big-quote { margin: 0 auto clamp(3rem, 6vw, 4.5rem); max-width: 30em; }
.big-quote p {
  font-size: clamp(1.6rem, 4.2vw, 3.1rem); line-height: 1.18; margin: 0; color: var(--tx-soft);
}
.big-quote strong {
  font-weight: 400; display: inline-block; margin-top: .18em;
  background: linear-gradient(100deg, #a07c2c, #f4dc95 30%, #fff6d8 48%, #c9a24c 70%, #e3c67a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.posture { max-width: 44rem; margin-inline: auto; text-align: left; display: grid; gap: .5rem; }
.posture-row {
  display: grid; grid-template-columns: 10.5rem 1fr; gap: 1.2rem; align-items: baseline;
  padding: .95rem 1.2rem; border-radius: 4px;
  border: 1px solid rgba(160,180,215,.1); background: rgba(15,22,38,.4);
  color: var(--tx-faint);
}
.posture-tag {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .17em; text-transform: uppercase;
}
.posture-desc { font-size: .97rem; }
.posture-row.is-scout {
  border-color: rgba(201,162,76,.5);
  background: linear-gradient(100deg, rgba(201,162,76,.13), rgba(15,22,38,.5));
  color: var(--vellum-0);
  box-shadow: 0 18px 44px -28px rgba(201,162,76,.7);
}
.is-scout .posture-tag { color: var(--gold-lt); }
.is-scout em { color: var(--gold-lt); font-style: italic; }

/* ═══════════════════════ PARTITIONING ═══════════════════════ */

.partition { background: var(--night-2); }

.journals { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 940px; margin-inline: auto; }
.journal {
  background:
    linear-gradient(168deg, rgba(239,228,202,.9), rgba(216,198,159,.9)),
    url("art/vellum.webp") center/cover no-repeat, var(--vellum-1);
  color: var(--ink); border-radius: 4px; padding: 1.5rem 1.7rem 1.7rem;
  box-shadow: 0 28px 60px -34px rgba(0,0,0,.95);
  position: relative; overflow: hidden;
}
.journal::before {
  content: ""; position: absolute; inset: 0; background-image: var(--grain);
  mix-blend-mode: multiply; opacity: .34; pointer-events: none;
}
.journal-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
  padding-bottom: .85rem; margin-bottom: 1.1rem;
  border-bottom: 2px solid rgba(90,70,40,.28);
}
.journal-owner { font-size: 1.35rem; color: var(--ink); }
.journal-where {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-dk);
}
.journal-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; position: relative; z-index: 2; }
.journal-entries li {
  padding-left: 1.4rem; position: relative; font-size: .96rem; color: var(--ink-soft);
}
.journal-entries li::before {
  content: "✧"; position: absolute; left: 0; top: -.05em; color: var(--gold-dk); font-size: .8em;
}
.journal-entries li.shared::before { content: "✦"; color: var(--verdigris); }
.journal-empty { font-style: italic; opacity: .62; }
.journal-empty::before { content: "·" !important; }

.tacit {
  border-bottom: 1px dotted rgba(140,100,30,.85);
  padding-bottom: 1px; color: var(--ink); white-space: nowrap;
}
.tacit-q {
  font-family: var(--sans); font-size: .62em; vertical-align: super;
  color: var(--ember); margin-left: 1px; font-weight: 700;
}

.journal-key { max-width: 44rem; margin: 2.4rem auto 0; text-align: center; color: var(--tx-soft); }
.journal-key p { margin: 0 0 .9rem; }
.journal-key strong { color: var(--vellum-0); font-weight: 400; }
.key-tacit {
  font-size: .9rem; color: var(--tx-faint);
  border-top: 1px solid rgba(160,180,215,.12); padding-top: 1rem; margin-top: 1.2rem !important;
}
.key-tacit .tacit { color: var(--vellum-1); border-bottom-color: rgba(201,162,76,.6); margin-right: .4rem; }


/* ═══════════════════════ HOW IT JOINS YOU ═══════════════════════ */

.joins {
  background: var(--night-0);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid rgba(160,180,215,.08);
}
.joins-intro {
  text-align: center; margin: 0 0 2.2rem;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
}
.joins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.join { position: relative; padding-left: 1.4rem; }
.join::before {
  content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 2px;
  background: linear-gradient(180deg, var(--gold), transparent);
  opacity: .55;
}
.join h3 { color: var(--vellum-0); margin-bottom: .45rem; }
.join p { margin: 0; color: var(--tx-soft); font-size: .95rem; }
.joins-foot {
  margin: 2.2rem auto 0; max-width: 44rem; text-align: center;
  color: var(--tx-faint); font-size: .92rem;
}

/* ═════════════════ BRING WHAT YOU ALREADY HAVE ═════════════════ */

.bring { background: linear-gradient(180deg, var(--night-0), var(--night-2) 55%, var(--night-0)); }
.bring-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.bring .rune { margin-left: 0; }
.bring h2 { margin: .5rem 0 1.1rem; }
.bring-lede { color: var(--tx-soft); font-size: 1.06rem; margin: 0 0 1.1rem; }
.bring-body { color: var(--tx-soft); font-size: .98rem; margin: 0 0 1rem; }
.bring-em { color: var(--tx); }
.bring-em strong { color: var(--gold-lt); font-weight: 400; }

.ledger {
  background: linear-gradient(160deg, rgba(30,42,66,.6), rgba(10,15,28,.7));
  border: 1px solid rgba(201,162,76,.28);
  border-radius: 5px; padding: 1.5rem 1.6rem 1.3rem;
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.95);
}
.ledger-head {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); padding-bottom: .9rem; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(201,162,76,.22);
}
.ledger-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ledger-list li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: baseline;
  color: var(--tx-soft); font-size: .95rem;
}
.ledger-list .n {
  font-size: 1.5rem; color: var(--vellum-0); text-align: right; line-height: 1;
}
.ledger-flag { color: var(--tx-faint); }
.ledger-flag .n { color: var(--ember); }
.ledger-foot {
  margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px dashed rgba(201,162,76,.2);
  font-family: var(--sans); font-size: .74rem; letter-spacing: .05em; color: var(--tx-faint);
}

/* ═══════════════════ WHAT YOUR PLAYERS GET ═══════════════════ */

.players { background: var(--night-0); }
.players-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.player-card {
  padding: 1.7rem 1.6rem;
  background: rgba(15,22,38,.55);
  border: 1px solid rgba(160,180,215,.12);
  border-top: 2px solid rgba(78,129,119,.55);
  border-radius: 4px;
  transition: border-color .3s ease, transform .3s ease;
}
.player-card:hover { transform: translateY(-3px); border-color: rgba(78,129,119,.4); border-top-color: var(--verdigris); }
.player-card h3 { color: var(--vellum-0); margin-bottom: .8rem; }
.player-card p { color: var(--tx-soft); font-size: .96rem; margin: 0 0 .9rem; }
.player-card em { color: var(--vellum-1); font-style: italic; }
.player-card strong { color: var(--vellum-0); font-weight: 600; }
.player-foot {
  margin: 1rem 0 0 !important; padding-top: .85rem;
  border-top: 1px dashed rgba(160,180,215,.16);
  font-size: .86rem !important; color: var(--tx-faint) !important;
}
.players-rule {
  max-width: 46rem; margin: 2.6rem auto 0; text-align: center;
  color: var(--tx-soft); font-size: .98rem;
}
.players-rule strong { color: var(--vellum-0); font-weight: 400; }

/* ═══════════════════════ WHAT IT NEVER DOES ═══════════════════════ */

.never { background: var(--night-0); }
.never::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(194,87,44,.10), transparent 70%);
}
.oaths {
  list-style: none; margin: 0 auto; padding: 0; max-width: 52rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
}
.oath {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: baseline;
  padding: 1.1rem 1.3rem; border-radius: 4px;
  background: rgba(15,22,38,.55); border: 1px solid rgba(160,180,215,.1);
  color: var(--tx-soft); font-size: .97rem;
  transition: border-color .3s ease, background .3s ease;
}
.oath:hover { border-color: rgba(194,87,44,.4); background: rgba(30,20,16,.6); }
.oath em { color: var(--vellum-1); font-style: italic; }
.oath-no {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember); padding-top: .25em;
}

/* ═══════════════════════ IT'S YOURS ═══════════════════════ */

.yours { background: linear-gradient(180deg, var(--night-0), var(--night-2)); }
.yours-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.yours .rune { margin-left: 0; }
.yours h2 { margin: .5rem 0 1.1rem; }
.yours-lede { color: var(--tx-soft); font-size: 1.06rem; margin: 0 0 1.8rem; max-width: 30em; }
.yours-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.yours-list li {
  position: relative; padding-left: 1.6rem; color: var(--tx-soft); font-size: .98rem;
}
.yours-list li::before {
  content: "✧"; position: absolute; left: 0; top: 0; color: var(--gold); font-size: .85em;
}
.yours-list strong { color: var(--vellum-0); font-weight: 600; }
.yours-list em { color: var(--gold-lt); font-style: italic; }

.seal-block { display: flex; justify-content: center; }
.seal { width: min(100%, 300px); filter: drop-shadow(0 24px 40px rgba(0,0,0,.75)); }
.seal-wax { fill: #7d2b26; }
.seal-ring { fill: none; stroke: rgba(255,220,200,.28); stroke-width: 1.6; }
.seal-ring-thin { stroke-width: .7; opacity: .55; }
.seal-star { fill: rgba(255,225,205,.5); }
.seal-text {
  fill: rgba(255,228,208,.72); font-family: var(--sans);
  font-size: 11.5px; letter-spacing: .3em; dominant-baseline: middle;
}
.seal-text-low { dominant-baseline: hanging; }

/* ═══════════════════════ THE AI QUESTION ═══════════════════════ */

.ai { background: var(--night-2); }
.ai-card {
  border: 1px solid rgba(160,180,215,.15); border-left: 3px solid var(--gold);
  border-radius: 4px; padding: clamp(1.8rem, 4vw, 2.8rem);
  background: linear-gradient(150deg, rgba(30,42,66,.55), rgba(10,15,28,.55));
}
.ai-card h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 1.2rem; }
.ai-card p { color: var(--tx-soft); margin: 0 0 1.1rem; }
.ai-card p:last-child { margin-bottom: 0; }
.ai-card em { color: var(--vellum-1); font-style: italic; }
.ai-lead { font-size: 1.1rem; }
.ai-lead strong { color: var(--gold-lt); font-weight: 400; }

/* ═══════════════════════ THE FORM ═══════════════════════ */

.alpha { background: var(--night-1); overflow: hidden; }

.signup { display: grid; gap: 2rem; }
.field { display: grid; gap: .55rem; border: 0; padding: 0; margin: 0; }
.field-split { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field-split > div { display: grid; gap: .55rem; align-content: start; }

label, legend {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); padding: 0;
}
.legend-note {
  text-transform: none; letter-spacing: normal; color: var(--tx-faint); font-size: .85em; margin-left: .5em;
}
.field-note { font-family: var(--sans); font-size: .78rem; color: var(--tx-faint); margin: .1rem 0 0; letter-spacing: 0; }

input[type=email], input[type=text], textarea {
  width: 100%; font-family: var(--serif); font-size: 1rem; color: var(--tx);
  background: rgba(7,11,21,.7); border: 1px solid rgba(160,180,215,.2);
  border-radius: var(--r); padding: .85rem 1rem; transition: border-color .25s ease, background .25s ease;
}
input::placeholder, textarea::placeholder { color: var(--tx-faint); opacity: .75; font-style: italic; }
input:focus, textarea:focus { outline: none; border-color: var(--gold); background: rgba(7,11,21,.95); }
textarea { resize: vertical; line-height: 1.6; }

input[aria-invalid="true"] { border-color: var(--ember); }
.err { font-family: var(--sans); font-size: .78rem; color: var(--ember); margin: .1rem 0 0; letter-spacing: 0; }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .35rem; }
.check {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  padding: .8rem .95rem; border-radius: 4px; cursor: pointer;
  background: rgba(15,22,38,.5); border: 1px solid rgba(160,180,215,.12);
  font-family: var(--serif); font-size: .93rem; letter-spacing: normal; text-transform: none;
  color: var(--tx-soft); transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.check:hover { border-color: rgba(201,162,76,.4); color: var(--tx); }
.check:has(input:checked) {
  border-color: rgba(201,162,76,.65);
  background: linear-gradient(100deg, rgba(201,162,76,.13), rgba(15,22,38,.55));
  color: var(--vellum-0);
}
.check input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; margin-top: .28em; flex: none; }
.check-alpha {
  grid-template-columns: auto 1fr; padding: 1.15rem 1.25rem;
  border-color: rgba(201,162,76,.35); background: rgba(201,162,76,.06);
}
.check-alpha strong { color: var(--vellum-0); font-weight: 600; }

.form-foot { font-family: var(--sans); font-size: .78rem; color: var(--tx-faint); text-align: center; margin: -.8rem 0 0; }
.signup .btn-primary { justify-self: center; }

/* The honeypot. Moved off-screen rather than `display:none`, because the
   better bots skip fields that are display-hidden and fill the rest. */
.trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Turnstile renders nothing at all in interaction-only mode unless it wants
   a challenge, so this collapses to zero height in the normal case. */
.signup .cf-turnstile { justify-self: center; }
.signup .cf-turnstile:empty { display: none; }

.form-privacy { max-width: 46em; margin: -.4rem auto 0; line-height: 1.55; text-wrap: pretty; }
.form-privacy a { color: var(--tx-soft); text-decoration: underline; text-underline-offset: 2px; }
.form-privacy a:hover { color: var(--gold-lt); }

.signup-done { text-align: center; padding: 3rem 1rem; }
.done-mark { width: 64px; height: 64px; margin-bottom: 1.2rem; }
.signup-done h3 { font-size: 2rem; color: var(--gold-lt); margin-bottom: .7rem; }
.signup-done p { color: var(--tx-soft); max-width: 32em; margin: 0 auto; }

/* ═══════════════════════ FOOTER ═══════════════════════ */

.foot { background: var(--night-0); border-top: 1px solid rgba(160,180,215,.1); padding: 3.2rem 0; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.brand-foot { margin-bottom: .7rem; }
.foot-line { font-style: italic; color: var(--tx-faint); margin: 0; }
.foot-small { font-family: var(--sans); font-size: .78rem; color: var(--tx-faint); text-align: right; margin: 0; line-height: 1.8; }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */

@media (max-width: 980px) {
  .joins-grid, .players-grid { grid-template-columns: 1fr; }
  .bring-grid { grid-template-columns: 1fr; }
  /* The sequence *is* the point of this section: Scout offers the name after
     the barkeep is described and before the player asks for it. Side by side
     that reads at a glance. Stacked as two blocks it cannot — put the whisper
     second and it arrives after the answer, put it first and you meet Fargul
     before you know there is a barkeep. Both orderings destroy the causality
     the section exists to demonstrate.

     So on narrow screens the two columns interleave into one true
     chronological run. `display: contents` dissolves the wrappers, making
     every beat a direct child of .stage and orderable. The cost is that
     .stage-table's panel has no box to paint on; the speaker labels and the
     gold of the whisper card carry the at-the-table / private distinction
     instead, and the whisper is inset so it still reads as a separate
     channel rather than another line of dialogue. */
  .stage { grid-template-columns: 1fr; gap: 1.05rem; }
  .stage-table, .stage-whisper, .script { display: contents; }

  .stage-table > .stage-label { order: 1; }
  .script > [data-step="1"]   { order: 2; }
  .whisper-label              { order: 3; }
  .whisper-card               { order: 4; }
  .script > [data-step="3"]   { order: 5; }
  .script > [data-step="4"]   { order: 6; }
  .stage-note                 { order: 7; }
  /* The explicit grid-column/row this carries for the two-column layout
     would otherwise win over `order` and strand it at the top. */
  .replay                     { order: 8; grid-column: auto; grid-row: auto; }

  /* The grid gap now supplies this spacing for every beat uniformly. */
  .stage-label { margin-bottom: 0; }

  .whisper-label { margin-top: .35rem; }
  .stage-note { margin-bottom: .4rem; }

  /* ── the beats, as a trail ────────────────────────────────────────
     Continues the hero's motif rather than inventing new signalling: a
     dashed road, gold behind the scout and faint ahead of it, with the
     scout itself at the head. Side by side, adjacency shows that the
     whisper lands between the description and the question; stacked,
     the trail has to say it instead. */
  .stage {
    --trail-x: .55rem;
    --stage-pad: 2.15rem;
    /* How far below a beat's top edge its node sits. The script uses the
       same figure to place the scout, so it lands on the node rather than
       near it — see advanceTrail() in app.js. */
    --node-y: 13px;
    padding-left: var(--stage-pad);
  }

  /* The road ahead: faint, short dashes, the full height of the moment. */
  .stage-trail {
    display: block; position: absolute;
    left: var(--trail-x); top: .35rem; bottom: 3.4rem; width: 1px;
    background: repeating-linear-gradient(180deg,
      rgba(215,228,250,.30) 0 1.5px, transparent 1.5px 8px);
  }

  /* The road already travelled: gold, longer dashes, grown to the beat
     that has most recently landed. */
  .stage-trail::before {
    content: ""; position: absolute; left: 0; top: 0; width: 1px;
    height: var(--trail, 0px);
    background: repeating-linear-gradient(180deg,
      var(--gold-lt) 0 5px, transparent 5px 13px);
    transition: height .7s cubic-bezier(.4, 0, .2, 1);
  }

  /* The scout, at the head of what it has travelled. */
  .stage-trail::after {
    content: ""; position: absolute; left: 50%; top: var(--trail, 0px);
    width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 6.5 L23.3 16.7 L33.5 20 L23.3 23.3 L20 33.5 L16.7 23.3 L6.5 20 L16.7 16.7 Z' fill='%23f0d894'/%3E%3C/svg%3E") center/contain no-repeat;
    filter: drop-shadow(0 0 7px rgba(240,216,148,.5));
    transition: top .7s cubic-bezier(.4, 0, .2, 1);
  }

  /* A node where each beat meets the trail. Absolute, so these never become
     grid items of the flattened stage or of .line's own grid. */
  .line, .stage-note { position: relative; }
  .line::before,
  .whisper-card::after,
  .stage-note::before {
    content: ""; position: absolute;
    left: calc(var(--trail-x) - var(--stage-pad));
    top: var(--node-y); width: 5px; height: 5px; margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--night-0, #0a0f1c);
    box-shadow: 0 0 0 1px rgba(160,180,215,.35);
    transition: box-shadow .5s ease, background .5s ease;
  }
  /* Scout's own beat: filled and haloed, because this is the one the
     section is actually about. */
  .whisper-card::after {
    /* Offset by the indent applied to the whisper block below, so this still
       meets the trail rather than floating short of it. */
    left: calc(var(--trail-x) - var(--stage-pad) - 1.25rem);
    top: var(--node-y); width: 7px; height: 7px; margin: -3px 0 0 -3px;
    background: var(--gold-lt);
    box-shadow: 0 0 0 3px rgba(201,162,76,.18), 0 0 10px rgba(240,216,148,.6);
  }
  .line.on::before, .stage-note.on::before {
    background: var(--gold);
    box-shadow: 0 0 0 1px rgba(201,162,76,.5);
  }

  /* Indented so the private channel still reads as a separate track rather
     than another line of table dialogue. */
  .whisper-label, .whisper-card { margin-left: 1.25rem; }
  .clocks, .scale-grid { grid-template-columns: 1fr; }
  .journals { grid-template-columns: 1fr; }
  .yours-grid { grid-template-columns: 1fr; }
  .seal-block { order: -1; }
  .seal { width: 210px; }
  .oaths { grid-template-columns: 1fr; }
  .topbar-links a:not(.btn) { display: none; }
}

@media (max-width: 620px) {
  .checks, .field-split { grid-template-columns: 1fr; }
  .posture-row { grid-template-columns: 1fr; gap: .3rem; }
  .line { grid-template-columns: 1fr; gap: .2rem; }
  .who { text-align: left; }
  .hero-inner { padding-bottom: 10rem; }
  .foot-grid { flex-direction: column; align-items: flex-start; }
  .foot-small { text-align: left; }
  .eyebrow::before, .eyebrow::after { display: none; }
}

/* ═══════════════════════ REDUCED MOTION ═══════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .line, .whisper-card, .stage-note { opacity: 1; transform: none; }
  .replay { opacity: 1; }
}