html:has(.archive-page) { scroll-behavior:auto; }
#chapter-02 { isolation:isolate; overflow:hidden; }
.memory-exposure { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; isolation:isolate; background:#041023; mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent); }
.memory-exposure > div { position:absolute; background-repeat:no-repeat; background-size:cover; filter:grayscale(1); mix-blend-mode:screen; }
.memory-exposure__city { inset:-15% -8% -30% -35%; background-image:url('../assets/photos/memory-01.jpg'); background-position:30% 55%; opacity:.4; mask-image:radial-gradient(ellipse 62% 22% at 35% 44%,#000 5%,#0009 42%,transparent 85%); }
.memory-exposure__portrait { inset:-30% -9% -40% 2%; background-image:url('../assets/photos/memory-02.jpg'); background-position:85% 30%; opacity:.3; filter:grayscale(1) blur(1.5px)!important; mask-image:radial-gradient(ellipse 40% 23% at 77% 29%,#000 8%,#000b 40%,transparent 83%); }
.memory-exposure::after { content:""; position:absolute; inset:0; background:linear-gradient(125deg,#163656,#163d69 55%,#091831); mix-blend-mode:color; }
#chapter-02 .chapter-label { position:relative; text-shadow:0 2px 18px #020713; }
@media(max-width:640px) {
 .memory-exposure__city { inset:5% -80% -15% -100%; }
 .memory-exposure__portrait { inset:-5% -55% -5% -15%; opacity:.28; }
}
#chapter-03.chapter--warm .chapter-media { grid-column:2/13; grid-row:3/9; width:100%; }
#chapter-03.chapter--warm .chapter-label { grid-column:2/13; grid-row:1/3; }
#chapter-03 .chapter-label h2 { margin:12px 0 8px; }
#chapter-03.chapter--warm .chapter-media video { aspect-ratio:16/9; }
@media(max-width:640px) { #chapter-03.chapter--warm .chapter-media { grid-column:1/7; } }
#chapter-05 .chapter-media { grid-column:1/13; justify-self:center; }
#chapter-05 .chapter-label { grid-column:1/4; }
#chapter-04 { overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 20% 55%,#1a110e80,transparent 70%),#0a0807; }
.lyric-sheet { position:absolute; z-index:-1; pointer-events:none; left:-8%; top:3%; width:49%; height:115%; transform:rotate(-7deg); background:linear-gradient(103deg,transparent 44%,#93816a22 45%,#fff4 46%,transparent 48%),url('../assets/textures/paper-grain.svg'),#ddd7cd; mask:url('../assets/textures/torn-paper.svg') center/100% 100% no-repeat; box-shadow:0 3px 13px #0003; }
.lyric-ink { padding:45px 24px 30px 65px; color:#24201dce; font-family:'Ma Shan Zheng','Kaiti TC',KaiTi,cursive; font-size:clamp(20px,2.25vw,32px); line-height:1.3; }
.lyric-ink p { margin:6px -35px 11px 0; transform:rotate(1deg); }
.lyric-ink p:nth-child(3n) { transform:rotate(-1.5deg); margin-left:16px; opacity:.75; }
.lyric-ink .ink-focus { font-size:1.18em; color:#24201d; }
.lyric-ink .ink-faded { opacity:.4; }
#chapter-04 .chapter-label { grid-column:10/13; grid-row:3/7; }
#chapter-04 .chapter-label h2 { font-size:clamp(16px,1.8vw,25px); }
#chapter-04 .chapter-media { grid-column:4/10; }
#chapter-04 .chapter-media figcaption,#chapter-04 .archive-controls { background:#0a0807; padding-inline:8px; }
@media(max-width:640px) {
 #chapter-03.chapter--warm .chapter-label { grid-column:1/7; }
 #chapter-05 .chapter-media { grid-column:1/7; }
 #chapter-05 .chapter-label { grid-column:1/7; }
 #chapter-04 .chapter-label { grid-column:1/7; grid-row:1/3; z-index:1; }
 #chapter-04 .chapter-media { grid-column:1/7; grid-row:3/9; }
 .lyric-sheet { width:65%; left:-20%; top:28%; height:95%; }
 .lyric-ink { font-size:21px; padding-left:35px; }
}
.archive-page { height:100svh; overflow:hidden; }
.archive-page { --page-bg:#080808; --page-bg-secondary:#080808; --page-ambient:#080808; --page-highlight:#080808; --page-text:#f1f2ee; --blue-influence:0; background:var(--page-bg); color:var(--page-text); }
.archive-page::before { content:""; position:fixed; inset:-10%; pointer-events:none; z-index:-1; background:radial-gradient(ellipse at 34% 54%,var(--page-ambient) 0%,transparent 53%),radial-gradient(ellipse at 28% 28%,var(--page-highlight) 0%,transparent 36%),radial-gradient(ellipse at 65% 65%,var(--page-bg-secondary),transparent 70%); filter:blur(70px); opacity:calc(var(--blue-influence) * .25); }
.archive-page::after { filter:sepia(calc(var(--blue-influence) * .12 + var(--warm-influence, 0) * .2)) hue-rotate(calc(var(--blue-influence) * 160deg)); }
.journal::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--warm-influence,0); background:radial-gradient(ellipse at 64% 35%,rgba(169,78,32,.13),transparent 54%),radial-gradient(ellipse at 62% 76%,rgba(90,22,15,.16),transparent 57%),radial-gradient(ellipse at 22% 60%,rgba(23,21,37,.2),transparent 65%); }
.chapter--warm { --chapter-bg:#050403; --chapter-bg-secondary:#100907; --chapter-ambient:#2a0d0a; --chapter-highlight:#a94e20; --chapter-text:#f0ece6; }
.chapter--warm .chapter-media { grid-column:5/12; grid-row:1/9; width:min(100%,calc((100svh - 210px) * .5625)); justify-self:center; }
.chapter--warm .chapter-media video { aspect-ratio:9/16; height:auto; max-height:none; object-fit:contain; }
.chapter--warm .chapter-label { grid-column:1/5; grid-row:3/6; }
.chapter--warm h2 small { display:block; margin-top:14px; font-size:13px; font-weight:400; }
.archive-page .archive-header { background:color-mix(in srgb,var(--page-bg) 94%,transparent); }
.archive-page .chapter-navigation,.archive-page .volume-panel { background:var(--page-bg); }
.archive-page .chapter-label p,.archive-page .chapter-label > span,.archive-page figcaption { color:color-mix(in srgb,var(--page-text) 60%,var(--page-bg)); }
.chapter-navigation { color:var(--page-text); }
@media(min-width:901px) { .chapter--landscape .chapter-media { width:120%; justify-self:end; } .chapter--landscape .chapter-label { grid-column:1/3; } }
.chapter--blue { --chapter-bg:#020713; --chapter-bg-secondary:#06152d; --chapter-ambient:#082a68; --chapter-highlight:#18a7d6; --chapter-text:#f1f2ee; }
.chapter--blue .chapter-media { grid-column:2/8; grid-row:1/9; width:min(100%, calc((100svh - 240px) * .5625)); justify-self:center; }
.chapter--blue .chapter-label { grid-column:10/13; grid-row:2/7; }
.chapter--blue .chapter-label h2 { font-size:clamp(17px,1.7vw,25px); line-height:1.4; overflow-wrap:anywhere; }
.chapter--blue h2 small { display:block; margin-top:14px; font-size:12px; font-weight:400; }
.chapter--blue .chapter-media video { aspect-ratio:9/16; height:auto; max-height:none; object-fit:contain; }
.stage-meta { display:flex; justify-content:space-between; gap:12px; }
.archive-header { position:fixed; inset:0 0 auto; z-index:1000; display:flex; align-items:center; padding-left:var(--gutter); background:rgba(8,8,8,.94); }
.archive-logo { font:400 29px/1 "Alfa Slab One",Rockwell,Georgia,serif; letter-spacing:.02em; }
.archive-header .navigation { position:relative; top:auto; flex:1; background:transparent; border:0; min-width:0; }
.archive-header .nav-links { gap:clamp(14px,2vw,30px); }
.journal { height:100svh; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#363636 #080808; }
.chapter { position:relative; height:100svh; min-height:100svh; scroll-snap-align:start; scroll-snap-stop:always; padding:110px 7vw 64px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); gap:14px; }
.chapter-label { grid-column:1/4; grid-row:3/7; align-self:start; }
.chapter-label span,.chapter-label p,.chapter-media figcaption,.distant-caption { font-size:9px; letter-spacing:.15em; line-height:1.8; text-transform:uppercase; color:#aaa; }
.chapter-label h1,.chapter-label h2 { font:500 clamp(17px,2vw,29px)/1.3 var(--sans); margin:26px 0 18px; color:var(--cream); }
.journal-note { display:block; margin-top:12svh; }
.chapter-media { margin:0; min-width:0; min-height:0; grid-column:5/13; grid-row:2/8; align-self:center; opacity:.78; transform:translateY(7px) scale(.992); transition:opacity 450ms ease,transform 550ms cubic-bezier(.2,.65,.3,1); }
.chapter.is-active .chapter-media { opacity:1; transform:none; }
.chapter-media video { width:100%; aspect-ratio:16/9; object-fit:cover; max-height:64svh; background:#111; }
.chapter-media figcaption { display:flex; justify-content:space-between; margin-top:10px; font-size:8px; }
.chapter--portrait .chapter-media { grid-column:3/7; grid-row:1/9; height:100%; justify-self:start; }
.chapter--portrait img { height:calc(100% - 28px); width:auto; max-width:100%; object-fit:contain; object-position:left center; }
.chapter--portrait .chapter-label { grid-column:9/13; grid-row:2/5; }
.distant-caption { grid-column:10/13; grid-row:8; align-self:end; }
.chapter--wide .chapter-label { grid-column:2/12; grid-row:1; display:flex; align-items:baseline; justify-content:space-between; gap:15px; }
.chapter--wide .chapter-label h2 { margin:0; }
.chapter--wide .chapter-media { grid-column:2/12; grid-row:2/9; }
.chapter--wide video { max-height:60svh; object-fit:contain; }
.chapter-navigation { position:fixed; bottom:15px; right:var(--gutter); z-index:100; display:flex; align-items:center; gap:16px; padding:4px 8px; background:#080808; }
.chapter-navigation output { font-size:9px; letter-spacing:.18em; }
.chapter-navigation button,.archive-controls button { border:0; background:none; color:var(--cream); padding:8px; }
.chapter-navigation button:disabled { opacity:.25; cursor:default; }
.archive-controls { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:34px; }
.archive-controls .play-toggle { font-size:11px; }
.archive-controls input { accent-color:#eee; }
.archive-controls .volume-control { z-index:20; }
@media(max-width:900px) { .archive-header { flex-wrap:wrap; padding:12px var(--gutter) 0; } .archive-header .navigation { padding:0; flex-basis:100%; } .chapter { padding-top:130px; padding-inline:5vw; } .chapter--landscape .chapter-media { grid-column:4/13; } }
@media(max-width:640px) {
 .chapter--warm .chapter-label { grid-column:1/7; grid-row:1/3; }
 .chapter--warm .chapter-media { grid-column:1/7; grid-row:3/9; width:min(100%,calc((100svh - 370px) * .5625)); }
 .chapter--blue .chapter-label { grid-column:1/7; grid-row:1/4; }
 .chapter--blue .chapter-media { grid-column:1/7; grid-row:4/9; width:min(100%, calc((100svh - 410px) * .5625)); }
 .chapter--blue .chapter-label h2 { font-size:18px; max-width:30ch; }
 .archive-header { flex-wrap:nowrap; padding:8px 18px; } .archive-logo { font-size:24px; }
 .archive-header .navigation { padding-left:24px; flex-basis:auto; min-height:42px; } .archive-header .nav-links { left:-100px; right:-18px; }
 .chapter { padding:88px 22px 66px; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
 .chapter-label,.chapter--portrait .chapter-label,.chapter--wide .chapter-label { grid-column:1/7; grid-row:1/3; display:block; }
 .chapter-label h1,.chapter-label h2,.chapter--wide .chapter-label h2 { font-size:20px; margin:12px 0 8px; } .chapter-label p { margin:0; font-size:8px; }
 .journal-note { display:none!important; }
 .chapter--landscape .chapter-media,.chapter--wide .chapter-media { grid-column:1/7; grid-row:3/8; } .chapter--wide .chapter-media { grid-row:4/9; }
 .chapter--portrait .chapter-media { grid-column:2/7; grid-row:3/9; justify-self:end; }
 .distant-caption { display:none; } .chapter-media video { max-height:48svh; }
}
@media(prefers-reduced-motion:reduce) { .chapter-media { opacity:1; transform:none; transition:none; } }