/* Shared daylight and material density; a continuous section replaces the repeated slices. */
.cinema-letter{background:#f0e7d8}
.letter-sage{display:none}
.letter-scene-photo,.cinema-letter .letter-ceramic{position:absolute;inset:0;left:0;right:0;top:0;width:100%;height:100%;background:url('assets/scene-letter-v2.png') center/cover no-repeat;transform:scale(1.014) translateX(calc(var(--scene-progress)*-8px));transform-origin:65% 65%;pointer-events:none}
.letter-scene-photo{z-index:0}
.cinema-letter .letter-ceramic{z-index:2;mask-size:cover;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:cover;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;filter:none}
.cinema-letter .letter-mass{left:31%;top:15%;font:400 clamp(130px,21vw,360px)/.76 Georgia,'Times New Roman',serif;letter-spacing:-.085em;transform:rotate(-4deg) translateX(calc(var(--scene-progress)*-16px));color:#58322e;z-index:1;text-shadow:1px 2px 2px #563c2e0b}
.cinema-letter .letter-mass>span{margin-left:.025em}
.cinema-letter .letter-caption{left:5%;top:27%;max-width:27%;color:#59382f;transition:opacity .18s}
.cinema-letter .letter-caption>small{font:8px Arial,sans-serif;letter-spacing:.19em;color:#947154}
.cinema-letter .letter-caption p{font:400 clamp(22px,2.45vw,42px)/1.45 var(--serif);letter-spacing:.01em;margin:22px 0 0}
.cinema-letter .letter-caption:after{content:'';display:block;width:45px;height:1px;background:#967255;margin-top:28px}
.cinema-shadow{background:#f0e7d8}
.cinema-shadow .shadow-photo{background-image:url('assets/scene-shadow-v2.png');background-position:center;transform:scale(1.018) translate(calc(var(--scene-progress)*-8px),calc(var(--scene-progress)*3px));filter:saturate(.83)}
.cinema-shadow .cinema-copy{left:5%;top:23%;max-width:35%;transition:opacity .18s}
.cinema-shadow .cinema-copy>small{font-size:8px;letter-spacing:.19em;color:#947154}
.cinema-shadow .cinema-copy h2{font:italic 400 clamp(47px,5.5vw,90px)/.94 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:22px 0 18px;color:#59382f}
.cinema-shadow .cinema-copy h2 em{margin-left:.08em}
.cinema-shadow .cinema-copy p{font:400 clamp(15px,1.6vw,26px)/1.65 var(--serif);margin:16px 0 0;letter-spacing:.015em}
/* Hide explanatory copy while the two art layers cross; stale words never slide past the new copy. */
.cinema-crossing .cinema-copy,.cinema-crossing .letter-caption{opacity:0;transition-duration:.1s}
.cinema-outgoing .cinema-copy,.cinema-outgoing .letter-caption{display:none}
body:has(.ceramic-home[data-montage="ribbon"]) .ceramic-header,body:has(.ceramic-home[data-montage="trace"]) .ceramic-header{background:#f2ecdfd4;backdrop-filter:blur(12px)}
@media(max-width:1050px){.cinema-letter .letter-mass{left:30%;top:20%;font-size:22vw}.cinema-letter .letter-caption{top:25%;max-width:27%}.cinema-letter .letter-caption p{font-size:25px}.cinema-shadow .cinema-copy{top:23%;max-width:36%}.cinema-shadow .cinema-copy h2{font-size:50px}.cinema-shadow .cinema-copy p{font-size:15px}}
@media(max-width:700px){.cinema-letter .letter-mass{left:19%;top:27%;font-size:25vw}.cinema-letter .letter-caption{left:6%;top:18%;max-width:65%}.cinema-letter .letter-caption p{font-size:21px;line-height:1.4;margin-top:12px}.cinema-letter .letter-caption:after{margin-top:16px;width:30px}.cinema-letter .letter-caption>small{font-size:6px}.letter-scene-photo,.cinema-letter .letter-ceramic{background-position:61% center;transform:scale(1.01);mask-position:61% center;-webkit-mask-position:61% center}.cinema-shadow .cinema-copy{left:6%;top:21%;max-width:80%}.cinema-shadow .cinema-copy h2{font-size:43px;margin:14px 0}.cinema-shadow .cinema-copy p{font-size:14px}.cinema-shadow .cinema-copy>small{font-size:6px}.cinema-shadow .shadow-photo{background-position:61% center}}
@media(prefers-reduced-motion:reduce){.letter-scene-photo,.cinema-letter .letter-ceramic{transform:none!important}.cinema-crossing .cinema-copy,.cinema-crossing .letter-caption{opacity:1}}
/* Keep the text clear of the fixed entry on shorter desktop viewports. */
@media(min-width:701px){.cinema-shadow .cinema-copy{top:18.5%}.cinema-letter .letter-mass{left:32.5%}}
@media(min-width:701px) and (max-height:760px){.cinema-shadow .cinema-copy h2{font-size:clamp(44px,5.1vw,76px)}.cinema-shadow .cinema-copy p{font-size:18px}.cinema-letter .letter-caption p{font-size:clamp(23px,2.35vw,33px)}}