/* Layout: a painted plate over paper. Type hangs off the left margin; figures and small print sit to the right of it.
   The page ends on the studio's own dark ground, with its mark. */
:root {
  --paper: #F1EADB;
  --ink: #1E291F;
  --ink-soft: #4D574B;
  --ink-faint: #CFCBBB;
  --plate: #141B14;
  --fern: #2C3826;     /* the sign-off's ground: the gully's darkest leaves */
  --paper-soft: #BDBAA9;   /* small print on the fern ground */
  --ochre: #A9712A;
  --theirs: #B7B4A4;   /* chart: the reference series, a grey one step off the paper */
  --display: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: max(clamp(16px, 4.4vw, 76px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --col-gap: clamp(12px, 2vw, 32px);
  color-scheme: light;
}
* { box-sizing: border-box; }
/* Keep the page edges and browser controls on the same cream as the paper. */
html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p, h1, h2, h3, dl, dd, figure, ul { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#stage {
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none; display: block;
  visibility: hidden;
}
.gl-on #stage { visibility: visible; }
.static #stage { display: none; }
main { position: relative; z-index: 1; }
/* The whole opening needs paper under its transparent ink, from the first
   pixel. Keep that backing in its own layer, ending before the dark footer. */
.story { position: relative; isolation: isolate; background: var(--paper); }
.story > .hero, .story > .paper { z-index: 1; }

.label {
  font-family: var(--sans); font-variation-settings: "wdth" 125; font-weight: 600;
  font-size: .6875rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
}
.small { font-family: var(--sans); font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.small b { font-weight: 600; color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 100vh; height: 100svh; min-height: 30rem;
  padding: calc(1.1rem + env(safe-area-inset-top, 0px)) var(--gutter) 0;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--paper);
}
.js:not(.gl-on):not(.static) .hero { background: var(--plate); }   /* while the canvas boots */
.fonts-wait .hero__head, .fonts-wait .hero__foot { visibility: hidden; }   /* no flash of the fallback face */
.hero__plate {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  filter: brightness(.66) saturate(.86);
  background: var(--plate);
  max-width: none; z-index: -1;
}
.js:not(.static) .hero__plate { visibility: hidden; }
.wordmark {
  margin: 0 0 0 -.04em;
  font-weight: 500; font-size: 21.6vw; line-height: .74; letter-spacing: -.012em;
  text-transform: uppercase; white-space: nowrap;
}
.wordmark span { display: inline-block; padding-top: .07em; }
.base { display: inline-block; width: 0; height: 0; }   /* marks the baseline, for the canvases that re-set the name */
.carved .wordmark, .cut-still .wordmark { color: transparent; }   /* a canvas draws the title, cut into the painting */
.hero__head { position: relative; }
.wordmark__cut { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.static .wordmark__cut { display: block; }
.hero__sub { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 1.1rem; }
.hero .label { text-wrap: balance; }
.hero__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem); }
.hero__credit { max-width: 40ch; }
.hero__cue { white-space: nowrap; }
.textbtn { text-transform: inherit; letter-spacing: inherit; font-weight: inherit; padding: .9rem 0; margin: -.9rem 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.textbtn:hover { text-decoration-thickness: 2px; }
.static .needs-gl { display: none; }
.only-reduced, .only-nogl { display: none; }
.static:not(.no-gl) .only-reduced, .no-gl .only-nogl { display: block; }

/* ---------- paper ---------- */
.paper { position: relative; padding: 0 var(--gutter); }
.static .paper, html:not(.js) .paper { background: var(--paper); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
h3 { font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.9rem); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }

.intro { padding-block: clamp(5rem, 17vh, 11rem) clamp(3rem, 8vh, 6rem); row-gap: clamp(2rem, 5vh, 3.5rem); align-items: start; }
.intro__head {
  grid-column: 1 / span 11;
  font-weight: 300; font-size: clamp(1.9rem, 5.1vw, 5.4rem); line-height: 1.02; letter-spacing: -.012em;
  text-transform: uppercase; text-wrap: balance;
}
.intro__head .w { display: inline-block; }
.reveal .intro__head .w { opacity: .15; }
.intro__lede { grid-column: 1 / span 5; font-size: clamp(1.125rem, 1.45vw, 1.375rem); line-height: 1.45; max-width: 34em; }
.intro__lede p + p { margin-top: 1.1em; }
.again { font-style: italic; }

.intro__side { grid-column: 9 / span 4; display: grid; row-gap: clamp(2rem, 5vh, 3rem); align-content: start; }
.facts { display: grid; row-gap: .7rem; font-family: var(--sans); font-size: .9375rem; line-height: 1.4; }
.facts > div { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline; }
.facts dt { color: var(--ink-soft); }

/* the glass: a dark print of the bottom of the painting, and a magnifier that shows it as it was */
.loupe { display: grid; row-gap: .9rem; }
.loupe__print { position: relative; padding: 7px; background: #F8F4EA; transform: rotate(-.8deg); box-shadow: 0 1px 2px rgba(30, 41, 31, .14), 0 10px 20px -12px rgba(30, 41, 31, .35); }
.loupe__base { display: block; width: 100%; aspect-ratio: 1080 / 470; background: var(--plate); cursor: crosshair; }
.loupe__glass { position: absolute; left: 0; top: 0; touch-action: none; cursor: grab; border-radius: 50%; }
.loupe__glass:active { cursor: grabbing; }
.loupe__glass:focus-visible { outline-offset: -6px; }
.loupe figcaption { max-width: 30em; }
.loupe__found { display: block; margin-top: .4rem; color: var(--ink); }
.loupe__found:empty { display: none; }
html:not(.js) .loupe { display: none; }

.trail { position: absolute; left: var(--gutter); top: 0; width: calc(100% - 2 * var(--gutter)); pointer-events: none; overflow: visible; z-index: -1; }
.trail path { fill: none; stroke: var(--ochre); stroke-width: 1.25; stroke-linecap: round; }
.trail circle { fill: var(--paper); stroke: var(--ochre); stroke-width: 1.25; opacity: 0; transition: opacity .3s ease; }
.static .trail { display: none; }

/* what we looked at */
.study { padding-block: 0 clamp(3.5rem, 9vh, 6.5rem); row-gap: clamp(2.5rem, 6vh, 4rem); align-items: start; }
.study__top { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(2.5rem, 6vh, 4rem); align-items: start; }   /* the sticky text stops at the end of this, before the film */
.study__text { grid-column: 1 / span 4; display: grid; row-gap: 1.1rem; align-content: start; position: sticky; top: clamp(2rem, 10vh, 6rem); }
.study__text p { max-width: 32em; }
.study__text h3 { margin-bottom: .3rem; }
.sheet { grid-column: 1 / -1; display: grid; row-gap: .8rem; }
.sheet canvas { display: block; width: 100%; }
.sheet figcaption { max-width: 46em; }
/* the four parts: the picture sizes follow the parts, the big painting across the top, the small puff smallest */
.parts { grid-column: 6 / span 7; display: grid; row-gap: 1.4rem; --count: clamp(1.9rem, 2.7vw, 2.6rem); }
.parts ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1.15fr .8fr 1.15fr; column-gap: var(--col-gap); row-gap: 1.75rem; align-items: end; }
.parts li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; row-gap: .8rem; align-items: baseline; }
.parts li:first-child { grid-column: 1 / -1; }
.parts canvas { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 3 / 2; }
.parts li:first-child canvas { aspect-ratio: 5 / 2; }
.parts li:nth-child(3) canvas { aspect-ratio: 1; }
.parts .count { font-weight: 200; font-size: var(--count); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.parts li:not(:first-child) { grid-template-columns: minmax(0, 1fr); }
.parts .what { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.35; max-width: 26em; }
.parts > .small { max-width: 44em; }

/* the picture you can play with */
.how { padding-block: 0 clamp(3.5rem, 9vh, 6.5rem); row-gap: 2rem; align-items: start; }
.figure { grid-column: 1 / span 7; }
.figure canvas { display: block; width: 100%; aspect-ratio: 16 / 10; }
.figure__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; column-gap: 1.5rem; row-gap: .25rem; margin-top: .9rem; }
#figCanvas.is-tilted { touch-action: pan-y; cursor: ew-resize; }   /* sideways drags turn the hill; up and down still scrolls */
.figure__controls label { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; cursor: pointer; }
.figure__controls .label { color: var(--ink); white-space: nowrap; }
.figure--static .figure__controls, .figure--static canvas { display: none; }
.figure__off { display: none; }
.figure--static .figure__off { display: block; }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 2.75rem; background: transparent; margin: 0; cursor: ew-resize; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--ink-faint); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--ink-faint); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%; background: var(--ink); border: 0; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 0; }
input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 1.05rem; height: 1.05rem; margin: 0; border: 1.5px solid var(--ink); background: transparent; display: inline-grid; place-content: center; cursor: pointer; flex: none; }
input[type="checkbox"]::after { content: ""; width: .55rem; height: .55rem; background: var(--ink); transform: scale(0); }
input[type="checkbox"]:checked::after { transform: scale(1); }
.how__text { grid-column: 9 / span 4; display: grid; row-gap: 1.1rem; }
.how__text p { max-width: 32em; }
.how__text h3 { margin-bottom: .3rem; }

/* why it looks good: four notes and the speeds */
.why { padding-block: 0 clamp(3.5rem, 9vh, 6.5rem); row-gap: 2.5rem; align-items: start; }
.why__side { grid-column: 1 / span 4; display: grid; row-gap: clamp(1.5rem, 4vh, 2.5rem); }
.notes { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.75rem; }
.notes p { max-width: 30em; }
.notes b { font-weight: 500; }
.note { display: grid; row-gap: 1.1rem; align-content: start; }
.note--fold { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--col-gap); align-items: center; }

/* the fold: a sheet lying on the table, ink on its left half; the right half lifts, folds over in 3D, and opens printed */
.fold { --sheet: #F8F4EA; position: relative; perspective: 1000px; perspective-origin: 50% -40%; padding-top: 4%; }
.fold__sheet { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1.12; transform: rotateX(34deg) scale(.93); transform-origin: 50% 60%; transform-style: preserve-3d; }
.fold__half { position: relative; background: var(--sheet); }
.fold__left { transform: translateZ(-.5px); box-shadow: inset -1px 0 0 rgba(30, 41, 31, .1), 0 1px 1px rgba(30, 41, 31, .1), 0 14px 22px -14px rgba(30, 41, 31, .35); }
.fold__right { transform-origin: 0 50%; transform-style: preserve-3d; background: none; }
.fold__face { position: absolute; inset: 0; background: var(--sheet); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fold__front { box-shadow: inset 1px 0 0 rgba(30, 41, 31, .1), 0 1px 1px rgba(30, 41, 31, .1), 0 14px 22px -14px rgba(30, 41, 31, .35); }
.fold__back { transform: rotateY(180deg); background: #F1ECDF; }   /* the back of the sheet, a shade duller */
.fold canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fold__right .fold__ink { opacity: 0; }                              /* the print arrives when the sheet is pressed */
.fold--printed .fold__right .fold__ink { opacity: 1; }
.fold__shade { position: absolute; inset: 0; background: #1E291F; opacity: 0; pointer-events: none; }
html:not(.js) .fold, html:not(.js) [data-fold] { display: none; }   /* the page draws the ink, so no script, no sheet */
.static:not(.no-gl) .needs-motion { display: none; }   /* reduced motion: the fold shows its finished print, with no replay */

.speeds { position: relative; display: grid; row-gap: .85rem; }
.speeds figcaption { display: grid; row-gap: .2rem; }
.speeds figcaption .label { color: var(--ink); }
.speeds table, .speeds thead, .speeds tbody { display: block; }
.speeds table { font-family: var(--sans); font-size: .875rem; line-height: 1.25; }
.speeds th, .speeds td { padding: 0; font-weight: 400; text-align: left; }
.speeds thead tr { display: flex; gap: 1.3rem; margin-bottom: .8rem; }
.speeds thead th { display: flex; align-items: center; gap: .45rem; color: var(--ink-soft); }
.key { display: inline-block; width: 14px; height: 8px; }
.key--theirs, .bar--theirs { background: var(--theirs); }
.key--ours, .bar--ours { background: var(--ochre); }
.speeds tbody { display: grid; row-gap: 1.05rem; }
.speeds tbody tr { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); column-gap: .9rem; row-gap: 3px; align-items: center; }
.speeds tbody th { grid-row: 1 / span 2; }
.speeds tbody td { grid-column: 2; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.bar { flex: none; display: block; height: 8px; width: calc(var(--v) / 2.5 * (100% - 2.6rem)); border-radius: 0 3px 3px 0; }
.speeds .num { font-variant-numeric: tabular-nums; font-size: .8125rem; line-height: 1; color: var(--ink); }
.speeds tbody tr:hover .bar, .speeds tbody tr:focus-visible .bar { filter: brightness(.88); }
.tip { position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none; background: var(--ink); color: var(--paper); padding: .6rem .75rem .65rem; font-family: var(--sans); font-size: .8125rem; line-height: 1.4; width: max-content; max-width: 15rem; }
.tip strong { display: block; font-weight: 600; margin-bottom: .2rem; }
.tip span { display: flex; align-items: center; gap: .5rem; }
.tip i { flex: none; width: 12px; height: 2px; }
.tip b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (forced-colors: active) {
  .bar, .key { forced-color-adjust: none; }
  .bar--ours, .key--ours { background: Highlight; }
  .bar--theirs, .key--theirs { background: GrayText; }
}

/* speed is distance: the opening taken apart into sheets, each hung as far forward as its speed says */
.apart { padding-block: 0 clamp(3.5rem, 9vh, 6.5rem); row-gap: 2rem; align-items: center; }
.apart__text { grid-column: 1 / span 4; display: grid; row-gap: 1.1rem; }
.apart__text p { max-width: 32em; }
.apart__text h3 { margin-bottom: .3rem; }
.apart__fig { grid-column: 6 / span 7; display: grid; row-gap: .4rem; }
.apart__view { position: relative; }
.apart__stage { position: absolute; transform-style: preserve-3d; }
.apart__sheet { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
.apart__clip { position: absolute; inset: 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(30, 41, 31, .3), inset 0 0 0 1px rgba(241, 234, 219, .4); }   /* an edge that shows on paper and on the painting */
.apart__clip canvas + * { pointer-events: none; }
.apart__clip canvas { position: absolute; display: block; }
.apart__sheet--page .apart__clip { background: var(--paper); }
.apart__tab { position: absolute; bottom: 100%; margin-bottom: 5px; white-space: nowrap; color: var(--ink); font-size: .625rem; opacity: var(--tabs, 0); }
.apart__controls { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .apart__fig { display: none; }

/* what I did differently */
.diff { padding-block: 0 clamp(3rem, 8vh, 5.5rem); row-gap: 1.5rem; align-items: end; }
.diff h3 { grid-column: 1 / span 5; }
.diff__intro { grid-column: 7 / span 6; max-width: 30em; }
.diff table { grid-column: 1 / -1; width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: .6rem; }
.diff th, .diff td { text-align: left; vertical-align: top; font-weight: 400; padding: .6rem var(--col-gap) .6rem 0; }
.diff thead th { padding-block: 0 .2rem; color: var(--ink); }
.diff thead th:nth-child(1) { width: 25%; }
.diff thead th:nth-child(2) { width: 33.333%; }
.diff tbody th { font-family: var(--sans); font-size: .9375rem; font-weight: 600; line-height: 1.5; padding-top: .72rem; }
.diff tbody td { font-size: 1.125rem; line-height: 1.4; }
.diff tbody td:nth-child(2) { color: var(--ink-soft); }
.diff__note { grid-column: 1 / -1; margin: .4rem 0 0 25%; max-width: 44em; }

/* the sign-off: the studio's name across the full measure, ferns the page draws over it, then who made what */
.signoff {
  position: relative; overflow: hidden;
  background: var(--fern); color: var(--paper);
  padding: clamp(4.5rem, 13vh, 8.5rem) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + clamp(2.5rem, 6vh, 4rem));
}
.signoff__name {
  margin: 0 0 0 -.03em;
  font-weight: 300; font-size: 24vw; line-height: .76; letter-spacing: -.012em;
  text-transform: uppercase; white-space: nowrap;
}
.signoff__name span { display: inline-block; padding-top: .07em; }
.signoff--drawn .signoff__name { color: transparent; }   /* the canvas draws the name, cut into the ground */
.signoff__carve, .signoff__ferns { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.signoff__ferns { left: -32px; top: -32px; width: calc(100% + 64px); height: calc(100% + 64px); transition: transform .6s cubic-bezier(.2, .7, .3, 1); }   /* reaches past the edges by SIGN_BLEED in main.js, so leaning never shows its edge */
.signoff__foot { position: relative; margin-top: clamp(4rem, 10vh, 7rem); padding-top: 2rem; row-gap: 2.25rem; align-items: start; }
.signoff__foot::before { content: ''; position: absolute; top: 0; right: 0; left: calc((100% + var(--col-gap)) / 6); height: 1px; background: rgba(241, 234, 219, .2); }
.signoff__studio { grid-column: 3 / span 4; display: grid; row-gap: 1rem; justify-items: start; }
.signoff__studio p { font-size: clamp(1.125rem, 1.45vw, 1.375rem); line-height: 1.4; max-width: 22em; }
.signoff__studio .small { font-size: .875rem; }
.signoff__identity { display: inline-flex; align-items: center; gap: 1rem; margin-bottom: .5rem; text-decoration: none; }
.signoff__mark {
  display: block; flex: none; width: 2.6rem; height: 4rem; background: var(--paper);
  -webkit-mask: url('data:image/png;base64,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') center / contain no-repeat;
  mask: url('data:image/png;base64,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') center / contain no-repeat;
}
.signoff__signature { display: grid; gap: .4rem; }
.signoff__identity:hover .label { text-decoration: underline; text-underline-offset: .3em; }
.signoff__col { grid-column: span 2; display: grid; row-gap: .5rem; }
.signoff .small { color: var(--paper-soft); }
.signoff .label { color: var(--paper); }
.signoff a { color: inherit; text-underline-offset: .25em; }

@media (min-width: 901px) {
  .signoff { min-height: 100vh; min-height: 100svh; padding-top: clamp(2rem, 5svh, 4rem); padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 900px) {
  .trail { display: none; }
  .intro__head { grid-column: 1 / -1; }
  .intro__lede { grid-column: 1 / span 8; }
  .intro__side { grid-column: 1 / span 8; }
  .study__text { grid-column: 1 / span 9; position: static; }
  .parts { grid-column: 1 / -1; }
  .figure { grid-column: 1 / -1; }
  .how__text { grid-column: 1 / span 9; }
  .apart__text { grid-column: 1 / span 9; }
  .apart__fig { grid-column: 1 / -1; }
  .why__side { grid-column: 1 / span 8; }
  .notes { grid-column: 1 / -1; }
  .diff h3, .diff__intro { grid-column: 1 / span 9; }
  .signoff__studio { grid-column: 1 / span 7; }
  .signoff__col { grid-column: span 4; }
  .signoff__foot::before { left: 0; }
}
@media (max-width: 700px) {
  .note--fold { grid-template-columns: minmax(0, 1fr); }
  .diff table, .diff tbody, .diff tr, .diff tbody th, .diff td { display: block; }
  .diff thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .diff th, .diff td { padding: 0; }
  .diff tbody tr { padding-bottom: 1.5rem; }
  .diff tbody td { margin-top: .5rem; }
  .diff__note { margin-left: 0; }
  .diff tbody td::before {
    content: attr(data-who); display: block; margin-bottom: .1rem; color: var(--ink-soft);
    font-family: var(--sans); font-variation-settings: "wdth" 125; font-weight: 600; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  }
}
@media (max-width: 600px) {
  .hero__sub .label:last-child { display: none; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: .85rem; }
  .intro__lede, .intro__side, .study__text, .how__text, .why__side, .apart__text { grid-column: 1 / -1; }
  .diff h3, .diff__intro { grid-column: 1 / -1; }
  .notes { grid-template-columns: minmax(0, 1fr); }
  .figure__controls { grid-template-columns: auto auto; justify-content: start; }
  .figure__controls label:first-child { grid-column: 1 / -1; }
  .speeds tbody tr { grid-template-columns: 6.6rem minmax(0, 1fr); column-gap: .7rem; }
  .signoff__studio, .signoff__col { grid-column: 1 / -1; }
  .signoff__foot { margin-top: clamp(7rem, 20vh, 10rem); }
  .parts ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .parts li:nth-child(4) { grid-column: 1 / -1; }
  .parts li:nth-child(4) canvas { aspect-ratio: 2 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .trail circle { transition: none; }
}
img { max-width: 100%; }
[hidden] { display: none !important; }