@font-face{font-family:"EB Garamond";src:url(/fonts/eb-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/fonts/eb-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond Fallback";src:local("Georgia");size-adjust:87.54%;ascent-override:115.03%;descent-override:34.04%;line-gap-override:0%}
@font-face{font-family:"EB Garamond Fallback";src:local("Georgia Italic");font-style:italic;size-adjust:87.54%;ascent-override:115.03%;descent-override:34.04%;line-gap-override:0%}

/* The Long Exposure r2 (12 October 2026). One face: --font-data points at the voice face (Max's ruling), so data
   text differs only by size, colour and tabular figures. Palette unchanged; new colours are tints of it. */
:root{
  --ground:#151311; --ground-raised:#1c1a17;
  --ink:#efe9dc; --muted:#b9b3a6; --faint:#8a847a; --rule:#3a3530;
  --spark:#fff6e6; --trail:#efe9dc;
  --halo-lamp:#d9b27a; --halo-day:#c9d3d9; --halo-studio:#d98f5e;
  --font:"EB Garamond","EB Garamond Fallback",Garamond,Georgia,serif;
  --font-data:var(--font);
  --t-data:.875rem; --t-tick:.8125rem; --lh-data:1.45;
  --haze-lamp:color-mix(in oklab,var(--halo-lamp) 5%,transparent);
  --haze-day:color-mix(in oklab,var(--halo-day) 5%,transparent);
  --haze-studio:color-mix(in oklab,var(--halo-studio) 5%,transparent);
  --floor:color-mix(in oklab,var(--ground) 93%,var(--halo-day));
  --trail-cooled:color-mix(in oklab,var(--trail) 55%,var(--faint));
  --rule-strong:color-mix(in oklab,var(--rule) 60%,var(--faint));
  --t-name:clamp(3rem,1.5rem + 8vw,9rem);
  --t-word:clamp(3.5rem,1rem + 9vw,10rem);
  --t-word-half:clamp(2.25rem,1.25rem + 4.5vw,5.5rem);
  --t-figure:clamp(3.75rem,2rem + 6vw,7.5rem);
  --t-figure-row:clamp(2rem,1.5rem + 1.6vw,2.75rem);
  --t-title:clamp(2rem,1.4rem + 2.2vw,3rem);
  --t-section:clamp(1.625rem,1.3rem + 1vw,2.125rem);
  --t-lede:clamp(1.2rem,1rem + .8vw,1.6rem);
  --t-body:1.125rem; --lh-body:1.6; --t-meta:.9375rem;
  --measure:34rem; --wide:52rem; --bleed:80rem;
  --gutter:clamp(1rem,5vw,5rem); --gap:clamp(1.5rem,4vw,4rem);
  --markcol:17rem; --markcol-page:7rem; --mark:14rem;
  --ease-draw:cubic-bezier(.45,0,.2,1);
  --ease-settle:cubic-bezier(.22,1,.36,1);
  --ease-camera:cubic-bezier(.33,0,.15,1);
  --dur-rise:.9s; --dur-develop:1.4s; --dur-fix:.8s;
  --dur-vt-root:.28s; --dur-vt-spark:.52s; --dur-dissolve:.6s;
  --stagger-word:45ms; --cool:1.8s;
  --plot:26rem; --notes:15rem; --notes-gap:2.5rem; --latent:var(--faint); --latent-blur:2.5px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:var(--lh-body);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,p,ol,dl,dd,blockquote,figure{margin:0}
h1,h2,h3{font-weight:400}
p,h3,blockquote{text-wrap:pretty}
ol{padding:0;list-style:none}
/* Links share the text colour, so the underline is the only cue (WCAG 1.4.1). Kept on purpose; anti-slop 0.4.3 flags it and ignores opt-outs for this rule. */
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--faint)}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:20;padding:.5rem 1rem;background:var(--ground-raised)}
.skip:focus{left:var(--gutter)}
/* Data text: measurement, never prose. The same face, set small with tabular figures; faint only at this size. */
.fig-label,.q-status,.status,.facts,.tl-when,.bar,.contact-list dt,.w-year,.pb-meta,.next-study{font-family:var(--font-data);font-size:var(--t-data);line-height:var(--lh-data);font-variant-numeric:tabular-nums lining-nums}
.tl-axis,.tl-role,.chart .note{font-family:var(--font-data);font-size:var(--t-tick);line-height:var(--lh-data);font-variant-numeric:tabular-nums lining-nums;color:var(--muted)}

/* The scene. The 2D light, the GL exposure (behind every word), the haze, the grain and the spark. */
.light{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0}
.light-on .light{opacity:1}
.light-on .light.is-done{opacity:0}
main,.page-head,.page-foot{position:relative;z-index:1}
.exposure-gl{z-index:-1}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{z-index:0;background:radial-gradient(90% 80% at 25% 45%,var(--haze,var(--haze-lamp)),transparent 80%)}
body::after{z-index:1;background:url(/grain.webp);opacity:.03}
body[data-halo="day"]{--haze:var(--haze-day)}
body[data-halo="studio"],body[data-halo="none"]{--haze:var(--haze-studio)}
/* The spark: one real element per page, named for the View Transition, set on the first point of the page's mark
   (build.py writes --sx and --sy from tools/marks.json). light.js then moves it in document coordinates. */
.opening > .mark,svg[data-light]{anchor-name:--mark}
.spark{position:absolute;left:anchor(--mark var(--sx),-9px);top:anchor(--mark var(--sy),-9px);z-index:3;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--spark);pointer-events:none;view-transition-name:light-point}
@supports not (anchor-name:--a){.spark:not([style*=translate]){display:none}}
@view-transition{navigation:auto}

/* Marks: the static art (no glow; light is only ever live). Hidden while the light draws them. A hero band's mark
   stands on a floor line, the static stand-in for the engine's wet floor. */
.mark{display:block;width:var(--mark);height:var(--mark);overflow:visible}
.mark path,.exposure path{fill:none;stroke:var(--trail);stroke-width:7;stroke-linecap:square;stroke-linejoin:miter}
.mark.small{width:4.5rem;height:4.5rem}
.light-on .chapter > .mark,.light-on .mark[data-light]{visibility:hidden}
[data-exposure="hero"] .mark{background:linear-gradient(90deg,transparent,var(--rule-strong) 30% 70%,transparent) 50% 100% / 100% 1px no-repeat}

/* One grid on every page: rail, gap, text at the measure, a wide run to 52rem, and full bleed. */
.chapter,.page-main > article,.page-foot{--rail:var(--markcol-page);display:grid;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [rail-start] var(--rail) [rail-end] var(--gap) [text-start] min(var(--measure),100%) [text-end] minmax(0,calc(var(--wide) - var(--measure))) [wide-end] minmax(var(--gutter),1fr) [full-end];align-content:start}
:where(.chapter,.page-main > article,.page-foot,.case section,.study .result) > *{grid-column:text}
.chart,.flow,.stats,.roadmap,.timeline,.writing-strip,.copy,.ledger,.study-head,.facts{grid-column:text-start / wide-end}
.shots,.clip{grid-column:full;width:min(100% - 2 * var(--gutter),var(--bleed));justify-self:center}
section .shots,section .clip{grid-column:text-start / full-end;width:auto;max-width:calc(var(--bleed) - var(--rail));justify-self:stretch}
.case section,.study .result{grid-column:full;display:grid;grid-template-columns:subgrid;align-content:start}

/* Home chapters */
.chapter{--rail:var(--markcol);position:relative;overflow-x:clip;padding-block:18vh 10vh;min-height:80vh}
.chapter > .mark{grid-column:rail;grid-row:1 / span 3;justify-self:center;margin-top:.5rem}
.word{font-size:var(--t-word);line-height:1;letter-spacing:-.01em;overflow:hidden;padding-bottom:.12em;margin:0 0 clamp(1.5rem,3vw,3rem) calc(-1 * var(--gap))}
.word.half{font-size:var(--t-word-half)}
.word span{display:inline-block}
.copy > *{max-width:var(--measure)}
.copy > * + *{margin-top:1.25rem}
.copy > .timeline,.copy > .ledger{max-width:none}
.intro{font-size:var(--t-lede);line-height:1.45;margin-bottom:2.5rem}
.links{display:flex;flex-wrap:wrap;column-gap:1.5rem;margin-top:1.5rem}
.links a{display:inline-block;padding-block:.55rem;min-height:44px}

/* The opening: the name is the one bold element; the sigil hangs right of it over the floor at 72% of the viewport */
.opening{--sig:min(36vw,58svh);padding-top:max(8vh,3.5rem);min-height:100svh;grid-template-rows:auto auto auto auto auto 1fr}
.opening > *{grid-column:rail-start / wide-end}
.opening .motto{color:var(--muted);font-size:var(--t-meta);margin-bottom:12vh}
.opening > .mark{grid-area:auto;position:absolute;right:var(--gutter);top:calc(72svh - var(--sig));width:var(--sig);height:var(--sig);margin:0;z-index:-1}
.opening h1{font-size:var(--t-name);line-height:.95;letter-spacing:-.015em;margin-left:-.04em}
.opening .role{font-style:italic;color:var(--muted);font-size:var(--t-lede);margin-top:.9rem}
.opening .lede{font-size:var(--t-lede);line-height:1.45;max-width:30rem;margin-top:2rem}

/* Entries and ledger rows */
.entries > li + li{margin-top:2rem}
.entries h3{font-size:1.5rem;line-height:1.3}
.entries p{margin-top:.4rem}
.aside{color:var(--muted);font-size:var(--t-meta);line-height:1.55;margin-top:2.5rem !important}
.title{font-size:1.625rem;line-height:1.3}
.source{color:var(--muted);font-size:var(--t-meta)}
.pull{font-size:var(--t-lede);line-height:1.4;padding-left:1.25rem;border-left:1px solid var(--rule)}
.motto-display{font-size:clamp(2rem,1rem + 3vw,3.25rem);line-height:1.15}
.sub{font-size:1.5rem;line-height:1.3}
.copy > .sub + *{margin-top:.5rem}
.ledger{max-width:58rem}
.ledger > li:not(.q-row){max-width:var(--measure)}
.ledger + *{margin-top:3rem}
.q-row{position:relative;padding-top:1.25rem}
.q-row::before,.w-row::before,.pb-row::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--rule);transform-origin:0 50%}
.w-row{position:relative}
.q-row h3{font-size:1.375rem;line-height:1.35}
.q-thumb{display:block;width:9rem;max-width:100%;height:auto;border:1px solid var(--rule);margin-bottom:.9rem}
.entries .q-tagline{margin-top:.35rem;max-width:var(--measure)}
.entries .q-status{color:var(--muted);margin-top:.45rem;max-width:var(--measure)}
.entries .q-figure{margin-top:.75rem}
.q-figure .fig{display:block;font-size:var(--t-figure-row);line-height:1.1;font-variant-numeric:lining-nums}
.q-figure .fig-label{display:block;color:var(--muted);margin-top:.3rem;max-width:20rem}
@media (min-width:64rem){
  .q-row{display:grid;grid-template-columns:clamp(7rem,9vw,10rem) minmax(0,1fr) minmax(9rem,12rem);grid-template-rows:auto auto 1fr;column-gap:2rem;align-items:start}
  .q-row.q-sample{grid-template-columns:clamp(7rem,9vw,10rem) minmax(0,1fr)}
  .q-thumb{grid-column:1;grid-row:1 / span 3;width:100%;margin:.3rem 0 0}
  .q-row h3,.q-row .q-tagline,.q-row .q-status{grid-column:2}
  .q-row:not(:has(.q-thumb)) > *{grid-column:1 / -1}
  .entries .q-row .q-figure{grid-column:3;grid-row:1 / span 3;margin-top:.1rem}
}

/* Timeline: every role on one axis, years and dates as data. Current roles carry the light. */
.timeline{--tl-label:16rem;--tl-when:9rem}
.timeline ol{margin-top:.5rem}
.tl-axis{position:relative;height:1.5rem;margin:0 var(--tl-when) 0 var(--tl-label);border-bottom:1px solid var(--rule)}
.tl-axis span{position:absolute;bottom:.25rem;padding-left:.3rem;border-left:1px solid var(--rule)}
.timeline li{display:grid;grid-template-columns:var(--tl-label) minmax(0,1fr) var(--tl-when);align-items:center;min-height:2.6rem;border-bottom:1px solid var(--rule)}
.tl-label{font-size:var(--t-meta);line-height:1.3;padding-right:1rem}
.tl-role{display:block}
.tl-track{position:relative;height:100%;min-height:2.6rem}
.tl-bar{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:var(--faint)}
.now .tl-bar{background:var(--ink)}
.now .tl-bar::after{content:"";position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--spark)}
.tl-when{color:var(--muted);padding-left:1rem;white-space:nowrap}

/* Contact: the full exposure, every mark joined, and the two public lines */
.contact{min-height:100svh;align-content:center}
.contact .exposure{grid-column:rail;grid-row:1 / span 3;justify-self:center;height:min(78vh,44rem);width:auto;overflow:visible}
.contact .exposure path{stroke-width:5}
.contact .exposure .x-connector{stroke-width:2.5;stroke-opacity:.45}
.card-quote{font-style:italic;font-size:var(--t-lede);line-height:1.45;max-width:24rem}
.contact-list{display:grid;grid-template-columns:7rem minmax(0,1fr);row-gap:.5rem;margin-top:2.5rem}
.contact-list dt{color:var(--faint);align-self:center}
.contact-list dd{overflow-wrap:anywhere}

/* Fixed bar, after the opening scrolls away */
.bar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;padding:.7rem var(--gutter);background:var(--ground-raised);color:var(--muted);transform:translateY(-100%);pointer-events:none}
.bar a{text-decoration:none}
.show-bar .bar{transform:none;pointer-events:auto}

/* Inner pages */
.page-head{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem var(--gutter) 0;color:var(--muted);font-size:var(--t-meta)}
.page-head a{text-decoration-color:transparent}
.page-head a:hover{text-decoration-color:var(--ink)}
.page-main{padding:12vh 0 6vh}
.page-main > article{position:relative}
.page-main > article > .mark.small,.pb-mark{grid-column:rail;grid-row:1 / span 3;justify-self:center;margin-top:.4rem}
.page-main h1{font-size:var(--t-title);line-height:1.12;letter-spacing:-.01em}
.page-main section{margin-top:clamp(3.5rem,6vw,5.5rem)}
.page-main h2{font-size:var(--t-section);line-height:1.25;margin-bottom:1.25rem}
.page-main section p + p{margin-top:1rem}
.page-foot{padding-block:6vh 12vh;row-gap:0}
.page-foot::before{content:"";grid-column:text-start / wide-end;border-top:1px solid var(--rule);margin-bottom:6vh}
.page-foot .card-quote{margin-bottom:1.5rem}
.facts{display:grid;grid-template-columns:7rem minmax(0,1fr);row-gap:.35rem;margin-top:2.5rem}
.facts > div{display:contents}
figcaption,.status,.aside{max-width:min(var(--measure),66ch)}
.facts dt{color:var(--faint)}
.facts dd{color:var(--muted)}
.byline{color:var(--muted);font-size:var(--t-meta);margin-top:1.25rem}
.essay-body{margin-top:4rem;font-size:1.1875rem;line-height:1.7}
.essay-body p + p{text-indent:1.5em}
.essay-body p:last-child{margin-top:2rem;text-indent:0;font-style:italic}
/* The essay's one pull quote (aria-hidden: it repeats the text). Inline on narrow screens; in the wide run from 70rem. */
.essay-body .pull-quote{margin:2rem 0}
.essay-body .pull-quote + p{text-indent:1.5em}
@media (min-width:70rem){.essay-body .pull-quote{float:right;width:var(--notes);margin:.2rem calc(-1 * (var(--notes) + var(--notes-gap))) 0 0}}

/* Case pages: the page mark stands in the rail over its floor, the title and one plain line beside it, then the big
   figure, the facts strip and visuals at the wide or full measure. From 64rem the rail is the home rail, so the
   light's margin connector (light.js runs it just right of the mark) keeps to the gap, and a section rail sticks. */
.case-mark{grid-column:rail;grid-row:1;justify-self:center;margin-top:.4rem}
.case-mark .mark{width:4.5rem;height:4.5rem}
.study-head{grid-row:1}
.study-head .tagline,.case .outcome{font-size:var(--t-lede);line-height:1.4;max-width:30rem;margin-top:1rem}
.case .outcome{font-style:italic;color:var(--muted)}
.status{color:var(--muted);margin-top:.75rem;max-width:var(--measure)}
.answer-figure{display:flex;flex-direction:column;row-gap:.35rem;margin-top:clamp(2rem,4vw,3.25rem)}
.answer-figure .fig{font-size:var(--t-figure);line-height:1.05;letter-spacing:-.01em;font-variant-numeric:lining-nums}
.answer-figure .fig-label{color:var(--muted);max-width:18rem}
.case-rail{display:none}
@media (min-width:48rem){.answer-figure{flex-direction:row;align-items:last baseline;column-gap:1.75rem}}
@media (min-width:64rem){
  .page-main > .case{--rail:var(--markcol)}
  .case-mark{position:absolute}
  .case-mark .mark{width:16rem;height:16rem}
  .facts{grid-template-columns:minmax(0,12rem) minmax(0,12rem) minmax(0,1fr);column-gap:3rem}
  .facts > div{display:block}
  .case:not(.study) .facts{grid-template-columns:7rem minmax(0,1fr)}
  .case-rail{display:block;position:absolute;inset:0;grid-column:rail;grid-row-end:auto;padding:clamp(3.5rem,6vw,5.5rem) 2.5rem 0 0;color:var(--muted);font-size:var(--t-meta)}
  .case-rail nav{position:sticky;top:3rem}
  .case-rail a{display:block;padding-block:.35rem;text-decoration-color:transparent}
  .case-rail a:hover{text-decoration-color:var(--ink)}
}
.study > .hero{margin-top:clamp(2.5rem,5vw,4rem)}
.study .result{margin-top:3.25rem}
.study .result:first-of-type{margin-top:1.75rem}
.study .result h3{font-size:1.375rem;line-height:1.35;margin-bottom:.75rem}
.study .vision{font-size:var(--t-lede);line-height:1.45}
.rise{padding-bottom:.1em}
.rise span{display:inline-block}
.next-study{color:var(--muted);margin-bottom:1rem}
.next-study + .card-quote{margin-top:1.5rem}
.next-study a{color:var(--ink)}
.case p.links{margin-top:2rem}

/* Stats, steps and the roadmap */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1.75rem 1.5rem;margin-top:2.5rem}
.stats .stat{border-top:1px solid var(--rule);padding-top:.7rem}
.stat b{display:block;font-weight:400;font-size:1.75rem;line-height:1.15;font-variant-numeric:lining-nums tabular-nums}
.stat span{display:block;margin-top:.35rem;color:var(--muted);font-size:var(--t-meta);line-height:1.45}
.flow{margin-top:2.5rem}
.flow figcaption{color:var(--muted);font-size:var(--t-meta);margin-top:.75rem}
.steps{--step-gap:2.25rem;display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.steps li{position:relative;padding-top:.9rem}
.steps li::after{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--ink);transform-origin:0 50%}
.steps li + li::before{content:"";position:absolute;top:-1.5rem;left:3px;height:1.5rem;border-left:1px solid var(--faint)}
.steps b{display:block;font-weight:400;font-size:1.125rem;line-height:1.3}
.steps span{display:block;color:var(--muted);font-size:var(--t-data);line-height:1.4;margin-top:.3rem}
@media (min-width:40.0625rem){
  .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--step-gap)}
  .steps:has(> li:nth-child(5)){--step-gap:1.5rem}
  .steps:has(> li:nth-child(6)){grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.25rem}
  .steps li + li::before{top:0;left:calc(-1 * var(--step-gap));width:var(--step-gap);height:0;border-left:0;border-top:1px solid var(--faint)}
  .steps:has(> li:nth-child(6)) > li:nth-child(3n+1)::before{display:none}
}
body{--halo-page:var(--halo-lamp)}
body[data-halo="day"]{--halo-page:var(--halo-day)}
body[data-halo="studio"]{--halo-page:var(--halo-studio)}
.roadmap{margin-top:3.25rem}
.roadmap .now::after{border-top:2px solid var(--halo-page)}
.steps .now-tag{position:absolute;bottom:calc(100% + .45rem);left:0;color:var(--halo-page);font-size:var(--t-meta);line-height:1.2}

/* Charts: inline SVG from tools/pages.py, text in viewBox units, ticks muted */
.chart{position:relative;margin-top:2.5rem}
.chart-title{font-size:1.125rem;line-height:1.35;margin-bottom:.9rem;max-width:var(--measure)}
.chart svg{display:block;width:100%;max-width:26rem;height:auto}
.chart text{font-family:var(--font-data);fill:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.chart .lbl,.chart .val{fill:var(--ink)}
.chart .bar-fill{fill:var(--faint)}
.chart .grid{stroke:var(--faint);stroke-width:1;stroke-opacity:.55;vector-effect:non-scaling-stroke}
.chart .zero{stroke:var(--faint);stroke-width:1;vector-effect:non-scaling-stroke}
.chart .line{fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{fill:var(--ink)}
.chart .hi{fill:var(--halo-lamp)}
.chart table.visually-hidden{top:0;left:0;white-space:normal}
.chart figcaption,.shots figcaption,.clip figcaption{color:var(--muted);font-size:var(--t-meta);line-height:1.5;margin-top:.75rem}
.shots figcaption,.clip figcaption{padding-right:var(--gutter)}
.chart .note{display:block;margin-top:.35rem}
.pin{font-size:var(--t-meta);line-height:1.45;margin-top:.75rem;max-width:var(--measure)}
.pin-row{color:var(--muted)}
@media (min-width:64rem){
  .chart.pinned .plot{display:grid;grid-template-columns:var(--plot) var(--notes-gap) var(--notes);align-items:start}
  .chart.pinned .plot svg{grid-column:1;grid-row:1}
  .pin{grid-column:3;grid-row:1;position:relative;margin-top:var(--pin-y,0)}
  .pin::before{content:"";position:absolute;top:var(--pin-dy,.7em);right:100%;width:var(--notes-gap);border-top:1px solid var(--rule);transform-origin:100% 50%}
  .pin-row{display:none}
}

/* Screens and video: full bleed to 80rem; a capture never stretches past its own width */
.shots{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;margin-top:2.5rem;justify-items:center}
.shots img{display:block;max-width:100%;height:auto;border:1px solid var(--rule)}
.shots .tall img{max-width:min(100%,19rem)}
@media (min-width:40.0625rem){
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
  .shots > figure:first-child,.shots > figure:nth-child(even):last-child{grid-column:1 / -1}
  .shots.hero > figure,.shots.portrait > figure:nth-child(n){grid-column:auto}
  .shots.hero{grid-template-columns:minmax(0,1fr)}
  .shots.portrait{grid-template-columns:repeat(2,minmax(0,19rem));justify-content:center}
}
.clip{margin-top:2.5rem}
.clip video{display:block;width:100%;height:auto;max-height:85svh;margin-inline:auto;background:var(--ground-raised)}

@media (max-width:63.99rem){
  :root{--markcol:9rem;--mark:7rem}
}
/* Below 768px the grid collapses to one column between the gutters; the rail mark sits above the title */
@media (max-width:47.99rem){
  :root{--mark:4.5rem;--t-body:1.0625rem}
  .chapter,.page-main > article,.page-foot{grid-template-columns:[full-start] var(--gutter) [rail-start text-start] minmax(0,1fr) [rail-end text-end wide-end] var(--gutter) [full-end]}
  .chapter > .mark,.page-main > article > .mark.small,.pb-mark,.case-mark,.contact .exposure,.study-head{grid-row:auto;justify-self:start;margin:0 0 1.5rem}
  .chapter{padding-block:14vh 8vh;min-height:0}
  .word{margin-left:0}
  .opening{padding-top:1.25rem;min-height:0;grid-template-rows:none}
  .opening .motto{margin-bottom:0}
  .opening > .mark{grid-column:text;position:static;width:72px;height:72px;margin:1.25rem 0 2.5rem;z-index:auto}
  .contact .exposure{height:auto;width:min(9rem,40vw);margin-bottom:2rem}
  .contact-list,.facts{grid-template-columns:5.5rem minmax(0,1fr);column-gap:1rem}
  .timeline{--tl-label:0rem;--tl-when:0rem}
  .timeline li{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1.2rem;padding:.6rem 0;min-height:0}
  .tl-label{grid-column:1;grid-row:1}
  .tl-when{grid-column:2;grid-row:1;align-self:start;padding-left:.75rem}
  .tl-track{grid-column:1 / -1;grid-row:2;min-height:1.2rem}
  .tl-axis{margin:0}
  .shots,.clip{width:100%}
  .study > .shots figcaption,.study > .clip figcaption{padding-left:var(--gutter)}
}

@media print{
  :root{--ground:#f3eee4;--ground-raised:#f3eee4;--ink:#151515;--muted:#5a5650;--faint:#5a5650;--trail:#151515}
  .light,.bar,.skip,.spark,.exposure-gl,.case-rail{display:none}
  body::after{content:none}
}

/* Motion. Every latent rule sits in this block, scoped to .js:not(.developed): with no JS, reduced motion, print or
   the 3 s .developed fallback the rules above are the finished page. Body text never animates. light.js supplies
   --t (0 to 1, latched) per [data-develop] element and .is-fixed at 1; .is-up when a chapter word arrives. */
[data-develop]{--stagger:.125}
.tier-full [data-develop]{--stagger:.25}
@media screen and (prefers-reduced-motion:no-preference){
  a{transition:text-decoration-color .2s ease}
  .light{transition:opacity .8s ease}
  .bar{transition:transform .35s var(--ease-draw)}
  .spark{animation:breath 6s ease-in-out infinite}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-vt-root);animation-timing-function:linear}
  ::view-transition-group(*){animation-duration:var(--dur-vt-spark);animation-timing-function:var(--ease-draw)}

  /* chapter words rise from behind their baseline one word at a time; light.js dissolves them on the way out */
  .js:not(.developed) .word span{transform:translateY(105%);transition:transform var(--dur-rise) var(--ease-settle) calc(var(--i,0) * var(--stagger-word))}
  .js:not(.developed) .word.is-up span{transform:none}
  .js:not(.developed) .exposure path{stroke-dasharray:1;stroke-dashoffset:1}
  .js:not(.developed) .exposure.is-drawn path{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease-draw)}

  .js:not(.developed) [data-develop]{--t:0}
  .js:not(.developed) [data-develop] .row,.js:not(.developed) [data-develop="stats"] .stat,.js:not(.developed) [data-develop="timeline"] li{--b:clamp(0,calc(var(--t) * (1 + var(--n) * var(--stagger)) - var(--i) * var(--stagger)),1)}
  /* big figures develop from latent (faint, blurred on the full tier) to ink and fix; their label follows 200ms on */
  .js:not(.developed) [data-develop] .fig{color:color-mix(in srgb,var(--ink) calc(var(--t) * 100%),var(--latent))}
  .tier-full.js:not(.developed) [data-develop] .fig{filter:blur(calc((1 - var(--t)) * var(--latent-blur)))}
  .js:not(.developed) [data-develop="figure"] .fig-label{color:var(--latent)}
  .js:not(.developed) [data-develop="figure"].is-fixed .fig-label{color:var(--muted);transition:color var(--dur-fix) var(--ease-settle) .2s}
  .js:not(.developed) [data-develop="stats"] b{color:color-mix(in srgb,var(--ink) calc(var(--b) * 100%),var(--latent))}
  .js:not(.developed) [data-develop] .bar-fill{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(var(--b))}
  .js:not(.developed) [data-develop] .bar-fill.neg{transform-origin:100% 50%}
  .js:not(.developed) [data-develop] .row .val{opacity:clamp(0,calc((var(--b) - .7) * 3.4),1)}
  .js:not(.developed) [data-develop] .row .lbl{fill:color-mix(in srgb,var(--ink) calc(var(--b) * 100%),var(--latent))}
  .js:not(.developed) [data-develop] .hi{fill:var(--latent)}
  .js:not(.developed) [data-develop].is-fixed .hi{fill:var(--halo-lamp);transition:fill var(--dur-fix) var(--ease-settle)}
  .js:not(.developed) [data-develop] .line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t))}
  .js:not(.developed) [data-develop] .pts,.js:not(.developed) [data-develop] .end{opacity:clamp(0,calc((var(--t) - .8) * 5),1)}
  .js:not(.developed) [data-develop="note"]{color:color-mix(in srgb,var(--muted) calc(var(--t) * 100%),var(--latent))}
  .js:not(.developed) [data-develop="note"]::before{transform:scaleX(0)}
  .js:not(.developed) [data-develop="note"].is-fixed{color:var(--ink);transition:color var(--dur-fix) var(--ease-settle)}
  .js:not(.developed) [data-develop="note"].is-fixed::before{transform:none;transition:transform var(--dur-fix) var(--ease-settle)}
  .js:not(.developed) [data-develop="steps"] li,.js:not(.developed) [data-develop="roadmap"] li:not(.now){--s:clamp(0,calc(var(--t) * var(--n) - var(--i)),1);--f:clamp(0,calc((var(--s) - .45) * 2),1)}
  .js:not(.developed) [data-develop="steps"] li::after,.js:not(.developed) [data-develop="roadmap"] li:not(.now)::after{transform:scaleX(clamp(0,calc(var(--s) * 1.6),1))}
  .js:not(.developed) [data-develop="steps"] li + li::before,.js:not(.developed) [data-develop="roadmap"] li + li::before{opacity:var(--f)}
  .js:not(.developed) [data-develop="steps"] b,.js:not(.developed) [data-develop="roadmap"] li:not(.now) b{color:color-mix(in srgb,var(--ink) calc(var(--f) * 100%),var(--latent))}
  .js:not(.developed) [data-develop="steps"] li > span,.js:not(.developed) [data-develop="roadmap"] li:not(.now) > span{color:color-mix(in srgb,var(--muted) calc(var(--f) * 100%),var(--latent))}
  .js:not(.developed) [data-develop="steps"] figcaption{color:color-mix(in srgb,var(--muted) calc(clamp(0,calc((var(--t) - .8) * 5),1) * 100%),var(--latent))}
  .js:not(.developed) [data-develop="timeline"] .tl-bar{transform-origin:0 50%;transform:scaleX(var(--b))}
  .js:not(.developed) [data-develop="timeline"] .now .tl-bar::after{opacity:0}
  .js:not(.developed) [data-develop="timeline"].is-fixed .now .tl-bar::after{opacity:1;transition:opacity var(--dur-fix) var(--ease-settle)}

  /* scroll reveals run on the view timeline, not a scroll listener; without support they are simply finished */
  @supports (animation-timeline:view()){
    .q-row,.rise,.w-row,.pb-row{view-timeline:--reveal}
    .q-row::before,.w-row::before,.pb-row::before{animation:draw-rule linear both;animation-timeline:--reveal;animation-range:entry 10% cover 35%}
    .rise{overflow:hidden}
    .rise span{animation:rise linear both;animation-timeline:--reveal;animation-range:entry 10% cover 35%}
  }
}
@keyframes breath{50%{opacity:.55}}
@keyframes draw-rule{from{transform:scaleX(0)}}
@keyframes rise{from{transform:translateY(105%)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}}