/* subsidized state · three colours, two typefaces, no boxes */

@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* metric-matched fallbacks so the swap does not shift lines */
@font-face { font-family: "serif-fallback"; src: local("Georgia"), local("Times New Roman"), local("DejaVu Serif"); size-adjust: 88%; ascent-override: 98%; descent-override: 26%; }
@font-face { font-family: "sans-fallback"; src: local("Helvetica"), local("Arial"), local("Liberation Sans"), local("DejaVu Sans"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }

:root {
  --paper: #F3EEE6;
  --ink: #0A0A0A;
  --red: #E3271B;
  --hair: rgba(10, 10, 10, .25);
  --g: 16px;
  --serif: "Instrument Serif", serif-fallback, Georgia, serif;
  --sans: "Inter", sans-fallback, Helvetica, Arial, sans-serif;
  --hl: clamp(56px, 17vw, 72px);
  --lede: 20px;
  --lab: 11px;
  --num: 11px;
  --big: 64px;
  --q: 44px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --strip-h: 0px;
}
@media (min-width: 1024px) {
  :root { --g: 48px; --hl: clamp(120px, 13vw, 200px); --lede: 26px; --lab: 12px; --num: 13px; --big: 140px; --q: 104px; }
  html { scroll-snap-type: y proximity; }
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; overflow-x: hidden; }
main { overflow-x: clip; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { display: block; overflow: visible; }
::selection { background: var(--ink); color: var(--paper); }
code { font-family: var(--sans); font-weight: 500; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
a.n { white-space: nowrap; cursor: pointer; }
svg a.n { text-decoration: underline; }
svg a.n:focus-visible { outline: none; }
svg a.n:focus-visible text { text-decoration-thickness: 2px; }
.r { color: var(--red); }
/* red text under ~18px fails contrast on ivory: small text stays ink and carries a red underline */
.r a.n, .label .r, .s6 li .r { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.label { font-family: var(--sans); font-weight: 500; font-size: var(--lab); letter-spacing: .01em; line-height: 1.35; margin: 0; }
.hl { font-family: var(--serif); font-weight: 400; font-size: var(--hl); line-height: .92; letter-spacing: -.02em; text-transform: lowercase; margin: 0; }
.copy, .lede { font-family: var(--serif); font-size: var(--lede); line-height: 1.25; max-width: 34ch; margin: 0; }
.copy a.n, .lede a.n { font-family: var(--sans); font-weight: 500; font-size: .7em; letter-spacing: 0; }
.bignum { font-family: var(--serif); font-size: var(--big); line-height: .9; letter-spacing: -.03em; }
.bignum a.n { text-underline-offset: 6px; }
.fallback { font-family: var(--sans); font-size: 13px; margin: 24px 0 0; }
.fallback[hidden] { display: none; }
@media (min-width: 1024px) { .copy, .lede { max-width: 30ch; } }

/* svg text */
.t { font-family: var(--sans); font-weight: 500; font-size: var(--num); fill: var(--ink); }
.t.red { fill: var(--ink); }
svg .t.red a.n, svg a.n .t.red { text-decoration-color: var(--red); }
.t.paper { fill: var(--paper); }
.t.lab { font-size: var(--lab); }

/* sample strip */
.sample-strip { position: fixed; z-index: 20; top: 0; left: 0; right: 0; margin: 0; padding: 5px var(--g) 4px; background: var(--paper); border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-strip { --strip-h: 24px; }

/* progress ticks: the right-edge index, current chapter named beside its tick */
.progress { display: none; }
@media (min-width: 1024px) {
  .progress { display: flex; position: fixed; z-index: 15; right: 16px; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: flex-end; gap: 4px; }
  .progress a { display: flex; align-items: center; gap: 10px; height: 12px; text-decoration: none; font-family: var(--sans); font-weight: 500; font-size: 11px; }
  .progress span { opacity: 0; transition: opacity .3s; white-space: nowrap; background: var(--paper); padding: 0 4px; }
  .progress.flash a.on span, .progress:hover a.on span, .progress a:hover span { opacity: 1; }
  .progress i { display: block; width: 6px; height: 1px; background: var(--ink); transition: width .4s var(--ease); }
  .progress a.on i { width: 16px; }
}

/* chapter label: small, lowercase, above each headline */
.chap { margin: 0 0 10px; }
.chap::first-letter { font-variant-numeric: tabular-nums; }

/* sections */
.sec { position: relative; min-height: 100svh; padding: calc(var(--strip-h) + 20px) var(--g) 32px; scroll-snap-align: start; }

/* ---------- 3 · the sawtooth ---------- */
/* a flex column: headline and copy on top, the plot takes what is left, caption under it. nothing overlaps. */
.s3 { height: 280svh; padding: 0; }
.s3 .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: calc(var(--strip-h) + 20px) var(--g) 0; display: flex; flex-direction: column; }
.s3 .head { flex: none; position: relative; z-index: 2; }
.s3 .hl { max-width: 6.5em; }
.s3 .copy { margin-top: 14px; }
.s3 .plot { position: relative; flex: 1 1 auto; min-height: 150px; margin: 6px calc(-1 * var(--g)) 0; }
.s3 .plot svg { position: absolute; left: 0; top: 0; }
.s3 .plot .pan { will-change: transform; }
.s3 .caption { flex: none; margin: 8px 0 14px; }
.s3 .riser { cursor: pointer; }
.s3 .riser:focus-visible { outline: none; }
.s3 .riser:focus-visible .rhit { stroke: var(--ink); stroke-width: 1; }
@media (max-height: 720px) and (max-width: 1023px) { .s3 .copy { font-size: 17px; } .s3 .hl { font-size: 52px; } }
@media (min-width: 1024px) {
  .s3 { height: 180svh; }
  .s3 .head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 48px; }
  .s3 .chap { grid-column: 1 / -1; }
  .s3 .hl { font-size: clamp(96px, min(11vw, 19vh), 170px); max-width: 6em; }
  .s3 .copy { margin: 6px 0 0; font-size: clamp(19px, min(1.8vw, 3.2vh), 26px); max-width: 34ch; }
  .s3 .caption { margin-bottom: 20px; }
}
.static .s3, .reduce .s3 { height: auto; }
.static .s3 .stage, .reduce .s3 .stage { position: relative; height: 100svh; }
/* short landscape screens: no sticky stage; the section grows and the plot gets a fixed height */
@media (max-height: 519px) and (orientation: landscape) {
  .s3 { height: auto; }
  .s3 .stage { position: relative; height: auto; min-height: 100svh; overflow: visible; }
  .s3 .head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .s3 .chap { grid-column: 1 / -1; }
  .s3 .hl { font-size: 56px; }
  .s3 .copy { margin-top: 4px; font-size: 17px; }
  .s3 .plot { flex: none; height: 300px; }
}

/* query strip */
.strip { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 50svh; overflow: auto; background: var(--paper); border-top: 1px solid var(--ink); padding: 14px var(--g) 18px; font-size: 12px; line-height: 1.5; }
.strip[hidden] { display: none; }
.strip p { margin: 0; }
.strip .q-title { font-weight: 500; }
.strip pre { font-family: var(--sans); font-size: 12px; white-space: pre-wrap; word-break: break-all; margin: 8px 0; }
.strip .q-curl { font-weight: 500; }
.strip .q-actions { display: flex; gap: 20px; }
.strip .q-out:empty { display: none; }

/* ---------- 1 · cover ---------- */
/* phones: headline, answer, square, ground. wide or landscape: answer left, square right, ground across */
.s1 { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "q" "ans" "led" "ground" "cap" "chap" "block" "skip"; align-content: start; padding-bottom: 20px; }
.s1 .kicker { grid-area: kick; max-width: 34ch; }
.s1 .blockline { grid-area: block; margin-top: 14px; }
.s1 .question { grid-area: q; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: .96; letter-spacing: -.02em; text-transform: lowercase; margin: 22px 0 0; max-width: 12em; }
.s1 .answer1 { grid-area: ans; margin-top: 20px; max-width: 30ch; }
.s1 .ledger { grid-area: led; margin-top: 30px; }
.s1 .ground { grid-area: ground; margin: 40px calc(-1 * var(--g)) 0; }
.s1 .caption { grid-area: cap; margin-top: 10px; max-width: 60ch; }
.s1 .chapters { grid-area: chap; margin-top: 22px; }
.s1 .skip { grid-area: skip; margin-top: 14px; justify-self: start; }
.s1 .fallback { grid-area: led; }
.chapters { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.chapters a { text-decoration: none; white-space: nowrap; }
.chapters a:hover { text-decoration: underline; }
.chapters span { opacity: .55; margin-right: 4px; }
@media (min-width: 1024px), (min-width: 700px) and (orientation: landscape) {
  .s1 { min-height: 100svh; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px;
    grid-template-rows: auto auto auto auto 1fr auto auto;
    grid-template-areas: "kick block" "q led" "ans led" "chap led" ". led" "ground ground" "cap skip"; }
  .s1 .blockline { margin: 0; text-align: right; }
  .s1 .question { font-size: clamp(30px, min(5.3vw, 8.4vh), 84px); max-width: 11.5em; margin-top: max(16px, 4vh); }
  .s1 .answer1 { font-size: clamp(17px, min(2.15vw, 3.5vh), 32px); max-width: min(32ch, 100%); margin-top: max(14px, 3.4vh); }
  @media (min-width: 1600px) { .s1 .answer1 { max-width: 36ch; } }
  .s1 .kicker { max-width: none; }
  .s1 .chapters { margin-top: max(14px, 3.6vh); }
  .s1 .ledger { align-self: end; justify-self: end; margin-top: 18px; }
  .s1 .ground { margin-top: 18px; align-self: end; }
  .s1 .caption { margin-top: 12px; }
  .s1 .skip { margin-top: 12px; justify-self: end; }
}

/* ---------- 2 · the lock ---------- */
.s2 { display: flex; flex-direction: column; padding-bottom: 24px; }
.s2 .hl { position: relative; z-index: 1; pointer-events: none; }
.s2 .big { position: absolute; top: calc(var(--strip-h) + 26px); right: var(--g); text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.s2 .bignum { font-size: 44px; }
.s2 .copy { margin-top: 22px; }
.s2 .drawing { margin-top: auto; padding-top: 20px; }
.s2 .under { margin-top: 4px; }
.s2 .labels .opt { opacity: 0; transition: opacity .3s; pointer-events: none; }
.s2 .labels .opt.shown { opacity: 1; }
.s2 .col { cursor: pointer; }
@media (min-width: 1024px) {
  .s2 { display: block; }
  .s2 .hl { font-size: var(--hl); }
  .s2 .big { top: calc(var(--strip-h) + 40px); }
  .s2 .bignum { font-size: var(--big); }
  .s2 .copy { position: absolute; left: var(--g); width: calc((100vw - 96px) * 3 / 12); bottom: 64px; font-size: 24px; z-index: 2; }
  .s2 .drawing { position: absolute; left: var(--g); right: 0; bottom: 16px; }
  .s2 .under { position: absolute; left: var(--g); width: calc((100vw - 96px) * 3 / 12); bottom: 14px; }
}

/* optional 30-day refill strip */
.r30[hidden] { display: none; }
.r30 svg { width: 100%; margin-top: 6px; }
.s3 .r30 { flex: none; margin: -6px 0 14px; max-width: 640px; }
.s4 .r30 { margin-top: 18px; max-width: 520px; }
.tick30 { cursor: pointer; }

/* ---------- 4 · who pays ---------- */
.s4 .copy { margin-top: 18px; }
.s4 .drawing { margin-top: 36px; }
@media (min-width: 1024px) {
  .s4 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; grid-template-rows: auto auto auto 1fr; align-content: start; }
  .s4 .chap { grid-column: 1; grid-row: 1; }
  .s4 .copy { grid-column: 1; grid-row: 2; margin: 18px 0 0; font-size: clamp(20px, min(1.9vw, 3.3vh), 28px); max-width: 30ch; }
  .s4 .hl { grid-column: 2; grid-row: 1 / span 3; text-align: right; }
  .s4 .r30 { grid-column: 1; grid-row: 3; }
  .s4 .drawing { grid-column: 1 / -1; grid-row: 4; align-self: end; margin: 24px 0 0; }
}

/* ---------- 5 · the gap ---------- */
.s5 { display: grid; grid-template-columns: 1fr auto; align-content: start; column-gap: 12px; }
.s5 .chap { grid-column: 1 / -1; }
.s5 .hl { grid-column: 1; }
.s5 .gapnum { grid-column: 2; margin: 0; align-self: end; font-size: var(--big); }
.s5 .copy { grid-column: 1 / -1; margin-top: 18px; }
.s5 .drawing { grid-column: 1 / -1; margin-top: 30px; }
.s5 .slider { grid-column: 1 / -1; margin-top: 18px; }
.s5 .fallback { grid-column: 1 / -1; }
@media (max-height: 700px) and (max-width: 1023px) { .s5 .copy { font-size: 16px; } }
/* wide or landscape: words and slider on the left, the ledger square large on the right */
@media (min-width: 1024px), (min-width: 700px) and (orientation: landscape) {
  .s5 { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; grid-template-rows: auto auto auto auto auto 1fr; }
  .s5 .chap { grid-column: 1; grid-row: 1; }
  .s5 .hl { grid-column: 1; grid-row: 2; }
  .s5 .gapnum { grid-column: 1; grid-row: 3; align-self: start; margin-top: 6px; }
  .s5 .copy { grid-column: 1; grid-row: 4; max-width: 32ch; }
  .s5 .slider { grid-column: 1; grid-row: 5; }
  .s5 .drawing { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; }
}
@media (min-width: 1024px) {
  .s5 .hl { font-size: clamp(96px, min(12vw, 17vh), 200px); }
  .s5 .gapnum { font-size: clamp(90px, min(13vw, 21vh), 210px); line-height: .85; }
  .s5 .copy { font-size: clamp(18px, min(1.7vw, 2.9vh), 24px); }
}
.slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 8px 0 2px; cursor: pointer; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
.slider input[type=range]::-moz-range-track { height: 1px; background: var(--ink); }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: var(--ink); border: 0; margin-top: -5.5px; }
.slider input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: var(--ink); border: 0; }
.slider .ticks { position: relative; height: 30px; margin: 0 6px; }
.slider .ticks span { position: absolute; top: 0; padding-top: 8px; white-space: nowrap; }
.slider .ticks span::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 6px; background: var(--ink); }
.slider .t-today { left: 0; }
.slider .t-even { transform: translateX(-100%); }
.slider .t-even::before { left: auto !important; right: 0; }
.slider .readout { font-family: var(--sans); font-size: 13px; margin: 6px 0 6px; min-height: 2.9em; }
.slider .reset { margin-left: 6px; }

/* ---------- 6 · verdict ---------- */
.s6 .answer { font-family: var(--serif); font-size: 34px; line-height: 1.05; letter-spacing: -.01em; margin: 22px 0 0; max-width: 18em; }
.s6 .vfig { margin-top: 28px; }
.s6 h3.label { margin: 0 0 10px; }
.s6 ul { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.s6 li { padding-left: 1.1em; text-indent: -1.1em; margin: 0 0 8px; max-width: 38em; }
.s6 li::before { content: "– "; }
.s6 .cases { margin-top: 56px; display: grid; gap: 48px; }
.s6 .watch { margin-top: 56px; }
.s6 .watch li::before { color: var(--red); }
.s6 .tests { margin-top: 64px; }
.s6 .row { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--hair); align-items: baseline; }
.s6 .row:last-child { border-bottom: 1px solid var(--hair); }
.s6 .row .st { grid-column: 2; }
.s6 .row .checks { grid-column: 2; font-size: 12px; display: flex; flex-direction: column; }
.s6 .row .res { grid-column: 3; grid-row: 1 / span 2; font-family: var(--serif); font-size: 26px; line-height: 1; }
.s6 .duo { margin-top: 64px; display: grid; gap: 48px; }
.s6 .verify-btn { font-family: var(--serif); font-size: 26px; line-height: 1.1; text-align: left; }
.s6 .verify-btn:disabled { cursor: progress; }
.s6 .verify-out { margin-top: 14px; font-size: 13px; }
.s6 .verify-out table { border-collapse: collapse; width: 100%; font-size: 12px; }
.s6 .verify-out th, .s6 .verify-out td { text-align: right; padding: 5px 0 5px 10px; border-bottom: 1px solid var(--hair); font-weight: 400; }
.s6 .verify-out th { font-weight: 500; }
.s6 .verify-out th:first-child, .s6 .verify-out td:first-child { text-align: left; padding-left: 0; }
.s6 .prior { margin-top: 64px; max-width: 60ch; }
.s6 footer { margin-top: 48px; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 6px 22px; }
@media (min-width: 1024px) {
  .s6 .answer { font-size: 64px; max-width: calc((100vw - 96px) * 9 / 12); }
  .s6 .cases { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .s6 .cases > div { padding: 0 24px; border-left: 1px solid var(--hair); }
  .s6 .cases > div:first-child { padding-left: 0; border-left: 0; }
  .s6 .row { grid-template-columns: 4em 1.3fr 1fr auto; }
  .s6 .row .st, .s6 .row .checks { grid-column: auto; }
  .s6 .row .res { grid-column: auto; grid-row: auto; }
  .s6 .duo { grid-template-columns: 7fr 5fr; gap: 48px; }
  .s6 .top { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 48px; align-items: end; }
  .s6 .top .answer { max-width: none; font-size: clamp(44px, min(4.4vw, 7.4vh), 72px); }
  .s6 .watch { margin: 0; padding-left: 24px; border-left: 1px solid var(--hair); }
}

/* ---------- motion (only after .in, only without reduced motion) ---------- */
.js-motion .s1 .question { opacity: 0; transform: translateY(12px); animation: up .7s var(--ease) .1s forwards; }
@keyframes up { to { opacity: 1; transform: none; } }
.js-motion .s2 .wipe { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease); }
.js-motion .s2.in .wipe { clip-path: inset(0 0 0 0); }
.js-motion .s2 .labels a.n:not(.opt) { opacity: 0; transition: opacity .5s; transition-delay: calc(1.3s + var(--i) * 40ms); }
.js-motion .s2.in .labels a.n:not(.opt) { opacity: 1; }
.js-motion .s4 .sq { opacity: 0; transition: opacity .4s; }
.js-motion .s4.in .sq { opacity: 1; }
.js-motion .s4 .draw1, .js-motion .s4 .draw2 { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s linear; }
.js-motion .s4.in .draw1 { stroke-dashoffset: 0; transition-delay: .4s; }
.js-motion .s4.in .draw2 { stroke-dashoffset: 0; transition-delay: 1.2s; }
.js-motion .s4 .cap, .js-motion .s4 .ticks, .js-motion .s4 .labs, .js-motion .s4 .users { opacity: 0; transition: opacity .5s; }
.js-motion .s4.in .cap { opacity: 1; transition-delay: 2s; }
.js-motion .s4.in .ticks { opacity: 1; transition-delay: 2.1s; }
.js-motion .s4.in .labs, .js-motion .s4.in .users { opacity: 1; transition-delay: 2.4s; }
.js-motion .s5 .outline { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.4s var(--ease); }
.js-motion .s5.in .outline { stroke-dashoffset: 0; }
.js-motion .s5 .speck { opacity: 0; transition: opacity .5s 1.4s; }
.js-motion .s5.in .speck { opacity: 1; }
.js-motion .s6 .answer, .js-motion .s6 .vfig, .js-motion .s6 .cases { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js-motion .s6.in .answer, .js-motion .s6.in .vfig, .js-motion .s6.in .cases { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* drawings laid over copy must not swallow clicks: only painted marks take the pointer */
.s3 svg.fix, .s4 .drawing svg { pointer-events: none; }
.s3 svg.fix > *, .s4 .drawing svg > * { pointer-events: auto; }