/* DIRECTORY 13 / Scroll chapters. Original visuals, no scroll-jacking.
   Every project is a full-viewport composition with an extended sticky track.
   Scroll progression is optional decoration; direct links always work. */
:root{--folio-ease:cubic-bezier(.65,0,.35,1);--folio-reveal:cubic-bezier(.16,1,.3,1)}
html:has(body.is-home:not(.chapter-open)){scroll-snap-type:y proximity;scroll-padding-top:0}
body.is-home{overflow-x:clip;overflow-y:auto; overscroll-behavior-y:auto}
body.is-home.chapter-open{overflow:hidden}
body.is-home main{min-height:100svh}
.directory-stage{scroll-snap-align:start;scroll-snap-stop:normal}
.directory-scroll-cue{z-index:7;display:flex;align-items:center;gap:14px;color:#b9c6b7;text-decoration:none;font:500 10px/1.3 var(--world-type,monospace);letter-spacing:.06em;position:relative;width:max-content;max-width:100%;margin:0 0 12px auto;transition:color .2s}
.directory-scroll-cue span{font-size:18px;display:inline-block;animation:folio-nudge 2.8s ease-in-out infinite;color:var(--world-acid)}
.directory-scroll-cue:hover,.directory-scroll-cue:focus-visible{color:#fff;outline-offset:5px}
@keyframes folio-nudge{0%,72%,100%{transform:translateY(0)}84%{transform:translateY(5px)}}
.folio-sequence{position:relative;background:#111711;isolation:isolate}
.folio-track{--accent:#bcef98;--scene-bg:#101d1a;--scene-fg:#ecf3e5;--entry:1;--pressure:0;--release:0;--progress:0;position:relative;height:154svh;min-height:960px;background:var(--scene-bg);color:var(--scene-fg);scroll-snap-align:start;scroll-snap-stop:normal;isolation:isolate}
.folio-track::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:color-mix(in srgb,var(--accent) 50%,transparent);z-index:2;pointer-events:none}
.folio-track .folio-screen{height:100svh;min-height:650px;position:sticky;top:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:102px clamp(26px,6vw,100px) 34px;isolation:isolate;box-sizing:border-box}
.folio-screen::before{content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;opacity:.36;background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse 65% 60% at 72% 45%,black,transparent)}
.folio-screen::after{content:"";pointer-events:none;position:absolute;z-index:9;inset:auto 0 0;height:3px;background:var(--accent);opacity:.85;transform:scaleX(var(--progress));transform-origin:left;will-change:transform}
.folio-rag{--scene-bg:#10211d;--accent:#b6ffa0;--scene-fg:#e5f8e6}
.folio-pipeline{--scene-bg:#17232a;--accent:#9cdeec;--scene-fg:#eef5f5}
.folio-thesis{--scene-bg:#191a32;--accent:#b9b7ff;--scene-fg:#f0efff}
.folio-piano{--scene-bg:#301b26;--accent:#ffc0aa;--scene-fg:#ffece4}
.folio-topline,.folio-floor,.viz-caption,.viz-bottom,.folio-overline,.folio-link,.folio-end-kicker,.folio-end-footer,.folio-end-links{font-family:var(--world-type,'Courier New',monospace)!important}
.folio-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:19px;border-bottom:1px solid color-mix(in srgb,var(--accent) 42%,transparent);font-size:10px;line-height:1.3;letter-spacing:.1em;font-weight:500;color:color-mix(in srgb,var(--scene-fg) 78%,transparent)}
.folio-movement{color:var(--accent)}
.folio-layout{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;gap:clamp(32px,5vw,90px);padding:clamp(25px,4.8vh,65px) 0 clamp(24px,3vh,45px)}
.folio-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;transform:translate3d(0,calc((1 - var(--entry)) * 65px - var(--pressure) * 8px),0);opacity:calc(.25 + var(--entry)*.75);will-change:transform,opacity}
.folio-overline{display:flex;align-items:center;gap:18px;letter-spacing:.045em;font-size:11px;color:var(--accent);margin-bottom:clamp(24px,5vh,60px)}
.folio-overline i{font-style:normal;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);width:35px;height:35px;display:grid;place-items:center;font-size:15px}
.folio-copy h2{font:500 clamp(60px,6.4vw,120px)/.98 var(--world-type,monospace);letter-spacing:-.09em;word-spacing:-.16em;margin:0;text-transform:lowercase;text-wrap:balance}
.folio-copy h2 span{color:var(--accent)}
.folio-copy p{max-width:480px;margin:clamp(25px,4vh,46px) 0 0;color:color-mix(in srgb,var(--scene-fg) 79%,transparent);font:400 clamp(14px,1.12vw,18px)/1.7 var(--world-type,monospace);letter-spacing:-.035em;text-wrap:pretty}
.folio-link{margin-top:clamp(25px,4.6vh,60px);width:min(100%,435px);min-height:57px;display:flex;align-items:center;justify-content:space-between;gap:15px;text-decoration:none;color:var(--scene-fg);padding:0 17px;border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);font:500 12px/1.3 var(--world-type,monospace);letter-spacing:.055em;position:relative;overflow:hidden;transition:color .35s var(--folio-ease),border-color .35s var(--folio-ease)}
.folio-link::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .58s var(--folio-ease);z-index:-1}
.folio-link:hover,.folio-link:focus-visible{color:#15201b;outline:2px solid var(--accent);outline-offset:3px}
.folio-link:hover::before,.folio-link:focus-visible::before{transform:translateY(0)}
.folio-link b{font-size:22px;font-weight:400;line-height:1;transition:transform .5s var(--folio-reveal)}
.folio-link:hover b{transform:translate(3px,-3px)}
.folio-visual{--image-pressure:0;min-width:0;min-height:0;height:100%;position:relative;overflow:hidden;background:color-mix(in srgb,var(--scene-bg) 65%,#000);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);transform:translate3d(0,calc((1 - var(--entry)) * 88px),0) scale(calc(.94 + var(--entry)*.06 + var(--pressure)*.028));transform-origin:center;opacity:calc(.17 + .83 * var(--entry));will-change:transform,opacity;box-shadow:0 30px 70px #00000031}
.folio-visual::before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 15%,color-mix(in srgb,var(--scene-bg) 90%,transparent) 95%);opacity:.52}
.viz-caption,.viz-bottom{position:absolute;z-index:5;left:20px;right:20px;display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.04em;line-height:1.4;color:var(--accent)}
.viz-caption{top:19px}.viz-bottom{bottom:18px}
.viz-led{font-size:9px;color:var(--scene-fg)}
.folio-floor{display:grid;grid-template-columns:85px 1fr 170px;align-items:center;gap:24px;padding-top:15px;border-top:1px solid color-mix(in srgb,var(--accent) 26%,transparent);color:color-mix(in srgb,var(--scene-fg) 72%,transparent);font-size:10px;letter-spacing:.065em}
.folio-floor>span:last-child{text-align:right}
.folio-meter{height:1px;background:color-mix(in srgb,var(--accent) 20%,transparent);position:relative}.folio-meter i{display:block;width:100%;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--progress));box-shadow:0 0 10px var(--accent)}
/* Systems art: trace lines and a validation ring. */
.visual-rag svg,.visual-thesis svg{position:absolute;inset:5% 0;width:100%;height:90%;overflow:visible}
.rag-back path,.rag-docs path,.rag-gates circle,.rag-output path,.rag-trace-line path{fill:none;stroke:#bbf6cb;stroke-width:1.5;opacity:.40}
.rag-back path{opacity:.15}
.rag-docs rect,.rag-output rect{fill:rgba(185,240,193,.045);stroke:#b6ffa0;stroke-width:1.4;opacity:.65}
.rag-gates rect{fill:rgba(182,255,160,.035);stroke:#b6ffa0;stroke-width:1.5;stroke-dasharray:4 7;opacity:.6}
.rag-gates circle{stroke-width:2.8;stroke-dasharray:11 13;opacity:.75;transform-origin:294px 267px;animation:rag-orbit 17s linear infinite}
.rag-gates circle:nth-child(2){animation-direction:reverse;animation-duration:11s}
.rag-packet circle{fill:#b6ffa0;filter:drop-shadow(0 0 8px #b6ffa0)}
.rag-trace-line path{stroke:#b6ffa0;stroke-width:3;stroke-dasharray:12 30;animation:rag-trace 3.5s linear infinite;opacity:.85}
.rag-svg-text{text-anchor:start;font:10px monospace;fill:#b6ffa0;letter-spacing:2px}
@keyframes rag-orbit{to{transform:rotate(360deg)}}
@keyframes rag-trace{to{stroke-dashoffset:-168}}
/* Pipeline art: a legible data surface, not a second prose table. */
.visual-pipeline{background:radial-gradient(ellipse at 55% 58%,#28414b 0%,#101c22 85%)}
.pipe-figure{position:absolute;inset:14% 8% 11%;border:1px solid #88b6c350;background:#16272f;display:flex;flex-direction:column;justify-content:center;padding:clamp(10px,2.2vw,27px);box-shadow:20px 27px 0 #96d6e314}
.pipe-top,.pipe-columns,.pipe-row,.pipe-result,.pipe-shuttle{font-family:var(--world-type,monospace)}
.pipe-top{display:flex;justify-content:space-between;color:var(--accent);border-bottom:1px solid #8fbdc450;padding:0 0 16px;font-size:11px}
.pipe-columns,.pipe-row{display:grid;grid-template-columns:.6fr 1fr 1fr .7fr;align-items:center;gap:8px}
.pipe-columns{padding:17px 0 11px;font:10px/1.2 monospace;color:#85a1a9}
.pipe-row{padding:clamp(8px,1.1vw,13px) 0;border-bottom:1px solid #76959b3a;font:clamp(12px,1.2vw,17px)/1.25 monospace;min-height:36px}
.pipe-row i,.pipe-row b,.pipe-row em,.pipe-row strong{font-weight:400;font-style:normal}.pipe-row strong{text-align:center;color:#b2c3c9}
.pipe-row.pipe-change{background:#9bd7df10;color:#c4f2ff}.pipe-row.pipe-change strong{color:#9cdeec}
.pipe-row.pipe-insert{background:#b1edcf15;color:#d4fff1}.pipe-row.pipe-insert strong{color:#b9ffcc}
.pipe-shuttle{padding:18px 0 11px;display:flex;justify-content:space-between;color:var(--accent);font-size:11px}
.pipe-shuttle b{font-weight:400;font-size:23px;transform:translateX(calc(var(--pressure)*14px))}
.pipe-result{display:flex;justify-content:space-between;gap:10px;border:1px solid #9cdeec88;background:#9cdeec14;padding:13px;color:var(--accent);font:clamp(9px,1vw,13px)/1.4 monospace}
.pipe-result strong{color:#dbf8fb;font-weight:500}
/* Thesis art: two observed regimes and a visible discontinuity marker. */
.visual-thesis{background:radial-gradient(ellipse at 45% 48%,#30315f,#121329 80%)}
.thesis-raw{fill:none;stroke:#eef1ff;stroke-width:2.2;opacity:.7;stroke-linejoin:round;stroke-linecap:round}
.thesis-fit-a,.thesis-fit-b{fill:none;stroke:#b9b7ff;stroke-width:4;opacity:.9;stroke-linecap:round;stroke-dasharray:800;stroke-dashoffset:calc(800 - var(--entry)*800)}
.thesis-fit-b{stroke:#f3b0dc}
.thesis-break{stroke:#f8b3d9;stroke-dasharray:4 10;stroke-width:2;opacity:.8}
.thesis-node{fill:#10132d;stroke:#eec0ff;stroke-width:3}
.thesis-labels{font:12px monospace;fill:#c6c4ff;letter-spacing:1.8px}
/* Piano: the softer luminous bars from the earlier visual treatment, but no modulo jump. */
.visual-piano{background:radial-gradient(ellipse at 60% 50%,#512a41 0%,#25151f 83%)}
.piano-figure{position:absolute;inset:12% 7% 13%;border:1px solid #f8bbaf55;display:grid;grid-template-rows:minmax(0,1fr) 29px;background:repeating-linear-gradient(to bottom,#f9c1b10c 0,#f9c1b10c 1px,transparent 1px,transparent 8.333%);box-shadow:25px 25px 0 #6c343c33}
.piano-staff{position:relative;overflow:hidden;background:linear-gradient(to right,transparent 0 24.9%,#f9bda733 25%,transparent 25.2%,transparent 49.9%,#f9bda733 50%,transparent 50.2%,transparent 74.9%,#f9bda733 75%,transparent 75.2%)}
.piano-note{--r:var(--row);position:absolute;left:calc(var(--start)*1%);width:calc(var(--len)*1%);top:calc((var(--row) + .5)*7.142%);height:7px;background:linear-gradient(90deg,transparent,#f9c7bb 38%,#ffccb3 57%,transparent);box-shadow:0 0 13px #ffd1b35e;opacity:.95;transform:translateX(calc(-1 * var(--pressure) * 8px))}
.piano-playhead{position:absolute;top:0;bottom:0;left:48%;width:1px;background:#ffe1cf;box-shadow:0 0 23px 3px #ffe1cf65;transform:translateX(calc(var(--pressure) * 32px))}
.piano-lower{display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:10px monospace;border-top:1px solid #ffc0aa57;color:#f3d1c5}
/* Ending is a fifth clear stop, not another project to click through. */
.folio-end{background:#e0e6d8;color:#182219;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(95px,14vh,160px) clamp(26px,8vw,145px) 37px}
.folio-end-body{max-width:1100px}.folio-end-kicker{font-size:12px;color:#536157;letter-spacing:.08em}
.folio-end h2{font:500 clamp(60px,8.8vw,150px)/1.06 var(--world-type,monospace);letter-spacing:-.085em;margin:clamp(35px,7vh,75px) 0 clamp(35px,8vh,80px)}
.folio-end h2 em{font-style:normal;color:#9b4f3d}
.folio-end-links{display:flex;flex-wrap:wrap;gap:12px 28px}
.folio-end-links a{padding:14px 0;display:inline-block;color:#1d3024;text-decoration:none;font-size:12px;letter-spacing:.06em;border-bottom:1px solid #718276}
.folio-end-links a:hover,.folio-end-links a:focus-visible{color:#9b4f3d;border-color:#9b4f3d}
.folio-end-footer{border-top:1px solid #8a998b;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#506459;font-size:11px}
.folio-end-footer a{color:inherit;text-decoration:none}
/* Mobile: one scene == one viewport; no hover-only functions or forced scroll gestures. */
@media (max-width:980px){
 .folio-track{height:150svh;min-height:900px}
 .folio-track .folio-screen{padding:89px 28px 27px;min-height:620px}
 .folio-layout{gap:22px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);padding:26px 0}
 .folio-copy h2{font-size:clamp(48px,6.5vw,86px)}
 .folio-copy p{font-size:14px;line-height:1.62}
 .folio-overline{margin-bottom:25px;font-size:10px}
 .viz-caption,.viz-bottom{font-size:9px;left:13px;right:13px}
 .pipe-figure{inset:13% 6% 10%}
}
@media(max-width:700px){
 .directory-scroll-cue{font-size:9px;margin:4px 0 8px auto}
 .folio-track{height:142svh;min-height:800px}
 .folio-track .folio-screen{height:100svh;min-height:0;padding:78px 23px max(22px,env(safe-area-inset-bottom));grid-template-rows:auto minmax(0,1fr) auto}
 .folio-topline{font-size:8.6px;letter-spacing:.02em;gap:6px;padding-bottom:11px}
 .folio-movement{display:none}
 .folio-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.86fr) minmax(185px,1.14fr);gap:12px;padding:14px 0}
 .folio-copy{justify-content:flex-start}
 .folio-overline{gap:10px;font-size:9px;margin:2px 0 13px}
 .folio-overline i{width:27px;height:27px;font-size:12px}
 .folio-copy h2{font-size:clamp(43px,10.8vw,76px);line-height:.96;letter-spacing:-.085em}
 .folio-copy h2 br{display:none}
 .folio-copy h2 span{display:block}
 .folio-copy p{font-size:clamp(11px,2.9vw,13px);line-height:1.45;margin:11px 0 0;max-width:500px}
 .folio-link{width:100%;min-height:40px;margin-top:12px;font-size:10px;padding:0 11px}
 .folio-link b{font-size:17px}
 .folio-floor{grid-template-columns:44px 1fr auto;gap:13px;font-size:9px;padding-top:11px}
 .folio-visual{height:100%;box-shadow:0 12px 40px #00000045}
 .viz-caption,.viz-bottom{font-size:8px;left:11px;right:11px}
 .viz-caption{top:10px}.viz-bottom{bottom:10px}.viz-led{font-size:7px}
 .pipe-figure{inset:13% 6% 12%;padding:11px;box-shadow:9px 9px 0 #96d6e314}
 .pipe-top{font-size:9px;padding-bottom:8px}
 .pipe-columns{padding:7px 0;font-size:8px}
 .pipe-row{padding:5px 0;min-height:19px;font-size:10px}
 .pipe-shuttle{padding:8px 0;font-size:8px}.pipe-shuttle b{font-size:15px}
 .pipe-result{padding:6px;font-size:8px}
 .piano-figure{inset:12% 5% 13%;box-shadow:8px 8px 0 #6c343c33}
 .piano-lower{font-size:8px}
 .folio-end{padding:90px 25px 26px}
 .folio-end h2{font-size:clamp(51px,12vw,83px);line-height:1.05}
 .folio-end-links{display:grid;grid-template-columns:1fr 1fr;gap:15px}.folio-end-links a{font-size:11px}
 .folio-end-footer{font-size:9px}
}
@media(max-width:365px){
 .folio-track .folio-screen{padding-inline:16px}
 .folio-topline{font-size:8px}
 .folio-overline{margin-bottom:10px}
 .folio-copy h2{font-size:clamp(38px,10.9vw,49px)}
 .folio-copy p{font-size:10.5px}
 .folio-layout{grid-template-rows:minmax(0,.95fr) minmax(160px,1.05fr);gap:9px}
 .folio-visual .viz-bottom span:first-child{font-size:7px}
 .piano-lower span:last-child{display:none}
}
/* Restore the previous MIDI art character on the chapter page: no keyboard,
   translucent luminous bars, soft staff lines. The renderer has seamless cycles. */
.room-feature-music{background:radial-gradient(ellipse at 58% 47%,#552e40,#281822 85%)}
.room-feature-music::before{opacity:.5}
/* Responsive data tables become labeled rows rather than compressed columns.
   The data-label attributes are set at build time, preserving table semantics on desktop. */
@media(max-width:700px){
 .is-document .article-prose.prose table{display:block;overflow:visible!important;width:100%;max-width:100%;border-collapse:separate;margin:23px 0 32px;font-size:13px}
 .is-document .article-prose.prose thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
 .is-document .article-prose.prose tbody{display:block;width:100%}
 .is-document .article-prose.prose tr{display:block;width:100%;padding:8px 12px;margin:0 0 12px;border:1px solid #49615f;background:#192a31}
 .is-document .article-prose.prose td{display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);gap:12px;border:0;border-bottom:1px solid #394d4f;min-width:0;max-width:100%;padding:11px 0;overflow-wrap:anywhere;line-height:1.4;color:#d6dfdc}
 .is-document .article-prose.prose td:last-child{border-bottom:0}
 .is-document .article-prose.prose td::before{content:attr(data-label);display:block;color:#9ab4b3;font:500 11px/1.35 var(--world-type,monospace);letter-spacing:-.02em}
}
@media(prefers-reduced-motion:reduce){
 html:has(body.is-home){scroll-snap-type:none}
 .directory-scroll-cue span,.rag-gates circle,.rag-trace-line path{animation:none!important}
 .folio-visual,.folio-copy,.folio-link,.folio-link::before,.folio-link b,.folio-screen::after,.folio-meter i,.piano-note,.piano-playhead{transition:none!important;animation:none!important;transform:none!important;opacity:1!important}
}
html:has(body.is-home.map-open),html:has(body.is-home.chapter-open){scroll-snap-type:none}
/* Short phones: reserve adequate room for the primary link before the visual.
   A case-study CTA is never allowed to slip behind artwork. */
@media(max-width:700px) and (max-height:740px){
 .folio-track .folio-screen{padding-top:71px;padding-bottom:18px}
 .folio-layout{grid-template-rows:minmax(0,1.40fr) minmax(150px,.60fr);gap:9px;padding:9px 0}
 .folio-copy h2{font-size:clamp(34px,10vw,48px);line-height:1.03}
 .folio-copy p{font-size:10.5px;line-height:1.37;margin-top:7px}
 .folio-overline{margin:0 0 7px}
 .folio-link{margin-top:8px;min-height:38px}
 .viz-caption,.viz-bottom{font-size:7px}
 .folio-topline{padding-bottom:7px}
 .folio-floor{padding-top:7px}
}
@media(max-width:700px) and (max-height:740px){
 .folio-layout{grid-template-rows:minmax(0,1.03fr) minmax(175px,.97fr)}
}
/* Scroll pressure accumulates in the middle of each sticky scene, then releases
   as the following chapter takes over. Progress is scrubbed from scroll, not a timer. */
@media(prefers-reduced-motion:no-preference){
 .folio-copy{transform:translate3d(0,calc((1 - var(--entry))*65px - var(--pressure)*24px - var(--release)*16px),0)}
 .folio-visual{transform:translate3d(0,calc((1 - var(--entry))*88px - var(--release)*18px),0) scale(calc(.93 + var(--entry)*.07 + var(--pressure)*.075 - var(--release)*.025));clip-path:inset(calc(var(--release)*4%) calc(var(--release)*2%))}
 .folio-track .folio-screen::before{opacity:calc(.25 + var(--pressure)*.22)}
}

/* VIEWPORT COMPOSITION / No fixed 650px sticky scene inside a 600px browser.
   Scaling headline, gaps and scene padding by the smaller viewport dimension
   preserves the full artwork, CTA and footer without allowing them to overlap. */
@media (min-width:701px) and (max-height:850px){
 .folio-track{height:154svh;min-height:0}
 .folio-track .folio-screen{height:100svh;min-height:0;padding:clamp(60px,10.4svh,88px) clamp(22px,5vw,85px) clamp(12px,2.4svh,23px)}
 .folio-topline{padding-bottom:clamp(7px,1.35svh,12px)}
 .folio-layout{gap:clamp(17px,3vw,48px);padding:clamp(8px,1.8svh,20px) 0}
 .folio-overline{margin-bottom:clamp(7px,1.6svh,15px)}
 .folio-overline i{width:clamp(26px,4.5svh,34px);height:clamp(26px,4.5svh,34px);font-size:clamp(11px,1.8svh,14px)}
 .folio-copy h2{font-size:clamp(38px,min(5.7vw,9.55svh),84px);line-height:.98}
 .folio-copy p{font-size:clamp(11px,min(1.07vw,2.25svh),15px);line-height:1.49;margin-top:clamp(8px,1.7svh,19px)}
 .folio-link{min-height:clamp(36px,5.9svh,50px);margin-top:clamp(10px,2svh,20px);font-size:clamp(9px,1.25svh,11px)}
 .folio-floor{padding-top:clamp(6px,1.3svh,12px);font-size:9px}
 .folio-end{min-height:100svh;padding:clamp(68px,13svh,105px) clamp(22px,6vw,100px) 23px}
 .folio-end h2{font-size:clamp(44px,min(8.5vw,13svh),108px);margin:clamp(17px,3svh,30px) 0}
}
@media (min-width:701px) and (max-height:520px){
 .folio-track .folio-screen{padding-top:55px;padding-bottom:9px}
 .folio-layout{padding:5px 0}
 .folio-overline{margin-bottom:5px;font-size:9px}
 .folio-copy h2{font-size:clamp(30px,min(4.4vw,8svh),45px)}
 .folio-copy p{line-height:1.36;margin-top:7px;font-size:11px}
 .folio-link{min-height:32px;margin-top:8px}
 .folio-topline{padding-bottom:6px}
 .folio-floor{padding-top:5px}
}
/* Tiny portrait viewports cannot contain a legible title, CTA and technical
   illustration in one screen. Make the scene a deliberate scrolling canvas
   instead of stacking the CTA on top of the illustration. */
@media (max-width:700px) and (max-height:540px){
 html:has(body.is-home){scroll-snap-type:none}
 .folio-track{height:auto;min-height:0;scroll-snap-align:none}
 .folio-track .folio-screen{position:relative;top:auto;height:auto;min-height:100svh;overflow:visible;padding-bottom:16px}
 .folio-layout{height:auto;display:flex;flex-direction:column;padding:12px 0 17px;gap:16px}
 .folio-copy{flex:none;min-height:0;transform:none!important;opacity:1}
 .folio-visual{flex:none;height:clamp(180px,42svh,260px);transform:none!important;opacity:1}
 .folio-floor{margin-top:0}
}
/* Give the copy/CTA its intrinsic breathing room before allocating remaining
   height to the art; the piano description is the longest mobile scene. */
@media (max-width:700px) and (min-height:741px){
 .folio-layout{grid-template-rows:minmax(0,1.15fr) minmax(175px,.85fr)}
}
@media (max-width:700px) and (min-height:541px) and (max-height:740px){
 .folio-layout{grid-template-rows:minmax(0,1.24fr) minmax(140px,.76fr)}
}