/* A single book opens into the project section. The poster and canvas share a fit. */
.book-hero{position:relative;background:var(--paper);height:100svh;min-height:660px}
.book-stage{position:relative;height:100svh;min-height:660px;overflow:hidden;background:var(--paper)}
.book-motion-ready .book-hero{height:calc(100svh + 2100px)}
.book-motion-ready .book-stage{position:sticky;top:0}
.book-media{position:absolute;inset:0;overflow:hidden}
.book-media>picture,.book-film>picture,.book-media canvas,.book-paper{position:absolute;inset:0;width:100%;height:100%}
.book-media>picture,.book-film>picture{display:flex;align-items:center;justify-content:center}
.book-media>picture img,.book-film>picture img{display:block;width:100%;height:100%;object-fit:cover}
.book-media canvas{opacity:0}.book-media canvas.ready{opacity:1}
.book-paper{background:var(--paper);opacity:0;pointer-events:none}
.book-film>canvas{max-width:none}
.book-film>.book-paper{inset:-100%;width:300%;height:300%}
.book-film{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.book-page{position:absolute;top:0;left:0;width:100%;overflow:hidden;pointer-events:none;opacity:0;transform-origin:0 0;will-change:transform,opacity}
.book-page .work{background:transparent;padding-top:120px}
.book-page .section-top{border-top:0}
html:not(.book-motion-ready) .book-page{display:none}
.book-copy{position:absolute;left:var(--g);top:26%;max-width:51%;z-index:2;will-change:opacity,transform}
.book-kicker{font:12px/1.6 Plex,monospace;letter-spacing:.08em;margin-bottom:28px}
.book-prelude{font-size:clamp(28px,3vw,50px);letter-spacing:-.04em;line-height:1.1;margin-bottom:10px}
.book-copy h1{font-size:clamp(66px,6.6vw,128px);font-weight:480;letter-spacing:-.06em;line-height:.96}
.book-copy h1 span{display:block}
.book-description{font-size:16px;line-height:1.65;max-width:340px;margin-top:30px}
.book-hint{position:absolute;left:var(--g);bottom:32px;display:flex;gap:20px;align-items:center;font-size:13px;z-index:2;min-height:44px}
.book-hint span{font-size:24px}

.book-motion-ready .book-hero+.scene-handoff{margin-top:calc(80px - var(--book-stage-height,100svh));position:relative;z-index:3}
.book-hero+.scene-handoff .work{padding-top:40px}
.book-hero+.scene-handoff #work>.section-top{border-top:0}
@media(min-width:1025px) and (max-height:760px){
 .book-stage,.book-hero{min-height:600px}.book-copy{top:24%}.book-kicker{margin-bottom:20px}.book-copy h1{font-size:clamp(66px,6vw,98px)}.book-description{margin-top:22px;font-size:15px}.book-hint{bottom:20px}
}
@media(max-width:1024px){
 .book-motion-ready .book-hero{height:calc(100svh + 1200px)}.book-copy{top:145px;max-width:none;right:var(--g)}.book-kicker{font-size:11px;margin-bottom:18px}.book-prelude{font-size:36px}.book-copy h1{font-family:MKVertical,MKCondensed,sans-serif;font-size:clamp(64px,13.4vw,106px);letter-spacing:-.015em;line-height:1.06;font-weight:450}.book-description{display:none}.book-hint{bottom:32px}
}
@media(max-width:700px){
 .book-page .work{padding-top:104px}
 .book-hero,.book-stage{min-height:620px}.book-motion-ready .book-hero{height:calc(100svh + 1050px)}.book-copy{left:22px;right:22px;top:137px}.book-kicker{font-size:10px;max-width:195px;margin-bottom:19px}.book-prelude{font-size:32px;margin-bottom:9px}.book-copy h1{font-size:clamp(57px,15.8vw,92px)}.book-hint{font-size:12px;left:22px;bottom:26px}.book-hero+.scene-handoff .work{padding-top:24px}
}
@media(max-height:720px) and (max-width:700px){
 .book-copy{top:125px}.book-kicker{margin-bottom:10px}.book-prelude{font-size:28px}.book-copy h1{font-size:clamp(51px,14.5vw,78px)}
}
@media(min-width:701px) and (max-width:1024px) and (orientation:landscape){
 .book-hero,.book-stage{min-height:440px}.book-copy{top:26%;max-width:48%;right:auto}.book-kicker{font-size:10px;margin-bottom:18px}.book-prelude{font-size:28px}.book-copy h1{font-family:MKVertical,MKCondensed,sans-serif;font-size:clamp(50px,7.2vw,76px);letter-spacing:-.015em}.book-hint{bottom:14px}
}
@media(min-width:701px) and (max-width:1024px) and (max-height:500px){
 .book-copy{top:110px}.book-kicker{margin-bottom:12px;font-size:9px}.book-copy h1{font-size:52px}.book-prelude{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
 .book-motion-ready .book-hero{height:100svh}.book-motion-ready .book-stage{position:relative}.book-motion-ready .book-hero+.scene-handoff{margin-top:0}.book-copy{will-change:auto}
}

/* Static/no-script portrait keeps the same clear zone above the cover. */
@media(max-width:700px), (max-width:1024px) and (orientation:portrait){
 .book-media>picture{transform:scale(1.4);transform-origin:50% 0}
}
@media(max-width:700px) and (max-height:720px){
 .book-media>picture{transform:scale(1.7)}
}

@media(max-width:700px), (max-width:1024px) and (orientation:portrait){
 .book-hint{left:auto;right:var(--g);top:145px;bottom:auto;min-width:44px;font-size:0;gap:0;justify-content:center}
}
@media(max-width:700px){.book-hint{top:137px}}
@media(max-width:700px) and (max-height:720px){.book-hint{top:125px}}

@media(max-width:1024px){.book-prelude{font-family:MKVertical,MKCondensed,sans-serif;font-weight:350;letter-spacing:-.01em}}