/* walk.css: the walkthrough chrome. Structure after the reference talk
   chrome (gitlab.com/dunn.dev/reference talk/talk.css), look after the
   Melbourne deck. Monochrome. */
:root {
  color-scheme: light;
  --paper: #fcfcfa;
  --ink: #161616;
  --grey: #525252;
  --hair: rgba(22,22,22,.12);
  --hair-2: rgba(22,22,22,.3);
  --tone-top: #ffffff;
  --tone-0: #f2f2f0;
  --tone-1: #e8e8e5;
  --tone-2: #dadad6;
  --tone-3: #c8c8c3;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --t-display: clamp(48px, 7vw, 112px);
  --t-plate: clamp(40px, 5.4vw, 88px);
  --t-head: clamp(24px, 2.2vw, 32px);
  --t-lead: clamp(19px, 1.4vw, 23px);
  --t-body: 17px;
  --t-mono: 12.5px;
  --rail: 240px;
  --gutter: 56px;
  --pin: 64px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--ink); }
code { font-family: var(--mono); font-size: .9em; }
.wrap { max-width: 1680px; margin: 0 auto; padding: 0 var(--gutter) 0 var(--rail); }

/* progress hairline */
.progress-rail { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--hair); z-index: 40; }
.progress-ink { height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  html:not(.driver-js) .progress-ink { animation: grow linear both; animation-timeline: scroll(root block); }
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* index: parts, with the part in view unfolded to its chapters */
.index { position: fixed; left: 16px; top: 0; bottom: 0; margin: auto 0; height: fit-content; max-height: 100vh;
  overflow-y: auto; width: 204px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--hair-2);
  z-index: 30; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; line-height: 1.4;
  transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.index-head { display: block; color: var(--grey); letter-spacing: .12em; text-transform: uppercase; font-size: 11px;
  border-bottom: 1px solid var(--hair-2); padding-bottom: 8px; margin-bottom: 12px; }
.index ol { list-style: none; margin: 0; padding: 0; }
.index > ol > li { margin: 0 0 8px; }
.index a { display: grid; grid-template-columns: 34px 1fr; gap: 4px; color: var(--grey); text-decoration: none; }
.index a::before { content: attr(data-mark); color: var(--grey); }
.index a:hover, .index li.on > a { color: var(--ink); }
.index li.on > a::before { color: var(--ink); }
.index ol ol { display: none; margin: 4px 0 6px 38px; }
.index ol ol a { grid-template-columns: 1fr; font-size: 11.5px; }
.index ol ol a::before { content: none; }
.index li.open > ol { display: block; }
.index ol ol li { margin: 0 0 3px; }
.index ol ol li.on > a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-2); }
.index.on-dark { background: var(--ink); color: var(--paper); border-color: rgba(252,252,250,.35); }
.index.on-dark .index-head { color: rgba(252,252,250,.6); border-color: rgba(252,252,250,.35); }
.index.on-dark a, .index.on-dark a::before { color: rgba(252,252,250,.55); }
.index.on-dark a:hover, .index.on-dark li.on > a, .index.on-dark li.on > a::before { color: var(--paper); }
.index-now { display: none; }

/* cover */
.cover { min-height: 100vh; display: flex; align-items: center; padding: 96px 0 64px; }
.cover .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 48px; align-items: center; width: 100%; }
.folio { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin: 0 0 24px; }
.display { font-weight: 500; font-size: var(--t-display); letter-spacing: -.035em; line-height: .98; margin: 0 0 28px; }
.deck { font-size: var(--t-lead); color: var(--grey); max-width: 30em; margin: 0 0 32px; }
.course { font-family: var(--mono); font-size: var(--t-mono); color: var(--grey); margin: 0 0 8px; }
.course a { color: var(--ink); }
.scroll-cue { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); margin: 44px 0 0; }
.cue-run::after { content: " \2193"; }
.cue-still { display: none; }
.cover-fig { width: 100%; }
.cover-fig svg { display: block; width: 100%; height: auto; }

/* plates: full-bleed ink */
.plate { position: relative; background: var(--ink); color: var(--paper); padding: 20vh 0 22vh; min-height: 72vh; overflow: hidden; }
.plate-inner { position: relative; z-index: 2; }
.plate-folio { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(252,252,250,.6); margin: 0 0 20px; }
.plate-title { font-weight: 500; font-size: var(--t-plate); letter-spacing: -.035em; line-height: .98; margin: 0 0 28px; max-width: 14em;
  opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s; }
.plate-claim { font-size: var(--t-lead); color: rgba(252,252,250,.7); max-width: 34em; margin: 0;
  opacity: 0; transition: opacity .6s var(--ease) .45s; }
.plate-hatch { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 14vh, 160px); z-index: 1; }
.plate-hatch line { stroke: var(--paper); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease); }
.plate.in .plate-title { opacity: 1; transform: none; }
.plate.in .plate-claim { opacity: 1; }
.plate.in .plate-hatch line { stroke-dashoffset: 0; }

/* chapter: prose left, sticky stage right */
.chapter { padding: 80px 0 32px; }
.chapter-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 56px; align-items: start; }
.chapter-head { font-weight: 500; font-size: var(--t-head); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 32px; }
.chapter-head .num { color: var(--grey); font-family: var(--mono); font-size: .6em; font-weight: 500; letter-spacing: .08em; display: block; margin-bottom: 8px; }
.steps { padding-bottom: calc(50vh - var(--pin)); }
.step { padding: 28px 0; border-bottom: 1px solid var(--hair); opacity: .3; transition: opacity .3s var(--ease); scroll-margin-top: 40vh; }
.steps > .step:first-of-type { margin-top: 48vh; }
.step + .step { margin-top: 30vh; }
.step.on { opacity: 1; }
.step:last-child { border-bottom: 0; }
.step-mark { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin: 0 0 10px; }
.step .lead { font-weight: 500; font-size: var(--t-lead); letter-spacing: -.01em; line-height: 1.3; margin: 0 0 12px; }
.step p { margin: 0 0 12px; max-width: 52ch; }
.step p:last-child { margin-bottom: 0; }
.margin { font-family: var(--mono); font-size: var(--t-mono); line-height: 1.5; color: var(--grey); }
.stage { position: sticky; top: var(--stage-top, var(--pin)); margin: 0; padding: 0; }
.stage-inner { width: 100%; }
/* adjacent chapters share one sticky stage: a rail spans the run (the chapter
   padding is its inset) and their stages stack in it */
.run { position: relative; }
.run-rail { position: absolute; inset: 80px 0 32px; pointer-events: none; }
.stage-stack { grid-column: 2; align-self: start; position: sticky; top: var(--stage-top, var(--pin)); display: grid; }
.stage-stack > .stage { position: static; grid-area: 1 / 1; }
/* handoff carriers move in the figure's own 720x520 frame */
.carrier { transform-box: view-box; transform-origin: 0 0; }
/* static modes: one finished still per step in place of the stage */
.chapter.stills .stage { display: none; }
.still { margin: 0 0 20px; }
.still svg { display: block; width: 100%; max-width: 760px; height: auto; font-family: var(--mono); font-size: 13px; }
.still svg text { fill: var(--ink); }
/* inline diagrams: static drafting drawings in the prose column (kit/inline.js) */
.inline { margin: 16px 0 4px; max-width: 360px; }
.inline > svg { display: block; width: 100%; height: auto; font-family: var(--mono); font-size: 13px; overflow: visible; }
.inline figcaption { font-family: var(--mono); font-size: var(--t-mono); color: var(--grey); line-height: 1.5; margin-top: 8px; }
.il-frame { fill: none; stroke: var(--ink); stroke-width: 1; }
.il-tint { fill: var(--hair); }
.il-head { fill: var(--hair); }
.il-rule { stroke: var(--ink); stroke-width: 1; fill: none; }
.il-hair { stroke: var(--hair-2); stroke-width: .75; }
.il-nb { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.il-arrow { fill: var(--ink); }
.il-td { fill: var(--ink); font-size: 13px; }
.il-code { font-weight: 500; }
.il-th { fill: var(--ink); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.stage svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 150px); }
.stage figcaption { font-family: var(--mono); font-size: var(--t-mono); color: var(--grey); line-height: 1.5; margin-top: 12px; max-width: 70ch; }
.cap-mark { color: var(--ink); letter-spacing: .06em; margin-right: 10px; }

/* out */
.out { padding: 120px 0 96px; border-top: 1px solid var(--hair); margin-top: 48px; }
.out-line { font-size: var(--t-head); font-weight: 500; letter-spacing: -.02em; max-width: 24em; margin: 0 0 36px; }
.out-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); gap: 20px 40px; margin: 0 0 48px; }
.out-link { display: block; text-decoration: none; border-top: 1px solid var(--ink); padding-top: 12px; }
.out-link-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.out-link-slug { display: block; font-size: var(--t-lead); font-weight: 500; letter-spacing: -.01em; }
.out-link:hover .out-link-slug, .out-link.end .out-link-slug { text-decoration: underline; text-decoration-color: var(--hair-2); }
.colophon { font-family: var(--mono); font-size: var(--t-mono); color: var(--grey); line-height: 1.6; max-width: 76ch; }
.colophon p { margin: 0 0 10px; }

/* figure marks, shared by the kit */
.stage svg, .cover-fig svg { font-family: var(--mono); font-size: 13px; }
.stage svg text, .cover-fig svg text { fill: var(--ink); }
.sheet { fill: none; stroke: var(--hair-2); stroke-width: .7; }
.iso-face { stroke: none; }
.iso-face[data-tone="0"] { fill: var(--tone-0); }
.iso-face[data-tone="1"] { fill: var(--tone-1); }
.iso-face[data-tone="2"] { fill: var(--tone-2); }
.iso-face[data-tone="3"] { fill: var(--tone-3); }
.iso-top { fill: var(--tone-top); stroke: none; }
.iso-edge { fill: none; stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; stroke-linecap: round; }
.iso-solid.hot .iso-top { fill: var(--ink); }
.iso-solid.hot .iso-face { fill: var(--grey); }
.iso-solid.hot .iso-face[data-tone="3"], .iso-solid.hot .iso-face[data-tone="2"] { fill: #3a3a3a; }
.iso-solid.ghost .iso-face, .iso-solid.ghost .iso-top { fill: var(--paper); }
.iso-solid.ghost .iso-edge { stroke: var(--grey); stroke-dasharray: 3 2.5; stroke-width: .7; }
.iso-plate { fill: none; stroke: var(--hair-2); stroke-width: .7; stroke-dasharray: 12 3 2 3; }
.iso-solid { transform-box: fill-box; transform-origin: center; }
.wire { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.wire.faint { stroke: var(--hair-2); stroke-dasharray: 4 3; }
.packet { will-change: transform; }
.packet rect, .packet circle { fill: var(--ink); stroke: none; }
.packet text { fill: var(--paper); font-size: 12px; }
.packet.open rect, .packet.open circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.packet.open text { fill: var(--ink); }
.leader { fill: none; stroke: var(--grey); stroke-width: .7; }
.lead-dot { fill: var(--ink); }
.lab { fill: var(--ink); font-size: 14px; }
.lab-2 { fill: var(--grey); font-size: 13px; }
.callout { transition: none; }
.outline { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.outline.fill { fill: var(--paper); }
.hidden-line { fill: none; stroke: var(--grey); stroke-width: .7; stroke-dasharray: 4 3; }
.dim-line { stroke: var(--grey); stroke-width: .7; }
.ext { stroke: var(--grey); stroke-width: .55; }
.dim-text { fill: var(--grey); font-size: 13px; paint-order: stroke; stroke: var(--paper); stroke-width: 4; stroke-linejoin: round; }
.arrow { fill: var(--grey); }
.hatch-line { stroke: var(--grey); stroke-width: .6; }
.hatched { stroke: var(--grey); stroke-width: .7; }
.centerline { stroke: var(--grey); stroke-width: .7; stroke-dasharray: 12 3 2 3; }
.nb-box { fill: var(--paper); stroke: var(--ink); stroke-width: .8; }
.nb-text { fill: var(--ink); font-size: 13px; font-weight: 500; }
.detail-ref { fill: none; stroke: var(--grey); stroke-width: .7; stroke-dasharray: 4 3; }
.detail-view { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.view-title { fill: var(--ink); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.rule { stroke: var(--hair-2); stroke-width: .55; }
.rule-2 { stroke: var(--ink); stroke-width: .8; }
.cell { fill: var(--ink); font-size: 13px; }
.cell.code { fill: var(--grey); }
.note { fill: var(--ink); font-size: 13px; }
.reg { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.reg-text { fill: var(--ink); font-size: 14px; }
.ink-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.turnable, .gated, .wipe-x, .wipe-y { transform-box: fill-box; }
.turnable, .gated { transform-origin: center; }
.wipe-x { transform-origin: left center; }
.wipe-y { transform-origin: center bottom; }

/* static treatments: finished states */
@media print, (prefers-reduced-motion: reduce), (max-width: 860px) {
  .cue-run { display: none; }
  .cue-still { display: inline; }
  .step { opacity: 1; }
  .plate-title, .plate-claim { opacity: 1; transform: none; transition: none; }
  .plate-hatch line { stroke-dashoffset: 0; transition: none; }
  .chapter-grid { grid-template-columns: 1fr; gap: 24px; }
  .stage { position: static; order: -1; }
  .run-rail { display: none; }
  .steps { padding-bottom: 0; }
  .step + .step, .steps > .step:first-of-type { margin-top: 0; }
  .progress-rail { display: none; }
}
@media (max-width: 1279px) {
  :root { --rail: 56px; --gutter: 56px; }
  .index { left: 0; right: 0; top: 3px; bottom: auto; width: auto; height: auto; max-height: none; margin: 0;
    padding: 8px 56px; border-width: 0 0 1px; overflow: hidden; }
  .index-head, .index > ol { display: none; }
  .index-now { display: block; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .index-now b { font-weight: 500; color: var(--ink); }
  .index.on-dark .index-now b { color: var(--paper); }
  .cover { padding-top: 72px; }
  .chapter-grid { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 860px) {
  :root { --rail: 16px; --gutter: 16px; --pin: 48px; }
  .index { padding: 8px 16px; }
  .cover { min-height: 0; padding: 64px 0 40px; }
  .cover .wrap { grid-template-columns: 1fr; }
  .cover-fig { max-width: 360px; }
  .plate { padding: 14vh 0 16vh; min-height: 0; }
  .chapter { padding: 48px 0 16px; }
  .stage svg { max-height: none; }
  .chapter-grid { grid-template-columns: 1fr; }
  .step { padding: 20px 0; }
  .out-links { grid-template-columns: 1fr; }
}
@media print {
  .index, .progress-rail, .scroll-cue { display: none; }
  .plate { break-before: page; color: var(--ink); background: none; border-top: 2px solid var(--ink); }
  .plate-claim, .plate-folio { color: var(--grey); }
  .plate-hatch { display: none; }
  .chapter { break-inside: avoid; }
}

/* drafts: a chapter not yet drawn carries a stamp on its head, its part
   plate and its index entry (inline in the label, so the grid cell is the
   label); the stage column holds a planned-exhibit box */
.chip-draft { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; padding: 1px 6px 0; line-height: 1.5; vertical-align: 2px; margin-left: 10px; }
.plate .chip-draft { color: var(--paper); border-color: rgba(252,252,250,.6); }
.index .chip-draft { font-size: 9px; padding: 0 4px; line-height: 1.4; margin-left: 6px; vertical-align: 1px; color: var(--grey); border-color: var(--hair-2); }
.index li.on > a .chip-draft { color: var(--ink); border-color: var(--ink); }
.index.on-dark .chip-draft { color: rgba(252,252,250,.55); border-color: rgba(252,252,250,.35); }
.index.on-dark li.on > a .chip-draft { color: var(--paper); border-color: var(--paper); }
.exhibit-planned .exhibit-box { aspect-ratio: 4 / 3; max-height: calc(100vh - 150px); display: grid; place-content: center; text-align: center; gap: 14px;
  padding: 32px; border: 1px dashed var(--hair-2); background: var(--paper); color: var(--grey); }
.exhibit-tag { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0; }
.exhibit-box p { margin: 0; max-width: 36ch; font-size: var(--t-body); line-height: 1.45; }
[data-draft] .step ul, [data-draft] .step ol { margin: 0 0 12px; padding-left: 1.2em; max-width: 52ch; }
[data-draft] .step li { margin: 0 0 6px; }
[data-draft] .step li:last-child { margin-bottom: 0; }
/* static modes: the placeholder follows the prose at its own height */
@media print, (prefers-reduced-motion: reduce), (max-width: 860px) {
  .exhibit-planned { order: 1; max-width: 760px; }
  .exhibit-planned .exhibit-box { aspect-ratio: auto; }
}