/* ==========================================================================
   Scroll explainers (Narrow and Wide, Dissolving Pain): long-scroll editorial
   pages. Designed by Matt in Google Stitch and coded here by hand; colour
   and type come from tokens.css and the rules are written up in design.md. Dark throughout, one gold accent, Instrument Serif
   for display and Archivo for text.

   Motion rules (README, PRODUCT.md): slow, staggered, nothing in sync;
   nothing scales or moves on hover; everything off under reduced motion
   and the page fully legible static. Text reveals are opacity plus a rise
   of under 24px and only exist when the script runs (html.js), so the page
   reads as a plain document without it.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink-80);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  --p: 0; /* scroll progress, set by narrow-and-wide.js */
}

::selection { background: var(--amber); color: var(--night); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

a { color: inherit; }

/* --- Ambient ground ------------------------------------------------------ */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image: radial-gradient(rgba(237, 186, 125, 0.03) 1px, transparent 0);
  background-size: 28px 28px;
}
.glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.glow-a {
  top: -15%; right: -5%; width: 620px; height: 620px;
  background: radial-gradient(circle at 40% 40%, rgba(237, 186, 125, 0.14), rgba(59, 42, 20, 0.12) 50%, transparent 72%);
  opacity: calc(0.7 - var(--p) * 0.5);
}
.glow-b {
  top: 45%; left: -12%; width: 680px; height: 680px;
  background: radial-gradient(circle at 60% 50%, rgba(242, 241, 238, 0.06), rgba(237, 186, 125, 0.04) 50%, transparent 72%);
  opacity: 0.5;
}
.glow-c {
  bottom: -10%; right: 4%; width: 540px; height: 540px;
  background: radial-gradient(circle at 50% 60%, rgba(237, 186, 125, 0.12), transparent 70%);
  opacity: calc(0.15 + var(--p) * 0.45);
}
.spine {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 1280px); padding: 0 64px; display: none;
}
.spine::after { content: ""; display: block; height: 100%; width: 42%; border-right: 1px solid rgba(242, 241, 238, 0.06); }

/* --- Top bar ------------------------------------------------------------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  background: rgba(16, 17, 18, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242, 241, 238, 0.07);
}
.wordmark {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-55); text-decoration: none; transition: color 0.2s ease;
}
.wordmark:hover { color: var(--amber); }
.narration {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-55); transition: color 0.2s ease;
}
.narration:hover { color: var(--night-ink); }
.narration[aria-pressed="true"] { color: var(--amber); }
.narration[aria-disabled="true"] { cursor: default; color: var(--ink-42); }
.switch {
  position: relative; width: 28px; height: 12px; border-radius: 999px;
  border: 1px solid rgba(242, 241, 238, 0.22); background: var(--night-raised);
}
.knob {
  position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-45); transition: transform 0.25s ease, background 0.25s ease;
}
.narration[aria-pressed="true"] .knob { transform: translateX(16px); background: var(--amber); }

/* --- Chapter rail -------------------------------------------------------- */
.rail {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: none; flex-direction: column; align-items: flex-end; gap: 10px;
}
.rail a { display: block; padding: 5px 0; }
.tick {
  display: block; width: 10px; height: 1.5px; background: rgba(242, 241, 238, 0.22);
  transition: width 0.4s ease, background 0.4s ease;
}
.rail a:hover .tick { background: var(--amber); }
.tick.on { width: 26px; background: var(--amber); }

/* --- Layout -------------------------------------------------------------- */
main { position: relative; z-index: 1; width: min(100% - 48px, 1152px); margin-inline: auto; padding-top: 72px; }

.chapter {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  min-height: 85vh; padding: 88px 0; scroll-margin-top: 64px;
  border-bottom: 1px solid rgba(242, 241, 238, 0.08);
  align-content: center;
}
.chapter.last { border-bottom: 0; min-height: 100vh; }

.chapter-head { align-self: start; }
.chapter-mark { display: block; width: 24px; height: 1px; background: var(--amber); opacity: 0.6; margin-bottom: 18px; }
h2 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.5vw, 64px); line-height: 1.02; letter-spacing: -0.015em; color: var(--night-ink);
  text-wrap: balance;
}
.chapter-body { max-width: 62ch; display: grid; gap: 30px; }
.chapter-body p { margin: 0; text-wrap: pretty; }
.chapter-body > p { font-size: 19px; line-height: 1.8; color: var(--night-ink); }
.chapter-body > p.quiet { color: var(--ink-62); }
.dropcap::first-letter {
  float: left; font-family: var(--serif); font-size: 3.4em; line-height: 0.82;
  padding: 0.08em 0.12em 0 0; color: var(--night-ink);
}

/* "Do this now" instructions carry the one gold rule: the page's now state. */
.now {
  margin: 0; padding: 22px 24px 22px 26px;
  background: var(--night-raised);
  border: 1px solid rgba(242, 241, 238, 0.08); border-left: 2px solid var(--amber);
  border-radius: 10px;
}
.now p { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.45; color: var(--night-ink); }

/* --- Hero ---------------------------------------------------------------- */
.hero { min-height: 92vh; padding: 64px 0 80px; gap: 48px; }
.eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber);
}
.eyebrow-rule { width: 32px; height: 1px; background: var(--amber); }
h1 {
  margin: 0 0 28px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 8vw, 100px); line-height: 1.02; letter-spacing: -0.02em; color: var(--night-ink);
  text-wrap: balance;
}
.lead { margin: 0 0 34px; max-width: 30em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--ink-62); }
.hero-copy > p:last-child { margin: 0; }

/* --- The gold action ----------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 32px; border-radius: 999px; border: 1px solid transparent;
  background: var(--amber); color: var(--on-amber);
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.pill:hover { background: var(--amber-hover); }
.pill.ghost { background: transparent; border-color: var(--amber); color: var(--amber); }
.pill.ghost:hover { background: rgba(237, 186, 125, 0.1); }
.back {
  display: inline-block; margin-top: 14px; font-size: 14px; color: var(--ink-62);
  text-decoration: none; border-bottom: 1px solid rgba(242, 241, 238, 0.2); padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.back:hover { color: var(--amber); border-color: var(--amber); }
.text-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--amber); transition: color 0.2s ease;
}
.text-btn:hover { color: var(--amber-hover); }
.text-btn[aria-pressed="true"] { color: var(--night-ink); }

/* --- Plates (the figures) ----------------------------------------------- */
.plate {
  position: relative; margin: 0; padding: 22px 24px 18px; overflow: hidden;
  background: rgba(24, 25, 26, 0.9);
  border: 1px solid rgba(242, 241, 238, 0.08); border-radius: 12px;
  transition: border-color 0.5s ease;
}
.plate:hover { border-color: rgba(237, 186, 125, 0.35); }
.plate-head, .plate-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 11px; color: var(--ink-45);
}
.plate-head { padding-bottom: 12px; border-bottom: 1px solid rgba(242, 241, 238, 0.08); }
.plate-label { letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.plate-note { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--amber); }
.plate-foot { padding-top: 10px; font-size: 12px; }
.gold { color: var(--amber); }
.plate-body { padding: 22px 0 10px; }
.plate-body.split { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
.plate-body svg { display: block; width: 100%; height: auto; overflow: visible; }
.plate-aside { border-top: 1px solid rgba(242, 241, 238, 0.08); padding-top: 16px; }
.aside-head { margin: 0 0 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); }
.aside-body { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--ink-55); }

/* Hero plate */
.hero-plate { padding: 32px; }
.plate-bloom {
  position: absolute; right: -64px; top: -64px; width: 224px; height: 224px; border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 186, 125, 0.16), rgba(59, 42, 20, 0.18) 55%, transparent 72%);
  filter: blur(28px); pointer-events: none;
}
#hero-field { position: relative; padding: 24px 0; cursor: pointer; border-radius: 6px; }
.field-svg { max-width: 300px; margin-inline: auto; }
.field-svg * { transform-box: fill-box; transform-origin: center; }

/* --- The plate animations ------------------------------------------------
   Durations are all different so nothing pulses in sync. */
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.75); } }
@keyframes settle  { from { transform: scale(0.8); opacity: 0.55; } to { transform: scale(1); opacity: 1; } }
@keyframes ring    { from { transform: scale(0.85); opacity: 0.55; } to { transform: scale(1.55); opacity: 0.08; } }
@keyframes turn    { to { transform: rotate(360deg); } }
@keyframes ping    { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.2); opacity: 0; } }
@keyframes clench  { from { transform: scale(1); } to { transform: scale(0.9); } }
@keyframes press   { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes travel  { to { transform: translateX(-140px); } }
@keyframes bloom   { from { transform: scale(1); opacity: 0.4; } to { transform: scale(1.35); opacity: 0.8; } }
@keyframes wander  { from { transform: scale(0.45, 0.45); } to { transform: scale(1, 1); } }

.aperture   { animation: breathe 16s ease-in-out infinite alternate; transition: transform 1.4s ease; }
.aura       { animation: settle 11s ease-in-out infinite alternate; }
.aura-ring  { animation: settle 13s ease-in-out infinite alternate-reverse; }
.focal-ring { animation: ring 7s ease-out infinite; }
.reticle    { animation: turn 90s linear infinite; }
.rays       { transition: opacity 1.2s ease; }
#hero-plate.wide .aperture { animation: none; transform: scale(2.1); }
#hero-plate.wide .rays { opacity: 0.12; }
#hero-plate.wide .focal-ring { animation-duration: 12s; }

.beam-svg .ping { transform-box: fill-box; transform-origin: center; animation: ping 2.8s ease-out infinite; }

.grip-svg .grip-ring, .grip-svg .grip-lock { transform-box: fill-box; transform-origin: center; }
.grip-svg .grip-ring { animation: clench 3.6s ease-in-out infinite alternate; }
.grip-svg .grip-lock { animation: clench 4.4s ease-in-out infinite alternate-reverse; }
.grip-svg .arrow { animation: press 2.2s ease-in-out infinite alternate; }
.grip-svg .a2 { animation-delay: -0.6s; }
.grip-svg .a3 { animation-delay: -1.1s; }
.grip-svg .a4 { animation-delay: -1.7s; }

.traces { display: grid; gap: 10px; }
.trace-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; margin-bottom: 2px; }
.trace-key { letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); }
.trace-val { color: var(--ink-62); font-weight: 500; }
.trace-key.held, .trace-val.held { color: var(--amber); }
.trace svg { height: 36px; }
.trace-cap { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-55); }
.js .draw { stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 2.4s ease 0.4s; }
.js .in .draw { stroke-dashoffset: 0; }
.js .in .held-line { transition-delay: 1.1s; }

.eeg-svg .wave { animation: travel 6.5s linear infinite; }

.dial-svg { max-width: 340px; margin-inline: auto; }
.dial-ap { transform-box: fill-box; transform-origin: center; transition: transform 0.35s ease-out; }
.dial-ap.idle { animation: wander 12s ease-in-out infinite alternate; }
.dial-controls { display: grid; gap: 10px; padding-top: 10px; }
.dial-ends { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-62); }
.dial-sub { margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-62); }
.dial-range {
  width: 100%; height: 28px; margin: 0; background: transparent; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.dial-range::-webkit-slider-runnable-track { height: 2px; background: rgba(242, 241, 238, 0.14); border-radius: 2px; }
.dial-range::-moz-range-track { height: 2px; background: rgba(242, 241, 238, 0.14); border-radius: 2px; }
.dial-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -8px;
  border-radius: 50%; background: var(--amber); border: 3px solid var(--night); box-shadow: 0 0 0 1px var(--amber);
}
.dial-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--amber); border: 3px solid var(--night); box-shadow: 0 0 0 1px var(--amber);
}

/* --- The try ------------------------------------------------------------- */
.trial { padding: 36px 32px; }
.trial-orb {
  position: absolute; top: 50%; right: -40px; width: 200px; height: 200px; border-radius: 50%;
  transform: translateY(-50%); pointer-events: none; filter: blur(30px);
  background: radial-gradient(circle, rgba(237, 186, 125, 0.22), rgba(59, 42, 20, 0.3) 55%, transparent 72%);
  transition: width 1.2s ease, height 1.2s ease, opacity 1.2s ease; opacity: 0.6;
}
.trial.on .trial-orb { width: 300px; height: 300px; opacity: 1; animation: bloom 5.5s ease-in-out infinite alternate; transform-origin: center; }
.trial.on .trial-orb { transform: translateY(-50%); }
.trial-cue {
  position: relative; z-index: 1; min-height: 3.2em; margin: 34px 0 30px; max-width: 22ch;
  font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.25; color: var(--night-ink);
  transition: opacity 0.7s ease;
}
.trial-cue.fade { opacity: 0; }
.trial-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; }
.doors.desk { display: none; }
.doors.mobile { display: grid; gap: 4px; justify-items: start; padding-top: 8px; }

/* --- Dissolving Pain plates ---------------------------------------------- */
@keyframes radiate   { from { transform: scale(0.3); opacity: 0.7; } to { transform: scale(3.4); opacity: 0; } }
@keyframes swell     { from { transform: scale(1); } to { transform: scale(1.5); } }
@keyframes fire      { to { transform: translateX(-120px); } }
@keyframes circulate { to { stroke-dashoffset: -365; } }
@keyframes drift     { to { stroke-dashoffset: -70; } }

.signal-svg .pulse, .signal-svg .hot { transform-box: fill-box; transform-origin: center; }
.signal-svg .pulse { animation: radiate 6s ease-out infinite; }
.signal-svg .p2 { animation-duration: 7.5s; animation-delay: -2.5s; }
.signal-svg .p3 { animation-duration: 9s; animation-delay: -5s; }
.signal-svg .hot { animation: swell 4.2s ease-in-out infinite alternate; }

.fire-svg .fire { animation: fire 9s linear infinite; }

.loop-svg .loop-ring { stroke-dasharray: 6 9; animation: circulate 18s linear infinite; }
.loop-svg .grip-ring, .loop-svg .hot { transform-box: fill-box; transform-origin: center; }
.loop-svg .grip-ring { animation: clench 3.8s ease-in-out infinite alternate; }
.loop-svg .hot { animation: swell 3.1s ease-in-out infinite alternate-reverse; }

#away-field { cursor: pointer; border-radius: 6px; }
.away-svg { max-width: 360px; margin-inline: auto; }
.away-svg .away-point, .away-svg .away-beam { transition: transform 1.6s ease; }
.away-svg .away-point .hot { transform-box: fill-box; transform-origin: center; animation: swell 3.6s ease-in-out infinite alternate; }
.away-svg .beam-line, .away-svg .beam-cone { transition: transform 1.6s ease; transform-origin: 160px 65px; }
#away-plate.pushed .away-point { transform: translateX(104px); }
#away-plate.pushed .beam-line, #away-plate.pushed .beam-cone { transform: scaleX(3.6); }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.step { display: grid; justify-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }
.step svg { width: 100%; max-width: 92px; height: auto; border: 1px solid rgba(242, 241, 238, 0.08); border-radius: 6px; }
.step:last-child { color: var(--amber); }
.mist { animation: drift 20s linear infinite; }
.js .steps .reveal:nth-child(1) { transition-delay: 0.1s; }
.js .steps .reveal:nth-child(2) { transition-delay: 0.3s; }
.js .steps .reveal:nth-child(3) { transition-delay: 0.5s; }
.js .steps .reveal:nth-child(4) { transition-delay: 0.7s; }
.js .steps .reveal:nth-child(5) { transition-delay: 0.9s; }

.med-links { list-style: none; margin: 0; padding: 6px 0 0; }
.med-links li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid rgba(242, 241, 238, 0.08); }
.med-links li:last-child { border-bottom: 0; }
.med-links a { font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--night-ink); text-decoration: none; transition: color 0.2s ease; }
.med-links a:hover { color: var(--amber-hover); }
.med-links span { font-size: 12.5px; color: var(--ink-45); }

/* --- Footer -------------------------------------------------------------- */
.foot {
  position: relative; z-index: 1; width: min(100% - 48px, 1152px); margin-inline: auto;
  padding: 48px 0 56px; border-top: 1px solid rgba(242, 241, 238, 0.08);
  font-size: 11.5px; line-height: 1.6; color: rgba(242, 241, 238, 0.4);
}
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; margin-bottom: 20px; }
.foot-mark, .foot nav a { letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px; color: var(--ink-45); text-decoration: none; }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.foot nav a { transition: color 0.2s ease; }
.foot nav a:hover { color: var(--amber); }
.foot-small { margin: 0; max-width: 72ch; }

/* --- The periphery veil -------------------------------------------------- */
.veil {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
  --vx: 50%; --vy: 50%;
  background: radial-gradient(circle at var(--vx) var(--vy), transparent 0, transparent 90px, rgba(16, 17, 18, 0.55) 240px, rgba(16, 17, 18, 0.93) 520px);
  transition: opacity 0.7s ease;
}
.veil.on { opacity: 1; }

/* --- Reveals (script only) ---------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .reveal:nth-child(4) { transition-delay: 0.24s; }
.js .reveal:nth-child(5) { transition-delay: 0.32s; }

/* --- Wider screens ------------------------------------------------------- */
@media (min-width: 720px) {
  .bar { padding: 20px 48px; }
  main, .foot { width: min(100% - 96px, 1152px); }
  .plate-body.split { grid-template-columns: 3fr 2fr; }
  .plate-aside { border-top: 0; border-left: 1px solid rgba(242, 241, 238, 0.08); padding: 0 0 0 22px; }
}
@media (min-width: 1024px) {
  .bar { padding: 20px 64px; }
  .spine { display: block; }
  .rail { display: flex; right: 40px; }
  .chapter { grid-template-columns: 5fr 7fr; gap: 64px; }
  .chapter-head { position: sticky; top: 128px; }
  .hero { grid-template-columns: 7fr 5fr; align-items: center; }
  .hero .chapter-head { position: static; }
  .doors.desk { display: grid; gap: 6px; justify-items: start; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(242, 241, 238, 0.08); }
  .doors.mobile { display: none; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* --- Legible static ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .dial-ap.idle { transform: none; }
}