:root{--green:#06130f;--green2:#0c2b20;--gold:#c4a35a;--cream:#f1eadb;--ink:#050706;--muted:#b9b09d}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:var(--cream);font-family:Montserrat,Arial,sans-serif}button{font:inherit}
#film{position:relative;width:100vw;height:100vh;overflow:hidden;background:#030504;isolation:isolate}.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.15s ease,visibility 1.15s;overflow:hidden}.scene.active{opacity:1;visibility:visible;z-index:2}.scene.leaving{opacity:0;z-index:3}
.plate{position:absolute;inset:-5%;background-size:cover;background-position:center;filter:saturate(.83) contrast(1.06);transform:scale(1.035);animation:drift 8s ease-out both}.active .plate.detail{animation-name:drift-left}.active .plate.slow{animation-duration:10s}.plate-box{background-image:url('assets/box.png')}.plate-family{background-image:url('assets/family.png')}.plate-recorder{background-image:url('assets/recorder.png');background-position:center 58%}.plate-legacy{background-image:url('assets/legacy.png')}.plate.memory{background-position:center 78%;filter:saturate(.62) brightness(.82)}.plate.letter{background-position:24% center;filter:saturate(.52) brightness(.58)}.plate.plan{background-position:64% center;filter:saturate(.65) brightness(.65)}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,5,3,.78),rgba(1,5,3,.12) 55%,rgba(1,5,3,.36))}.shade.strong{background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.12) 42%,rgba(0,0,0,.8))}.shade.center{background:radial-gradient(circle at center,rgba(2,7,5,.08),rgba(1,4,3,.8) 82%)}.shade.left{background:linear-gradient(90deg,rgba(1,4,3,.92) 0,rgba(1,4,3,.72) 37%,rgba(1,4,3,.08) 75%)}.shade.top{background:linear-gradient(180deg,rgba(0,0,0,.77),rgba(0,0,0,.04) 55%,rgba(0,0,0,.48))}
#grain{position:absolute;inset:-60%;z-index:10;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:grain .22s steps(2) infinite}#vignette{position:absolute;inset:0;z-index:9;pointer-events:none;box-shadow:inset 0 0 18vw 4vw rgba(0,0,0,.72)}
.copy{position:absolute;z-index:4}.title-card{left:8vw;bottom:12vh}.eyebrow{font-size:clamp(10px,.8vw,16px);letter-spacing:.38em;color:var(--gold);font-weight:500;margin:0 0 1.4rem}.title-card h1{font-family:"Cormorant Garamond",serif;font-size:clamp(44px,5.2vw,100px);font-weight:500;line-height:.82;letter-spacing:.04em;margin:0;text-shadow:0 4px 22px #000}.title-card h1 span{font-size:.57em;letter-spacing:.38em;margin-left:.08em}.sub{letter-spacing:.15em;font-size:clamp(10px,.95vw,18px);margin:1.6rem 0 0;color:#e3dac8}.scene-label{position:absolute;z-index:5;right:3vw;top:5vh;font-size:9px;letter-spacing:.5em;color:rgba(240,232,216,.62);writing-mode:vertical-rl}
.side{left:7vw;top:16vh;width:42vw}.contents{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem 2.2rem}.contents span{font-family:"Cormorant Garamond",serif;font-size:clamp(16px,1.6vw,31px);border-bottom:1px solid rgba(196,163,90,.36);padding-bottom:.55rem;opacity:0;transform:translateY(10px)}.active .contents span{animation:reveal .6s forwards}.contents span:nth-child(2){animation-delay:.12s}.contents span:nth-child(3){animation-delay:.24s}.contents span:nth-child(4){animation-delay:.36s}.contents span:nth-child(5){animation-delay:.48s}.contents span:nth-child(6){animation-delay:.6s}.contents span:nth-child(7){animation-delay:.72s}.contents span:nth-child(8){animation-delay:.84s}.contents span:nth-child(9){animation-delay:.96s}.contents span:nth-child(10){animation-delay:1.08s}
.center-copy{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(90vw,1300px)}.statement h2,.statement p{font-family:"Cormorant Garamond",serif;font-weight:500;letter-spacing:.08em;margin:.55rem 0;font-size:clamp(25px,3.3vw,64px);text-shadow:0 3px 20px #000}.statement p{font-family:Montserrat,sans-serif;font-size:clamp(12px,1.45vw,28px);letter-spacing:.24em}.gold-rule{width:80px;height:1px;background:var(--gold);margin:1.4rem auto}.journey{left:7vw;right:7vw;top:12vh}.sittings{display:grid;grid-template-columns:repeat(4,1fr);gap:3.7vh 4vw;margin-top:8vh}.sittings div{border-top:1px solid rgba(196,163,90,.55);padding-top:1rem;display:flex;gap:1rem;align-items:baseline;opacity:0;transform:translateY(15px)}.active .sittings div{animation:reveal .65s forwards}.sittings div:nth-child(2){animation-delay:.35s}.sittings div:nth-child(3){animation-delay:.7s}.sittings div:nth-child(4){animation-delay:1.05s}.sittings div:nth-child(5){animation-delay:1.4s}.sittings div:nth-child(6){animation-delay:1.75s}.sittings div:nth-child(7){animation-delay:2.1s}.sittings div:nth-child(8){animation-delay:2.45s}.sittings b{font-family:"Cormorant Garamond",serif;font-size:clamp(28px,3.6vw,70px);font-weight:500;color:var(--gold)}.sittings span{font-size:clamp(9px,.9vw,17px);letter-spacing:.18em;line-height:1.5}
.top-copy{top:8vh;left:50%;transform:translateX(-50%);text-align:center;width:90vw}.wave{position:absolute;z-index:5;right:8vw;bottom:9vh;height:42px;display:flex;align-items:center;gap:6px}.wave i{display:block;width:2px;height:8px;background:var(--gold);animation:wave .9s ease-in-out infinite}.wave i:nth-child(2n){animation-delay:.18s}.wave i:nth-child(3n){animation-delay:.34s}.reels{position:absolute;left:17%;bottom:28%;z-index:3;display:flex;gap:8.4vw;opacity:.3}.reels i{width:10vw;height:10vw;border:1px solid transparent;border-radius:50%;animation:spin 2.6s linear infinite}
.letter-card{position:absolute;z-index:4;left:12vw;top:23vh;width:34vw;aspect-ratio:1.55;background:#eee4d0;color:#18231c;transform:rotate(-4deg);box-shadow:0 28px 70px #000;padding:7%;display:grid;place-content:center;text-align:center}.letter-card p{font-family:"Cormorant Garamond",serif;font-size:clamp(26px,3.3vw,62px);letter-spacing:.12em;margin:0}.letter-card span{font-size:clamp(8px,.7vw,14px);letter-spacing:.16em;margin-top:1.5rem}.right-copy{right:7vw;top:29vh;text-align:right}.right-copy h2{font-size:clamp(36px,5vw,96px);line-height:1.02}.plan-copy h2{font-family:"Cormorant Garamond",serif;font-size:clamp(50px,6vw,110px);line-height:.84;margin:2rem 0}.plan-lines{display:flex;gap:1.2rem;flex-wrap:wrap}.plan-lines span{font-size:10px;letter-spacing:.22em;color:var(--gold);border:1px solid rgba(196,163,90,.55);padding:.7rem 1rem}.small{font-family:"Cormorant Garamond",serif;font-size:clamp(17px,1.6vw,30px);max-width:530px}.preserve h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(70px,11vw,210px);letter-spacing:.12em;margin:0}.preserve>p:last-child{font-size:clamp(9px,.9vw,17px);letter-spacing:.25em}.final-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#18402f 0,#071b14 32%,#020504 78%)}.finale h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(43px,5vw,96px);line-height:.95;letter-spacing:.04em;margin:1.3rem 0}.finale h2 span{color:var(--gold)}.finale .values{font-size:clamp(9px,.9vw,17px);letter-spacing:.38em;margin-top:2.8rem}.finale .values b{color:var(--gold)}
.controls{position:absolute;z-index:20;left:50%;bottom:18px;transform:translateX(-50%);width:min(92vw,1120px);display:flex;align-items:center;gap:14px;padding:9px 14px;border:1px solid rgba(255,255,255,.12);border-radius:99px;background:rgba(2,5,4,.56);backdrop-filter:blur(12px);opacity:.25;transition:opacity .25s}.controls:hover,.controls:focus-within{opacity:1}.controls button{border:0;background:transparent;color:#eee7d8;cursor:pointer;width:30px;height:30px;font-size:15px}.track{height:3px;background:rgba(255,255,255,.19);flex:1;cursor:pointer;position:relative;border-radius:5px}.track div{height:100%;width:0;background:var(--gold);box-shadow:0 0 10px rgba(196,163,90,.6)}#time{font-size:9px;letter-spacing:.12em;color:#d2c9b8;white-space:nowrap}.big-play{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(196,163,90,.7);border-radius:50%;width:128px;height:128px;background:rgba(3,12,8,.68);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;backdrop-filter:blur(8px);transition:.35s}.big-play:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(11,38,28,.86)}.big-play span{font-size:28px;margin-left:5px;color:var(--gold)}.big-play small{font-size:9px;letter-spacing:.28em}.big-play.hidden{opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.9)}
@keyframes drift{to{transform:scale(1.11) translate3d(-1.2%,.6%,0)}}@keyframes drift-left{to{transform:scale(1.13) translate3d(2%,0,0)}}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}}@keyframes reveal{to{opacity:1;transform:none}}@keyframes wave{50%{height:38px}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.title-card{left:7vw;bottom:16vh}.contents{grid-template-columns:1fr;gap:.45rem}.contents span{font-size:15px}.side{width:64vw;top:12vh}.sittings{grid-template-columns:1fr 1fr;gap:1.2vh 5vw;margin-top:3vh}.sittings div{padding-top:.4rem}.sittings b{font-size:25px}.sittings span{font-size:8px}.letter-card{left:6vw;width:48vw}.right-copy{right:5vw}.controls{bottom:8px}.scene-label{display:none}}
@media(prefers-reduced-motion:reduce){.plate,#grain,.reels i,.wave i{animation:none!important}}

/* Copy review: retain the original plates and framing. */
#film,.scene{overflow:clip}.scene{transition:opacity .55s ease,visibility .55s}
.title-card{max-width:80vw}.title-card h1{font-size:clamp(28px,4.2vw,81px);line-height:1.05;letter-spacing:.025em}
.need-copy{font:500 clamp(25px,3.5vw,67px)/1.16 "Cormorant Garamond",serif;margin:0;letter-spacing:.015em}
.right-copy h2{font-size:clamp(24px,3.3vw,63px);line-height:1.18}
.preserve h2{font-size:clamp(34px,6.8vw,130px);line-height:1.04;letter-spacing:.04em}
.controls{opacity:1;background:rgba(2,5,4,.9);padding:2px 10px;gap:8px;bottom:10px}
.controls button{min-width:44px;min-height:44px}.track{min-width:30px;height:28px;accent-color:var(--gold)}
.audio-captions,.playback-status{position:absolute;z-index:21;left:50%;bottom:76px;transform:translateX(-50%);width:max-content;max-width:88%;margin:0;padding:6px 12px;border-radius:4px;background:rgba(0,0,0,.88);color:#fff;font:400 clamp(12px,1.6vw,22px)/1.45 Arial,sans-serif;text-align:center;white-space:pre-line;pointer-events:none}
.audio-captions[hidden],.playback-status[hidden]{display:none}.controls button[aria-pressed="true"]{color:var(--gold);text-decoration:underline}
@media(max-width:480px){.controls{gap:2px;padding-inline:4px;width:96vw}#time{font-size:8px;letter-spacing:0}.controls button{width:44px;flex-shrink:0}}
button:focus-visible,input:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.big-play{left:auto;right:5vw;top:auto;bottom:16vh;transform:none;width:104px;height:104px}
.big-play:hover,.big-play.hidden{transform:none}
#film:not(.playing) .plate,#film:not(.playing) #grain,#film:not(.playing) .reels i,#film:not(.playing) .wave i{animation-play-state:paused}
@media(max-height:500px){
 .eyebrow{font-size:clamp(8px,1.1vw,12px);margin-bottom:2vh;letter-spacing:.2em}
 .sub{margin-top:2vh;font-size:clamp(9px,1.3vw,13px)}
 .title-card{bottom:24vh;max-width:72vw}.title-card h1{font-size:4.2vw}
 .big-play{width:68px;height:68px;bottom:27vh}.big-play small{font-size:7px}.big-play span{font-size:20px}
 .sittings{grid-template-columns:repeat(4,1fr);gap:3vh 3vw;margin-top:4vh}
 .sittings div{padding-top:1vh;gap:1vw}.sittings b{font-size:3.5vw}.sittings span{font-size:1.2vw}
 .journey{top:10vh}.center-copy{top:42%}.top-copy{top:6vh}
 .statement h2{font-size:3.8vw}.statement p{font-size:1.55vw;letter-spacing:.15em}
 .gold-rule{margin:2vh auto}.letter-card{padding:4%;top:18vh;left:8vw;width:36vw}
 .letter-card p{font-size:3.3vw}.letter-card span{font-size:1vw;margin-top:2vh}
 .right-copy{top:23vh}.right-copy h2{font-size:3.3vw}
 .plan-copy{top:7vh;width:60vw}.plan-copy h2{font-size:5vw;margin:2vh 0}
 .plan-lines{gap:1vw}.plan-lines span{font-size:1vw;padding:1vh 1vw}
 .small{font-size:1.8vw;margin:2vh 0}.preserve h2{font-size:6vw}
 .finale h2{font-size:4.8vw;margin:2vh 0}.finale .values{margin-top:2vh;font-size:1.1vw}
}
@media(prefers-reduced-motion:reduce){.scene{transition:none}.active .sittings div,.active .contents span{animation:none;opacity:1;transform:none}}
@media(max-width:600px) and (min-height:501px){
 .title-card{bottom:35vh;max-width:84vw}.title-card h1{font-size:7.2vw}
 .letter-card{left:12vw;top:15vh;width:76vw;padding:9%}
 .right-copy{right:10vw;top:auto;bottom:21vh}.right-copy h2{font-size:7vw}
 .finale h2{font-size:9vw}.finale .values{letter-spacing:.12em}
 .plan-copy{width:82vw}.small{max-width:76vw}
}