/* Doorbuster Studio — site-wide brand CSS ("Buster busts the doors", Oct 30 2026).
Spec: ops/BRAND.md. Tokens, base type, nav, footer, buttons and shared components.
Fonts are loaded per page with:
*/
:root{
--night:#0E0C14;--night-2:#18151F;--night-3:#26212E;
--paper:#F5F0E6;--bone:#E9E1D3;--ink:#14111A;--ash:#5E5866;--fog:#A9A2B3;
--siren:#FF5A1F;--siren-2:#E84A12;--lamp:#F4C26B;--door:#3B3346;--line:#D8CFC0;
--disp:"Big Shoulders Display",Oswald,Impact,"Arial Narrow",sans-serif;
--serif:"Instrument Serif",Georgia,"Times New Roman",serif;
--body:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--r:18px;--wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--siren);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--siren);color:var(--night);padding:10px 14px;z-index:99}.skip:focus{left:10px}
/* type */
.disp,h1,h2{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:.88}
h1{font-size:clamp(52px,8.4vw,128px);margin:0 0 20px}
h2{font-size:clamp(40px,5.6vw,80px);margin:0 0 18px}
h3{font:700 22px/1.25 var(--body);margin:0 0 8px;letter-spacing:-.01em}
.serif,em.s{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
h1 .serif,h2 .serif{font-size:.86em;line-height:1}
.eyebrow{font:600 12px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ash);max-width:40ch;margin:0 0 28px}
.on-night .lede,.night .lede{color:var(--fog)}
.muted{color:var(--ash)}.night .muted{color:var(--fog)}
.num{font-variant-numeric:tabular-nums}
.siren{color:var(--siren)}.lampc{color:var(--lamp)}
/* grounds */
.night{background:var(--night);color:var(--paper)}
.lamp{background:var(--lamp);color:var(--night)}
.sirenbg{background:var(--siren);color:var(--night)}
.bone{background:var(--bone)}
.sec{padding:clamp(64px,9vw,120px) 0}
.rule{border-top:4px solid var(--ink)}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{width:40px;height:40px;display:block}
.brand b{font:900 26px/1 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.brand i{font:italic 400 22px/1 var(--serif);color:var(--siren);margin-left:-4px}
.night .brand i,.nav.dark .brand i{color:var(--lamp)}
.nav .links{display:flex;gap:22px;align-items:center;font-size:15px;font-weight:500}
.nav .links a{text-decoration:none;opacity:.8}.nav .links a:hover{opacity:1}
.nav .links .btn{opacity:1}
@media(max-width:820px){.nav .links a:not(.btn){display:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;font:700 17px/1.1 var(--body);text-decoration:none;border:3px solid var(--ink);background:var(--siren);color:var(--night);box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:transparent;color:inherit;box-shadow:none}
.btn.ghost:hover{background:rgba(0,0,0,.05);box-shadow:none;transform:none}
.night .btn{border-color:var(--paper);box-shadow:4px 4px 0 var(--lamp)}
.night .btn:hover{box-shadow:6px 6px 0 var(--lamp)}
.night .btn.ghost{color:var(--paper);box-shadow:none}
.btn.dark{background:var(--night);color:var(--paper)}
.btn.small{min-height:44px;padding:10px 18px;font-size:15px;box-shadow:3px 3px 0 var(--ink)}
.textlink{font-weight:700;text-decoration:none;border-bottom:3px solid var(--siren);padding-bottom:2px}
/* starburst */
.burst{display:inline-flex;align-items:center;justify-content:center;background:var(--siren);color:var(--night);font:900 clamp(34px,4vw,56px)/1 var(--disp);text-transform:uppercase;clip-path:polygon(50% 0,61% 22%,85% 10%,80% 36%,100% 50%,80% 64%,85% 90%,61% 78%,50% 100%,39% 78%,15% 90%,20% 64%,0 50%,20% 36%,15% 10%,39% 22%);width:clamp(130px,14vw,190px);aspect-ratio:1;transform:rotate(-10deg)}
/* marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);background:var(--siren);color:var(--night)}
.marquee span{display:inline-block;padding:14px 0;font:900 clamp(22px,2.6vw,34px)/1 var(--disp);text-transform:uppercase;animation:mq 38s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee span{animation:none}}
/* split-flap */
.flaps{display:inline-flex;gap:6px;align-items:center}
.flap{display:inline-flex;align-items:center;justify-content:center;width:46px;height:62px;background:var(--night-2);border-radius:6px;color:var(--lamp);font:800 44px/1 var(--disp);position:relative}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.7)}
/* tickets (packages) */
.tickets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
@media(max-width:900px){.tickets{grid-template-columns:1fr}}
.ticket{position:relative;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:var(--r);display:flex;flex-direction:column;box-shadow:6px 6px 0 var(--ink)}
.ticket .top{padding:24px 24px 18px}
.ticket .stub{border-top:3px dashed var(--ink);padding:18px 24px 24px;display:flex;flex-direction:column;gap:12px;margin-top:auto}
.ticket::before,.ticket::after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);bottom:calc(var(--stubh,142px) - 13px)}
.ticket::before{left:-15px;clip-path:inset(0 0 0 50%)}.ticket::after{right:-15px;clip-path:inset(0 50% 0 0)}
.ticket .name{font:900 40px/.9 var(--disp);text-transform:uppercase}
.ticket .amt{font:900 64px/.9 var(--disp)}
.ticket .per{font:italic 22px var(--serif);color:var(--siren-2)}
.ticket ul{margin:14px 0 0;padding-left:20px;font-size:15.5px}.ticket li{margin-bottom:5px}
.ticket .serial{font:600 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.ticket.pick{background:var(--siren)}
.ticket.pick .per{color:var(--night)}
.ticket.pick .serial{color:var(--night)}
.ticket .sticker{position:absolute;right:-22px;top:-34px;width:96px;height:96px;transform:rotate(10deg)}
/* cards, faq, forms */
.card{background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:24px}
.faq details{border-top:3px solid var(--ink);padding:20px 0}
.faq details:last-child{border-bottom:3px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font:900 clamp(22px,2.4vw,30px)/1 var(--disp);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--siren)}.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;max-width:68ch;color:var(--ash)}
label.fl{display:block;font:600 12px var(--body);letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px}
.field{width:100%;min-height:60px;padding:14px 18px;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font:500 20px var(--body)}
.field:focus{outline:3px solid var(--siren);outline-offset:2px}
/* buster helpers */
.buster{display:block;height:auto;pointer-events:none;user-select:none}
.peek{position:relative}
.peek .buster-peek{position:absolute;width:150px;right:28px;top:-104px}
/* end CTA band (used on every inner page) */
.endband{background:var(--lamp);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);position:relative;overflow:hidden}
.endband .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:56px 0}
.endband h2{font-size:clamp(40px,5vw,72px)}
.endband .row{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:820px){.endband .inner{grid-template-columns:1fr}}
/* footer */
.foot{background:var(--night);color:var(--paper);padding:56px 0 40px}
.foot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:820px){.foot .grid{grid-template-columns:1fr 1fr}}
.foot h4{font:600 12px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--lamp);margin:0 0 12px}
.foot a{color:var(--paper);text-decoration:none;opacity:.8;display:block;margin:0 0 8px;font-size:15px}.foot a:hover{opacity:1;color:var(--lamp)}
.foot .legal{border-top:1px solid var(--night-3);margin-top:36px;padding-top:20px;font-size:13px;color:var(--fog);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot .tag{font:italic 24px/1.3 var(--serif);color:var(--lamp);margin:14px 0 0;max-width:22ch}
/* long-form articles (guides, legal, answer pages) */
.prose{font-size:18px;line-height:1.7}
.prose h1{font-size:clamp(44px,6.6vw,92px)}
.prose h2{font-size:clamp(32px,4vw,52px);margin:56px 0 14px}
.prose h3{margin:32px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 18px}
.prose li{margin-bottom:8px}
.prose a{color:var(--ink);text-decoration-color:var(--siren);text-decoration-thickness:2px;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:16px}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:2px solid var(--line);vertical-align:top}
.prose th{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ash);border-bottom:3px solid var(--ink)}
.prose blockquote{margin:22px 0;padding:18px 22px;background:#fff;border:3px solid var(--ink);border-radius:14px}
.crumbs{font-size:14px;color:var(--ash);margin:8px 0 18px}.crumbs a{color:var(--ash)}
.note{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:16px 20px;margin:22px 0;box-shadow:4px 4px 0 var(--lamp)}
/* ---- core-pages additions (appended Oct 30) ---- */
/* footer brand link: .foot a is display:block/80% — keep the logo lockup intact */
.foot a.brand{display:inline-flex;opacity:1;margin:0;font-size:inherit}
.foot a.brand:hover{color:var(--paper)}
.foot .brand i{color:var(--lamp)}
/* FAQ on night ground */
.night .faq details{border-color:rgba(245,240,230,.22)}
.night .faq p{color:var(--fog)}
.night .faq summary::after{color:var(--lamp)}
/* ticket with the perforation notches tied to the stub, so any stub height works */
.ticket.fit::before,.ticket.fit::after{display:none}
.ticket.fit .stub{position:relative}
.ticket.fit .stub::before,.ticket.fit .stub::after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);top:-14.5px}
.ticket.fit .stub::before{left:-15px;clip-path:inset(0 0 0 50%)}
.ticket.fit .stub::after{right:-15px;clip-path:inset(0 50% 0 0)}
.ticket .serialrow{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ticket ul.dash{list-style:none;padding:0}
.ticket ul.dash li{display:flex;gap:10px}
.ticket ul.dash li::before{content:"—";color:var(--siren-2);flex:0 0 auto}
.ticket.pick ul.dash li::before{color:var(--night)}
/* reduced motion: no smooth scroll */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
/* small siren-colored text on light grounds needs a darker orange to pass 4.5:1 */
:root{--siren-ink:#A83407}
.ticket .per{color:var(--siren-ink)}
.ticket.pick .per{color:var(--night)}
.eyebrow.sirenink{color:var(--siren-ink)}
.foot .grid>*{min-width:0}
.foot a{overflow-wrap:anywhere}
@media(max-width:560px){.foot .grid{grid-template-columns:1fr}}
@media(max-width:560px){.brand img{width:32px;height:32px}.brand b{font-size:21px}.brand i{font-size:18px;margin-left:-3px}.nav{gap:10px}.nav .btn{white-space:nowrap;padding:8px 14px;min-height:40px;font-size:14px;box-shadow:none}.hide-sm{display:none}}