:root {
  color-scheme: light dark;
  --bg: #faf8f4;
  --bg-sunk: #f0ede6;
  --ink: #1c1c1a;
  --ink-soft: #5d5b54;
  --ink-faint: #918d83;
  --rule: #ddd7cb;
  --daily: #b55b35;
  --template: #26738a;
  --future: #654a91;
  --verify: #39785c;
  --warning: #a8812d;
  --dur: 620ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161519;
    --bg-sunk: #211f25;
    --ink: #f0ece6;
    --ink-soft: #bbb4aa;
    --ink-faint: #817b72;
    --rule: #39363e;
    --daily: #ee8a63;
    --template: #69b7cf;
    --future: #ad90dc;
    --verify: #78bd95;
    --warning: #d6b458;
  }
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.62 Lato, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--template); text-underline-offset: .18em; }
code { font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; }
.masthead { max-width: 780px; margin: 0 auto; padding: 20vh 24px 17vh; }
.eyebrow, .part { margin: 0 0 12px; color: var(--ink-faint); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.masthead h1 { margin: 0 0 20px; max-width: 12ch; font-size: clamp(42px, 7vw, 70px); font-weight: 700; letter-spacing: -.035em; line-height: .99; }
.standfirst { margin: 0; max-width: 64ch; color: var(--ink-soft); font-size: 19px; }
.scroll-hint { margin-top: 58px; color: var(--ink-faint); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 44px; margin-top: 10px; background: linear-gradient(var(--ink-faint), transparent); }
.scrolly { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 42px; max-width: 1360px; margin: 0 auto; padding: 0 24px; align-items: start; }
.prose, .stage-wrap, .stage { min-width: 0; }
.step { display: flex; min-height: 84vh; flex-direction: column; justify-content: center; opacity: .38; transition: opacity 260ms ease; }
.step.is-active { opacity: 1; }
.step h2 { margin: 0 0 16px; font-size: clamp(27px, 3vw, 38px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.step p { margin: 0 0 16px; }
.aside { padding-left: 15px; border-left: 2px solid var(--rule); color: var(--ink-soft); font-size: 14px; }
.stage-wrap { position: sticky; top: var(--story-header-height, 72px); height: calc(100vh - var(--story-header-height, 72px)); height: calc(100svh - var(--story-header-height, 72px)); display: grid; place-items: center; }
.stage { width: min(100%, 820px); }
#stage { display: block; width: 100%; overflow: visible; }
.stage-caption { min-height: 1.7em; margin: 8px 0 0; color: var(--ink-faint); font-size: 12px; letter-spacing: .05em; text-align: center; }
#marks > * { transition: opacity var(--dur) ease, transform var(--dur) cubic-bezier(.35,.05,.2,1); }
.axis, .rule { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.arrow { fill: none; stroke: var(--ink-faint); stroke-width: 1.7; marker-end: url(#arrow); }
.label { fill: var(--ink-soft); font-size: 15px; }
.label-small { fill: var(--ink-faint); font-size: 12px; }
.label-strong { fill: var(--ink); font-size: 17px; font-weight: 700; }
.daily { fill: var(--daily); stroke: var(--daily); }
.template { fill: var(--template); stroke: var(--template); }
.future { fill: var(--future); stroke: var(--future); }
.verify { fill: var(--verify); stroke: var(--verify); }
.warning { fill: var(--warning); stroke: var(--warning); }
.soft-box { fill: var(--bg-sunk); stroke: var(--rule); stroke-width: 1.5; }
.template-line { fill: none; stroke: var(--template); stroke-width: 3; }
.future-line { fill: none; stroke: var(--future); stroke-width: 3; }
.thin-line { fill: none; stroke-width: 1.7; opacity: .75; }
.area { opacity: .12; }
.colophon { max-width: 980px; margin: 6vh auto 0; padding: 11vh 24px 12vh; border-top: 1px solid var(--rule); }
.colophon h2 { margin: 34px 0 12px; font-size: 20px; }
.colophon p { color: var(--ink-soft); }
.generated { margin-top: 32px; font-size: 12px; color: var(--ink-faint) !important; }
@media (max-width: 820px) {
  .masthead { padding-top: 14vh; }
  .scrolly { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .stage-wrap { grid-row: 1; height: calc(56vh - var(--story-header-height, 72px)); top: var(--story-header-height, 72px); z-index: 2; background: var(--bg); border-bottom: 1px solid var(--rule); }
  .stage { width: 100%; padding: 0 8px; }
  .prose { grid-row: 2; }
  .step { min-height: 78vh; padding: 8vh 24px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #marks > *, .step { transition: none; } }