:root{
  --ink:#08090b; --ink2:#0d0f12; --bone:#ece7dc; --mist:#8d9298; --gold:#c9a96a;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--ink)}

canvas#film{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}
body::after{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* loader */
#loader{position:fixed;inset:0;z-index:50;background:var(--ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;transition:opacity 1s,visibility 1s}
body.ready #loader{opacity:0;visibility:hidden}
#loader .word{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,44px);
  letter-spacing:.6em;text-indent:.6em;color:var(--bone)}
#loader .sub{font-size:9px;letter-spacing:.5em;text-indent:.5em;color:var(--gold)}
#loadtrack{width:160px;height:1px;background:#1d2024}
#loadbar{height:1px;width:0;background:var(--gold);transition:width .2s}

/* nav */
nav.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;
  align-items:center;padding:30px 40px;mix-blend-mode:difference}
nav.top .brand{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.58em;
  text-indent:.58em;color:#fff;text-decoration:none}
nav.top .tag{font-size:8.5px;letter-spacing:.38em;color:#fff;opacity:.6}

/* film captions */
.cap{position:fixed;left:40px;bottom:44px;z-index:5;max-width:380px;opacity:0;transform:translateY(14px);
  transition:opacity 1.1s,transform 1.1s;pointer-events:none}
.cap.on{opacity:1;transform:none}
.cap .k{font-size:8.5px;letter-spacing:.48em;color:var(--gold);margin-bottom:10px}
.cap h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.04}
.cap p{margin-top:10px;font-size:11.5px;line-height:1.75;color:var(--mist);max-width:300px}

.scrollhint{position:fixed;right:40px;bottom:44px;z-index:5;font-size:8.5px;letter-spacing:.4em;
  color:var(--mist);writing-mode:vertical-rl;opacity:.75}
#livebadge{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);z-index:7;
  display:flex;align-items:center;gap:9px;font-size:8.5px;letter-spacing:.38em;text-indent:.38em;
  color:var(--bone);background:rgba(8,9,11,.42);backdrop-filter:blur(9px);
  padding:11px 20px 11px 16px;border:1px solid rgba(236,231,220,.13);border-radius:100px;
  opacity:0;transition:opacity 1.2s}
body.ready #livebadge{opacity:.92}
#livebadge i{width:6px;height:6px;border-radius:50%;background:#57d08a;
  box-shadow:0 0 9px rgba(87,208,138,.8);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

#dots{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;gap:15px;opacity:0;transition:opacity 1s}
body.ready #dots{opacity:1}
#dots button{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;flex-direction:row-reverse}
#dots i{width:4.5px;height:4.5px;border-radius:50%;background:#3c4147;display:block;transition:background .4s,transform .4s}
#dots button.on i{background:var(--gold);transform:scale(1.6)}
#dots span{font-size:8px;letter-spacing:.3em;color:var(--bone);opacity:0;transition:opacity .3s;white-space:nowrap}
#dots button:hover span{opacity:.85}

#reel{position:relative;z-index:1}
#endcard{position:fixed;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity 1.4s}
#endcard.on{opacity:1}
#endcard .t{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,56px);
  text-shadow:0 2px 34px rgba(0,0,0,.75);text-align:center}
#endcard .s{margin-top:12px;font-size:9px;letter-spacing:.5em;text-indent:.5em;color:var(--gold);text-align:center}

/* ---- content below the film ---- */
main{position:relative;z-index:4;background:linear-gradient(to bottom,transparent 0,var(--ink) 12vh);
  margin-top:-12vh}
section{padding:16vh 7vw}
.k{font-size:9px;letter-spacing:.5em;color:var(--gold);margin-bottom:22px}
.statement{max-width:900px}
.statement h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,84px);line-height:1.02;
  letter-spacing:-.01em}
.statement h2 em{font-style:italic;color:var(--gold)}
.statement p{margin-top:30px;max-width:520px;font-size:13.5px;line-height:2;color:var(--mist)}

/* specs */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:#191c20;
  border-top:1px solid #191c20;border-bottom:1px solid #191c20;margin-top:10vh}
.spec{background:var(--ink);padding:42px 30px}
.spec .n{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,44px);color:var(--bone)}
.spec .n small{font-size:.45em;color:var(--gold);margin-left:4px;letter-spacing:.1em}
.spec .l{margin-top:8px;font-size:9px;letter-spacing:.34em;color:var(--mist)}

/* stills band */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:8vh}
.band figure{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink2);
  outline:1px solid #1a1d21;outline-offset:-1px}
.band img{width:100%;height:100%;object-fit:cover;filter:saturate(.95);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.band figure:hover img{transform:scale(1.045)}
.band figcaption{position:absolute;left:20px;bottom:16px;font-size:9px;letter-spacing:.34em;color:var(--bone);
  text-shadow:0 1px 14px rgba(0,0,0,.8)}

/* charter */
#charter{text-align:center;padding-bottom:12vh}
#charter h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1.05}
#charter p{margin:24px auto 44px;max-width:440px;font-size:12.5px;line-height:2;color:var(--mist)}
.cta{display:inline-block;font-size:10px;letter-spacing:.42em;text-indent:.42em;color:var(--ink);
  background:var(--gold);padding:20px 44px 20px 38px;text-decoration:none;border-radius:2px;
  transition:background .4s,transform .4s}
.cta:hover{background:#dcc088;transform:translateY(-2px)}
.cta2{display:inline-block;margin-left:22px;font-size:10px;letter-spacing:.42em;text-indent:.42em;
  color:var(--bone);padding:20px 8px;text-decoration:none;border-bottom:1px solid #2a2e33;transition:border-color .4s}
.cta2:hover{border-color:var(--gold)}

footer{position:relative;z-index:4;background:var(--ink);border-top:1px solid #16181c;padding:7vh 7vw 5vh}
footer .row{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:baseline}
footer .b{font-family:var(--serif);letter-spacing:.55em;text-indent:.55em;font-size:15px}
footer .r{font-size:8.5px;letter-spacing:.3em;color:#565b60}
footer p{font-size:9.5px;color:#565b60;line-height:1.8;max-width:660px;margin-top:18px}

@media(max-width:640px){
  nav.top{padding:22px 22px}
  .cap{left:22px;bottom:96px;max-width:76vw}
  .cap h2{font-size:26px}
  #dots{display:none}
  section{padding:12vh 6vw}
  .cta2{margin-left:0;margin-top:16px}
}