@font-face{font-family:Caladea;src:url(assets/fonts/Caladea-Regular.ttf);font-display:swap}
@font-face{font-family:Caladea;src:url(assets/fonts/Caladea-Bold.ttf);font-weight:bold;font-display:swap}
@font-face{font-family:Caladea;src:url(assets/fonts/Caladea-Italic.ttf);font-style:italic;font-display:swap}
@font-face{font-family:Caladea;src:url(assets/fonts/Caladea-BoldItalic.ttf);font-weight:bold;font-style:italic;font-display:swap}
:root{--paper:#f6f2e6;--ink:#1d1c1a;--red:#8a2e26;--gold:#d9b24a;--cream:#f6eedc;--card:#fffdf7;--pad:clamp(16px,4.4vw,56px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Caladea,Georgia,serif;font-size:19px;line-height:1.45;overflow-x:hidden}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1{font-size:clamp(44px,7vw,76px);line-height:1;margin:10px 0 6px}
h2{font-size:clamp(34px,5vw,44px);margin:0 0 6px;line-height:1.1}
h1 i,h2 i{color:var(--red)}
.kick{letter-spacing:5px;font-weight:bold;font-size:14px;color:var(--red);margin:0}
.sub{font-style:italic;margin:0 0 26px;max-width:760px}
.btn{display:inline-block;background:var(--red);color:var(--cream);font:bold 17px Caladea,Georgia,serif;letter-spacing:3px;padding:16px 28px;border:4px solid var(--ink);text-decoration:none;cursor:pointer;margin:0 10px 10px 0}
.btn.alt{background:var(--paper);color:var(--ink)}
.btn:hover{filter:brightness(1.08)}.btn:disabled{opacity:.55;cursor:wait}
:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.msg{font-weight:bold;color:var(--red);min-height:1.4em;margin:8px 0}

/* the door */
.door{min-height:100vh;background:var(--red);display:flex;align-items:center;justify-content:center;padding:16px}
.door-box{background:var(--paper);border:6px solid var(--ink);padding:clamp(26px,6vw,46px) clamp(22px,7vw,60px);text-align:center;box-shadow:12px 12px 0 var(--ink);max-width:560px;width:100%}
.door-title{font-size:clamp(40px,9vw,58px);margin:8px 0}
.door-box .sub{margin:0 auto 20px}
.door-input{width:100%;max-width:320px;font:bold 24px Caladea,Georgia,serif;letter-spacing:6px;text-align:center;text-transform:uppercase;padding:12px;border:3px solid var(--ink);background:var(--card);color:var(--ink)}
.door-input::placeholder{font-size:15px;letter-spacing:4px;color:#8d8678}

/* nav */
.nav{position:sticky;top:0;z-index:5;background:var(--red);color:var(--cream);display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap;padding:12px var(--pad);border-bottom:5px solid var(--ink)}
.brand{font-size:24px;font-weight:bold;letter-spacing:2px;margin-right:auto;color:var(--cream);text-decoration:none}
.nav nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.nav nav a{letter-spacing:3px;font-size:13px;font-weight:bold;color:var(--gold);text-decoration:none;padding:6px 0}
.nav nav a:hover{color:var(--cream)}

section{padding:52px var(--pad);border-bottom:5px solid var(--ink)}
section.dark{background:#201d1b;color:var(--cream)}
section.dark .kick,section.dark h2 i{color:var(--gold)}

.hero{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(24px,5vw,56px);align-items:center}
.hero-art{width:100%;height:auto;border:5px solid var(--ink);box-shadow:10px 10px 0 var(--red)}
.facts{display:flex;flex-wrap:wrap;gap:14px 28px;margin:22px 0;font-weight:bold}
.facts div{border-left:5px solid var(--gold);padding-left:12px}
.facts small{display:block;font-weight:normal;letter-spacing:3px;font-size:12px;color:var(--red)}
.count{margin-top:14px;font-weight:bold;color:var(--red)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;max-width:900px}
.f{border:0;padding:0;margin:0;min-width:0}
.f>label,.f>legend{display:block;font-size:12px;letter-spacing:3px;font-weight:bold;color:var(--red);margin-bottom:5px;padding:0}
.f input:not([type=radio]),.f textarea{width:100%;font:18px Caladea,Georgia,serif;border:3px solid var(--ink);background:var(--card);padding:12px 14px;color:var(--ink)}
.wide{grid-column:1/-1}
.pill{display:inline-block;margin:0 8px 8px 0;cursor:pointer}
.pill input{position:absolute;opacity:0}
.pill span{display:inline-block;border:3px solid var(--ink);padding:10px 18px;font-weight:bold;background:var(--card)}
.pill input:checked+span{background:var(--red);color:var(--cream)}
.pill input:focus-visible+span{outline:4px solid var(--gold);outline-offset:3px}

.row{display:grid;gap:22px}
.r5{grid-template-columns:repeat(5,minmax(0,1fr))}.r6{grid-template-columns:repeat(6,minmax(0,1fr))}.r9{grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;margin-bottom:26px}
.card{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.card img{width:100%;height:auto;display:block;border:4px solid var(--ink)}
.dark .card img{border-color:#000}
.card b{display:block;margin-top:8px;font-size:17px}
.card small{letter-spacing:2px;font-size:11px;font-weight:bold;color:var(--red)}
.dark .card small{color:#b9b2a2}
.card[aria-pressed=true] img{outline:5px solid var(--gold)}

.cast{display:flex;flex-wrap:wrap;gap:26px}
.cast .card{text-align:center;font-weight:bold;width:150px}
.cast img{width:150px;height:150px;border-radius:50%;border:6px solid var(--gold);outline:4px solid var(--ink);margin-bottom:8px;object-fit:cover}

.tracks{margin-top:30px;border-top:3px solid #4a4540;padding-top:22px;max-width:900px}
.tracks h3{margin:0 0 4px;font-size:28px}
.tracks ol{list-style:none;margin:16px 0 0;padding:0}
.tracks li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px dashed #4a4540}
.tracks li span{flex:1}
.tracks button,.tracks a{background:none;border:2px solid var(--gold);color:var(--gold);font:bold 13px Caladea,Georgia,serif;letter-spacing:2px;padding:7px 12px;cursor:pointer;text-decoration:none}
.tracks audio{width:100%;margin-top:16px}

.drop{display:block;border:4px dashed var(--ink);padding:34px 18px;text-align:center;background:var(--card);cursor:pointer}
.drop b{display:block;font-size:24px}.drop.over{background:#efe3b4}
.photo{aspect-ratio:1;border:4px solid var(--ink);background:#c9b48c;padding:0;cursor:pointer;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.empty{grid-column:1/-1;font-style:italic}

footer{background:var(--red);color:var(--gold);text-align:center;padding:26px 16px;letter-spacing:4px;font-weight:bold;font-size:13px}
.link{background:none;border:0;color:var(--cream);font:inherit;letter-spacing:2px;text-decoration:underline;cursor:pointer;margin-left:14px}

.box{border:5px solid var(--ink);background:var(--paper);padding:14px;max-width:min(94vw,760px);max-height:94vh;text-align:center}
.box::backdrop{background:rgba(20,18,16,.82)}
.box img{max-width:100%;max-height:74vh;display:block;margin:0 auto 10px;border:3px solid var(--ink)}
.box p{margin:0 0 10px;font-style:italic}
.box-x{position:absolute;top:6px;right:8px;background:var(--red);color:var(--cream);border:3px solid var(--ink);font-size:18px;width:40px;height:40px;cursor:pointer}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}.hero-art{max-width:420px}
  .form{grid-template-columns:1fr}
  .r5{grid-template-columns:repeat(2,minmax(0,1fr))}.r6{grid-template-columns:repeat(3,minmax(0,1fr))}.r9{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nav nav a{font-size:12px;letter-spacing:2px}
  .cast{justify-content:center}.cast .card{width:120px}.cast img{width:120px;height:120px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}