/* Hallmark · redesign of the Surface exhibition (v2) · direction: Patrick's 45 reference frames and his 7 Oct brief
 * tone: museum plate, live · anchor hue: selective blue on ivory and charcoal
 * signature: one blue lens that shows what is beneath, rendered live in glyphs (glyph.js) */
/* tokens.css is linked before this file in every page's head, with the same version */

/* ---------- reset and base (the original stylesheets are retired in v2) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400}
:focus-visible{outline:2px solid var(--blue-ink);outline-offset:4px}
.method :focus-visible,.questions :focus-visible{outline-color:var(--blue-lens)}
.skip{position:fixed;top:8px;left:12px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;transform:translateY(-160%)}
.skip:focus{transform:none}

/* ---------- base ---------- */
body{font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
em,i{font-style:italic}
h1 em,h2 em,h3 em{font-style:italic;letter-spacing:-.02em}
::selection{background:var(--blue-lens);color:var(--ink)}
.kicker{font:500 var(--t-label)/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.plate{font:500 10.5px/1.55 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.fig-n{margin-right:1.1em}

.btn{display:inline-flex;align-items:center;gap:22px;height:54px;padding:0 22px 0 26px;background:var(--ink);color:var(--paper-light);font:600 15px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;transition:background .35s var(--ease-out),color .35s var(--ease-out)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .45s var(--ease-out)}
.btn:hover{background:var(--blue-ink)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{background:var(--blue-deep)}
.btn--small{height:44px;padding:0 16px 0 20px;font-size:14px;gap:16px}
.link{display:inline-flex;align-items:center;gap:12px;font:600 15px/1 var(--sans);padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease-out),color .3s}
.link:hover{background-size:0 1px;background-position:100% 100%;color:var(--blue-ink)}
.link svg{width:14px;height:14px}

/* ---------- navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);display:flex;align-items:center;padding:0 var(--gutter);transition:height .45s var(--ease-out),background-color .45s var(--ease-out),transform .55s var(--ease-out)}
.nav::after{content:'';position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:rgb(var(--ink-rgb) / .16);transition:left .45s var(--ease-out),right .45s var(--ease-out)}
.nav[data-state="solid"]{height:64px;background:rgb(var(--paper-rgb) / .84);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px)}
.nav[data-state="solid"]::after{left:0;right:0}
.nav[data-hidden="true"]{transform:translateY(-101%)}
.nav-mark{font:400 40px/1 var(--serif);letter-spacing:-.045em;margin-right:auto;transition:font-size .45s var(--ease-out)}
.nav[data-state="solid"] .nav-mark{font-size:34px}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:40px;font:500 14px/1 var(--sans)}
.nav-links{align-items:center}
.nav-links a,.nav-uses-btn,.nav-util{position:relative;padding:10px 0}
.nav-links a::after,.nav-uses-btn::after,.nav-util::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.nav-links a:hover::after,.nav-links a[aria-current]::after,.nav-uses-btn:hover::after,.nav-uses-btn[aria-current]::after,.nav-util:hover::after,.nav-util[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav-uses-btn::after{right:18px}
.nav-uses{position:relative}
.nav-uses-btn{display:inline-flex;align-items:center;gap:7px;background:none;font:500 14px/1 var(--sans)}
.nav-uses-btn svg{width:12px;height:12px;transition:transform .4s var(--ease-out)}
.nav-uses-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-util{font:500 14px/1 var(--sans);color:var(--ink-soft);margin-right:28px;white-space:nowrap}
.nav-menu{display:none}
.nav-menu--nojs{display:none !important}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:700px;max-height:1240px;overflow:clip;isolation:isolate;background:var(--paper)}
.hero-world{position:absolute;inset:0;z-index:0;transform:translate3d(0,var(--world-y,0px),0);will-change:transform}
.hero-world>img,.hero-world>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
.hero-world>canvas{opacity:0;transition:opacity .5s linear}
.hero-world picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}
.hero-world>canvas.is-ready{opacity:1}
html.gl [data-art]:not(.art-fallback)>img:not([data-keep]){opacity:0}
html.gl [data-art].art-live>img:not([data-keep]){visibility:hidden}
.hero::after{content:'';position:absolute;inset:auto 0 0 0;height:26%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgb(var(--paper-rgb) / 0),rgb(var(--paper-rgb) / .72) 55%,var(--paper))}
.hero-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgb(var(--paper-rgb) / .5) 0%,rgb(var(--paper-rgb) / .2) 34%,rgb(var(--paper-rgb) / 0) 52%)}

.lens-frame{position:absolute;left:0;top:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgb(var(--blue-rgb) / .95);opacity:0;transition:opacity 1s var(--ease-out)}
.lens-on .lens-frame{opacity:1}
.lens-frame::before,.lens-frame::after{content:'';position:absolute;width:16px;height:16px;border:1px solid var(--blue)}
.lens-frame::before{left:-8px;top:-8px;border-right:0;border-bottom:0}
.lens-frame::after{right:-8px;bottom:-8px;border-left:0;border-top:0}
.lens-frame span{position:absolute;right:0;top:calc(100% + 12px);font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep);white-space:nowrap}
html.is-beneath .lens-frame span::after{content:' · surface'}

.hero-copy{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 32px) var(--gutter) 96px;max-width:min(54vw,900px);pointer-events:none}
.hero-copy>*{pointer-events:auto}
.hero h1{font:400 var(--t-display)/.9 var(--serif);letter-spacing:-.042em;margin-top:30px}
.hero h1 em{letter-spacing:-.03em;padding-right:.04em}
.hero .lede{font-size:var(--t-lede);line-height:1.62;max-width:31em;margin-top:34px;color:var(--ink-soft)}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:38px;flex-wrap:wrap}
.hero-plate{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:30px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none}
.hero-plate .plate{color:var(--ink-soft)}
.hero-plate .plate b{font-weight:500;color:var(--blue-ink)}

/* load choreography: lines rise once, after the scene starts to develop */
.js .hero .rise{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.1s var(--ease-out),transform 1.3s var(--ease-out)}
.js .hero.is-in .rise{opacity:1;transform:none}
.js .hero.is-in .rise:nth-child(2){transition-delay:.08s}
.js .hero.is-in .rise:nth-child(3){transition-delay:.22s}
.js .hero.is-in .rise:nth-child(4){transition-delay:.34s}

@media (max-width:1100px){
  .hero-copy{max-width:72vw}
}
@media (max-width:1099px){
  html:not(.js) .nav-menu--nojs{display:inline-flex !important}
  html:not(.js) button.nav-menu{display:none}
  .nav-links,.nav-util{display:none}
  .nav-menu{display:inline-flex;align-items:center;height:40px;padding:0 4px;margin-left:22px;background:none;font:600 14px/1 var(--sans)}
}
@media (max-width:760px){
  .nav{padding:0 22px}
  .nav-mark{font-size:34px}
  .nav-cta{display:none}
  .nav-menu{margin-left:0}
  .hero{height:auto;min-height:100svh;max-height:none;display:flex;flex-direction:column}
  .hero-world{top:auto;height:58%;bottom:0}
  .hero-world>img,.hero-world>canvas,.hero-world picture>img{object-position:80% 50%}
  .hero-world::before{content:'';position:absolute;inset:0 0 auto 0;height:34%;z-index:1;background:linear-gradient(var(--paper),rgb(var(--paper-rgb) / 0))}
  .hero-wash{display:none}
  .hero-copy{height:auto;max-width:none;justify-content:flex-start;padding:calc(var(--nav-h) + 30px) 22px 52vh}
  .hero h1{font-size:clamp(56px,15.5vw,84px);margin-top:22px}
  .hero .lede{font-size:16px;margin-top:24px}
  .hero-actions{gap:22px;margin-top:28px}
  .hero-plate{left:22px;right:22px;bottom:18px}
  .hero-plate .plate:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .hero .rise{opacity:1;transform:none;transition:none}
  .hero-world{transform:none}
}

/* ---------- shared section type ---------- */
.h2{font:400 var(--t-h2)/.95 var(--serif);letter-spacing:-.036em}
.body-l{font-size:19px;line-height:1.62;color:var(--ink-soft);max-width:31em}
@media (max-width:760px){.body-l{font-size:17px}}

/* ---------- the connection: a vesica plate ---------- */
.connect{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:clamp(24px,4vw,80px);padding:clamp(56px,7vw,120px) var(--gutter) clamp(72px,8vw,140px);max-width:1920px;margin:0 auto}
.connect h2{font:400 var(--t-h2)/.95 var(--serif);letter-spacing:-.036em;margin-top:26px}
.connect .body-l{margin-top:30px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:48px 0 0;max-width:560px}
.pair div{border-top:1px solid var(--line);padding-top:18px}
.pair dd{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.pair dd strong{display:block;font:400 32px/1 var(--serif);letter-spacing:-.025em;color:var(--ink);margin-bottom:10px;font-weight:400}
.connect-plate{position:relative;margin:0;width:100%;aspect-ratio:1000/820}
.connect-plate>img,.connect-plate>canvas{position:absolute;inset:0;width:100%;height:100%}
.connect-plate>img{object-fit:contain;object-position:50% 0;opacity:.9}
.connect-plate>canvas{opacity:0;transition:opacity .6s linear}
.connect-plate>canvas.is-ready{opacity:1}
.vesica{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.v-ring{fill:none;stroke:var(--ink);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:var(--ring-draw,0)}
.v-construct{opacity:var(--construct,1)}
.v-dash{fill:none;stroke:var(--ink);stroke-opacity:.34;stroke-dasharray:2 7;vector-effect:non-scaling-stroke}
.v-axis{fill:none;stroke:var(--ink);stroke-opacity:.16;vector-effect:non-scaling-stroke}
.v-ticks{fill:none;stroke:var(--ink);stroke-opacity:.38;vector-effect:non-scaling-stroke}
.v-cross{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.v-labels{opacity:var(--labels,1)}
.v-labels text{font:500 12.5px var(--mono);letter-spacing:.15em;fill:var(--ink-soft)}
.v-labels .v-blue{fill:var(--blue-ink)}
.v-lead{fill:none;stroke:var(--ink);stroke-opacity:.55;vector-effect:non-scaling-stroke}
.v-lead-blue{stroke:var(--blue);stroke-opacity:1}
.v-dot{fill:var(--ink)}
.v-dot-blue{fill:var(--blue)}
.connect-plate figcaption{position:absolute;left:0;right:0;bottom:-36px;text-align:center}
@media (max-width:1100px){
  .connect{grid-template-columns:1fr;row-gap:56px}
  .connect-plate{max-width:880px;justify-self:center}
}
@media (max-width:760px){
  .pair{grid-template-columns:1fr;gap:22px}
  .v-labels{display:none}
  .connect-plate{margin-inline:-14px;width:calc(100% + 28px)}
  .connect-plate{margin-bottom:56px}
  .connect-plate figcaption{bottom:-44px;padding-inline:22px}
  .listen-art figcaption,.method-fig{display:none}
  .stop-table table{font-size:12px}
  .stop-table th,.stop-table td{padding-right:6px}
}

/* ---------- marks, pills and round controls shared by the case and the quotes ---------- */
mark{color:inherit;background:linear-gradient(transparent 14%,rgb(var(--blue-lens-rgb) / .55) 14%,rgb(var(--blue-lens-rgb) / .55) 90%,transparent 90%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:13px;background:var(--blue-pale);color:var(--blue-ink);font:600 12px/1 var(--sans);letter-spacing:.01em}
.round{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;transition:border-color .3s,background-color .3s,color .3s}
.round svg{width:16px;height:16px}
.round:hover{border-color:var(--ink);background:var(--ink);color:var(--paper-light)}

/* ---------- listen ---------- */
.listen{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center;gap:clamp(24px,4vw,80px);padding:clamp(40px,5vw,96px) var(--gutter) clamp(72px,8vw,140px);max-width:1920px;margin:0 auto}
.listen-art{position:relative;margin:0 0 0 calc(var(--gutter) * -0.6);aspect-ratio:1074/1400;max-height:92vh;justify-self:center;width:min(100%,calc(92vh * 1074 / 1400))}
.listen-art>img,.listen-art>canvas{position:absolute;inset:0;width:100%;height:100%}
.listen-art>img{object-fit:contain}
.listen-art>canvas{opacity:0;transition:opacity .6s linear}
.listen-art>canvas.is-ready{opacity:1}
.listen-art figcaption{position:absolute;left:12%;bottom:2%}
.lens-frame--small::before,.lens-frame--small::after{width:11px;height:11px}
.lens-frame--small::before{left:-6px;top:-6px}
.lens-frame--small::after{right:-6px;bottom:-6px}
.listen-art .lens-frame{opacity:0;transition:opacity 1s var(--ease-out) .6s}
.listen-art.art-live .lens-frame{opacity:1}
.listen-copy{max-width:640px}
.listen-copy .h2{margin-top:26px}
.listen-copy .body-l{margin-top:28px}
.quote{margin:52px 0 0;padding-top:34px;border-top:1px solid var(--line)}
.quote blockquote{font:400 clamp(30px,2.6vw,42px)/1.14 var(--serif);letter-spacing:-.02em;min-height:3.42em}
.quote blockquote.is-in{animation:quote-in .7s var(--ease-out)}
@keyframes quote-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.quote figcaption{display:flex;gap:16px;align-items:baseline;margin-top:22px;font:600 14px/1.4 var(--sans)}
.quote-controls{display:flex;align-items:center;justify-content:space-between;margin-top:30px}
.quote-controls>div{display:flex;gap:10px}
@media (max-width:1100px){.listen{grid-template-columns:1fr;row-gap:24px}.listen-art{width:min(78vw,560px);margin:0 auto}.listen-copy{max-width:none}}

/* ---------- in practice: the thread ---------- */
.practice{position:relative;padding:clamp(72px,8vw,136px) var(--gutter) clamp(72px,8vw,128px);max-width:1920px;margin:0 auto}
.practice-head{max-width:820px}
.practice-head .h2{margin-top:26px}
.practice-head .body-l{margin-top:28px}
.case-switch{display:inline-flex;gap:4px;margin-top:40px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--paper-light)}
.case-switch button{height:40px;padding:0 18px;border-radius:999px;background:transparent;font:600 14px/1 var(--sans);color:var(--muted);transition:background-color .3s,color .3s}
.case-switch button:hover{color:var(--ink)}
.case-switch button[aria-selected="true"]{background:var(--ink);color:var(--paper-light)}
.thread{position:relative;margin-top:clamp(56px,6vw,96px)}
.thread-line{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.thread-back{fill:none;stroke:var(--ink);stroke-opacity:.16;stroke-width:1;stroke-dasharray:2 6}
.thread-draw{fill:none;stroke:var(--blue);stroke-width:1.75;stroke-linecap:round}
.stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);position:relative;z-index:1}
.stop{position:relative;grid-column:1 / span 5}
.stop--right{grid-column:8 / span 5}
.stop:nth-child(1){grid-row:1}.stop:nth-child(2){grid-row:2}.stop:nth-child(3){grid-row:3}.stop:nth-child(4){grid-row:4}.stop:nth-child(5){grid-row:5}.stop:nth-child(6){grid-row:6}
.stop + .stop{margin-top:-88px}
.stop-node{position:absolute;top:30px;right:-38px;width:15px;height:15px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);transition:background-color .45s var(--ease-out),border-color .45s var(--ease-out),transform .45s var(--ease-out)}
.stop--right .stop-node{right:auto;left:-38px}
.stop:first-child .stop-node{opacity:0}
.stop.is-lit .stop-node{background:var(--blue);border-color:var(--blue);transform:scale(1.15)}
.stop-card{position:relative;background:var(--paper-light);border:1px solid var(--line-soft);padding:clamp(24px,2.2vw,36px);box-shadow:0 1px 0 rgb(var(--ink-rgb) / .03),0 18px 40px -28px rgb(var(--ink-rgb) / .28);transition:border-color .5s var(--ease-out),opacity .25s linear}
.stop.is-lit .stop-card{border-color:rgb(var(--blue-rgb) / .35)}
.stop-label{display:flex;gap:12px;align-items:baseline;margin-bottom:20px}
.stop-label b{font-weight:500;color:var(--quiet);transition:color .45s}
.stop.is-lit .stop-label b{color:var(--blue-ink)}
.stop-quote{font:400 clamp(30px,2.5vw,40px)/1.12 var(--serif);letter-spacing:-.02em}
.stop-quote--s{font-size:clamp(24px,1.9vw,30px);line-height:1.2}
.stop-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px;font:600 14px/1.4 var(--sans)}
.wave{width:150px;height:28px;color:var(--blue)}
.wave path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.stop-title{font:400 26px/1.1 var(--serif);letter-spacing:-.015em;margin-bottom:16px}
.stop-table table{width:100%;border-collapse:collapse;font:400 13px/1.4 var(--mono)}
.stop-table th{font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);text-align:left;padding:0 10px 10px 0;border-bottom:1px solid var(--line)}
.stop-table td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-soft)}
.stop-table tr.gap td{background:rgb(var(--blue-lens-rgb) / .22);color:var(--blue-deep)}
.stop-table tr.gap td:first-child{box-shadow:inset 2px 0 0 var(--blue);padding-left:10px}
.gap-note{margin-top:16px;font:500 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--blue-ink);max-width:none}
.gap-note b{font-weight:500;font-size:15px;margin-right:6px}
.stop-note{margin-top:18px;font-size:15.5px;line-height:1.6;color:var(--muted)}
.stop-open{margin-top:20px;font-size:14px;cursor:pointer;background-color:transparent;border:0}
.js .stop-src{display:none}
html:not(.js) .stop-open{display:none}
.stop-src{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:14.5px;line-height:1.6;color:var(--muted)}
.stop-src::before{content:attr(data-title);display:block;margin-bottom:6px;font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.stop-src p+p,.stop-src p+ul{margin-top:8px}
.stop-src blockquote{font:400 20px/1.25 var(--serif);color:var(--ink)}
html:not(.js) .app-tabs{display:none}
html:not(.js) .app-panel+.app-panel{margin-top:28px;border-top:1px solid rgb(var(--ink-rgb) / .1)}
.doc-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.doc-cols ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.doc-cols li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.4}
.doc-cols li::before{content:'';position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:3px;border:1px solid var(--ink)}
.doc-cols li.on::after{content:'';position:absolute;left:4px;top:5px;width:6px;height:4px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg)}
.doc-cols li.miss{color:var(--blue-deep)}
.doc-cols li.miss::before{border:1px dashed var(--blue);background:rgb(var(--blue-lens-rgb) / .2)}
.stop-finding{font:400 clamp(28px,2.3vw,38px)/1.08 var(--serif);letter-spacing:-.02em;margin-top:18px}
.stop-finding--s{margin-top:0}
.stop-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line-soft)}
.stop-dl dd{margin:8px 0 0;font:600 14px/1.35 var(--sans)}
.thread-end{text-align:center;margin:64px auto 0;max-width:none}
.thread.is-switching .stop-card{opacity:.25}
@media (max-width:1100px){
  .stops{grid-template-columns:minmax(0,1fr);padding-left:34px}
  .stop,.stop--right{grid-column:1}
  .stop + .stop{margin-top:28px}
  .stop-node,.stop--right .stop-node{left:-34px;right:auto}
  .stop:first-child .stop-node{opacity:1}
}
@media (max-width:760px){
  .case-switch{display:flex;flex-wrap:wrap;border-radius:18px}
  .case-switch button{flex:1 1 auto}
  .doc-cols{grid-template-columns:1fr}
  .stop-dl{grid-template-columns:1fr 1fr}
}

/* ---------- the workspace ---------- */
.platform{position:relative;padding:clamp(72px,8vw,136px) 0 clamp(40px,5vw,80px)}
.platform-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:clamp(24px,4vw,80px);padding:0 var(--gutter);max-width:1920px;margin:0 auto}
.platform-head .h2{margin-top:26px}
.stage{position:relative;margin-top:clamp(40px,5vw,72px);padding:clamp(64px,7vw,112px) calc(var(--gutter) + clamp(0px,16vw,250px));isolation:isolate}
.stage::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(rgb(var(--blue-rgb) / .075) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgb(var(--blue-rgb) / .075) 1px,transparent 1px) 0 0/32px 32px,#e3eaf4;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.stage-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.stage-lines path{fill:none;stroke:var(--blue);stroke-opacity:.45;stroke-width:1;stroke-dasharray:3 5}
.stage-lines circle{fill:var(--blue)}
.sources{list-style:none;margin:0;padding:0}
.src{position:absolute;z-index:2;display:flex;align-items:center;gap:14px;width:236px;padding:14px 16px;background:var(--paper-light);border:1px solid rgb(var(--ink-rgb) / .1);border-radius:12px;box-shadow:0 14px 30px -20px rgb(var(--blue-deep-rgb) / .45)}
.src .ic{width:20px;height:20px;flex:none;color:var(--blue-ink)}
.src b{display:block;font:700 14px/1.25 var(--sans)}
.src small{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.src--a{left:var(--gutter);top:13%}.src--b{left:calc(var(--gutter) + 18px);bottom:16%}.src--c{right:var(--gutter);top:20%}.src--d{right:calc(var(--gutter) + 22px);bottom:12%}
.ic{width:16px;height:16px;flex:none}
.app{position:relative;z-index:1;display:grid;grid-template-columns:212px minmax(0,1fr);min-height:560px;max-width:1080px;margin:0 auto;background:var(--paper-light);border:1px solid rgb(var(--ink-rgb) / .12);border-radius:14px;overflow:hidden;box-shadow:0 2px 4px rgb(var(--ink-rgb) / .03),0 50px 90px -46px rgb(var(--blue-deep-rgb) / .5)}
.app-rail{display:flex;flex-direction:column;gap:22px;padding:22px 16px;background:#f2efe7;border-right:1px solid rgb(var(--ink-rgb) / .08)}
.app-mark{font:400 28px/1 var(--serif);letter-spacing:-.04em;padding-left:8px}
.app-client{display:block;padding:12px;border-radius:9px;background:var(--paper-light);border:1px solid rgb(var(--ink-rgb) / .08)}
.app-client b{display:block;font:700 13.5px/1.2 var(--sans)}
.app-client small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.app-nav{display:flex;flex-direction:column;gap:2px}
.app-nav span{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:7px;font:600 13px/1 var(--sans);color:var(--ink-soft)}
.app-nav span .ic{color:var(--quiet)}
.app-nav span i{margin-left:auto;font:500 11px/1 var(--mono);font-style:normal;color:var(--quiet)}
.app-nav .is-on{background:var(--paper-light);color:var(--ink);box-shadow:0 1px 2px rgb(var(--ink-rgb) / .08),inset 0 0 0 1px rgb(var(--ink-rgb) / .06)}
.app-nav .is-on .ic{color:var(--blue-ink)}
.app-note{margin-top:auto;padding-left:10px}
.app-main{padding:24px clamp(22px,2.6vw,38px) 30px;min-width:0}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.app-crumb{display:flex;gap:8px;font:500 12.5px/1 var(--sans);color:var(--quiet);max-width:none}
.app-crumb span+span::before{content:'/';margin-right:8px;color:var(--line)}
.app-crumb span:last-child{color:var(--ink-soft)}
.app-status{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 11px;border-radius:13px;background:var(--blue-pale);font:600 12px/1 var(--sans);color:var(--blue-ink)}
.app-status i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.app-title{font:400 clamp(28px,2.4vw,38px)/1.05 var(--serif);letter-spacing:-.02em;margin-top:22px}
.app-tabs{display:flex;gap:26px;margin-top:20px;border-bottom:1px solid rgb(var(--ink-rgb) / .1)}
.app-tabs button{position:relative;height:40px;padding:0;background:none;font:600 13.5px/1 var(--sans);color:var(--quiet);transition:color .25s}
.app-tabs button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .35s var(--ease-out)}
.app-tabs button:hover{color:var(--ink)}
.app-tabs button[aria-selected="true"]{color:var(--ink)}
.app-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.app-panel{padding-top:24px;animation:panel-in .45s var(--ease-out)}
@keyframes panel-in{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
.ov-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px}
.ov-finding,.ov-next{padding:22px;border:1px solid rgb(var(--ink-rgb) / .09);border-radius:11px;background:#fff}
.ov-finding h4,.ov-next h4{font:400 24px/1.12 var(--serif);letter-spacing:-.015em;margin-top:14px}
.ov-finding p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:7px;background:var(--paper);font:600 12px/1 var(--sans);color:var(--ink-soft)}
.chips .ic{width:14px;height:14px;color:var(--blue-ink)}
.ov-next{display:flex;flex-direction:column;background:linear-gradient(160deg,#fff,#f3f6fb)}
.ov-next h4{margin:12px 0 18px}
.ov-next .link{margin-top:auto;font-size:13.5px}
.ov-stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ov-stats>div{padding:18px 20px;border:1px solid rgb(var(--ink-rgb) / .09);border-radius:11px;background:#fff}
.ov-stats b{display:block;margin-top:10px;font:400 34px/1 var(--serif);letter-spacing:-.02em}
.ov-stats b small{font:500 14px var(--sans);color:var(--quiet);letter-spacing:0}
.bar{display:block;height:4px;margin-top:14px;border-radius:2px;background:var(--paper-deep);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink)}
.bar--blue i{background:var(--blue)}
.flow{list-style:none;margin:58px 0 0;padding:0;display:flex;align-items:center}
.flow>li:not(.flow-gap){flex:none;width:96px;padding:14px 8px;border:1px solid rgb(var(--ink-rgb) / .12);border-radius:10px;background:#fff;font:700 12.5px/1.25 var(--sans);text-align:center}
.flow-gap{position:relative;flex:1 1 40px;min-width:36px;height:1px;background:rgb(var(--ink-rgb) / .3);margin:0 6px}
.flow-gap span{position:absolute;left:50%;top:-44px;transform:translateX(-50%);font:500 11.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
.flow-gap--wait{flex:3 1 120px;height:4px;border-radius:2px;background:var(--blue)}
.flow-gap--wait span{color:var(--blue-ink);font-weight:500}
.flow-gap--wait em{position:absolute;left:50%;top:40px;transform:translateX(-50%);font:600 12px/1.3 var(--sans);font-style:normal;color:var(--blue-ink);white-space:nowrap}
.flow-note{margin-top:64px;font-size:14px;color:var(--muted)}
.ev-list{list-style:none;margin:0;padding:0;border:1px solid rgb(var(--ink-rgb) / .09);border-radius:11px;background:#fff;overflow:hidden}
.ev-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"i b t" "i s t";column-gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid rgb(var(--ink-rgb) / .07)}
.ev-list li:last-child{border-bottom:0}
.ev-list li>span{grid-area:i;color:var(--blue-ink)}
.ev-list b{grid-area:b;font:700 13.5px/1.3 var(--sans)}
.ev-list small{grid-area:s;font-size:12.5px;color:var(--muted)}
.tag{grid-area:t;height:24px;padding:0 10px;border-radius:12px;font:600 11.5px/24px var(--sans);font-style:normal}
.tag--s{background:var(--blue-pale);color:var(--blue-ink)}
.tag--c{background:var(--paper);color:var(--ink-soft)}
.tag--x{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.dl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.dl-grid h4{font:400 26px/1.1 var(--serif);letter-spacing:-.015em;margin-top:12px}
.dl-grid p:not(.plate){margin-top:10px;font-size:14px;color:var(--muted)}
.dl-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dl-steps li{position:relative;padding:12px 14px 12px 40px;border:1px solid rgb(var(--ink-rgb) / .09);border-radius:10px;background:#fff}
.dl-steps li::before{content:'';position:absolute;left:14px;top:15px;width:14px;height:14px;border-radius:50%;border:1px solid var(--line)}
.dl-steps li.done::before{background:var(--ink);border-color:var(--ink)}
.dl-steps li.now::before{border:4px solid var(--blue)}
.dl-steps b{display:block;font:700 13.5px/1.3 var(--sans)}
.dl-steps small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
@media (max-width:1200px){
  .stage{padding:56px var(--gutter) 64px}
  .stage-lines{display:none}
  .sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1080px;margin:0 auto 28px}
  .src{position:static;width:auto}
}
@media (max-width:900px){
  .platform-head{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .app-rail{display:none}
  .ov-grid,.dl-grid{grid-template-columns:1fr}
  .flow{flex-direction:column;align-items:stretch}
  .flow>li:not(.flow-gap){max-width:none}
  .flow-gap{height:34px;width:1px;margin:6px auto;flex:none}
  .flow-gap span{left:14px;top:50%;transform:translateY(-50%)}
  .flow-gap--wait{width:4px}
  .flow-gap--wait em{left:14px;top:auto;bottom:-2px;transform:none}
  .flow-note{margin-top:28px}
}
@media (max-width:560px){.sources{grid-template-columns:1fr}.ov-stats{grid-template-columns:1fr}}

/* ---------- method: the dark field, and a hand that crosses into it ---------- */
.platform{padding-bottom:clamp(120px,12vw,200px)}
.method{position:relative;background:var(--dark);color:var(--dark-text);padding:clamp(120px,12vw,200px) var(--gutter) clamp(80px,8vw,128px);isolation:isolate}
.method .kicker,.questions .kicker{color:var(--dark-muted)}
.method-hand{position:absolute;z-index:2;right:-5vw;top:clamp(-210px,-13vw,-90px);width:min(64vw,1060px);aspect-ratio:1439/731;margin:0;pointer-events:none}
.method-hand>img,.method-hand>canvas{position:absolute;inset:0;width:100%;height:100%}
.method-hand>img{object-fit:contain;filter:grayscale(1) brightness(.9)}
.method-hand>canvas{opacity:0;transition:opacity .6s linear}
.method-hand>canvas.is-ready{opacity:1}
.method-hand .lens-frame{opacity:0;transition:opacity 1s var(--ease-out) .8s}
.method-hand.art-live .lens-frame{opacity:1}
.method-inner{position:relative;z-index:3;max-width:1760px;margin:0 auto}
.method-intro{max-width:min(46vw,640px)}
.method .h2{margin-top:26px;color:var(--paper-light)}
.method-steps{list-style:none;margin:clamp(72px,8vw,120px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,56px)}
.method-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding-top:24px;border-top:1px solid var(--dark-line)}
.method-steps .plate{color:var(--blue-lens);padding-top:9px}
.method-steps h3{font:400 clamp(32px,2.8vw,44px)/1 var(--serif);letter-spacing:-.02em;color:var(--paper-light)}
.method-steps p{margin-top:16px;font-size:16px;line-height:1.6;color:var(--dark-muted)}
.method-fig{position:absolute;z-index:3;right:var(--gutter);top:clamp(40px,6vw,96px);color:var(--dark-muted)}

/* ---------- questions ---------- */
.questions{background:var(--dark);color:var(--dark-text);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);padding:clamp(48px,6vw,96px) var(--gutter) clamp(120px,12vw,200px)}
.questions .h2{margin-top:26px;color:var(--paper-light)}
.layers{margin:40px 0 0 -4%;max-width:640px}
.layers .hairline-figure{aspect-ratio:1.1;--hl-plate:var(--dark);--hl-edge:#d8d5cb;--hl-mid:#8f928b;--hl-lo:#4a504c;--hl-hi:#7ea2ff}
.layers figcaption{margin-top:10px;color:var(--dark-muted)}
.question-list{border-top:1px solid var(--dark-line);align-self:start;margin-top:clamp(0px,4vw,64px)}
.question-list details{border-bottom:1px solid var(--dark-line)}
.question-list summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;cursor:pointer;list-style:none;font:400 clamp(24px,2vw,30px)/1.15 var(--serif);letter-spacing:-.015em;color:var(--paper-light);transition:color .3s}
.question-list summary::-webkit-details-marker{display:none}
.question-list summary:hover{color:var(--blue-lens)}
.q-icon{position:relative;flex:none;width:18px;height:18px}
.q-icon::before,.q-icon::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s var(--ease-out)}
.q-icon::after{transform:rotate(90deg)}
.question-list details[open] .q-icon::after{transform:rotate(0)}
.question-list details p{padding:0 0 30px;font-size:16.5px;line-height:1.65;color:var(--dark-muted);max-width:44em}
@media (max-width:1100px){
  .method-hand{width:86vw;right:-12vw;top:-64px}
  .method{padding-top:calc(43vw + 40px)}
  .method-intro{max-width:none}
  .method-steps{grid-template-columns:1fr;gap:0}
  .method-steps li{padding:24px 0}
  .questions{grid-template-columns:1fr}
  .layers{max-width:420px}
}

/* ---------- footer: the word rises between the two layers; the lens and the beneath switch ---------- */
.footer-scene>canvas.footer-landscape{z-index:0;opacity:0;transition:opacity .6s linear}
.footer-scene>canvas.footer-landscape.is-ready{opacity:1}
.footer-scene>.lens-frame{z-index:1}
.lens-on>.lens-frame{opacity:1}
.footer-word{font-family:var(--serif);letter-spacing:-.06em;color:#1f4cc0;left:0;width:100%;text-align:center}
.footer-copy h2{font:400 clamp(52px,6.2vw,104px)/.98 var(--serif);letter-spacing:-.035em}
.footer-copy .kicker{margin-bottom:24px}
.footer-copy .btn{margin-top:28px}
.footer-copy>p:not(.kicker){font-size:17px;margin-top:22px;line-height:1.55;color:var(--ink-soft)}
.footer-meta{font-size:12px}
.beneath-toggle{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 12px 0 10px;border-radius:16px;background:transparent;border:1px solid rgb(var(--ink-rgb) / .2);font:600 12px/1 var(--sans);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.beneath-toggle i{position:relative;width:26px;height:14px;border-radius:7px;background:rgb(var(--ink-rgb) / .18);transition:background-color .3s}
.beneath-toggle i::after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--paper-light);transition:transform .35s var(--ease-out)}
.beneath-toggle[aria-pressed="true"]{border-color:var(--blue);color:var(--blue-ink)}
.beneath-toggle[aria-pressed="true"] i{background:var(--blue)}
.beneath-toggle[aria-pressed="true"] i::after{transform:translateX(12px)}
.beneath-toggle kbd{font:500 10px/1 var(--mono);padding:3px 5px;border-radius:4px;border:1px solid rgb(var(--ink-rgb) / .2);color:var(--quiet)}
@media (max-width:760px){.beneath-toggle kbd{display:none}.footer-meta{flex-wrap:wrap}}


/* ---------- footer scene (layers: landscape 0, word 2, foreground 3, copy 4, meta 5) ---------- */
.footer-scroll{position:relative;height:260svh;background:var(--blue-mid)}
.footer-scene{position:sticky;top:0;height:100svh;min-height:580px;isolation:isolate;overflow:clip}
.footer-landscape,.footer-foreground{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;pointer-events:none}
.footer-landscape{z-index:0}
.footer-foreground{z-index:3}
.footer-copy{position:absolute;z-index:4;left:var(--gutter);top:12%;max-width:720px;transform:translate3d(0,var(--footer-copy-y,0px),0);opacity:var(--footer-copy-opacity,1)}
.footer-word{position:absolute;z-index:2;bottom:-.12em;font-size:clamp(230px,46vw,880px);line-height:.82;white-space:nowrap;transform:translate3d(0,var(--footer-word-y,70vh),0);will-change:transform;pointer-events:none}
.footer-scroll-note{display:block;margin-top:34px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:var(--footer-note-opacity,1)}
.footer-scroll-note span{display:inline-block;margin-left:12px}
.footer-meta{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--gutter);background:rgb(var(--paper-rgb) / .9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgb(var(--ink-rgb) / .12)}
.footer-meta nav{display:flex;gap:24px}
.footer-meta nav a:hover{color:var(--blue-ink)}
@media (max-width:760px){
  .footer-scroll{height:210svh}
  .footer-scene{min-height:650px}
  .footer-landscape,.footer-foreground{object-position:61% center}
  .footer-copy{top:10%;left:22px;right:22px}
  .footer-copy h2{font-size:clamp(46px,12vw,70px)}
  .footer-word{font-size:46vw;bottom:28%;transform:translate3d(0,var(--footer-word-y,65vh),0)}
  .footer-meta{flex-wrap:wrap;gap:10px 16px;padding:12px 22px}
  .footer-meta nav{gap:14px;flex-wrap:wrap}
}

/* ---------- evidence dialog ---------- */
dialog{border:1px solid var(--line);background:var(--paper-light);color:var(--ink);max-width:680px;width:calc(100% - 32px);padding:clamp(24px,3vw,40px);box-shadow:0 30px 120px rgb(var(--ink-rgb) / .3)}
dialog::backdrop{background:rgb(15 20 22 / .45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:start}
.dialog-heading .eyebrow{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:20px}
.dialog-close{background:none;font-size:30px;line-height:1;padding:0 2px}
dialog h2{font:400 40px/1.05 var(--serif);letter-spacing:-.02em;margin-bottom:22px}
#source-body p{font-size:15px;line-height:1.7;color:var(--ink-soft)}
#source-body p+p,#source-body p+ul,#source-body ul+p{margin-top:12px}
#source-body blockquote{font:400 30px/1.2 var(--serif);padding:4px 0 18px}
.source-dialog-note{font:500 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-top:26px}
.dialog-list{padding-left:18px;font-size:15px;line-height:1.8}

html:not(.js){scroll-behavior:auto}
html:not(.js) .footer-scroll{height:auto}
html:not(.js) .footer-scene{position:relative;height:100svh;min-height:650px}
html:not(.js) .footer-word{transform:translateY(-8vh)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .footer-scroll{height:100svh;min-height:650px}
  .footer-scene{position:relative}
  .footer-word{transform:translateY(-8vh)}
  .footer-copy{transform:none;opacity:1}
  .footer-scroll-note{display:none}
  .app-panel,.quote blockquote.is-in{animation:none}
}

/* ==========================================================================
   Multi-page site (14 October 2026, SITE-PLAN.md). Components C1 to C16.
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono-note{font:400 13px/1.65 var(--mono);color:var(--muted);letter-spacing:.01em}
html.sheet-open{overflow:hidden}

/* ---------- C1: the Uses panel ---------- */
.uses-panel{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%);width:min(740px,calc(100vw - 2 * var(--gutter)));display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:26px;padding:22px;background:var(--paper-light);border:1px solid var(--line-soft);box-shadow:0 2px 4px rgb(var(--ink-rgb) / .04),0 40px 80px -40px rgb(var(--ink-rgb) / .45);animation:panel-in .4s var(--ease-out)}
.uses-panel[hidden]{display:none}
.uses-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.uses-list a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:14px 14px 15px;transition:background-color .25s}
.uses-list a::after{display:none}
.uses-list a:hover,.uses-list a:focus-visible,.uses-list a.is-hot{background:var(--paper)}
.uses-list a[aria-current="page"] b{color:var(--blue-ink)}
.uses-list .plate{padding-top:7px;color:var(--blue-ink)}
.uses-list b{display:block;font:400 27px/1.04 var(--serif);letter-spacing:-.018em}
.uses-list small{display:block;margin-top:7px;font:500 13.5px/1.45 var(--sans);color:var(--muted)}
.uses-fig{margin:0;align-self:start}
.uses-thumb{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper)}
.uses-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease-out)}
.uses-thumb img.is-on{opacity:1}
.uses-fig figcaption{margin-top:12px}

/* ---------- C2: the sheet, below 1100 px (a native modal dialog: focus stays inside, Escape closes) ---------- */
.sheet{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:none}
.sheet[open]{display:flex;flex-direction:column;animation:sheet-in .45s var(--ease-out)}
.sheet::backdrop{background:rgb(15 20 22 / .38)}
@keyframes sheet-in{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:none}}
.sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);padding:0 22px;border-bottom:1px solid rgb(var(--ink-rgb) / .14)}
.sheet-head .nav-mark{margin:0}
.sheet-close{height:40px;padding:0 4px;background:none;font:600 14px/1 var(--sans)}
.sheet-body{flex:1;overflow:auto;padding:6px 22px 28px;overscroll-behavior:contain}
.sheet-util{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--line-soft);font:600 15px/1.3 var(--sans)}
.sheet-util span{font:500 13px/1.3 var(--sans);color:var(--muted)}
.sheet-group{margin:28px 0 4px}
.sheet-rooms,.sheet-links{list-style:none;margin:0;padding:0}
.sheet-rooms a,.sheet-links a{display:flex;align-items:baseline;gap:14px;padding:7px 0;font:400 clamp(32px,8.6vw,40px)/1.08 var(--serif);letter-spacing:-.022em}
.sheet-rooms .plate{flex:none;width:30px;color:var(--blue-ink)}
.sheet-links a{font-size:clamp(28px,7.4vw,34px)}
.sheet a[aria-current="page"]{color:var(--blue-ink)}
.sheet-foot{flex:none;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);background:var(--paper)}
.sheet-foot .btn{width:100%;justify-content:space-between}
@media (min-width:761px){
  .sheet{left:auto;width:min(480px,100%);border-left:1px solid var(--line)}
  .sheet[open]{animation-name:sheet-side}
  @keyframes sheet-side{from{opacity:0;transform:translate3d(24px,0,0)}to{opacity:1;transform:none}}
}

/* ---------- room and audience heroes ---------- */
.hero--room h1,.hero--audience h1{font-size:var(--t-display-2);line-height:.93;letter-spacing:-.038em}
.hero--long h1{font-size:clamp(46px,5.1vw,94px)}
.hero--audience.hero--long h1{font-size:clamp(44px,4.6vw,86px)}
.hero--room .hero-copy,.hero--audience .hero-copy{max-width:min(56vw,940px)}
.hero--room .hero-copy{padding-top:calc(var(--nav-h) + 76px)}
.hero--room .lede,.hero--audience .lede{max-width:33em}
.hero--audience .hero-copy{max-width:min(50vw,860px)}
.hero--room .hero-wash,.hero--audience .hero-wash,.hero--reading .hero-wash{background:linear-gradient(90deg,rgb(var(--paper-rgb) / .74) 0%,rgb(var(--paper-rgb) / .46) 36%,rgb(var(--paper-rgb) / 0) 58%)}
.nav[data-state="top"] .nav-util{padding:9px 13px;margin-right:12px;background:rgb(var(--paper-rgb) / .72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nav[data-state="top"] .nav-util::after{left:13px;right:13px;bottom:5px}

/* ---------- C3: the room bar and the next room ---------- */
.room-bar{position:absolute;z-index:4;top:calc(var(--nav-h) + 14px);left:var(--gutter);display:flex;align-items:center;gap:22px;padding:0}
.room-bar .plate{color:var(--ink-soft)}
.room-bar-step{display:flex;gap:14px}
.room-bar-step a{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid rgb(var(--ink-rgb) / .18);border-radius:14px;background:rgb(var(--paper-rgb) / .55)}
.room-bar-step a{transition:color .3s}
.room-bar-step a:hover{color:var(--blue-ink)}
.next-room{background:var(--dark);padding:0 var(--gutter) clamp(80px,8vw,128px)}
.next-room a{display:grid;grid-template-columns:150px minmax(0,1fr) 40px;grid-template-areas:"k n a" ". s a";align-items:center;gap:10px 28px;max-width:1760px;margin:0 auto;padding:34px 0;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);color:var(--paper-light)}
.next-room .plate{grid-area:k;color:var(--blue-lens)}
.next-room b{grid-area:n;font:400 clamp(40px,4.4vw,72px)/1 var(--serif);letter-spacing:-.03em;transition:color .3s}
.next-room small{grid-area:s;font-size:16px;color:var(--dark-muted)}
.next-room svg{grid-area:a;width:30px;height:30px;transition:transform .45s var(--ease-out)}
.next-room a:hover b{color:var(--blue-lens)}
.next-room a:hover svg{transform:translateX(6px)}

/* ---------- what you're up against ---------- */
.against{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);padding:var(--space-xl) var(--gutter) 0;max-width:1920px;margin:0 auto}
.against-head .h2{margin-top:26px}
.against-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);align-self:end}
.against-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:30px 0;border-bottom:1px solid var(--line)}
.against-list .plate{padding-top:12px}
.against-list h3{font:400 clamp(28px,2.4vw,38px)/1.05 var(--serif);letter-spacing:-.02em}
.against-list p{margin-top:12px;font-size:17px;line-height:1.62;color:var(--muted);max-width:36em}

/* ---------- C4: beneath the process. Charcoal as described; the lens shows it as recorded, in blue glyphs ---------- */
.bp{padding:var(--space-xl) var(--gutter) 0;max-width:1920px;margin:0 auto}
.bp-head{max-width:840px}
.bp-head .h2{margin-top:26px}
.bp-head .body-l{margin-top:28px}
.bp-scroll{position:relative;margin-top:clamp(40px,5vw,72px)}
.js .bp-scroll{height:calc(100svh + 560px)}
.bp-plate{--ly:50%;position:relative;margin:0;padding:24px clamp(20px,2.4vw,40px) 20px;background:var(--paper-light);border:1px solid var(--line-soft);box-shadow:0 1px 0 rgb(var(--ink-rgb) / .03),0 30px 60px -44px rgb(var(--ink-rgb) / .35)}
.js .bp-plate{position:sticky;top:max(calc(var(--nav-h) + 16px),calc(50svh - 250px))}
.bp-axis,.bp-row{display:grid;grid-template-columns:minmax(190px,24%) minmax(0,1fr);column-gap:clamp(18px,2.6vw,44px)}
.bp-axis{padding-bottom:12px;border-bottom:1px solid var(--line)}
.bp-ticks{position:relative;height:16px}
.bp-ticks span{position:absolute;top:0;left:calc(var(--x) * 100%);transform:translateX(-50%);white-space:nowrap}
.bp-ticks .is-start{transform:none}
.bp-ticks .is-end{transform:translateX(-100%)}
.bp-rows{list-style:none;margin:0;padding:0;position:relative}
.bp-row{align-items:center;border-bottom:1px solid var(--line-soft)}
.bp-row:last-child{border-bottom:0}
.bp-name{display:flex;gap:12px;align-items:baseline;font:400 25px/1.1 var(--serif);letter-spacing:-.012em;padding:16px 0}
.bp-name .plate{color:var(--quiet)}
.bp-track{position:relative;height:108px}
.bp-presc{position:absolute;left:calc(var(--p) * 100%);top:calc(var(--ly) - 26px);height:18px;border-left:1px dashed rgb(var(--ink-rgb) / .45)}
.bp-d,.bp-o{position:absolute;inset:0}
.bp-line{position:absolute;left:0;top:var(--ly);width:calc(var(--r) * 100%);height:1px;background:var(--ink)}
.bp-node{position:absolute;top:var(--ly);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%}
.bp-d .bp-node{left:calc(var(--r) * 100%);border:1px solid var(--ink);background:var(--paper-light)}
.bp-val{position:absolute;top:calc(var(--ly) + 14px);left:calc(var(--r) * 100%);transform:translateX(-6px);font:500 12px/1.4 var(--mono);letter-spacing:.03em;color:var(--ink-soft);white-space:nowrap}
.bp-val--left{transform:translateX(calc(6px - 100%));text-align:right}
.bp-o{background:linear-gradient(rgb(var(--blue-lens-rgb) / .3),rgb(var(--blue-lens-rgb) / .3)),var(--paper-light);clip-path:inset(0 100% 0 0)}
html:not(.js) .bp-o{display:none}
.js .bp-o{clip-path:inset(-1px calc(100% - var(--lx2,0px)) -1px var(--lx1,0px))}
.bp-o .bp-val{top:calc(var(--ly) - 34px);left:calc(var(--o) * 100%);color:var(--blue-deep)}
.bp-o .bp-node{left:calc(var(--o) * 100%);background:var(--blue);box-shadow:0 0 0 4px rgb(var(--blue-rgb) / .2)}
.bp-run{position:absolute;left:0;top:var(--ly);width:calc(var(--o) * 100%);height:18px;margin-top:-9px;display:flex;justify-content:flex-end;overflow:hidden;font:500 13px/18px var(--mono);color:var(--blue-deep);white-space:pre;opacity:calc(.45 + .55 * var(--share,1))}
.bp-run>span{flex:none}
.bp-dust{position:absolute;left:0;right:0;top:var(--ly);height:18px;margin-top:-9px;overflow:hidden;font:500 13px/18px var(--mono);color:var(--blue-ink);opacity:.45;white-space:pre}
.bp-name-in{display:none}
.bp-lens{opacity:0;transition:opacity .8s var(--ease-out)}
.bp-plate.is-live .bp-lens{opacity:1}
.bp-cap{display:flex;justify-content:space-between;gap:20px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft)}
.bp-hint b{font-weight:500;color:var(--blue-ink)}
.bp-hint .bp-ill{color:var(--ink-soft)}
.bp-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.4vw,40px);margin-top:clamp(40px,4.4vw,64px)}
.bp-note{border-top:1px solid var(--line);padding-top:16px;transition:opacity .6s var(--ease-out)}
.js .bp-note:not(.is-lit){opacity:.4}
.bp-note-name{display:flex;gap:10px;align-items:baseline;font:400 23px/1.15 var(--serif);letter-spacing:-.01em}
.bp-note-name .plate{color:var(--quiet)}
.bp-note dl{display:grid;gap:9px;margin:14px 0 0}
.bp-note dl div{display:grid;grid-template-columns:98px minmax(0,1fr);gap:12px;align-items:baseline}
.bp-note dd{margin:0;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.bp-note .is-obs dt{color:var(--blue-ink)}
.bp-note .is-obs dd{color:var(--blue-deep);font-weight:600}
.bp-foot{margin-top:30px}
@media (max-width:760px){
  .js .bp-scroll{height:calc(100svh + 420px)}
  .bp-plate{--ly:62%;padding:18px 16px 14px}
  .js .bp-plate{top:calc(var(--nav-h) + 10px)}
  .bp-axis,.bp-row{grid-template-columns:minmax(0,1fr)}
  .bp-axis-lead{margin-bottom:8px}
  .bp-name{display:none}
  .bp-name-in{display:block;position:absolute;left:0;right:0;top:14px;font:400 20px/1.1 var(--serif);letter-spacing:-.01em}
  .bp-o .bp-name-in{color:var(--blue-deep)}
  .bp-track{height:128px}
  .bp-val{white-space:normal;width:max-content;max-width:min(220px,62vw)}
  .bp-d .bp-val:not(.bp-val--left){max-width:calc((1 - var(--r)) * 100% + 2px)}
  .bp-o .bp-val:not(.bp-val--left){max-width:calc((1 - var(--o)) * 100% + 2px)}
  .bp-d .bp-val--left{max-width:calc(var(--r) * 100%)}
  .bp-o .bp-val--left{max-width:calc(var(--o) * 100%)}
  .bp-val{display:none}
  .bp-cap{flex-direction:column;gap:6px}
}

/* ---------- C5 additions: the thread on room pages ---------- */
.practice--room{padding-top:var(--space-xl)}
.stop-ruled{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:15px;line-height:1.55;color:var(--ink-soft)}
.stop-ruled .plate{display:block;margin-bottom:6px;color:var(--blue-ink)}
.thread-end--link{display:flex;flex-direction:column;align-items:center;gap:18px}

/* ---------- C8: who Surface talks to, what it reads ---------- */
.reads{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,5vw,96px);padding:var(--space-xl) var(--gutter) 0;max-width:1920px;margin:0 auto}
.reads-head .h2{margin-top:26px}
.reads-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-self:end}
.reads-cols ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.reads-cols li{padding:13px 0;border-bottom:1px solid var(--line-soft);font:400 22px/1.2 var(--serif);letter-spacing:-.01em}
.reads-note{grid-column:2;max-width:46em;margin-top:6px}

/* ---------- C10: a finding with its evidence; the brief ---------- */
.brief{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start;padding:var(--space-xl) var(--gutter);max-width:1920px;margin:0 auto}
.brief .h2{margin-top:26px}
.brief .body-l{margin-top:28px}
.facts{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:13px;max-width:34em}
.facts li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.facts li::before{content:'';position:absolute;left:1px;top:6px;width:12px;height:7px;border-left:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);transform:rotate(-45deg)}
.fcard{background:var(--paper-light);border:1px solid var(--line-soft);padding:clamp(24px,2.6vw,40px);box-shadow:0 1px 0 rgb(var(--ink-rgb) / .03),0 30px 60px -44px rgb(var(--ink-rgb) / .35)}
.fcard-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.fcard-title{font:400 clamp(30px,2.6vw,42px)/1.07 var(--serif);letter-spacing:-.02em;margin-top:20px}
.ev3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:28px 0 0;border-top:1px solid var(--line)}
.ev3 div{padding:16px 18px 0 0}
.ev3 div+div{padding-left:18px;border-left:1px solid var(--line-soft)}
.ev3 dd{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.ev3 .is-obs dt{color:var(--blue-ink)}
.ev3 .is-obs dd{color:var(--blue-deep)}
.fcard-ruled{margin-top:26px;padding:16px 18px;background:var(--paper);font-size:15px;line-height:1.55;color:var(--ink-soft)}
.fcard-ruled .plate{display:block;margin-bottom:6px;color:var(--blue-ink)}
.fcard-link{margin-top:26px}

/* ---------- C9 on inner pages ---------- */
.questions--page{padding-bottom:clamp(72px,8vw,120px)}
.questions-aside{margin-top:26px;max-width:24em;font-size:16px;line-height:1.6;color:var(--dark-muted)}
.question-list details p a,.questions-aside a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.question-list details p a:hover,.questions-aside a:hover{color:var(--blue-lens)}

/* ---------- C12: the offer ---------- */
.offer{padding:clamp(80px,8vw,136px) var(--gutter);background:var(--paper)}
.offer-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,5vw,96px);align-items:end;max-width:1760px;margin:0 auto}
.offer-line{margin-top:26px;font:400 clamp(46px,5vw,92px)/.95 var(--serif);letter-spacing:-.036em}
.offer-body{font-size:17px;line-height:1.62;color:var(--ink-soft);max-width:34em}
.offer-b .btn{margin-top:28px}
.offer-firms{margin-top:22px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.offer-firms a{color:var(--ink);font-weight:600;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.offer-firms a:hover{color:var(--blue-ink)}

/* ---------- C14: the phone bar ---------- */
.pbar{display:none}
@media (max-width:760px){
  .pbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;display:flex;align-items:center;justify-content:space-between;gap:12px;height:54px;padding:0 6px 0 16px;background:rgb(var(--paper-rgb) / .94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgb(var(--ink-rgb) / .14);box-shadow:0 14px 30px -18px rgb(var(--ink-rgb) / .45);transform:translate3d(0,150%,0);transition:transform .5s var(--ease-out)}
  .pbar.is-on{transform:none}
  .pbar-name{min-width:0;font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pbar-cta{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 15px;background:var(--ink);color:var(--paper-light);font:600 13.5px/1 var(--sans);white-space:nowrap}
}

/* ---------- C16: the footer on inner pages, and the company line ---------- */
.footer-scroll--short{height:200svh}
.footer-company a{transition:color .3s}
.footer-company a:hover{color:var(--blue-ink)}
@media (max-width:1240px){.footer-meta{flex-wrap:wrap;row-gap:8px}}
@media (max-width:760px){.footer-scroll--short{height:170svh}.footer-company{flex-basis:100%}}

/* ---------- responsive for the room sections ---------- */
@media (max-width:1100px) and (min-width:761px){
  .hero--room .hero-copy,.hero--audience .hero-copy{max-width:64vw}
}
@media (max-width:1100px){
  .against,.reads,.brief{grid-template-columns:minmax(0,1fr)}
  .reads-note{grid-column:1}
  .offer-inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .room-bar{left:22px;right:22px;justify-content:space-between}
  .room-bar .plate{white-space:nowrap}
  .room-bar-name{display:none}
  .room-bar-step a[rel="prev"]{display:none}
  .hero--room .hero-copy,.hero--audience .hero-copy,.hero--reading .hero-copy,.page-hub .hero-copy{max-width:none}
  .hero--room .hero-copy{padding-top:calc(var(--nav-h) + 64px)}
  .hero--room h1,.hero--audience h1{font-size:clamp(46px,12.4vw,68px)}
  .hero--long h1{font-size:clamp(40px,10.6vw,58px)}
  .against-list li{grid-template-columns:40px minmax(0,1fr)}
  .reads-cols{grid-template-columns:minmax(0,1fr)}
  .next-room a{grid-template-columns:minmax(0,1fr) 30px;grid-template-areas:"k a" "n a" "s a"}
  .ev3{grid-template-columns:minmax(0,1fr)}
  .ev3 div+div{padding-left:0;border-left:0;border-top:1px solid var(--line-soft);margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .js .bp-scroll{height:auto}
  .js .bp-plate{position:relative;top:auto}
  .sheet[open],.uses-panel{animation:none}
  .pbar{transition:none}
}

/* ---------- the hub after phase 6: the D2 headline, rooms in the tabs, the rooms list (C13) ---------- */
.hero h1.hero-h1--hub{font-size:clamp(54px,5.25vw,104px);line-height:.94}
.page-hub .hero-copy{max-width:min(62vw,1000px)}
.case-panel[hidden]{display:none}
html:not(.js) .case-switch{display:none}
html:not(.js) .case-panel+.case-panel{margin-top:clamp(56px,6vw,96px)}
.rooms{padding:clamp(40px,5vw,80px) var(--gutter) clamp(140px,13vw,220px);max-width:1920px;margin:0 auto}
.rooms-head .h2{margin-top:26px}
.rooms--short{padding-top:var(--space-l)}
.rooms--short .rooms-list{margin-top:20px}
.rooms-list{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;border-top:1px solid var(--line)}
.rooms-list a{display:grid;grid-template-columns:70px minmax(0,4fr) minmax(0,5fr) 230px 32px;align-items:baseline;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);transition:color .3s}
.rooms-list .plate:first-child{color:var(--blue-ink)}
.rooms-list b{font:400 clamp(36px,3.6vw,60px)/1 var(--serif);letter-spacing:-.03em;transition:color .3s}
.rooms-line{font-size:17px;line-height:1.5;color:var(--muted)}
.rooms-fig{text-align:right;white-space:nowrap}
.rooms-list svg{width:24px;height:24px;align-self:center;transition:transform .45s var(--ease-out)}
.rooms-list a:hover b{color:var(--blue-ink)}
.rooms-list a:hover svg{transform:translateX(6px);color:var(--blue-ink)}
.rooms-doors{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;margin-top:30px;font:600 15px/1.4 var(--sans)}
.rooms-doors a{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px}
.rooms-doors a:hover{color:var(--blue-ink)}
@media (max-width:1100px){
  .rooms-list a{grid-template-columns:52px minmax(0,1fr) 28px;grid-template-areas:"n b a" ". l a"}
  .rooms-list .plate:first-child{grid-area:n}.rooms-list b{grid-area:b}.rooms-line{grid-area:l}.rooms-list svg{grid-area:a}
  .rooms-fig{display:none}
}
@media (max-width:760px){
  .br-wide{display:none}
  .page-hub .hero-copy{max-width:none}
  .hero h1.hero-h1--hub{font-size:clamp(46px,12.6vw,70px)}
}

/* ---------- T3 audience pages: owners and firms ---------- */
.bring,.get,.runs,.together,.one-finding{padding:var(--space-xl) var(--gutter) 0;max-width:1920px;margin:0 auto}
.bring-head{max-width:820px}
.bring-head .h2,.get-copy .h2,.runs-head .h2,.together-head .h2,.one-finding-copy .h2{margin-top:26px}
.bring-list{list-style:none;margin:clamp(40px,4.4vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 clamp(20px,3vw,48px)}
.bring-list li{border-top:1px solid var(--line);padding:24px 0 30px}
.bring-list blockquote,.bring-q{font:400 clamp(28px,2.4vw,40px)/1.12 var(--serif);letter-spacing:-.02em}
.bring-note{max-width:44em;margin-top:8px}
.get{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:end}
.get-copy .body-l{margin-top:28px}
.get-list{margin:0;border-top:1px solid var(--line)}
.get-list div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.get-list dd{margin:0;font:400 clamp(22px,1.8vw,28px)/1.2 var(--serif);letter-spacing:-.012em}
.runs-list{list-style:none;margin:clamp(40px,4.4vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,56px)}
.runs-list li{border-top:1px solid var(--ink);padding-top:22px}
.runs-list .plate{color:var(--blue-ink)}
.runs-list h3{margin-top:18px;font:400 clamp(30px,2.6vw,42px)/1.02 var(--serif);letter-spacing:-.022em}
.runs-list p{margin-top:14px;font-size:16px;line-height:1.6;color:var(--muted);max-width:30em}
.together-head{max-width:840px}
.together-head .body-l{margin-top:24px}
.together-table{margin-top:clamp(36px,4vw,56px);overflow-x:auto}
.together-table:focus-visible{outline-offset:6px}
.together-table table{width:100%;min-width:560px;border-collapse:collapse}
.together-table th,.together-table td{text-align:left;vertical-align:top;padding:18px 20px 18px 0;border-bottom:1px solid var(--line-soft)}
.together-table thead th{font:400 clamp(26px,2.2vw,34px)/1.05 var(--serif);letter-spacing:-.018em;border-bottom:1px solid var(--ink);padding-bottom:16px}
.together-table tbody th{font:500 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);width:22%;padding-top:22px}
.together-table td{font-size:16.5px;line-height:1.5;color:var(--ink-soft)}
.segments{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,56px);margin-top:clamp(48px,5vw,80px)}
.segment{background:var(--paper-light);border:1px solid var(--line-soft);padding:clamp(24px,2.4vw,36px)}
.segment .plate{color:var(--blue-ink)}
.segment h3{margin-top:16px;font:400 clamp(26px,2.2vw,34px)/1.08 var(--serif);letter-spacing:-.018em}
.segment p:last-child{margin-top:14px;font-size:16px;line-height:1.6;color:var(--muted)}
.one-finding{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
.one-finding-copy .body-l{margin-top:28px}
.closing{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:end;padding:var(--space-xl) var(--gutter);max-width:1920px;margin:0 auto}
.team-line{margin-top:24px;font:400 clamp(36px,3.6vw,60px)/1.02 var(--serif);letter-spacing:-.03em;max-width:15em}
.team .body-l{margin-top:22px}
.team .link{margin-top:26px}
.maker{border-top:1px solid var(--line);padding-top:18px}
.maker-text{margin-top:16px;font-size:15.5px;line-height:1.7;color:var(--ink-soft);max-width:34em}
@media (max-width:1100px){
  .get,.one-finding,.closing{grid-template-columns:minmax(0,1fr)}
  .runs-list{grid-template-columns:minmax(0,1fr)}
  .segments{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){.get-list div{grid-template-columns:minmax(0,1fr);gap:6px}}

/* ---------- T5 reading: being interviewed ---------- */
.hero--reading{height:76svh;min-height:560px;max-height:820px}
.hero--reading .hero-copy{max-width:min(52vw,820px)}
.hero--reading h1{font-size:clamp(46px,5vw,92px);line-height:.95;letter-spacing:-.035em}
.reading{display:grid;grid-template-columns:minmax(220px,3fr) minmax(0,7fr);gap:clamp(32px,6vw,120px);padding:clamp(48px,5vw,88px) var(--gutter) var(--space-xl);max-width:1500px;margin:0 auto}
.reading-toc{position:sticky;top:96px;align-self:start}
.reading-toc ol{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.reading-toc a{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line-soft);font:600 14px/1.35 var(--sans);color:var(--ink-soft);transition:color .25s}
.reading-toc a:hover{color:var(--blue-ink)}
.reading-toc a .plate{flex:none;width:22px}
.reading-date{margin-top:18px}
.reading-body{max-width:68ch}
.reading-body p.reading-lede{margin:0;font:400 clamp(26px,2.2vw,34px)/1.25 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.reading-body section{margin-top:clamp(44px,4vw,64px);scroll-margin-top:96px}
.reading-body h2{display:flex;gap:14px;align-items:baseline;font:400 clamp(30px,2.6vw,42px)/1.05 var(--serif);letter-spacing:-.02em;padding-top:18px;border-top:1px solid var(--line)}
.reading-body h2 .plate{color:var(--blue-ink)}
.reading-body p{margin-top:16px;font-size:17.5px;line-height:1.7;color:var(--ink-soft)}
.reading-body a{text-decoration:underline;text-underline-offset:3px}
.reading-foot{margin-top:56px}
@media (max-width:900px){
  .reading{grid-template-columns:minmax(0,1fr)}
  .reading-toc{position:static}
}
@media (max-width:760px){
  .hero--reading{height:auto;min-height:100svh;max-height:none}
  .hero--reading .hero-copy{max-width:none}
  .hero--reading h1{font-size:clamp(40px,10.8vw,58px)}
}

/* ---------- T4 examples: the index and the entries ---------- */
.ex-head{padding:calc(var(--nav-h) + clamp(56px,7vw,120px)) var(--gutter) 0;max-width:1920px;margin:0 auto}
.ex-title{margin-top:26px;max-width:15em;font:400 var(--t-display-2)/.93 var(--serif);letter-spacing:-.038em}
.ex-label{margin-top:32px;max-width:44em;font-size:17px;line-height:1.65;color:var(--ink-soft);padding-left:18px;border-left:2px solid var(--blue)}
.cats{padding:var(--space-xl) var(--gutter) clamp(24px,3vw,48px);max-width:1920px;margin:0 auto}
.cats-list{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.cat a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) 32px;align-items:center;gap:clamp(20px,3vw,56px);padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--line)}
.cat-art{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper-deep)}
.cat-art img,.cat-art canvas{position:absolute;inset:0;width:100%;height:100%}
.cat-art img{object-fit:cover;object-position:80% 40%}
.cat-art canvas{opacity:0;transition:opacity .6s linear}
.cat-art canvas.is-ready{opacity:1}
.cat-text{display:block}
.cat-text b{display:block;margin-top:14px;font:400 clamp(28px,2.6vw,44px)/1.06 var(--serif);letter-spacing:-.022em;transition:color .3s}
.cat-name{display:block;margin-top:12px;font-size:15px;color:var(--muted)}
.cat svg{width:26px;height:26px;transition:transform .45s var(--ease-out)}
.cat a:hover b{color:var(--blue-ink)}
.cat a:hover svg{transform:translateX(6px);color:var(--blue-ink)}
.entry-head{position:relative;height:min(78svh,760px);min-height:560px;overflow:clip;isolation:isolate;background:var(--paper)}
.entry-art{position:absolute;inset:0;z-index:0}
.entry-art>img,.entry-art>canvas,.entry-art picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 40%}
.entry-art>canvas{opacity:0;transition:opacity .5s linear}
.entry-art>canvas.is-ready{opacity:1}
.entry-head::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgb(var(--paper-rgb) / .78) 0%,rgb(var(--paper-rgb) / .42) 42%,rgb(var(--paper-rgb) / 0) 64%),linear-gradient(to bottom,rgb(var(--paper-rgb) / 0) 70%,var(--paper))}
.entry-copy{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 40px) var(--gutter) clamp(48px,6vw,96px);max-width:min(62vw,1040px)}
.entry-cat{color:var(--blue-ink)}
.entry-title{margin-top:22px;font:400 var(--t-h2)/.98 var(--serif);letter-spacing:-.034em}
.entry-label{margin-top:24px;max-width:40em;font:400 13px/1.6 var(--mono);color:var(--ink-soft)}
.entry-fig{position:absolute;z-index:3;right:var(--gutter);bottom:30px}
.entry{display:grid;grid-template-columns:minmax(240px,3fr) minmax(0,7fr);gap:clamp(32px,6vw,120px);padding:clamp(40px,4vw,72px) var(--gutter) var(--space-xl);max-width:1500px;margin:0 auto}
.entry-facts{position:sticky;top:96px;align-self:start;padding:22px;background:var(--paper-light);border:1px solid var(--line-soft)}
.entry-facts dl{margin:12px 0 0}
.entry-facts dl div{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.entry-facts dl div:last-child{border-bottom:0}
.entry-facts dd{margin:6px 0 0;font:400 13px/1.55 var(--mono);color:var(--ink-soft)}
.entry-body{position:relative;max-width:68ch;padding-left:34px}
.entry-thread{position:absolute;left:0;top:6px;bottom:6px;width:1px;background:repeating-linear-gradient(to bottom,rgb(var(--ink-rgb) / .2) 0 2px,transparent 2px 8px)}
.entry-thread::after{content:'';position:absolute;left:-.5px;top:0;width:2px;height:calc(var(--read,0) * 100%);background:var(--blue);border-radius:1px}
.entry-body section+section{margin-top:clamp(40px,4vw,60px)}
.entry-body h2{display:flex;gap:14px;align-items:baseline;font:400 clamp(28px,2.4vw,38px)/1.06 var(--serif);letter-spacing:-.02em;padding-top:16px;border-top:1px solid var(--line)}
.entry-body h2 .plate{color:var(--blue-ink)}
.entry-body p{margin-top:14px;font-size:17.5px;line-height:1.7;color:var(--ink-soft)}
.entry-body p.entry-q{font:400 clamp(26px,2.2vw,34px)/1.2 var(--serif);color:var(--ink);letter-spacing:-.012em}
.entry-quote{margin-top:18px;font:400 clamp(24px,2vw,30px)/1.2 var(--serif);letter-spacing:-.012em}
.entry-quote cite{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:10px;font:600 14px/1.3 var(--sans);font-style:normal;color:var(--muted)}
.entry-list{margin:14px 0 0;padding:0 0 0 20px;display:grid;gap:10px}
.entry-list li{font-size:17px;line-height:1.6;color:var(--ink-soft)}
.entry-list li::marker{color:var(--blue)}
.entry-ruled{margin:14px 0 0;display:grid;gap:12px}
.entry-ruled div{padding:16px 18px;background:var(--paper-light);border:1px solid var(--line-soft)}
.entry-ruled dt{font:400 22px/1.2 var(--serif)}
.entry-ruled dd{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.entry-owner{display:flex;gap:14px;align-items:baseline}
.entry-owner .plate{color:var(--blue-ink)}
.entry-body p.entry-label--foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font:400 13px/1.6 var(--mono)}
.entry-more{padding:0 var(--gutter) clamp(24px,3vw,48px);max-width:1500px;margin:0 auto}
.entry-more ul{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.entry-more a{display:grid;grid-template-columns:110px minmax(0,1fr) 28px;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.entry-more .plate{color:var(--blue-ink)}
.entry-more b{font:400 clamp(22px,1.9vw,30px)/1.15 var(--serif);letter-spacing:-.014em;transition:color .3s}
.entry-more svg{width:22px;height:22px;align-self:center;transition:transform .45s var(--ease-out)}
.entry-more a:hover b{color:var(--blue-ink)}
.entry-more a:hover svg{transform:translateX(6px)}
@media (max-width:1000px){
  .cat a{grid-template-columns:minmax(0,1fr) 28px}
  .cat-art{grid-column:1 / -1}
  .entry{grid-template-columns:minmax(0,1fr)}
  .entry-facts{position:static}
}
@media (max-width:760px){
  .entry-head{height:auto;min-height:88svh}
  .entry-head::after{background:linear-gradient(to bottom,rgb(var(--paper-rgb) / .2),rgb(var(--paper-rgb) / .6) 40%,var(--paper) 88%)}
  .entry-copy{max-width:none;padding:calc(var(--nav-h) + 30vh) 22px 40px}
  .entry-fig{display:none}
  .entry-body{padding-left:22px}
  .entry-more a{grid-template-columns:minmax(0,1fr) 24px}
  .entry-more .plate{grid-column:1 / -1}
}