/* Chapter-specific composition. Native media and readable flow are the baseline. */
.chapter-nav { position:fixed; z-index:var(--z-sticky-nav); inset:auto 50% var(--space-lg) auto; transform:translateX(50%); display:flex; gap:var(--space-2xs); padding:var(--space-xs); color:var(--color-paper); background:var(--color-ink); border:1px solid var(--color-stage-rule); box-shadow:0 8px 30px var(--color-shadow); --color-focus:var(--color-lime); }
.chapter-nav[hidden] { display:none; }
.chapter-nav a { padding:var(--space-xs) var(--space-sm); font-size:13px; white-space:nowrap; }
.chapter-nav a[aria-current="location"] { background:var(--color-lime); color:var(--color-ink); }
.fix-window { transform-origin:50% 50%; }
.film-case { overflow:clip; }
.film-head h2 { position:relative; z-index:1; }
.music-case { position:relative; overflow:clip; isolation:isolate; padding-block:var(--space-36); }
.music-layout { position:relative; z-index:2; }
.music-copy { position:relative; z-index:3; }
.music-copy h2 { font-size:clamp(3rem,6.5vw,6.8rem); }
.music-copy > p { max-width:36ch; }
.music-orbit { position:absolute; z-index:0; inset:0; perspective:900px; pointer-events:none; }
.orbit-plane { position:absolute; width:min(78vw,1100px); aspect-ratio:1; left:38%; top:50%; border:1px solid var(--color-lime); border-radius:50%; display:flex; align-items:center; justify-content:space-between; color:var(--color-lime); font-size:clamp(2rem,5vw,5rem); font-family:var(--font-display); letter-spacing:-.04em; opacity:.55; transform-style:preserve-3d; }
.orbit-plane span { background:var(--color-ink); padding:var(--space-sm); }
.orbit-plane i { display:block; position:absolute; width:var(--space-sm); height:var(--space-sm); background:var(--color-lime); border-radius:50%; inset:-6px auto auto 50%; }
.orbit-plane i:last-child { inset:auto auto -6px 50%; }
.orbit-a { transform:translate(-50%,-50%) rotateX(62deg) rotateZ(-24deg); }
.orbit-b { transform:translate(-20%,-50%) rotateY(60deg) rotateZ(24deg); border-color:var(--color-stage-rule); color:var(--color-stage-muted); }
.orbit-c { transform:translate(-35%,-50%) rotateX(-60deg) rotateY(30deg); border-color:var(--color-accent); }
.music-film { position:relative; transform:rotate(4deg); }
.music-film .project-film { box-shadow:0 20px 70px var(--color-shadow); }
.cinema-case { background:var(--color-ink); color:var(--color-paper); position:relative; }
.cinema-stage { position:relative; overflow:clip; padding-block:var(--space-24); }
.cinema-heading { position:relative; z-index:2; }
.cinema-heading > p { font-size:14px; margin-bottom:var(--space-lg); }
.cinema-heading h2 { font-family:var(--font-display); font-size:clamp(4rem,12vw,12rem); line-height:.93; letter-spacing:-.045em; max-width:9ch; }
.cinema-frames { position:relative; height:350px; max-width:var(--container); margin:auto; perspective:1200px; pointer-events:none; }
.cinema-still { position:absolute; width:40%; aspect-ratio:16/9; top:10%; box-shadow:0 20px 60px var(--color-shadow); }
.cinema-still img { width:100%; height:100%; object-fit:cover; }
.still-a { left:1%; transform:rotate(-12deg); }
.still-b { left:30%; transform:rotate(6deg); z-index:2; }
.still-c { right:1%; transform:rotate(15deg); }
.cinema-feature { position:relative; z-index:3; }
.cinema-feature .project-film { width:100%; aspect-ratio:16/9; object-fit:contain; background:var(--color-ink); }
.cinema-caption { display:flex; justify-content:space-between; gap:var(--space-xl); align-items:center; padding-block:var(--space-lg); font-size:16px; }
.cinema-case .film-caption { color:var(--color-stage-muted); }
.journey-motion .cinema-case { height:260svh; }
.journey-motion .cinema-stage { position:sticky; top:0; height:100svh; min-height:650px; padding:0; }
.journey-motion .cinema-heading { position:absolute; inset:var(--space-12) 0 auto; }
.journey-motion .cinema-frames { position:absolute; inset:0; width:100%; height:100%; }
.journey-motion .cinema-still { top:45%; width:42%; }
.journey-motion .cinema-feature { position:absolute; inset:var(--space-lg) 0 auto; padding-top:0; }
.journey-motion .cinema-feature .project-film { max-height:72svh; }
.journey-motion .cinema-caption { padding-block:var(--space-md); }
.journey-motion .cinema-feature .film-caption { margin-top:0; }
.dining-case { background:var(--color-paper-2); overflow:clip; }
.dining-head { display:flex; justify-content:space-between; gap:var(--space-xl); align-items:start; margin-bottom:var(--space-12); }
.dining-head > p { font-size:14px; padding-top:var(--space-sm); }
.dining-head h2 { font-size:clamp(2.8rem,6vw,6rem); letter-spacing:-.045em; line-height:1; max-width:10ch; }
.dining-window { transform-origin:50% 0; }
.dining-note { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:var(--space-xl); margin-top:var(--space-lg); font-size:14px; }
.dining-note p { max-width:43ch; }
.archive-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); margin-bottom:var(--space-12); }
.archive-tools[hidden] { display:none; }
.archive-filters { display:flex; gap:var(--space-xs); flex-wrap:wrap; }
.archive-filters button { background:transparent; border:1px solid var(--color-stage-rule); padding:var(--space-sm) var(--space-lg); min-height:44px; font-size:14px; --color-focus:var(--color-lime); }
.archive-filters button[aria-pressed="true"] { background:var(--color-lime); color:var(--color-ink); border-color:var(--color-lime); }
.archive-count { font-size:13px; }
.archive-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-20); align-items:start; }
.archive-preview { position:sticky; top:var(--space-xl); margin:0; perspective:900px; }
.archive-preview[hidden] { display:none; }
.archive-layout:has(.archive-preview[hidden]) { display:block; }
.archive-preview-image { background:var(--color-accent); aspect-ratio:4/5; overflow:clip; display:grid; place-items:center; padding:var(--space-lg); transform:rotate(-3deg); }
.archive-preview-image img { width:100%; height:100%; object-fit:cover; }
.archive-preview-image[data-empty="true"] img { display:none; }
.archive-preview-image[data-empty="true"]::after { content:attr(data-title); font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3.5rem); line-height:1.05; letter-spacing:-.03em; color:var(--color-paper); }
.archive-preview figcaption { font-size:15px; color:var(--color-paper); margin-top:var(--space-lg); }
.archive-preview > p { margin-top:var(--space-sm); font-size:12px; color:var(--color-stage-muted); }
.archive-rows .work-row summary { grid-template-columns:minmax(0,1fr) auto; gap:var(--space-sm); padding-block:var(--space-lg); }
.archive-rows .work-row summary h3 { font-size:clamp(1.4rem,2.3vw,2.2rem); line-height:1.1; letter-spacing:-.025em; }
.archive-rows .work-row summary p { grid-column:1; font-size:13px; }
.archive-rows .work-row summary::after { grid-column:2; grid-row:1/3; }
.archive-rows .work-row[hidden] { display:none; }
.archive-rows .work-row:focus-within, .archive-rows .work-row:hover { color:var(--color-lime); }
.archive-rows .work-row > p { color:var(--color-paper); }
.contact { position:relative; overflow:clip; padding-bottom:var(--space-36); }
.contact-top h2 { transform-origin:0 50%; }
@media(min-width:1800px) { .orbit-plane { left:50%; } }
@media(max-width:900px) { .archive-layout { gap:var(--space-xl); grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); } .dining-note { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:700px) {
 .chapter-nav { bottom:var(--space-sm); gap:0; padding:var(--space-2xs); max-width:calc(100% - var(--space-lg)); }
 .chapter-nav a { padding:var(--space-sm) var(--space-xs); font-size:11px; }
 .music-case { padding-block:var(--space-24); }
 .music-copy h2 { font-size:clamp(3rem,12vw,4.5rem); }
 .music-film { transform:none; max-width:300px; }
 .orbit-plane { width:150vw; left:60%; top:62%; font-size:40px; opacity:.35; }
 .cinema-stage { padding-block:var(--space-20); }
 .cinema-heading h2 { font-size:clamp(3.5rem,16vw,6rem); }
 .cinema-frames { height:230px; margin-top:var(--space-lg); }
 .cinema-still { top:18%; width:58%; }
 .still-a { left:-8%; } .still-b { left:22%; top:30%; } .still-c { right:-12%; }
 .cinema-caption { display:block; font-size:14px; }
 .cinema-caption a { display:inline-block; margin-top:var(--space-lg); }
 .cinema-case .film-caption { font-size:11px; }
 .dining-head { display:block; }
 .dining-head h2 { margin-top:var(--space-lg); }
 .dining-note { display:block; font-size:13px; }
 .dining-note p { margin-bottom:var(--space-md); }
 .archive-layout { display:block; }
 .archive-preview { display:none; }
 .archive-tools { gap:var(--space-sm); align-items:start; }
 .archive-filters { gap:var(--space-2xs); }
 .archive-filters button { font-size:12px; padding:var(--space-xs) var(--space-sm); }
 .archive-count { font-size:11px; text-align:right; max-width:5ch; }
 .archive-rows .work-row summary h3 { font-size:24px; }
 .contact { padding-bottom:var(--space-30); }
}
@media(prefers-reduced-motion:reduce) { .music-film,.orbit-plane,.cinema-still,.archive-preview-image { transform:none; } .orbit-plane { opacity:.25; } .journey-motion .cinema-case { height:auto; } .journey-motion .cinema-stage { position:relative; height:auto; } }
/* Keep the chapter control compact until the visitor asks to navigate. */
.chapter-nav { inset:auto var(--gutter) var(--space-lg) auto; transform:none; padding:0; display:block; }
.chapter-toggle { display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); width:100%; min-height:48px; padding:var(--space-sm) var(--space-md); border:0; background:transparent; color:inherit; font-size:13px; }
.chapter-toggle span { font-size:20px; line-height:1; }
.chapter-links { display:flex; flex-direction:column; padding:0 var(--space-xs) var(--space-xs); }
.chapter-links[hidden] { display:none; }
.chapter-nav a { min-width:140px; }
.cinema-case { background:var(--color-accent); --color-focus:var(--color-lime); }
.archive-preview-image { aspect-ratio:5/4; }
@media(max-width:700px) { .chapter-nav { right:var(--space-md); bottom:var(--space-md); max-width:none; } .chapter-toggle { min-height:44px; font-size:12px; } .chapter-nav a { font-size:13px; padding:var(--space-sm); } }

.process-note { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:var(--space-20); align-items:center; padding-bottom:var(--space-24); margin-bottom:var(--space-24); border-bottom:1px solid var(--color-rule); }
.process-note h2 { font-size:clamp(2.4rem,4vw,4rem); line-height:1.05; letter-spacing:-.04em; margin-bottom:var(--space-lg); }
.process-note p { font-size:17px; max-width:30ch; }
.process-note figure { margin:0; }
.process-note .desk-film { aspect-ratio:16/9; width:100%; }
.process-note figcaption { font-size:12px; }
@media(max-width:700px) { .process-note { grid-template-columns:minmax(0,1fr); gap:var(--space-xl); padding-bottom:var(--space-20); margin-bottom:var(--space-20); } .process-note p { font-size:16px; } }

:root { --color-fix-peach:#f3c8b9; --color-fix-cocoa:#713c31; }
.fix-replay { position:relative; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-xl); align-items:center; margin-block:var(--space-20); padding:var(--space-xl); background:var(--color-fix-peach); min-height:650px; overflow:clip; }
.fix-replay-copy { position:relative; z-index:2; padding-block:var(--space-xl); }
.fix-replay-copy h3 { font-family:var(--font-display); font-size:clamp(2.8rem,5vw,5.4rem); letter-spacing:-.035em; line-height:1; color:var(--color-fix-cocoa); }
.fix-replay-copy > p { max-width:29ch; margin-top:var(--space-lg); font-size:16px; }
.fix-replay-steps { display:flex; gap:var(--space-lg); font-size:13px !important; }
.fix-replay-steps span { border-bottom:1px solid var(--color-fix-cocoa); padding-bottom:var(--space-xs); }
.fix-replay-art { position:relative; min-height:550px; perspective:1000px; }
.fix-gesture { position:absolute; inset:0; width:100%; height:100%; stroke:var(--color-fix-cocoa); stroke-width:2; stroke-linecap:round; }
.fix-writing,.fix-wall { position:absolute; width:77%; margin:0; }
.fix-writing { top:7%; left:0; transform:rotate(-5deg); }
.fix-wall { top:46%; right:0; transform:rotate(3deg); }
.fix-writing img,.fix-wall img { width:100%; aspect-ratio:16/9; object-fit:cover; box-shadow:0 12px 30px var(--color-shadow); }
.fix-writing figcaption,.fix-wall figcaption { color:var(--color-fix-cocoa); font-size:12px; }
.fix-study-credit { position:absolute; inset:auto auto var(--space-md) var(--space-xl); font-size:11px; color:var(--color-fix-cocoa); }
.music-copy > p.project-years { font-size:13px; margin-top:var(--space-lg); }
.project-years { font-size:13px; }
@media(max-width:700px) { .fix-replay { display:block; padding:var(--space-lg); min-height:0; margin-block:var(--space-12); } .fix-replay-copy { padding-block:var(--space-md); } .fix-replay-copy h3 { font-size:45px; } .fix-replay-copy > p { font-size:15px; } .fix-replay-art { min-height:420px; } .fix-writing,.fix-wall { width:80%; } .fix-wall { top:48%; } .fix-study-credit { position:relative; inset:auto; padding-top:var(--space-md); } }
.fix-replay-art { min-height:580px; }
.fix-writing,.fix-wall { width:74%; }
@media(max-width:700px) { .fix-replay-art { min-height:420px; } .fix-writing,.fix-wall { width:80%; } }
@media(max-width:700px) {
 .fix-replay { display:flex; flex-direction:column; align-items:stretch; gap:0; }
 .fix-replay-copy { order:0; }
 .fix-study-credit { order:1; padding-top:0; margin-top:var(--space-sm); }
 .fix-replay-art { order:2; margin-top:var(--space-lg); }
}

.chapter-nav { top:var(--space-md); bottom:auto; }
.chapter-nav { top:auto; bottom:var(--space-lg); }
@media(max-width:700px) { .chapter-nav { bottom:var(--space-md); } .fix-writing figcaption,.fix-wall figcaption { max-width:150px; font-size:11px; } }
/* FIX: real high-resolution source media, with handwriting across the chapter. */
.film-case { position:relative; isolation:isolate; }
.film-case > .container { position:relative; z-index:1; }
.fix-backdrop { position:absolute; inset:0; width:100%; height:100%; stroke:var(--color-fix-cocoa); stroke-width:2; opacity:.16; pointer-events:none; }
.fix-replay { isolation:isolate; }
.fix-gesture-full { position:absolute; inset:0; width:100%; height:100%; stroke-width:2; opacity:.32; z-index:0; pointer-events:none; }
.fix-replay-art { z-index:1; }
.fix-replay-copy { z-index:2; }
.fix-study-credit { z-index:2; }
.fix-window { max-width:960px; margin-inline:auto; }
#fixFilm { object-fit:cover; }
#filmCaption { max-width:960px; margin-inline:auto; padding-top:var(--space-sm); }
.film-story { max-width:960px; margin-inline:auto; gap:var(--space-12); }
.film-story h3 { font-size:28px; margin-bottom:var(--space-md); }
.film-story p { font-size:16px; line-height:1.6; }
.film-story .text-link { display:inline-block; margin-top:var(--space-lg); font-size:14px; }
@media(min-width:1600px) { .fix-window,#filmCaption,.film-story { max-width:1080px; } }
@media(max-width:700px) { .fix-gesture-full { opacity:.24; } .fix-backdrop { opacity:.12; } .film-story { gap:var(--space-xl); } .film-story h3 { font-size:25px; } .film-story p { font-size:15px; } }
.fix-replay-copy { background:var(--color-fix-peach); box-shadow:0 0 22px 18px var(--color-fix-peach); }
/* Preserve native detail at a two-times device pixel ratio. */
@media(min-width:1600px) { .fix-window,#filmCaption,.film-story { max-width:960px; } }
/* Closed navigation occupies the outside gutter, never the reading column. */
.chapter-nav:not(:has(.chapter-toggle[aria-expanded="true"])) { right:2px; width:18px; padding:0; }
.chapter-nav:not(:has(.chapter-toggle[aria-expanded="true"])) .chapter-toggle { position:relative; writing-mode:vertical-rl; width:18px; min-height:108px; padding:var(--space-xs) 0; gap:var(--space-xs); font-size:11px; line-height:16px; }
.chapter-nav:not(:has(.chapter-toggle[aria-expanded="true"])) .chapter-toggle::before { content:''; position:absolute; top:0; right:0; width:44px; height:100%; }
.chapter-nav:has(.chapter-toggle[aria-expanded="true"]) { right:var(--space-md); width:180px; }