:root{
  --black:#080808;--white:#f2eee8;--muted:#aaa4a0;--red:#fa3d2d;
  --line:rgba(242,238,232,.20);--mono:'DM Mono','Courier New',monospace;
  --display:'Anton',Impact,'Arial Black','Liberation Sans',sans-serif;--sans:'Inter',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:75px}
body{margin:0;min-width:320px;background:var(--black);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:#080808}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:20px;z-index:200;padding:12px 18px;background:white;color:black}
.skip-link:focus{top:20px}
.site-header{position:fixed;inset:0 0 auto;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:3rem;padding:23px clamp(22px,3.1vw,58px);background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,0));transition:background .35s ease,padding .35s ease}
.site-header.is-scrolled,.site-header.menu-open{background:rgba(8,8,8,.94);box-shadow:0 1px 0 rgba(255,255,255,.11);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.site-header.is-scrolled{padding-top:15px;padding-bottom:15px}
.header-mark{display:inline-flex;gap:16px;align-items:center;flex-shrink:0}
.mark-box{display:inline-block;font:700 29px/.9 var(--display);letter-spacing:-.08em}
.mark-slash{color:var(--red);padding:0 1px}
.header-mark-label{font:500 9px/1.2 var(--mono);letter-spacing:.14em}
.primary-nav{display:flex;align-items:center;gap:clamp(20px,3.2vw,56px)}
.nav-link{font:500 11px/1 var(--mono);letter-spacing:.07em;white-space:nowrap;transition:color .2s ease}
.nav-link:hover{color:var(--red)}
.nav-link span{font-size:8px;vertical-align:top;position:relative;top:-3px;margin-left:3px;color:var(--red)}
.menu-toggle{display:none}
.hero{position:relative;isolation:isolate;min-height:720px;height:100svh;overflow:hidden;background:#000}
.hero-image,.hero-mobile-ambience{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:-4}
.hero-image{animation:hero-reveal 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes hero-reveal{from{opacity:.55;transform:scale(1.052)}to{opacity:1;transform:scale(1)}}
.hero-mobile-ambience{display:none}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.32) 22%,rgba(0,0,0,.0) 49%,rgba(0,0,0,.04) 68%,rgba(0,0,0,.85) 100%),linear-gradient(90deg,rgba(0,0,0,.14),transparent 42%,rgba(0,0,0,.08))}
.hero-noise{position:absolute;inset:0;z-index:-1;opacity:.085;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
.hero-inner{position:relative;display:flex;flex-direction:column;min-height:100%;padding:clamp(96px,10vh,143px) clamp(22px,3.1vw,58px) clamp(28px,4.6vh,60px)}
.hero-eyebrow{font:500 clamp(9px,.76vw,12px)/1.25 var(--mono);letter-spacing:.21em;display:flex;align-items:center;gap:12px;opacity:.8;margin-bottom:18px}
.live-dot{display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;box-shadow:0 0 13px rgba(250,61,45,.7)}
.hero-wordmark{margin:0 0 auto;white-space:nowrap;font:700 clamp(67px,8.52vw,195px)/.98 var(--display);letter-spacing:-.033em;word-spacing:.035em;text-transform:uppercase;max-width:100%;filter:drop-shadow(0 2px 12px rgba(0,0,0,.22))}
.hero-wordmark span{display:inline}
.hero-bottom{width:100%;display:flex;align-items:end;justify-content:space-between;gap:36px}
.micro-label{font:500 9px/1.25 var(--mono);letter-spacing:.18em;color:var(--red)}
.hero-caption p{font:500 clamp(10px,.8vw,13px)/1.9 var(--mono);letter-spacing:.085em;margin:14px 0 0}
.hero-scroll{display:flex;gap:22px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.1em;white-space:nowrap}
.circle-arrow{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(242,238,232,.65);border-radius:50%;font:400 22px/1 var(--sans);transition:background .2s ease,border .2s ease,transform .3s ease}
.hero-scroll:hover .circle-arrow{background:var(--red);border-color:var(--red);transform:translateY(4px)}
.hero-side-index{position:absolute;right:clamp(7px,.9vw,20px);top:50%;writing-mode:vertical-rl;font:500 9px var(--mono);letter-spacing:.18em;transform:translateY(-50%);color:rgba(255,255,255,.65)}
.films{background:#0a0a0a;padding-bottom:clamp(92px,12vw,190px)}
.section-intro{padding:clamp(72px,10vw,160px) clamp(22px,4.4vw,86px) 0}
.section-kicker{display:inline-flex;gap:15px;align-items:center;font:500 10px/1.2 var(--mono);letter-spacing:.16em}
.asterisk{font:400 24px/1 var(--sans);color:var(--red)}
.section-heading-row{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:30px 0 30px}
.section-heading-row h2{margin:0;font:700 clamp(94px,14vw,280px)/.9 var(--display);letter-spacing:-.02em;white-space:nowrap}
.section-heading-row h2 em{font-style:normal;color:var(--red)}
.section-heading-row p{font:500 clamp(10px,.84vw,13px)/1.8 var(--mono);letter-spacing:.07em;text-align:right;padding-bottom:6px}
.thin-rule,.about-bottom-rule{height:1px;background:var(--line)}
.film{margin:0;padding:0}
.film-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(22px,4.4vw,86px);font:500 10px/1.2 var(--mono);letter-spacing:.13em}
.film-number{font-size:12px}
.slash{color:var(--red)}
.film-meta-side{display:flex;align-items:center;gap:22px;color:var(--muted)}
.red-chip{color:var(--red)}
.film-stage{position:relative;width:100%;aspect-ratio:21/9;min-height:340px;overflow:hidden;background:#15100f;isolation:isolate}
.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.81) brightness(.68);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .7s ease}
.film-stage:hover .film-poster{transform:scale(1.028);filter:saturate(.88) brightness(.79)}
.film-stage-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 30%,rgba(0,0,0,.38) 100%);pointer-events:none}
.film-stage-corner{position:absolute;z-index:2;font:500 10px/1.3 var(--mono);letter-spacing:.16em;pointer-events:none}
.film-stage-corner-top{top:34px;left:clamp(22px,4.4vw,86px)}
.film-stage-corner-bottom{bottom:32px;right:clamp(22px,4.4vw,86px)}
.film-play{position:absolute;inset:0;z-index:3;border:0;background:transparent;color:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;cursor:pointer}
.play-ring{display:grid;place-items:center;width:clamp(78px,9vw,134px);height:clamp(78px,9vw,134px);border:1px solid rgba(255,255,255,.75);border-radius:100%;background:rgba(0,0,0,.13);backdrop-filter:blur(5px);transition:transform .32s ease,background .32s ease,border-color .32s ease}
.play-ring svg{width:31px;height:31px;margin-left:4px}
.film-play:hover .play-ring,.film-play:focus-visible .play-ring{transform:scale(1.08);background:var(--red);border-color:var(--red)}
.play-label{font:500 10px/1 var(--mono);letter-spacing:.2em;text-shadow:0 1px 12px #000}
.film-stage iframe{position:absolute;inset:0;z-index:10;width:100%;height:100%;border:0;background:#000}
.film-stage.is-playing .film-poster,.film-stage.is-playing .film-stage-shade,.film-stage.is-playing .film-stage-corner,.film-stage.is-playing .film-play{display:none}
.film-footer{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:26px clamp(22px,4.4vw,86px) 54px}
.film-footer h3{margin:0;font:700 clamp(82px,11.4vw,216px)/1 var(--display);letter-spacing:-.018em;text-transform:uppercase}
.title-period{color:var(--red)}
.text-link{display:inline-flex;gap:20px;align-items:center;flex-shrink:0;margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.1em;transition:border-color .25s ease,color .25s ease}
.text-link span{font:400 21px var(--sans);line-height:.7}
.text-link:hover{color:var(--red);border-color:var(--red)}
.film-interlude{display:flex;justify-content:center;align-items:center;gap:23px;margin:0 clamp(22px,4.4vw,86px) 55px;color:#8e8780;font:500 9px/1.5 var(--mono);letter-spacing:.15em;text-align:center}
.interlude-line{height:1px;flex:1;background:var(--line)}
.about{padding:clamp(70px,10vw,170px) clamp(22px,4.4vw,86px) clamp(80px,10vw,160px);background:#13100f}
.about-top,.connect-top{display:flex;justify-content:space-between;align-items:center;gap:18px}
.about-index,.connect-top>span:last-child{color:var(--muted);font:500 10px/1.4 var(--mono);letter-spacing:.11em}
.about-body{display:grid;grid-template-columns:1.55fr .7fr;gap:clamp(30px,5vw,110px);margin:clamp(52px,7vw,120px) 0 110px}
.about-statement h2{margin:0;font:700 clamp(75px,10.2vw,202px)/1.01 var(--display);letter-spacing:-.015em}
.about-statement h2 span{color:var(--red)}
.about-red-line{width:80px;height:2px;background:var(--red);margin-top:39px}
.about-copy{max-width:500px;padding-top:12px}
.about-copy p{margin:18px 0 28px;font:400 clamp(17px,1.36vw,24px)/1.65 var(--sans);letter-spacing:-.016em}
.about-copy p+p{color:#b4ada8;font-size:clamp(15px,1.05vw,18px);line-height:1.8}
.about-copy .about-signoff{color:var(--red);font:500 10px/1.9 var(--mono);letter-spacing:.12em;margin-top:50px}
.about-bottom-rule{opacity:.6}
.connect{padding:clamp(80px,10vw,160px) clamp(22px,4.4vw,86px) clamp(60px,7vw,110px);background:#090909}
.connect h2{font:700 clamp(94px,13.1vw,260px)/1 var(--display);letter-spacing:-.018em;margin:clamp(34px,5vw,95px) 0 clamp(55px,8vw,115px)}
.connect h2 span{color:var(--red)}
.social-links{border-top:1px solid var(--line)}
.social-link{display:grid;grid-template-columns:65px 1fr minmax(120px,220px) 48px;gap:20px;align-items:center;min-height:112px;border-bottom:1px solid var(--line);transition:padding .25s ease,background .25s ease}
.social-link:hover{padding-left:18px;background:rgba(255,255,255,.028)}
.social-no,.social-handle{font:500 10px/1.4 var(--mono);letter-spacing:.1em;color:var(--muted)}
.social-name{font:700 clamp(35px,4vw,68px)/1 var(--display)}
.social-arrow{font:400 33px/1 var(--sans);justify-self:end;transition:transform .2s ease,color .2s ease}
.social-link:hover .social-arrow{transform:translate(5px,-5px);color:var(--red)}
.footer{padding:30px clamp(22px,4.4vw,86px) 30px;background:#e9e4db;color:#15110f;overflow:hidden}
.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;font:500 10px/1.3 var(--mono);letter-spacing:.12em}
.footer-top a:hover{color:var(--red)}
.footer-wordmark{font:700 clamp(240px,41vw,850px)/.89 var(--display);white-space:nowrap;letter-spacing:-.075em;margin:30px 0 20px;text-align:center;user-select:none}
.footer-wordmark span{letter-spacing:-.08em}
.footer-wordmark .footer-dot{color:var(--red)}
.footer-bottom{border-top:1px solid rgba(10,10,10,.3);padding-top:24px;font-size:9px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.65,.2,1),transform .8s cubic-bezier(.2,.65,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
@media(max-width:1100px){
  .hero-wordmark{font-size:8.75vw}
  .about-body{grid-template-columns:1.25fr 1fr}
  .about-statement h2{font-size:10vw}
  .section-heading-row h2{font-size:13vw}
  .connect h2{font-size:12.6vw}
}
@media(max-width:700px){
  html{scroll-padding-top:64px}
  .site-header{padding:19px 21px}
  .site-header.is-scrolled{padding:15px 21px}
  .header-mark-label{display:none}
  .mark-box{font-size:27px}
  .menu-toggle{z-index:2;display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;width:44px;height:40px;border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;cursor:pointer}
  .menu-toggle span{width:19px;height:1px;background:currentColor;transition:transform .25s ease}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .primary-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:28px 22px 35px;background:#080808;border-bottom:1px solid #333;flex-direction:column;align-items:stretch;gap:0}
  .site-header.menu-open .primary-nav{display:flex}
  .nav-link{display:flex;justify-content:space-between;border-bottom:1px solid #2d2d2d;padding:18px 0;font-size:18px}
  .nav-link span{font-size:11px;top:0}
  .hero{min-height:640px;height:100svh}
  .hero-mobile-ambience{display:block;background:url('assets/band-red.webp') center / cover;filter:blur(35px) brightness(.3);transform:scale(1.2)}
  .hero-image{inset:auto -5% 18% -5%;width:110%;height:auto;max-height:55%;object-fit:contain;object-position:center;mask-image:linear-gradient(to bottom,transparent,black 18%,black 77%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 18%,black 77%,transparent);animation:hero-reveal-mobile 1.8s ease both}
  @keyframes hero-reveal-mobile{from{opacity:.5;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
  .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.52) 22%,transparent 35%,transparent 64%,rgba(0,0,0,.5) 83%,rgba(0,0,0,.98) 100%)}
  .hero-inner{padding:100px 21px 31px}
  .hero-eyebrow{font-size:9px;letter-spacing:.08em;margin-bottom:19px}
  .hero-wordmark{font-size:clamp(47px,12.65vw,90px);white-space:normal;letter-spacing:-.03em;line-height:.98;max-width:100%}
  .hero-wordmark span{display:block}
  .hero-bottom{align-items:end;gap:12px}
  .hero-caption p{font-size:9px;line-height:1.7}
  .hero-scroll{gap:0}
  .hero-scroll>span:first-child{display:none}
  .circle-arrow{width:46px;height:46px}
  .hero-side-index{display:none}
  .section-intro{padding:80px 22px 0}
  .section-heading-row{align-items:start;flex-direction:column;gap:10px;margin:34px 0 28px}
  .section-heading-row h2{font-size:clamp(77px,15.9vw,125px)}
  .section-heading-row p{font-size:9px;text-align:left;line-height:1.5}
  .film-meta{padding:18px 22px;font-size:9px}
  .film-meta-side{gap:10px}
  .film-meta-side span:last-child{display:none}
  .film-stage{aspect-ratio:16/10;min-height:0}
  .film-poster{object-position:center}
  .film-stage-corner{font-size:8px}
  .film-stage-corner-top{top:18px;left:22px}
  .film-stage-corner-bottom{bottom:17px;right:22px}
  .play-ring{width:77px;height:77px}
  .play-label{font-size:9px}
  .film-footer{padding:22px 22px 50px;align-items:start;flex-direction:column;gap:15px}
  .film-footer h3{font-size:clamp(70px,13.8vw,115px)}
  .text-link{margin:0;font-size:10px}
  .film-interlude{margin:0 22px 36px;font-size:8px;gap:9px}
  .films{padding-bottom:60px}
  .about{padding:85px 22px 80px}
  .about-top,.connect-top{align-items:start}
  .about-index{font-size:8px;text-align:right;max-width:145px}
  .about-body{grid-template-columns:1fr;gap:45px;margin:70px 0 80px}
  .about-statement h2{font-size:clamp(70px,14.5vw,118px)}
  .about-copy{padding:0}
  .about-copy p{font-size:18px;line-height:1.6}
  .about-copy p+p{font-size:16px}
  .connect{padding:88px 22px 80px}
  .connect-top>span:last-child{font-size:8px}
  .connect h2{font-size:clamp(70px,14.8vw,120px);margin:54px 0 70px}
  .social-link{grid-template-columns:28px minmax(0,1fr) 32px;gap:12px;min-height:92px}
  .social-no{font-size:9px}
  .social-name{font-size:clamp(32px,9vw,58px)}
  .social-handle{display:none}
  .social-arrow{font-size:27px}
  .footer{padding:30px 22px}
  .footer-top,.footer-bottom{font-size:9px}
  .footer-wordmark{font-size:46vw;margin:55px 0}
  .footer-bottom{flex-wrap:wrap;row-gap:13px}
  .footer-bottom span:last-child{display:none}
}
@media(max-width:390px){
 .hero-wordmark{font-size:12.2vw}
 .hero-caption p{font-size:8px}
 .film-footer h3{font-size:13.2vw}
 .section-heading-row h2{font-size:15vw}
 .about-statement h2{font-size:14vw}
 .connect h2{font-size:14vw}
}
@media(min-width:701px) and (max-height:650px){
  .hero{min-height:600px}
  .hero-inner{padding-top:90px;padding-bottom:25px}
  .hero-wordmark{font-size:8vw}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .reveal{opacity:1;transform:none}
}
