@font-face{font-family:FilmSerif;src:url('/assets/NotoSerif-Italic.ttf') format('truetype');font-style:italic;font-display:swap}@font-face{font-family:FilmSans;src:url('/assets/BeVietnamPro-Bold.ttf') format('truetype');font-weight:700;font-display:swap}.nav{position:sticky!important;top:0!important;z-index:100!important;background:#f3eee5!important;min-height:76px}.film-hero{position:relative;background:#172324;color:#fff1e3;isolation:isolate}.film-hero .screen{position:relative;width:min(100%,calc((100svh - 76px)*16/9));aspect-ratio:16/9;margin:auto;overflow:hidden;background:#172324}.film-hero canvas{display:block;width:100%;height:100%}.film-hero .screen:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101819a8 0%,#1018193a 35%,transparent 65%);pointer-events:none}.film-hero .copy{position:absolute;z-index:1;left:6%;bottom:17%;pointer-events:none;max-width:80%;color:#fff4e8;text-shadow:0 2px 24px #0005}.film-hero .copy p{font-size:clamp(8px,1vw,13px);letter-spacing:.14em;color:inherit}.film-hero h1{font:700 clamp(28px,4.2vw,72px)/1.2 FilmSans,system-ui,sans-serif;letter-spacing:-.045em;margin:20px 0}.film-hero h1 em{display:inline-block;font-family:FilmSerif,serif;font-weight:400;font-style:italic;letter-spacing:-.04em;color:#efbdac;padding:0 .05em .15em 0}.film-hero .music-toggle{position:absolute;z-index:3;left:90.6%;top:83.4%;transform:translate(-50%,-50%);width:clamp(38px,5vw,76px);height:auto;aspect-ratio:1;display:grid;place-items:center;border:1px solid #bcb1a166;background:#f2ecdf;color:#294651;border-radius:50%;padding:0;isolation:isolate;cursor:pointer}.film-hero .music-toggle:before{content:'';position:absolute;z-index:-1;inset:-65%;border-radius:50%;background:radial-gradient(circle,#f2ecdf 0%,#f2ecdf 38%,#f2ecdfd9 49%,#f2ecdf55 62%,transparent 74%);pointer-events:none}.film-hero .music-toggle svg{width:45%;height:45%}.film-hero .music-toggle[aria-pressed=true] .mute-slash{display:none}.film-hero .music-toggle:hover{color:#87445e}.film-hero .music-toggle:focus-visible{outline:2px solid #87445e;outline-offset:7px}.film-bottom{position:absolute;z-index:4;bottom:14px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;pointer-events:none;font-size:8px;letter-spacing:.12em;color:#f8eee0}.film-bottom #status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.film-bottom button{pointer-events:auto;width:30px;height:30px;border:1px solid #fff5;border-radius:50%;background:#17232455;color:#fff}.film-bottom [hidden]{display:none!important}.film-hero~audio,body>video{display:none}@media(max-width:600px){.nav{min-height:68px}.film-hero .screen{width:100%}.film-hero .copy{bottom:18%}.film-hero .copy p{font-size:6px}.film-hero h1{font-size:clamp(19px,5.2vw,31px);margin:8px 0}.film-hero .music-toggle{width:30px}.film-bottom{bottom:5px;font-size:6px}.film-bottom button{width:24px;height:24px}}

.film-bottom button{font-size:10px;line-height:1;padding:0;display:grid;place-items:center;min-width:0;min-height:0}

/* Founder-approved quieter Hero title; anchored to actual film bounds. */
.film-hero .copy{bottom:12%;max-width:78%}.film-hero h1{font-size:clamp(25px,3.78vw,65px);margin:0;line-height:1.2}
@media(max-width:600px){.film-hero .copy{bottom:13%;max-width:78%}.film-hero h1{font-size:clamp(17px,4.68vw,28px);margin:0}}

.film-hero .film-bottom{justify-content:flex-end}

/* Tighter soft edge around the existing watermark-sized sound control. */
.film-hero .music-toggle:before{inset:-35%;background:radial-gradient(circle,#f2ecdf 0%,#f2ecdf 34%,#f2ecdfed 45%,#f2ecdf66 60%,transparent 74%)}