/* ───────────────────────────────────────────────────────────── THE PRINT RUN — the shared visual system for the three talks. Editorial plate book: rag paper, ink, one printer's red. Doctrine: runes/design/talks.md. Copy this folder, edit TALK: marks. ───────────────────────────────────────────────────────────── */ :root { color-scheme: light; --paper: #efe8da; --paper-2: #e5dcc9; --ink: #15120c; --ink-2: #4b4336; --ink-3: #8d8373; /* TALK: --sig is the per-talk second ink. 01 #c0331d printer's red, 02 #1d4ea8 process blue, 03 #8a4b12 burnt ochre. --sig-text is the darkened cut used wherever the ink carries words (4.5:1 on paper); --sig itself stays for rules, hatching and lamps. */ --sig: #c0331d; --sig-text: #8f2313; /* the one off-palette ink: a refused call, and nothing else */ --refuse: #1f6a5c; --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif; --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace; /* Fraunces axes: SOFT rounds the terminals, WONK off keeps it sober */ --soft-display: "SOFT" 70, "WONK" 0, "opsz" 144; --soft-large: "SOFT" 60, "WONK" 0, "opsz" 96; --soft-text: "SOFT" 50, "WONK" 0, "opsz" 40; --t-display: clamp(56px, 8vw, 132px); --t-plate: clamp(38px, 5.2vw, 84px); --t-head: clamp(26px, 2.7vw, 38px); --t-lead: clamp(20px, 1.6vw, 25px); --t-body: 19px; --t-mono: 13px; --rail: 240px; /* one chapter timeline per chapter, named on that chapter's .steps */ timeline-scope: --ch1, --ch2, --ch3, --ch4, --ch5, --ch6; } /* ── the motion contract: one registered property per figure ──── --fig1 … --fig6 are the six chapter figures' whole state, 0→1. The primary driver is a CSS scroll-driven animation on ; the fallback is rAF in talk.js writing the same custom properties on the same element. A chapter section republishes its own number as --fig, so every mark in every figure is the same one declaration over --fig and the two drivers cannot diverge. Three properties are read at the reader's hand rather than the scroll: --wk (chapter 1's week slider), --gate and --tweak (chapter 6's gate clicks and its two position toggle). */ @property --fig1 { syntax: ""; inherits: true; initial-value: 0; } @property --fig2 { syntax: ""; inherits: true; initial-value: 0; } @property --fig3 { syntax: ""; inherits: true; initial-value: 0; } @property --fig4 { syntax: ""; inherits: true; initial-value: 0; } @property --fig5 { syntax: ""; inherits: true; initial-value: 0; } @property --fig6 { syntax: ""; inherits: true; initial-value: 0; } @property --fig { syntax: ""; inherits: true; initial-value: 0; } @property --wk { syntax: ""; inherits: true; initial-value: 1; } @property --gate { syntax: ""; inherits: true; initial-value: 0; } @property --tweak{ syntax: ""; inherits: true; initial-value: 0; } @property --a { syntax: ""; inherits: false; initial-value: 0; } @property --r { syntax: ""; inherits: false; initial-value: 1; } @property --t { syntax: ""; inherits: false; initial-value: 0; } @property --e { syntax: ""; inherits: false; initial-value: 0; } /* --el is the same number, inherited, so a ::before can be lit too */ @property --el { syntax: ""; inherits: true; initial-value: 0; } @keyframes fig1-run { from { --fig1: 0; } to { --fig1: 1; } } @keyframes fig2-run { from { --fig2: 0; } to { --fig2: 1; } } @keyframes fig3-run { from { --fig3: 0; } to { --fig3: 1; } } @keyframes fig4-run { from { --fig4: 0; } to { --fig4: 1; } } @keyframes fig5-run { from { --fig5: 0; } to { --fig5: 1; } } @keyframes fig6-run { from { --fig6: 0; } to { --fig6: 1; } } @supports (animation-timeline: view()) { html:not(.driver-js) #track-i { view-timeline-name: --ch1; view-timeline-axis: block; } html:not(.driver-js) #track-ii { view-timeline-name: --ch2; view-timeline-axis: block; } html:not(.driver-js) #track-iii { view-timeline-name: --ch3; view-timeline-axis: block; } html:not(.driver-js) #track-iv { view-timeline-name: --ch4; view-timeline-axis: block; } html:not(.driver-js) #track-v { view-timeline-name: --ch5; view-timeline-axis: block; } html:not(.driver-js) #track-vi { view-timeline-name: --ch6; view-timeline-axis: block; } html:not(.driver-js) body { animation: fig1-run linear both, fig2-run linear both, fig3-run linear both, fig4-run linear both, fig5-run linear both, fig6-run linear both; animation-timeline: --ch1, --ch2, --ch3, --ch4, --ch5, --ch6; animation-range: contain 0% contain 100%, contain 0% contain 100%, contain 0% contain 100%, contain 0% contain 100%, contain 0% contain 100%, contain 0% contain 100%; } } html.static body { animation: none !important; --fig1: 1; --fig2: 1; --fig3: 1; --fig4: 1; --fig5: 1; --fig6: 1; } /* each chapter republishes its own number under the one name the marks read */ #ch-i { --fig: var(--fig1); } #ch-ii { --fig: var(--fig2); } #ch-iii { --fig: var(--fig3); } #ch-iv { --fig: var(--fig4); } #ch-v { --fig: var(--fig5); } #ch-vi { --fig: var(--fig6); } /* every ink mark: --a is where it starts, --r is 1/(end - start) */ .ink { --t: clamp(0, (var(--fig) - var(--a)) * var(--r), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); --el: var(--e); } .ink-draw { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--e)); } .ink-fade { opacity: var(--e); } .ink-wipe { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--e)); } .ink-enter { opacity: var(--e); transform: translateX(calc((1 - var(--e)) * -14px)); } /* a mark that leaves again: nest it inside the mark that brought it in */ .ink-out { opacity: calc(1 - var(--e)); } /* lines that close up over a line taken back out, by --dy at the finish */ .ink-close { transform: translateY(calc(var(--e) * var(--dy, 0px))); } .ink-grow { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--e)); } .ink-ride { offset-distance: calc(var(--e) * 100%); offset-rotate: 0deg; } /* the two marks the reader's hand drives, on the same schedule shape: --wk is chapter 1's week, 1→6; --gate and --tweak are chapter 6's. */ .wk { --t: clamp(0, (var(--wk) - var(--a)) * var(--r), 1); --e: calc(var(--t) * var(--t) * (3 - 2 * var(--t))); --el: var(--e); } .on-tweak { opacity: var(--tweak); } .on-approve { opacity: calc(1 - var(--tweak)); } /* the gate marker rides the lane only as far as the gates that are open: 0.49 is the first gate on the lane, 0.94 the second */ .gate-ride { offset-distance: calc(clamp(0, min(var(--e), 0.49 + var(--gate) * 0.45), 1) * 100%); offset-rotate: 0deg; } .gate-open-1 { opacity: clamp(0, var(--gate), 1); } .gate-open-2 { opacity: clamp(0, var(--gate) - 1, 1); } .gate-shut-1 { opacity: calc(1 - clamp(0, var(--gate), 1)); } .gate-shut-2 { opacity: calc(1 - clamp(0, var(--gate) - 1, 1)); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: var(--t-body); font-weight: 420; line-height: 1.66; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; /* laid-paper tooth: two hairline grids, cheap and static */ background-image: repeating-linear-gradient(90deg, rgba(21,18,12,.028) 0 1px, transparent 1px 7px), repeating-linear-gradient(0deg, rgba(21,18,12,.018) 0 1px, transparent 1px 7px); } /* the wrap is measured out from the figure, not the other way round: 240 rail + 440 prose + 56 gap + 900 stage + 80 right. 900 is the figure viewBox (720) × 1.25, the widest a plate may print. */ .wrap { max-width: 1716px; margin: 0 auto; padding-left: var(--rail); padding-right: 80px; } /* ── chrome: progress hairline ───────────────────────────── */ .progress-rail { position: fixed; inset: 0 0 auto 0; height: 3px; background: rgba(21,18,12,.10); z-index: 40; } .progress-ink { height: 100%; width: 100%; background: var(--sig); 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); } } /* ── chrome: numbered index + the archetype's four lamps ─── */ .index { position: fixed; left: 40px; top: 50%; transform: translateY(-50%); width: 172px; z-index: 30; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .02em; } .index-head { display: block; color: var(--ink-2); border-bottom: 1px solid var(--ink-3); padding-bottom: 8px; margin-bottom: 14px; } .index ol { list-style: none; margin: 0; padding: 0; } .index li { margin: 0 0 10px; } .index ol a { display: grid; grid-template-columns: 22px 1fr; gap: 6px; color: var(--ink-2); text-decoration: none; line-height: 1.45; } .index ol a::before { content: attr(data-mark); color: var(--ink-2); } .index ol a:hover { color: var(--ink); } .index ol li.on a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sig); } .index ol li.on a::before { color: var(--sig-text); } .lamps { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ink-3); opacity: .38; transition: opacity .4s; } .index.in-ch .lamps { opacity: 1; } .lamps li { display: grid; grid-template-columns: 9px 1fr; gap: 8px; align-items: center; margin: 0 0 9px; color: color-mix(in srgb, var(--ink-2), var(--ink) calc(var(--e) * 100%)); } .lamps li::before { content: ""; width: 9px; height: 9px; background: color-mix(in srgb, transparent, var(--sig) calc(var(--el) * 100%)); outline: 1px solid var(--ink-3); } /* ── cover ───────────────────────────────────────────────── */ .cover { min-height: 100vh; display: flex; align-items: center; padding: 120px 0 80px; border-bottom: 2px solid var(--ink); } .folio { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .05em; color: var(--ink-2); margin: 0 0 40px; } .display { font-family: var(--display); font-weight: 600; font-variation-settings: var(--soft-display); font-size: var(--t-display); line-height: .94; letter-spacing: -.018em; margin: 0; text-wrap: balance; } .display em { font-style: italic; font-weight: 500; color: var(--sig-text); margin-right: .07em; } /* the ornament is a closed measure: it draws once, then it is a printed rule. Nothing about it is still running when the cover is at rest. */ .cover-rule { display: block; width: 100%; height: 82px; margin: 34px 0 36px; } .deck { font-family: var(--display); font-weight: 500; font-style: italic; font-variation-settings: var(--soft-large); font-size: clamp(23px, 2.3vw, 33px); line-height: 1.24; margin: 0 0 34px; max-width: 18ch; } .course { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-2); margin: 0; } .dot { color: var(--sig-text); padding: 0 .3em; } .scroll-cue { margin: 56px 0 0; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; color: var(--ink-2); } .cue-run::after { content: " ↓"; color: var(--sig-text); } .cue-still { display: none; } html.static .cue-run { display: none; } html.static .cue-still { display: inline; } /* ── full-bleed plate (chapter separator) ────────────────── */ .plate { position: relative; background: var(--ink); color: var(--paper); padding: 108px 0 116px; overflow: hidden; } .plate-inner { position: relative; z-index: 2; } .plate-folio { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sig); margin: 0 0 22px; } .plate-title { font-family: var(--display); font-weight: 600; font-variation-settings: var(--soft-large); font-size: var(--t-plate); line-height: .98; letter-spacing: -.014em; margin: 0 0 28px; color: var(--paper); } .plate-claim { font-family: var(--serif); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.55; max-width: 46ch; margin: 0; color: color-mix(in srgb, var(--paper) 78%, var(--ink)); } .plate-hatch { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 160px; z-index: 1; opacity: 0; transform: translateY(46%); } .plate-hatch line { stroke: var(--sig); stroke-width: 2; } .plate.in .plate-hatch { transform: translateY(0); opacity: .85; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s; } @supports (animation-timeline: view()) { html:not(.driver-js) .plate-hatch { animation: hatch-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; } } @keyframes hatch-rise { from { transform: translateY(46%); opacity: 0; } to { transform: translateY(0); opacity: .85; } } /* ── chapter: prose column + sticky stage ────────────────── */ .chapter { padding: 96px 0 40px; } /* the plate is the point of the page, so the stage track has a floor and the prose pays for the room before it does: 720px is the figure viewBox, so at the floor a plate prints at scale 1 and its smallest mono is a real 12.5px on the wall. Prose gives way to 340px; the rail goes before either. */ .chapter-grid { display: grid; grid-template-columns: minmax(340px, 440px) minmax(720px, 1fr); gap: 0 56px; align-items: start; } .chapter-head { font-family: var(--display); font-weight: 600; font-variation-settings: var(--soft-text); font-size: var(--t-head); line-height: 1.12; letter-spacing: -.012em; margin: 0 0 8px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); } .chapter-head .num { color: var(--sig-text); } /* the track is tuned so the prose and the plate fill together: three steps of 62vh, so the figure is two-thirds inked by the second. */ .step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--paper-2); padding: 8px 0; opacity: .34; transition: opacity .35s ease; } .step.on { opacity: 1; } .step:last-child { border-bottom: 0; } .step-mark { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; color: var(--sig-text); margin: 0 0 14px; } .step .lead { font-family: var(--display); font-weight: 550; font-variation-settings: var(--soft-text); font-size: var(--t-lead); line-height: 1.32; letter-spacing: -.006em; margin: 0 0 18px; } .step p { margin: 0 0 16px; max-width: 56ch; } .step code { font-family: var(--mono); font-size: .88em; background: var(--paper-2); padding: 1px 5px; border-bottom: 1px solid var(--sig); } /* 72px top and 72px bottom: the frame is centred in the window, so a plate taller than the box spills evenly instead of pushing its caption under the fold — which a full-width plate on a 720-tall projector will do. */ .stage { position: sticky; top: 72px; margin: 0; padding: 0; height: calc(100vh - 144px); display: flex; flex-direction: column; justify-content: center; } .stage-inner { width: 100%; } .stage svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 208px); } .stage figcaption { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .02em; line-height: 1.45; color: var(--ink-2); margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--paper-2); } .cap-mark { color: var(--sig-text); letter-spacing: .04em; margin-right: 10px; } /* ── the band ────────────────────────────────────────────── */ .band { background: var(--paper-2); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 72px 0 84px; } .band-grid { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 0 64px; align-items: start; } .band h3 { font-family: var(--display); font-weight: 600; font-variation-settings: var(--soft-text); font-size: var(--t-head); line-height: 1.1; letter-spacing: -.012em; margin: 0 0 14px; } .band-note { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 28px; max-width: 34ch; } .ctrl { margin: 0 0 26px; } .ctrl-label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .04em; color: var(--ink-2); margin-bottom: 8px; } .ctrl-value { font-size: 22px; letter-spacing: 0; color: var(--ink); } /* the rotated thumb overhangs the track, so inset the control */ input[type=range] { -webkit-appearance: none; appearance: none; width: calc(100% - 10px); margin: 0 5px; height: 22px; background: transparent; cursor: pointer; } input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--ink); border: 0; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7px; background: var(--sig); border: 2px solid var(--ink); border-radius: 0; transform: rotate(45deg); } input[type=range]::-moz-range-track { height: 2px; background: var(--ink); } input[type=range]::-moz-range-thumb { width: 14px; height: 14px; background: var(--sig); border: 2px solid var(--ink); border-radius: 0; } .replay { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 0; padding: 12px 22px; cursor: pointer; } .replay:hover { background: var(--sig); } .readouts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin-bottom: 22px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink-3); } .readout { padding: 12px 0 10px; border-right: 1px solid var(--ink-3); } .readout:last-child { border-right: 0; } .readout dt { font-family: var(--mono); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 4px; } .readout dd { font-family: var(--mono); font-size: 21px; margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; } .readout dd.hot { color: var(--sig-text); } .band svg { display: block; width: 100%; height: auto; } .band-stage svg { margin-top: 8px; } .band-say { max-width: 62ch; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--ink-3); font-size: 16px; } /* ── out ─────────────────────────────────────────────────── */ .out { padding: 120px 0 96px; } .out-ask { max-width: 52ch; margin: 34px 0 0; } .out-ask + .out-ask { margin-top: 14px; } .out-line { font-family: var(--display); font-weight: 500; font-style: italic; font-variation-settings: var(--soft-large); font-size: clamp(21px, 2.1vw, 30px); line-height: 1.32; max-width: 24ch; margin: 0 0 44px; } .out-link { display: inline-grid; grid-template-columns: auto auto; align-items: end; gap: 0 18px; text-decoration: none; color: var(--ink); border-bottom: 3px solid var(--sig); padding-bottom: 12px; } .out-link-label { grid-column: 1; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-2); padding-bottom: 10px; } .out-link-slug { grid-column: 1; font-family: var(--display); font-weight: 600; font-variation-settings: var(--soft-large); font-size: clamp(34px, 4.6vw, 72px); line-height: 1; letter-spacing: -.018em; } .out-arrow { grid-column: 2; grid-row: 1 / span 2; width: clamp(34px, 4vw, 58px); height: auto; color: var(--sig); transition: transform .3s cubic-bezier(.2,.7,.2,1); } .out-link:hover .out-arrow { transform: translate(6px, -6px); } .out-link:hover .out-link-slug { color: var(--sig-text); } .colophon { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .02em; color: var(--ink-2); margin: 60px 0 0; padding-top: 16px; border-top: 1px solid var(--paper-2); } /* ── engraving: the marks every figure is made of ────────── */ .f-mono { font-family: var(--mono); font-size: 15px; letter-spacing: .02em; fill: var(--ink-2); } .f-strong { fill: var(--ink); letter-spacing: .05em; } .f-muted { fill: var(--ink-2); font-size: 13.5px; letter-spacing: .03em; } .f-tiny { font-family: var(--mono); font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; fill: var(--ink-2); } .f-sig { fill: var(--sig-text); } .f-code { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; fill: var(--ink); } /* the second ink on a code line: .f-code sets fill, so this has to follow it */ .f-dim { fill: var(--ink-2); } .f-refuse { fill: var(--refuse); } .f-serif { font-family: var(--display); font-style: italic; font-weight: 500; font-variation-settings: var(--soft-text); font-size: 23px; fill: var(--ink); } .f-rule { stroke: var(--ink-3); stroke-width: 1; fill: none; } .f-rule-sig { stroke: var(--sig); stroke-width: 1.6; fill: none; } .f-draw { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: square; } .f-ring { stroke: var(--ink); stroke-width: 1.4; } .f-plate { stroke-width: 2.6; } .f-station { stroke-width: 1.4; } .f-fill { fill: var(--paper); } .f-cartouche { stroke-width: 2.2; } .f-thin { stroke-width: 1.2; } .f-lead { stroke: var(--ink-2); stroke-width: 1.4; } .f-lead-sig { stroke: var(--sig); stroke-width: 2; } .f-spine { stroke: var(--sig); stroke-width: 2; } .f-node { fill: var(--sig); } .f-refuse-s { stroke: var(--refuse); stroke-width: 1.6; fill: none; } /* the key plate: the whole vocabulary as legible underdrawing from the first frame, so no frame is ever an empty box. Ink draws over it. */ .f-key { opacity: .14; } /* marks the six chapter figures add to the vocabulary */ .f-hatch { fill: url(#hatch); } .f-rough { fill: url(#rough); } .f-strike { stroke: var(--sig); stroke-width: 1.6; } .f-dot { fill: var(--sig); stroke: var(--ink); stroke-width: 1.4; } .f-wrong { stroke: var(--sig); stroke-width: 2; fill: none; } .f-right { stroke: var(--ink); stroke-width: 2; fill: none; } .f-paper { fill: var(--paper-2); } .f-gate { stroke: var(--sig); stroke-width: 2.4; fill: none; } .f-arrow { stroke: var(--ink-2); stroke-width: 1.4; fill: none; } .f-arrow-sig{ stroke: var(--sig); stroke-width: 1.8; fill: none; } /* a margin note beside the prose: the one sourced number lives here */ .margin { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; letter-spacing: .02em; color: var(--ink-2); max-width: 44ch; border-left: 2px solid var(--sig); padding: 2px 0 2px 14px; margin: 0 0 16px; } /* the controls a figure hands the reader, ruled under its plate */ .fig-controls { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--paper-2); } .fig-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .fig-btn { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; text-transform: uppercase; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); padding: 9px 14px; cursor: pointer; } .fig-btn:hover { background: var(--ink); color: var(--paper); } .fig-btn[aria-pressed="true"] { background: var(--sig); border-color: var(--sig); color: var(--paper); } .fig-btn[disabled] { color: var(--ink-3); border-color: var(--ink-3); cursor: default; } .fig-btn[disabled]:hover { background: var(--paper); color: var(--ink-3); } .fig-note { font-family: var(--mono); font-size: var(--t-mono); color: var(--ink-2); letter-spacing: .02em; margin: 10px 0 0; } /* band marks */ .f-seg { fill: var(--ink-2); opacity: .30; } .f-seg.done { fill: url(#hatch-b); opacity: .95; } .f-seg.hot { fill: var(--sig); opacity: 1; } .f-seg.off { fill: none; stroke: var(--refuse); stroke-dasharray: 2 3; stroke-width: 1.2; } .f-playhead { stroke: var(--sig); stroke-width: 1.5; stroke-dasharray: 4 4; } .f-commit { fill: var(--sig); } .f-hair { stroke: var(--ink-3); stroke-width: 1; } /* the index reverses out while an ink plate passes behind it */ .index.on-dark .index-head, .index.on-dark .lamps { color: color-mix(in srgb, var(--paper) 55%, transparent); border-color: color-mix(in srgb, var(--paper) 35%, transparent); } .index.on-dark ol a { color: color-mix(in srgb, var(--paper) 55%, transparent); } .index.on-dark ol a:hover, .index.on-dark ol li.on a { color: var(--paper); } .index.on-dark .lamps li { color: color-mix(in srgb, var(--paper) 55%, var(--paper) calc(var(--e) * 45%)); } /* ── responsive: the two floors decide the breakpoints ───── Rail + prose floor + gap + stage floor + right padding is 240 + 340 + 56 + 720 + 80 = 1436, so below that the rail cannot stay. Without it, 40 + 340 + 56 + 720 + 40 = 1196, below which the stage floor cannot hold either. Single column and static at 860, unchanged. */ @media (max-width: 1435px) { :root { --rail: 40px; } .index { display: none; } .wrap { padding-right: 40px; } } /* the stage floor has to release here or the grid would overflow; tighten the gap so the plate keeps as much of the width as there is left */ @media (max-width: 1195px) { .chapter-grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0 32px; } .band-grid { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 0 32px; } } @media (max-width: 860px) { .chapter-grid, .band-grid { grid-template-columns: minmax(0,1fr); gap: 40px; } .stage { position: static; height: auto; margin-top: 32px; } .stage svg { max-height: none; } .step { min-height: 0; opacity: 1; padding: 22px 0; } .cover { min-height: auto; padding: 80px 0 60px; } } /* ── the static contract ───────────────────────────────────── One treatment, reached three ways: narrow, reduced motion, or the ?motion=reduce test flag. talk.js sets html.static for all three. The media block below repeats it verbatim so the contract holds with JavaScript off; keep the two in step. */ html.static { scroll-behavior: auto; } /* the reader's-hand figures are pinned at their finished reading too */ html.static body { --wk: 6; --gate: 2; --tweak: 0; } html.static .stage { position: static; height: auto; } html.static .stage svg { max-height: none; } html.static .step { min-height: 0; opacity: 1; } html.static .index { display: none; } html.static .progress-rail { display: none; } html.static .progress-ink, html.static .plate-hatch { animation: none !important; transition: none !important; } html.static .plate-hatch { transform: none; opacity: .85; } html.static .cover { min-height: auto; } html.static .cover-rule line { stroke-dashoffset: 0 !important; } html.static .out-arrow { transition: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { animation: none !important; --fig1: 1; --fig2: 1; --fig3: 1; --fig4: 1; --fig5: 1; --fig6: 1; --wk: 6; --gate: 2; --tweak: 0; } .steps { view-timeline-name: none; } .stage { position: static; height: auto; } .stage svg { max-height: none; } .step { min-height: 0; opacity: 1; } .index { display: none; } .progress-rail { display: none; } .progress-ink, .plate-hatch { animation: none !important; transition: none !important; } .plate-hatch { transform: none; opacity: .85; } .cover { min-height: auto; } .cover-rule line { stroke-dashoffset: 0 !important; } .cue-run { display: none; } .cue-still { display: inline; } .out-arrow { transition: none; } }