/* CRACKER: Truth & Fire · landing v2 */
:root{
  --black:#1F2421; --bone:#EDE4D3; --moss:#9A9E8A; --gold:#B8955A;
  --smoke:#6E6A64; --leather:#5C3A21; --ink:#171B19;
  --serif:"Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--black);color:var(--bone);font:300 16px/1.75 var(--sans);letter-spacing:.005em;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}

/* subtle static grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.label{font:500 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:48px}
.ph{color:var(--moss);font-style:italic;opacity:.85}

/* minimal top bar */
.top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:32px 48px}
.mark{font:500 15px/1 var(--serif);letter-spacing:.42em;color:var(--bone)}
.top nav{display:flex;gap:36px}
.top nav a{font:400 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(237,228,211,.78);transition:color .3s}
.top nav a:hover,.top nav a:focus-visible{color:var(--bone)}

/* 1 hero */
.hero{position:relative;height:100vh;min-height:640px;max-height:1100px;overflow:hidden;background:var(--ink)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 30%}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(23,27,25,.5) 0%,rgba(23,27,25,0) 16%,rgba(23,27,25,0) 70%,rgba(31,36,33,1) 100%),
  radial-gradient(ellipse 34% 34% at 76% 38%,rgba(23,27,25,.55),rgba(23,27,25,0) 100%),
  linear-gradient(to right,rgba(23,27,25,0) 42%,rgba(23,27,25,.35) 70%,rgba(23,27,25,.45) 100%)}
.hero-text{position:absolute;left:57%;right:4%;top:21%;z-index:2;text-align:center;padding:0}
.wordmark{font:500 clamp(54px,6.4vw,104px)/.9 var(--serif);letter-spacing:.2em;margin-right:-.2em;color:var(--bone);text-shadow:0 2px 30px rgba(0,0,0,.4)}
.sub{font:italic 400 clamp(22px,2.4vw,34px)/1.2 var(--serif);color:#D3B680;text-shadow:0 1px 16px rgba(0,0,0,.5);margin-top:18px;letter-spacing:.04em}
.genre{margin-top:16px;font:500 11px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.logline{max-width:470px;margin:30px auto 0;font:300 15px/1.75 var(--sans);color:var(--bone);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.credit{margin-top:26px;font:400 11px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(237,228,211,.85);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.credit span{margin:0 .6em;color:var(--gold)}

/* 2 reel */
.reel{padding:160px 48px 150px}
.frame{max-width:1080px;margin:0 auto;aspect-ratio:16/9;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.frame video{width:100%;height:100%;object-fit:cover}
.caption{text-align:center;margin-top:26px;font:italic 400 18px/1.5 var(--serif);color:var(--moss)}
.caption .ph{display:block;font-size:15px;margin-top:4px}

/* 3 story */
.story{background:var(--bone);color:var(--black);padding:170px 32px}
.story .col{max-width:620px;margin:0 auto}
.story p{font-size:17px;line-height:1.85;color:#3a3833;margin-top:1.4em}
.story .lede{font:400 clamp(28px,3vw,38px)/1.32 var(--serif);color:var(--black);margin:0 0 1.6em;text-align:center}
.story .lede + p{margin-top:0}
.story .about-label{margin-top:3.4em;text-align:center;font:500 11px/1 var(--sans,Inter,sans-serif);letter-spacing:.28em;text-transform:uppercase;color:#8a7a52}
.story .about{margin-top:1em;text-align:center;font:italic 400 21px/1.6 var(--serif);color:var(--black)}

/* 4 band */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:var(--black)}
.band figure{aspect-ratio:3/4;overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover;filter:saturate(.88)}

/* 3b story plates */
.plates{max-width:1080px;margin:110px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.plates figure{margin:0}
.plates img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.9);box-shadow:0 20px 50px rgba(31,36,33,.18)}
.plates figcaption{margin-top:14px;font:italic 400 17px/1.45 var(--serif);color:#5a564e;text-align:center}

/* 4b characters */
.characters{padding:170px 48px 40px}
.cast{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:36px}
.char .cimg{aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(154,158,138,.22);margin-bottom:26px;background:#232825}
.char .cimg img{width:100%;height:100%;object-fit:cover;filter:saturate(.86)}
.char h3{font:500 22px/1.15 var(--serif);letter-spacing:.01em;color:var(--bone)}
.char p{margin-top:12px;font-size:13.5px;line-height:1.7;color:rgba(237,228,211,.76)}
.cast-note{max-width:1240px;margin:56px auto 0;text-align:center;font:italic 400 15px/1.5 var(--serif);color:var(--moss)}

/* 5 people */
.people{padding:170px 48px 130px}
.pair{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:96px}
.portrait{aspect-ratio:1178/1086;background:linear-gradient(160deg,#2a302c,#232825);border:1px solid rgba(154,158,138,.22);display:flex;align-items:center;justify-content:center;margin-bottom:34px}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;outline:1px solid rgba(237,228,211,.06);outline-offset:-10px}
.portrait{margin-left:0;margin-right:0;padding:0;overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.portrait span{font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--smoke)}
.person h2{font:500 32px/1.1 var(--serif);letter-spacing:.01em}
.role{font:400 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:12px 0 22px}
.person p:not(.role){font-size:15px;line-height:1.8;color:rgba(237,228,211,.82)}
.ph-note{margin-top:18px;font:400 10px/1.4 var(--sans)!important;letter-spacing:.22em;text-transform:uppercase;color:var(--moss)!important}

/* 6 company */
.company{padding:40px 32px 140px;text-align:center}
.company .logos{display:flex;justify-content:center;gap:22px;margin-bottom:26px}
.company .logos img{width:56px;height:56px;object-fit:cover;opacity:.85;filter:grayscale(.35)}
.company .logos img.round{border-radius:50%}
.company .logos img:not(.round){border-radius:2px}
.company p{font:italic 400 19px/1.5 var(--serif);color:rgba(237,228,211,.75);max-width:680px;margin:0 auto}
.company::before{content:"";display:block;width:40px;height:1px;background:var(--gold);opacity:.5;margin:0 auto 70px}

/* 7 contact */
.contact{background:var(--ink);padding:150px 32px;text-align:center}
.email{font:400 clamp(24px,2.6vw,32px)/1.3 var(--serif)}
.email a{border-bottom:1px solid rgba(184,149,90,.4);padding-bottom:4px;color:var(--bone)}
.signup{max-width:440px;margin:90px auto 0}
.signup label{display:block;font-size:13px;color:var(--moss);margin-bottom:18px}
.signup .row{display:flex;border-bottom:1px solid rgba(237,228,211,.3)}
.signup input{flex:1;min-width:0;background:none;border:0;color:var(--bone);font:300 15px/1 var(--sans);padding:12px 2px;outline:none}
.signup input::placeholder{color:var(--smoke)}
.signup button{background:none;border:0;color:var(--gold);font:500 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;cursor:pointer;padding:0 4px}
.signup button:hover{color:var(--bone)}
.fine{font-size:11px;color:var(--smoke);margin-top:16px;line-height:1.6}

/* 8 footer */
.foot{padding:56px 32px 64px;text-align:center;border-top:1px solid rgba(154,158,138,.14);font-size:12px;color:var(--smoke);line-height:2}
.foot a:hover{color:var(--bone)}
.foot .fine{margin-top:10px;font-size:10.5px;opacity:.8}

:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* responsive */
@media (max-width:900px){
  .hero-text{left:46%;right:4%}
  .pair{gap:64px}
  .band{grid-template-columns:1fr 1fr}
  .cast{grid-template-columns:repeat(3,1fr);gap:40px 28px}
}
@media (max-width:640px){
  .top{padding:22px 22px}
  .top nav{gap:18px}
  .top nav a{font-size:10px;letter-spacing:.16em}
  .mark{display:none}
  .top{justify-content:center}
  .hero{height:auto;min-height:0;max-height:none;padding-bottom:20px}
  .hero-img{position:relative;height:66svh;min-height:430px;object-position:30% 25%}
  .hero::after{background:linear-gradient(to bottom,rgba(23,27,25,.5) 0%,rgba(23,27,25,0) 14%,rgba(23,27,25,0) 40%,rgba(31,36,33,1) 64%)}
  .hero-text{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:-110px;padding:0 24px}
  .wordmark{letter-spacing:.16em;margin-right:-.16em}
  .logline{font-size:14px}
  .credit{letter-spacing:.16em;font-size:10px}
  .credit span{display:block;height:0;overflow:hidden}
  .reel{padding:110px 0 100px}
  .reel .label,.caption{padding:0 24px}
  .story{padding:110px 28px}
  .story p{font-size:16px}
  .plates{grid-template-columns:1fr;gap:40px;margin-top:80px}
  .characters{padding:110px 28px 20px}
  .cast{grid-template-columns:1fr 1fr;gap:44px 20px}
  .char h3{font-size:20px}
  .char p{font-size:13px}
  .char:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 10px)}
  .top nav{gap:14px}
  .people{padding:110px 28px 90px}
  .pair{grid-template-columns:1fr;gap:80px}
  .portrait{max-width:420px}
  .company{padding:20px 28px 100px}
  .contact{padding:110px 24px}
  .signup{margin-top:70px}
}