@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Oswald:wght@400;600&family=Special+Elite&display=swap');
:root{--amber:#d9952b;--rust:#8a3b12;--dust:#e9d3a8;--ink:#1b120a}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--dust);font-family:'Special Elite',Georgia,serif;line-height:1.6}
body:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65));}
.hero{min-height:min(100vh,860px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6vh 6vw;
background:linear-gradient(180deg,rgba(27,18,10,.35),rgba(27,18,10,.95)),url(poster.jpg) center/cover;background:linear-gradient(180deg,rgba(27,18,10,.35),rgba(27,18,10,.95)),url(poster.jpg) center/cover}
.eyebrow{font-family:Oswald,sans-serif;letter-spacing:.5em;text-transform:uppercase;color:var(--amber);font-size:.9rem}
h1{font-family:'Alfa Slab One',serif;font-size:clamp(3.2rem,13vw,10rem);line-height:.95;color:var(--amber);text-shadow:4px 4px 0 var(--rust),8px 8px 0 #000;margin:.3em 0;letter-spacing:.02em}
.tagline{font-family:Oswald,sans-serif;font-size:clamp(1.2rem,3.5vw,2rem);letter-spacing:.25em;text-transform:uppercase}
.btn{display:inline-block;margin-top:2rem;padding:.8rem 2rem;border:2px solid var(--amber);color:var(--amber);font-family:Oswald;letter-spacing:.2em;text-decoration:none;text-transform:uppercase}
.btn:hover{background:var(--amber);color:var(--ink)}
section{max-width:960px;margin:0 auto;padding:4rem 6vw;text-align:center}
h2{font-family:'Alfa Slab One',serif;color:var(--amber);font-size:clamp(1.6rem,5vw,2.6rem);margin-bottom:1.2rem}
.logline{font-size:clamp(1.05rem,2.4vw,1.35rem)}
video{width:100%;border:6px solid #2c1d10;box-shadow:0 0 0 2px var(--rust),0 20px 50px #000;background:#000}
.rule{width:120px;height:3px;background:var(--rust);margin:0 auto 2rem}
.contact a{color:var(--amber);font-size:1.2rem}
footer{text-align:center;padding:3rem 6vw;font-family:Oswald;font-size:.9rem;color:#a8916a;border-top:1px solid #3a2815}
footer .credit{font-size:1.1rem;color:var(--dust);letter-spacing:.15em;text-transform:uppercase;margin-bottom:.5rem}
@media(max-width:600px){.hero{min-height:min(100vh,620px)}section{padding:3rem 6vw}}

.hero{min-height:auto;padding:5vh 4vw 4vh;background:linear-gradient(180deg,rgba(27,18,10,.2),rgba(27,18,10,.95)),url(hero_bg.jpg) center/cover}
.keyart{width:100%;max-width:720px;height:auto;border:3px solid #2c1d10;box-shadow:0 0 0 2px var(--amber),0 25px 60px #000}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.families{max-width:1200px}.hint{font-family:Oswald;font-size:.95rem;color:#c9b48a;margin-bottom:1rem}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.2rem}
.tabs button{font-family:Oswald;letter-spacing:.15em;font-size:1rem;padding:.55rem 1.2rem;background:transparent;color:var(--amber);border:2px solid var(--amber);cursor:pointer}
.tabs button[aria-selected=true],.tabs button:hover{background:var(--amber);color:var(--ink)}
.stage{position:relative}.frame{position:relative;line-height:0;border:3px solid #2c1d10;box-shadow:0 0 0 2px var(--rust),0 20px 50px #000}
.frame img{width:100%;height:auto;display:block}
.spot{position:absolute;background:transparent;border:2px solid transparent;cursor:pointer;padding:0;border-radius:4px}
.spot:hover,.spot[aria-expanded=true]{border-color:rgba(217,149,43,.55);background:rgba(217,149,43,.08)}
.spot:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.card{position:absolute;z-index:5;width:300px;text-align:left;background:rgba(20,13,7,.96);border:2px solid var(--amber);padding:1rem 1.1rem;box-shadow:0 15px 40px #000;line-height:1.45}
.card h3{font-family:'Alfa Slab One',serif;color:var(--amber);font-size:1.15rem;margin-bottom:.3rem;padding-right:1.5rem}
.card .role{font-family:Oswald;font-size:.85rem;color:#c9b48a;margin-bottom:.5rem}.card .bio{font-size:.95rem}
.card .x{position:absolute;top:.3rem;right:.5rem;background:none;border:0;color:var(--amber);font-size:1.6rem;cursor:pointer;line-height:1}
@media(max-width:759px){.card{position:relative;width:auto;margin-top:1rem;left:auto;top:auto}}

.hero .keyart{max-width:520px}

/* interactive poster */
.poster{position:relative;width:100%;max-width:520px;margin:0 auto;line-height:0}
.poster .keyart{max-width:100%;display:block}
.pspots{position:absolute;inset:0}
.pcirc{position:absolute;border-radius:50%;cursor:pointer}
.pcirc:hover{box-shadow:0 0 0 3px rgba(217,149,43,.6),0 0 30px rgba(217,149,43,.35)}
.pface{position:absolute;background:transparent;border:2px solid transparent;border-radius:4px;cursor:pointer;padding:0}
.pface:hover,.pface[aria-expanded=true]{border-color:rgba(217,149,43,.6);background:rgba(217,149,43,.08)}
.pface:focus-visible,.pplay:focus-visible,.pcirc:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.pplay{position:absolute;white-space:nowrap;transform:translate(-50%,-50%);font-family:Oswald,sans-serif;font-size:.72rem;letter-spacing:.12em;line-height:1;padding:.35rem .55rem;background:rgba(20,13,7,.88);color:var(--amber);border:1.5px solid var(--amber);border-radius:999px;cursor:pointer;text-transform:uppercase}
.pplay:hover{background:var(--amber);color:var(--ink)}
.pcard{width:260px;line-height:1.45}
.phint{margin-top:1rem}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:4vw}
.lightbox[hidden]{display:none}
.lb-inner{position:relative;width:min(960px,100%)}
.lb-inner video{width:100%;display:block;border:3px solid #2c1d10;box-shadow:0 0 0 2px var(--amber),0 25px 60px #000;background:#000}
.lb-x{position:absolute;top:-2.6rem;right:0;background:none;border:2px solid var(--amber);color:var(--amber);font-size:1.6rem;line-height:1;width:2.2rem;height:2.2rem;border-radius:50%;cursor:pointer}
.lb-cap{font-family:Oswald;letter-spacing:.15em;text-transform:uppercase;color:var(--dust);text-align:center;margin-top:.8rem}
body.lb-open{overflow:hidden}
@media(max-width:759px){.pcard{position:fixed;left:4vw!important;right:4vw;bottom:4vw;top:auto!important;width:auto;z-index:20}}