:root{--ink:#0d0d0c;--yellow:#e8d86a;--paper:#f3efe6}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ink);color:var(--paper);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.stage{position:relative;min-height:100svh;overflow:hidden;isolation:isolate}
.loop,.sea{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.loop{filter:grayscale(1) contrast(1.15) brightness(.78);opacity:0;transition:opacity 1.2s ease}
body.has-video .loop{opacity:1}
body.has-video .sea{display:none}
.grain{position:absolute;inset:-50%;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%),linear-gradient(to bottom,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.45))}
.copy{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:clamp(22vh,28vh,34vh) 24px 0;color:var(--yellow);text-shadow:0 1px 0 rgba(0,0,0,.35)}
.word{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:clamp(64px,13vw,168px);line-height:.9;letter-spacing:.04em;margin:0 0 10px;text-transform:uppercase}
.say{font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(22px,3.2vw,34px);letter-spacing:.12em;text-transform:uppercase;margin:0 0 22px;opacity:.9}
.say span{opacity:.5;margin:0 .1em}
.say em{font-style:normal;font-size:.62em;letter-spacing:.3em;margin-left:.9em;opacity:.75}
.meaning{font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(34px,6.2vw,72px);line-height:1.08;letter-spacing:.06em;text-transform:uppercase;text-align:justify;text-align-last:left;margin:0;word-spacing:.25em}
.tail{font-size:clamp(13px,1.2vw,15px);letter-spacing:.32em;text-transform:uppercase;color:var(--paper);opacity:.75;margin:34px 0 0}
.foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:0 24px calc(18px + env(safe-area-inset-bottom));font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper);opacity:.7}
.sound{background:none;border:1px solid rgba(243,239,230,.5);color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:10px 14px;border-radius:999px;cursor:pointer;min-height:40px}
.sound:hover{border-color:var(--paper)}
@media(max-width:600px){.copy{padding-top:24vh}.meaning{text-align:left;letter-spacing:.05em}}
@media(prefers-reduced-motion:reduce){.grain{animation:none}}