:root{--ink:#f3ead7;--muted:#bcb5a9;--gold:#e4b96b;--night:#03070b;--scene-progress:0;--page-progress:0;color-scheme:dark;font-family:"DM Sans",sans-serif;background:var(--night);color:var(--ink)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#03070b;overflow-x:hidden}
a{color:inherit}
.skip-link{position:fixed;z-index:100;top:-5rem;left:1rem;padding:.8rem 1rem;background:#fff;color:#111}
.skip-link:focus{top:1rem}
.film-progress{position:fixed;z-index:80;inset:0 0 auto;height:2px;background:#ffffff15}
.film-progress i{display:block;width:calc(var(--page-progress)*100%);height:100%;background:linear-gradient(90deg,#8a642c,#ffe0a0);box-shadow:0 0 16px #e4b96b}
.film-header{position:fixed;z-index:70;inset:2px 0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 3vw;background:linear-gradient(#03070be6,transparent);transition:background .3s}
.film-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:700;letter-spacing:.02em}
.film-brand img{width:31px;height:31px}
.film-header nav{display:flex;align-items:center;gap:1.5rem}
.film-header nav a{text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.film-header nav a:hover{color:var(--gold)}
.enter-link{padding:.7rem 1rem;border:1px solid #e4b96b66;border-radius:999px}
.film-menu{display:none;background:none;border:0;color:inherit}
.prologue{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.prologue>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:openingShot 16s ease-out both}
.prologue-shade{position:absolute;inset:0;background:linear-gradient(90deg,#03070be8 0%,#03070b73 48%,#03070b35),linear-gradient(0deg,#03070b 0%,transparent 38%)}
.prologue-copy{position:relative;z-index:2;width:min(790px,88vw);padding:18vh 7vw 11vh}
.overline{margin:0 0 1.2rem;color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.prologue h1{margin:0;font-family:"Libre Caslon Display",serif;font-size:clamp(4.2rem,10vw,10rem);font-weight:400;line-height:.75;letter-spacing:-.055em}
.prologue h1 em{color:var(--gold);font-weight:400}
.dek{max-width:670px;margin:2.4rem 0 1.2rem;font-family:"Libre Caslon Display",serif;font-size:clamp(1.25rem,2vw,2rem);line-height:1.35}
.byline{color:#d3cec3}
.prologue-copy>a{display:inline-flex;margin-top:1.8rem;text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem}
.visual-note{position:absolute;z-index:2;right:2.5vw;bottom:2rem;width:min(340px,42vw);margin:0;color:#c8c0b2;font-size:.68rem;line-height:1.5;text-align:right}
.feature-film{padding:clamp(5rem,10vw,9rem) clamp(1.2rem,7vw,7rem);background:radial-gradient(circle at 50% 0,#49331535,transparent 45%),#03070b}
.feature-film-copy{max-width:850px;margin:0 auto 2.4rem;text-align:center}
.feature-film-copy h2{margin:.2rem 0 1rem;font-family:"Libre Caslon Display",serif;font-size:clamp(3rem,6vw,6rem);font-weight:400;line-height:.96;letter-spacing:-.045em}
.feature-film-copy p:last-child{max-width:650px;margin:0 auto;color:#cfc8bc;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.65}
.feature-film-player{display:block;width:min(1180px,100%);aspect-ratio:16 / 9;margin:0 auto;border:1px solid #e4b96b66;border-radius:18px;background:#000;box-shadow:0 30px 90px #000b,0 0 50px #e4b96b18;object-fit:contain}
.cinema-scene{--scene-progress:0;position:relative;min-height:180vh}
.scene-frame{position:sticky;top:0;height:100svh;overflow:hidden;background:#071018}
.scene-frame:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;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='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.scene-frame img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--scene-progress)*.06)) translate3d(calc((var(--scene-progress) - .5)*-2.5%),calc((var(--scene-progress) - .5)*-1.5%),0);filter:saturate(.88) contrast(1.04);will-change:transform}
.scene-right .scene-frame img{transform:scale(calc(1.11 - var(--scene-progress)*.05)) translate3d(calc((var(--scene-progress) - .5)*2.5%),calc((var(--scene-progress) - .5)*-1%),0)}
.scene-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#03070bee 0%,#03070b9c 38%,transparent 70%),linear-gradient(0deg,#03070b8f,transparent 45%,#03070b45)}
.scene-right .scene-vignette{background:linear-gradient(270deg,#03070bee 0%,#03070b9c 38%,transparent 70%),linear-gradient(0deg,#03070b8f,transparent 45%,#03070b45)}
.scene-number{position:absolute;right:3vw;top:12vh;font-family:"Libre Caslon Display",serif;font-size:clamp(5rem,14vw,13rem);line-height:1;color:#ffffff0d}
.scene-copy{position:relative;z-index:3;width:min(660px,88vw);margin-top:-94vh;margin-left:7vw;padding:10vh 0 38vh;transform:translateY(calc((.5 - var(--scene-progress))*30px));opacity:calc(.45 + var(--scene-progress)*1.2)}
.scene-right .scene-copy{margin-left:auto;margin-right:7vw}
.scene-copy h2,.epilogue h2{margin:.2rem 0 1.6rem;font-family:"Libre Caslon Display",serif;font-size:clamp(3rem,6vw,6.2rem);font-weight:400;line-height:.94;letter-spacing:-.045em}
.scene-copy>p:not(.overline):not(.caption){font-size:clamp(1rem,1.25vw,1.22rem);line-height:1.78;color:#e2ddd3;text-shadow:0 2px 14px #000}
.scene-copy a{color:#ffe2a6}
.scene-copy blockquote{margin:2rem 0 0;padding:1.4rem 0 1.4rem 1.4rem;border-left:1px solid var(--gold);font-family:"Libre Caslon Display",serif;font-size:1.45rem;line-height:1.5}
.doctrine-note,.caption{padding:1rem 1.2rem;border:1px solid #e4b96b3b;background:#080b0cc7;backdrop-filter:blur(10px)}
.caption{font-size:.78rem!important;line-height:1.55!important}
.caption span{display:block;margin-bottom:.35rem;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.final-scene{min-height:200vh}
.epilogue{position:relative;z-index:5;margin-top:-1px;padding:18vh 7vw;background:radial-gradient(circle at 50% 0,#49331545,transparent 34%),#03070b;text-align:center}
.epilogue>p{max-width:800px;margin:1rem auto;color:#d7d1c7;font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.65}
.epilogue .overline{font-size:.72rem}
.closing-lines{margin:10vh auto;max-width:1000px}
.closing-lines p{margin:.35rem;font-family:"Libre Caslon Display",serif;font-size:clamp(2rem,4.6vw,5rem);line-height:1.05}
.closing-lines p:last-child{color:var(--gold)}
.epilogue-actions{display:flex;justify-content:center;align-items:center;gap:1.5rem;flex-wrap:wrap}
.epilogue-actions a{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;text-decoration:none}
.primary-action{padding:1rem 1.4rem;background:var(--gold);color:#15100a!important;border-radius:999px;font-weight:700}
.editorial-note{margin-top:12vh!important;padding-top:2rem;border-top:1px solid #ffffff20!important;font-size:.72rem!important;color:#8f8a82!important}
.film-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:2.5rem 4vw;border-top:1px solid #ffffff16;color:#aaa49a}
.film-footer p{margin:0;font-size:.78rem}
@keyframes openingShot{from{transform:scale(1.12)}
to{transform:scale(1.02)}
}
@media(max-width:800px){.film-header{padding:.85rem 1rem}
.film-header nav{position:absolute;top:100%;right:1rem;display:none;flex-direction:column;align-items:flex-start;padding:1rem;background:#071018f4;border:1px solid #ffffff1c}
.film-header.is-open nav{display:flex}
.film-menu{display:block}
.film-menu span{display:block;width:24px;height:1px;margin:6px;background:currentColor}
.prologue-copy{padding-left:1.2rem;padding-bottom:16vh}
.prologue h1{font-size:clamp(3.6rem,18vw,7rem)}
.visual-note{left:1.2rem;right:auto;width:80%;text-align:left}
.cinema-scene{min-height:165vh}
.scene-vignette,.scene-right .scene-vignette{background:linear-gradient(0deg,#03070bf7 0%,#03070bab 50%,transparent 82%)}
.scene-copy,.scene-right .scene-copy{margin-left:1.2rem;margin-right:1.2rem;margin-top:-92vh;padding-top:43vh;padding-bottom:22vh;width:auto}
.scene-copy h2{font-size:clamp(2.8rem,13vw,4.8rem)}
.scene-copy>p:not(.overline):not(.caption){font-size:1rem;line-height:1.65}
.film-footer{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.prologue>img{animation:none}
.scene-frame img,.scene-right .scene-frame img,.scene-copy{transform:none!important;will-change:auto}
.film-progress i{transition:none}
}
.final-mark{display:grid;grid-template-columns:auto auto 34px auto;align-items:center;justify-content:center;gap:1rem;margin:8vh auto 4vh;color:var(--gold);filter:drop-shadow(0 0 28px #e4b96b55)}
.final-mark span{grid-column:1/-1;font-size:clamp(4rem,8vw,8rem);line-height:.7}
.final-mark strong{font-size:clamp(1.1rem,2.2vw,2rem);letter-spacing:.28em}
.final-mark i{display:block;width:34px;height:1px;background:var(--gold);box-shadow:0 0 16px var(--gold)}
.os-invitation{font-family:"Libre Caslon Display",serif;font-size:clamp(1.4rem,2.4vw,2.2rem)!important}
@media(max-width:800px){.final-mark{grid-template-columns:auto;gap:.55rem}
.final-mark span,.final-mark strong,.final-mark i{grid-column:1}
.final-mark i{margin:auto}
}
