/* Page, type, rail, buttons and the scroll-figure layout. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--graphite);
  font-family:var(--f-text);font-size:var(--body-size);line-height:var(--body-lh);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums proportional-nums;
}
/* paper tooth */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .34  0 0 0 0 .3  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection{background:var(--hl)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
p{margin:0 0 1.05em}
p,li{text-wrap:pretty;hanging-punctuation:first last}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:var(--h-weight);text-wrap:balance}
/* italics are only for math variables, as textbooks do */
i{font-style:italic}
em{font-style:normal}
sub{font-size:.7em}

.page{position:relative;z-index:1;padding:0 clamp(18px,4vw,64px) 0 var(--gutter-l)}
.wrap{max-width:78rem;margin:0 auto}

/* ───────── Type ───────── */
.kicker{font-family:var(--f-ui);font-weight:500;color:var(--ink);font-size:17px;margin-bottom:.35em}
h1{font-size:clamp(42px,5.8vw,84px);line-height:1.1;letter-spacing:-.012em;margin-bottom:.42em}
.lead{font-size:clamp(20px,1.55vw,23px);line-height:1.56}
.meta{font-family:var(--f-ui);font-size:15px;color:var(--graphite-2);margin-top:2.2em}
h2{font-size:clamp(28px,2.9vw,36px);line-height:1.15;letter-spacing:-.018em;margin-bottom:.75em;position:relative}
h2 .num{position:absolute;right:calc(100% + 1.1rem);top:.5em;font-size:.48em;color:var(--graphite-3);font-variant-numeric:tabular-nums;letter-spacing:0}
h3{font-size:23px;line-height:1.25;letter-spacing:-.01em;margin-bottom:.35em}
.prose{max-width:33rem}
.wide{max-width:66rem;margin:4.5rem 0}
.math{font-style:italic;white-space:nowrap}
.hint{font-family:var(--f-ui);font-size:14.5px;color:var(--graphite-2);margin-bottom:1.1rem}
.caption{font-size:17px;min-height:3em;color:var(--graphite)}
.caption.error{color:var(--red)}
.c-vir{color:var(--viridian)} .c-och{color:var(--ochre-text)} .c-plum{color:var(--plum)} .c-ink{color:var(--ink)} .c-mad{color:var(--madder)}

/* a term that lights up part of the figure (highlighter stroke) */
.term{background:linear-gradient(transparent 62%,var(--hl) 62%,var(--hl) 92%,transparent 92%);cursor:default}
.term:hover,.term:focus-visible{background:linear-gradient(transparent 20%,var(--hl) 20%,var(--hl) 92%,transparent 92%);outline:none}
/* a term with a definition on hover (dotted underline) */
.def{text-decoration:underline dotted color-mix(in srgb,var(--graphite) 45%,transparent);text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:help;transition:text-decoration-color .2s,color .2s}
.def:hover,.def:focus-visible{text-decoration-color:var(--ink);color:var(--ink);outline:none}

/* ───────── Controls ───────── */
.btn{border:1px solid var(--rule);background:var(--paper-hi);border-radius:999px;padding:7px 16px;font-family:var(--f-ui);font-size:15px;cursor:pointer;
  transition:transform .18s var(--ease),border-color .2s,color .2s,background-color .2s;corner-shape:squircle}
.btn:hover{border-color:var(--graphite-3)}
.btn.ink{color:var(--ink);border-color:rgba(45,75,142,.4)}
.btn:disabled{opacity:.4;cursor:default}
.chip{border:1px solid var(--rule);background:transparent;border-radius:999px;padding:5px 14px;font-family:var(--f-ui);font-size:14.5px;cursor:pointer;color:var(--graphite-2);
  transition:transform .18s var(--ease),border-color .2s,color .2s,background-color .2s}
.chip:hover{border-color:var(--graphite-3);color:var(--graphite)}
.chip.on{border-color:var(--ink);color:var(--ink);background:var(--ink-soft)}
.btn:active,.chip:active{transform:scale(.96)}
.linkbtn{border:0;background:none;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
/* a number you drag sideways (or tap, or arrow-key) to change */
.num-drag{display:inline-block;min-width:.8em;text-align:center;color:var(--ink);font-style:normal;font-weight:400;border-bottom:1.5px dashed var(--ink);padding:0 .12em;
  cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;position:relative;transition:background .2s;border-radius:2px 2px 0 0}
.num-drag:hover,.num-drag.dragging{background:var(--ink-soft)}
.num-drag::before,.num-drag::after{position:absolute;top:50%;transform:translateY(-50%);font-size:.42em;color:var(--graphite-3);opacity:0;transition:opacity .2s}
.num-drag::before{content:"‹";right:100%}
.num-drag::after{content:"›";left:100%}
.num-drag:hover::before,.num-drag:hover::after,.num-drag.dragging::before,.num-drag.dragging::after,.num-drag:focus-visible::before,.num-drag:focus-visible::after{opacity:1}

/* ───────── Rail ───────── */
.rail{position:fixed;left:clamp(14px,2.4vw,34px);top:50%;transform:translateY(-50%);z-index:30;width:34px;padding:16px 0;font-family:var(--f-ui)}
/* Keep a continuous hover area from the dashes through the titles, including between rows. */
.rail:hover,.rail:focus-within,.rail.open{width:min(var(--rail-width,300px),calc(100vw - 24px))}
.rail::before{content:"";position:absolute;left:calc(-1 * clamp(14px,2.4vw,34px));top:-100vh;bottom:-100vh;width:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0 62%,rgba(237,235,228,0));transition:width .5s var(--ease)}
.rail:hover::before,.rail:focus-within::before,.rail.open::before{width:430px}
@media (min-width:1360px){ .rail::before{display:none} }
.rail ol{list-style:none;margin:0;padding:0}
/* chapters sit flush left; sections are indented so their titles line up under the chapter title */
.r-item{--s:1;position:relative;display:flex;align-items:center;width:100%;height:28px;text-decoration:none;color:var(--graphite-2);cursor:pointer}
.r-sec{height:21px}
.r-ch > ol{margin:0 0 9px}
.mark{position:absolute;left:0;top:50%;margin-top:-.75px;width:20px;height:1.5px;border-radius:1px;background:var(--graphite-2);overflow:hidden;transition:width .4s var(--ease),background .3s}
.r-sec .mark{left:9px;width:9px;background:var(--graphite-3)}
.r-sec.is-read .mark{background:var(--graphite-2)}
.r-sec.is-active .mark{width:22px;background:var(--rule)}
.mark .fill{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.r-sec.is-active .mark .fill{transform:scaleX(var(--p,0))}
.future .mark,.r-ch.future > .r-item .mark{background:repeating-linear-gradient(90deg,var(--graphite-3) 0 2px,transparent 2px 4.5px)}
.future{cursor:default}
.lab{position:absolute;left:36px;top:50%;translate:0 -50%;display:inline-block;white-space:nowrap;font-size:14px;line-height:1;opacity:0;transform:translateX(-8px);transform-origin:0 55%;pointer-events:none;
  transition:opacity .3s var(--ease) calc(var(--i,0) * 12ms),transform .22s var(--ease),color .2s}
.r-sec .lab{left:58px}
.r-ch > .r-item .lab{font-size:15.5px;font-weight:550;color:var(--graphite);letter-spacing:-.005em}
.lab .n{display:inline-block;min-width:2.1em;color:var(--graphite-3);font-weight:400;font-variant-numeric:tabular-nums}
.r-ch > .r-item .lab .n{min-width:1.4em}
.future .lab,.r-ch.future > .r-item .lab{color:var(--graphite-3)}
.lab em{font-size:12.5px;margin-left:.5em;color:var(--graphite-3)}
/* the title under the pointer magnifies like the Dock */
.rail:hover .lab,.rail:focus-within .lab,.rail.open .lab{opacity:1;transform:scale(var(--s,1));pointer-events:auto}
a.r-item:hover .lab,.r-sec.is-active .lab{color:var(--ink)}
.r-item:focus-visible{outline:none}
.r-item:focus-visible .lab{text-decoration:underline;text-underline-offset:3px}

/* Phone navigation is built from course.js, just like the desktop rail. */
.contents-bar{display:none}
.contents-sheet{padding:0;border:0;color:var(--graphite);background:var(--paper-hi)}
.contents-sheet:not([open]){display:none}

@media (max-width:860px), (hover:none) and (pointer:coarse){
  html.contents-open{overflow:hidden}
  .contents-bar{position:fixed;inset:0 0 auto;z-index:35;height:var(--contents-height);padding:env(safe-area-inset-top,0px) 20px 0;
    display:flex;align-items:center;gap:16px;background:var(--paper);border-bottom:1px solid var(--rule);font-family:var(--f-ui);font-size:13px}
  .contents-current{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--graphite-2)}
  .contents-toggle,.contents-close{flex:none;min-height:44px;border:0;background:none;padding:8px 0;color:var(--ink);font:14px var(--f-ui);cursor:pointer}
  .contents-sheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:82vh;max-height:82dvh;overflow-y:auto;overscroll-behavior:contain;
    padding:0 20px calc(20px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;box-shadow:0 -1px 0 var(--rule)}
  .contents-sheet::backdrop{background:color-mix(in srgb,var(--graphite) 22%,transparent)}
  .contents-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;background:var(--paper-hi)}
  .contents-head h2{font-size:28px;margin:0}
  .contents-list,.contents-sections{list-style:none;margin:0;padding:0}
  .contents-chapter-link{display:flex;align-items:center;min-height:48px;text-decoration:none;font-size:19px;line-height:1.4;padding:12px 0}
  .contents-chapter+.contents-chapter{border-top:1px solid var(--rule)}
  .contents-sections{padding-bottom:14px}
  .contents-sections a{display:grid;grid-template-columns:2.5em minmax(0,1fr);align-items:baseline;gap:8px;min-height:48px;padding:12px 0;text-decoration:none;font-size:17px;line-height:1.4}
  .contents-number{font:13px var(--f-ui);color:var(--graphite-2)}
  .contents-sections a[aria-current]{color:var(--ink)}
  .contents-sections a[aria-current] .contents-number{color:var(--ink)}
  .contents-sections small{grid-column:2;font:12px var(--f-ui);color:var(--graphite-2)}
}

/* ───────── Scroll figures: text steps on the left, a sticky figure on the right ───────── */
.scrolly{display:grid;grid-template-columns:minmax(0,29rem) minmax(0,1fr);column-gap:clamp(28px,5vw,92px)}
.scrolly.scrolly-paired{grid-template-columns:minmax(0,19rem) minmax(0,1fr);column-gap:clamp(20px,3vw,40px)}
.steps{grid-column:1;grid-row:1;padding-top:var(--entry-space,0px);padding-bottom:var(--pin-tail,50vh)}
.step{min-height:84vh;padding-top:16vh;transition:opacity .6s var(--ease)}
.step:not(.is-active){opacity:.26}
.step.hero{min-height:100vh;padding-top:21vh}
.step:last-child{padding-bottom:24vh}
.stage-col{grid-column:2;grid-row:1;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
.stage{width:100%;position:relative}

.chapter-end{padding:10vh 0 24vh;max-width:33rem}
.end-mark{width:48px;height:1.5px;background:var(--graphite);margin-bottom:2rem}
.chapter-end p{color:var(--graphite-2)}

/* ───────── Smooth jumps between sections ───────── */
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:var(--apple)}
::view-transition-group(jump-title){animation-duration:.62s;animation-timing-function:var(--apple)}
::view-transition-old(jump-title),::view-transition-new(jump-title){animation-duration:.62s;height:100%;object-fit:contain}

/* ───────── Small screens ───────── */
@media (max-width:860px), (hover:none) and (pointer:coarse){
  body{font-size:calc(var(--body-size) - 1px)}
  .page{padding-top:var(--contents-height);padding-right:20px}
  [data-section]{scroll-margin-top:var(--contents-height)}
  .rail{display:none}
  .rail .mark{width:14px}
  .r-sec .mark{left:6px;width:7px}
  .r-sec.is-active .mark{width:14px}
  .scrolly{grid-template-columns:minmax(0,1fr)}
  .scrolly.scrolly-paired{grid-template-columns:minmax(0,1fr)}
  .stage-col{grid-column:1;grid-row:1;top:var(--contents-height);height:auto;z-index:4;padding:8px 0 16px;background:var(--paper)}
  .stage-col::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px;background:linear-gradient(var(--paper),transparent);pointer-events:none}
  .steps{grid-row:2;padding-bottom:var(--pin-tail,0px)}
  .step{min-height:72vh;padding-top:5vh}
  .step.hero{min-height:auto;padding-top:3vh}
  .scrolly-compact .step{min-height:max(280px,calc(100svh - var(--contents-height) - var(--stage-height,0px)));padding-top:24px}
  /* Let the first explanation use the arrival hold's space while the figure
     waits for its measured animation start. Its scroll timeline stays intact. */
  .scrolly-compact .step-copy{translate:0 calc(-1 * var(--entry-space,0px))}
  h2 .num{position:static;display:block;margin-bottom:.15em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ───────── Slider and chart dragging (js/core/slider.js) ───────── */
.slider{display:flex;align-items:center;gap:12px;margin:6px 0 2px;font-family:var(--f-ui);font-size:12px;color:var(--graphite-3);font-variant-numeric:tabular-nums}
.slider input{flex:1;-webkit-appearance:none;appearance:none;height:22px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.slider input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--ink) calc(var(--p) * 100%),var(--rule) 0)}
.slider input::-moz-range-track{height:3px;border-radius:2px;background:var(--rule)}
.slider input::-moz-range-progress{height:3px;border-radius:2px;background:var(--ink)}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8.5px;border-radius:50%;background:var(--paper-hi);
  border:.5px solid var(--rule);box-shadow:0 1px 2px rgba(43,45,47,.18),0 4px 12px -4px rgba(43,45,47,.3);transition:transform .2s var(--ease)}
.slider input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--paper-hi);border:.5px solid var(--rule);box-shadow:0 1px 2px rgba(43,45,47,.18),0 4px 12px -4px rgba(43,45,47,.3)}
.slider input:active::-webkit-slider-thumb{transform:scale(1.12)}
.slider input:focus-visible{outline:none}
.slider input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--ink-soft),0 1px 2px rgba(43,45,47,.18)}
.chart-drag{cursor:ew-resize;touch-action:pan-y}
.chart-drag.dragging{cursor:grabbing}

/* ───────── Self-test report (?selftest, js/core/selftest.js) ───────── */
.selftest{position:fixed;right:12px;bottom:12px;z-index:90;width:min(460px,calc(100vw - 24px));max-height:46vh;overflow:auto;padding:12px 14px;border-radius:14px;
  background:var(--paper-hi);box-shadow:0 0 0 1px var(--rule),0 18px 40px -18px rgba(43,45,47,.4);font-family:var(--f-ui);font-size:12.5px;line-height:1.4;color:var(--graphite)}
.selftest ol{margin:8px 0 0;padding-left:18px}
.selftest li{margin:4px 0}
.selftest li.error{color:var(--red)}
.selftest li span{color:var(--graphite-2)}