:root{
  --bg:#F5F1E8;
  --bg-raised:#EEE8D9;
  --bg-card:#EAE2D0;
  --ink:#17150F;
  --muted:#6B675C;
  --red:#F00C0C;
  --red-deep:#B80A0A;
  --gold:#FFD700;
  --line:#E2D6BC;
  --font-display:'Anton', Impact, sans-serif;
  --font-body:'Inter', -apple-system, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.01em; line-height:1.05; margin:0 0 0.4em}
h2{font-size:clamp(1.8rem, 4vw, 2.8rem)}
.eyebrow{color:var(--red); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; font-size:0.8rem; margin:0 0 0.6em}
.muted{color:var(--muted)}

/* Marquee */
.marquee{display:block; background:var(--red); color:#0A0A0A; overflow:hidden; white-space:nowrap; font-family:var(--font-display); font-size:0.85rem; letter-spacing:0.08em; text-decoration:none; cursor:pointer}
.marquee:hover{background:#ff2b2b}
.marquee__track{display:inline-block; padding:8px 0; animation:scroll 26s linear infinite}
.marquee__track span{margin:0 1.5em}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Header */
header{position:sticky; top:0; z-index:20; background:rgba(245,241,232,0.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:34px; width:auto}
.brand span{font-family:var(--font-display); font-size:1.15rem; letter-spacing:0.02em}
nav.links{display:flex; gap:26px; font-size:0.92rem; font-weight:600}
nav.links a{text-decoration:none; color:var(--muted)}
nav.links a:hover{color:var(--ink)}
.navcta{display:flex; align-items:center; gap:10px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; border-radius:999px; font-weight:700; text-decoration:none;
  font-size:0.95rem; border:2px solid transparent; cursor:pointer;
  transition:transform 0.15s ease, background 0.15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--red); color:#0A0A0A}
.btn--primary:hover{background:#ff2b2b}
.btn--primary:disabled{opacity:0.5; cursor:not-allowed; transform:none}
.btn--ghost{background:transparent; color:var(--ink); border-color:#444}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{padding:9px 18px; font-size:0.85rem}

/* Hero */
.hero{padding:56px 0 40px; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(2.5rem, 5.6vw, 4.4rem); margin-bottom:0}
.hero h1 .accent{color:var(--red)}
.hero__tagline{font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.02em; font-size:clamp(1.1rem, 2.2vw, 1.5rem); margin:0.3em 0 0; color:var(--muted)}
.hero__tagline .accent{color:var(--red)}
.hero__tagline--big{
  font-size:clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing:0.01em; color:var(--ink); margin-top:0; white-space:nowrap;
}
@media (max-width:480px){ .hero__tagline--big{white-space:normal} }
.hero p.lede{font-size:1.15rem; color:var(--muted); max-width:48ch; margin:0.6em 0 1.6em}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap}
.hero__art{display:flex; justify-content:center; flex-direction:column; align-items:center}
.hero__art img{max-height:520px; width:auto; filter:drop-shadow(0 30px 60px rgba(240,12,12,0.15))}
.hero__handles{display:flex; justify-content:space-between; width:100%; max-width:480px; margin-top:4px; padding:0 6px}
.hero__handles a{
  font-family:var(--font-body); font-weight:800; font-size:0.82rem; text-decoration:none;
  color:var(--ink); letter-spacing:0.01em;
  /* WCAG 2.5.8 — padding gives each handle a >=24px tall hit area. Negative
     block margin cancels it visually so the layout doesn't shift. */
  display:inline-block; padding:6px 0; margin:-6px 0;
}
.hero__handles a:hover{color:var(--red)}
.hero__handles span{display:block; font-weight:600; font-size:0.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:2px}
.presented{margin-top:28px; font-size:0.85rem; color:var(--muted)}
.presented a{color:var(--muted); text-decoration:underline}

section{padding:72px 0; border-top:1px solid var(--line)}

/* Comics */
.comics-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px}
.comic{margin:0}
/* height:auto is doing real work here, not tidying up. The <img> tags carry
   width/height attributes (1200x800, 666x1000, 1200x1145) as presentational
   hints. Without an explicit height in CSS, that attribute sets the used height
   and aspect-ratio is ignored entirely - the three portraits rendered at 800,
   1000 and 1145px, so each caption landed wherever its photo happened to end. */
.comic img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:16px; border:1px solid var(--line);
  filter:grayscale(20%) contrast(1.05); transition:filter 0.25s ease, transform 0.25s ease;
}
.comic:hover img{filter:grayscale(0%); transform:translateY(-3px)}
.comic__handle{margin:14px 0 2px; font-weight:800; font-size:0.98rem}
.comic__handle a{color:inherit; text-decoration:none}
.comic__handle a:hover{color:var(--red); text-decoration:underline}
.comic__name{margin:0; color:var(--muted); font-size:0.85rem}
.comic__quote{margin:10px 0 0; font-size:0.88rem; font-style:italic; color:var(--ink)}
@media (max-width:640px){ .comics-grid{grid-template-columns:1fr; max-width:320px; margin:0 auto} }

/* Accolades strip */
.accolades{border-top:none; padding:0 0 48px}
.accolades__grid{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
.accolade{
  display:flex; align-items:center; gap:10px; background:var(--bg-card); border:1px solid var(--line);
  border-radius:999px; padding:10px 20px; font-weight:700; font-size:0.88rem; white-space:nowrap;
}
.accolade__num{font-family:var(--font-display); color:var(--red); font-size:1.05rem}
.quotes{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.accolades__quote{max-width:640px; margin:0 auto; text-align:center; font-size:0.98rem; color:var(--muted)}
.accolades__quote strong{color:var(--ink)}
.accolades__quote a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.accolades__quote a:hover{color:var(--red)}

/* 3-step funnel */
.steps{background:var(--bg-raised)}
.steps__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:28px}
.step-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:20px; padding:28px;
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.step-card:hover{transform:translateY(-2px); border-color:var(--red)}
.step-card__num{font-family:var(--font-display); font-size:2.2rem; color:var(--red); line-height:1; margin-bottom:10px}
.step-card__title{font-family:var(--font-display); font-size:1.3rem; margin-bottom:8px}
.step-card__desc{color:var(--muted); font-size:0.92rem; margin:0}
.step-card__cta{margin-top:auto; padding-top:16px; font-weight:700; font-size:0.85rem; color:var(--red); text-transform:uppercase; letter-spacing:0.04em}

/* Cast */
.cast__intro{max-width:64ch; margin-bottom:40px}
.cast__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px}
.cast-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
}
.cast-card__img{aspect-ratio:4/5; overflow:hidden; position:relative}
.cast-card__img img{width:100%; height:100%; object-fit:cover; filter:grayscale(35%) contrast(1.08)}
.cast-card__img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.92) 100%);
}
.cast-card__tag{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--red); background:rgba(10,10,10,0.75); border:1px solid var(--red);
  border-radius:999px; padding:4px 12px;
}
.cast-card__body{padding:22px 22px 26px}
.cast-card__name{font-family:var(--font-display); font-size:1.6rem; margin:0 0 2px}
.cast-card__real{font-size:0.82rem; color:var(--muted); margin:0 0 14px; font-weight:600}
.cast-card__bio{margin:0; color:#4A4638; font-size:0.95rem}

/* Why */
.why__grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.why__cards{display:grid; gap:16px}
.why__card{background:var(--bg-card); border:1px solid var(--line); border-radius:16px; padding:22px 24px}
.why__card h3{font-family:var(--font-body); font-weight:800; text-transform:none; font-size:1.05rem; margin-bottom:6px}
.why__card p{margin:0; color:var(--muted); font-size:0.96rem}

/* Tour / signup */
.tour{background:var(--bg-raised)}
.tour__grid{display:grid; grid-template-columns:1fr 1fr; gap:48px}
.tour__shows{display:grid; gap:16px; margin-top:24px}
.tour__shows--grid{grid-template-columns:1fr 1fr}
@media (max-width:640px){ .tour__shows--grid{grid-template-columns:1fr} }
.show-card{background:var(--bg-card); border:1px solid var(--line); border-radius:20px; padding:28px}
.show-card__row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; gap:12px; flex-wrap:wrap}
.show-card__city{font-family:var(--font-display); font-size:1.6rem}
.badge{font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 12px; white-space:nowrap; text-decoration:none}
.badge--red{color:#fff; background:var(--red); border-color:var(--red)}
.show-card p{color:var(--muted); margin:0 0 18px}
.show-card__meta{margin:0 0 18px; color:var(--muted); font-size:0.92rem; line-height:1.7}
.show-card__meta strong{color:var(--ink)}
.ticket-note{font-size:0.85rem; color:var(--muted); margin-top:14px}

form.signup{display:grid; gap:14px}
.signup__row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field label{display:block; font-size:0.78rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.field input, .field select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:#FFFFFF; color:var(--ink); font-family:var(--font-body); font-size:0.95rem;
}
.field input:focus, .field select:focus{outline:2px solid var(--red); outline-offset:1px}
.signup__submit{margin-top:4px}
.form-msg{font-size:0.88rem; min-height:1.2em}
.form-msg--ok{color:#3E8E41}
.form-msg--err{color:var(--red)}

/* Podcast */
.podcast__grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center}
.podcast__art{
  aspect-ratio:1/1; border-radius:24px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(155deg, var(--bg-card), var(--bg-raised));
  display:flex; align-items:center; justify-content:center; position:relative;
}
.podcast__art img{width:100%; height:100%; object-fit:cover; filter:grayscale(20%)}
.podcast__mark{
  position:absolute; inset:16px; border:2px solid var(--red); border-radius:16px; pointer-events:none;
}
.podcast__hosts{font-size:0.9rem; color:var(--muted); margin:0 0 18px}
.podcast__platforms{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.platform-pill{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); font-size:0.85rem; font-weight:600; color:var(--muted);
}

/* Merch */
.merch{background:var(--bg-raised)}
.merch__panel{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:var(--bg-card);
}
.merch__copy{padding:44px}
.merch__visual{
  background:
    repeating-linear-gradient(135deg, rgba(240,12,12,0.10) 0 18px, transparent 18px 36px),
    var(--bg-raised);
  display:flex; align-items:center; justify-content:center; min-height:260px;
}
.merch__visual span{
  font-family:var(--font-display); font-size:2.4rem; color:#C9BC9C; text-align:center; line-height:1.05;
  letter-spacing:0.02em;
}
.merch__list{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 26px}
.merch__list li{
  list-style:none; font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink); background:#FFFFFF; border:1px solid var(--line); border-radius:999px; padding:6px 14px;
}

/* Gallery */
.gallery__grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
.gallery__grid button{border-radius:12px; overflow:hidden; aspect-ratio:1/1; display:block; border:none; padding:0; margin:0; background:none; cursor:pointer; position:relative}
.gallery__grid img{width:100%; height:100%; object-fit:cover; object-position:0% 0%; transition:transform 0.35s ease; filter:grayscale(15%)}
.gallery__grid button:hover img{transform:scale(1.06); filter:grayscale(0%)}
.gallery__grid button:focus-visible{outline:3px solid var(--red); outline-offset:2px}
.gallery__grid button:nth-child(1),.gallery__grid button:nth-child(6){grid-column:span 2; grid-row:span 2; aspect-ratio:1/1}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:50; background:rgba(10,9,6,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.2s ease;
}
.lightbox.open{ opacity:1; visibility:visible }
.lightbox__stage{ max-width:min(90vw, 900px); max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:12px }
.lightbox__stage img{ max-width:100%; max-height:76vh; object-fit:contain; border-radius:8px; box-shadow:0 30px 60px rgba(0,0,0,0.5) }
.lightbox__caption{ color:#F5F1E8; font-size:0.9rem; font-weight:700; letter-spacing:0.02em; margin:0 }
.lightbox__close{
  position:absolute; top:20px; right:24px; background:none; border:none; color:#F5F1E8;
  font-size:2.4rem; line-height:1; cursor:pointer; padding:8px;
}
.lightbox__nav{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); color:#F5F1E8;
  border-radius:999px; width:48px; height:48px; font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:none;
  position:absolute; top:50%; transform:translateY(-50%);
}
.lightbox__nav:hover{ background:rgba(255,255,255,0.18) }
.lightbox__nav--prev{ left:16px }
.lightbox__nav--next{ right:16px }
@media (max-width:640px){
  .lightbox__nav{ width:40px; height:40px; font-size:1.1rem }
  .lightbox__nav--prev{ left:8px }
  .lightbox__nav--next{ right:8px }
  .lightbox__close{ top:12px; right:14px; font-size:2rem }
}

/* Reviews */
.reviews{background:var(--bg-raised)}
.review-card{
  max-width:520px; margin:0 auto; background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 20px 60px rgba(240,12,12,0.12); border:2px solid var(--red);
}
.review-card img{width:100%; height:auto; display:block}

/* Footer */
footer{padding:44px 0; border-top:1px solid var(--line)}
.footer__grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px}
.footer__brand{display:flex; align-items:center; gap:10px}
.footer__brand img{height:26px; width:auto}
.footer__links{display:flex; gap:22px; font-size:0.88rem; color:var(--muted); flex-wrap:wrap; align-items:center}
/* WCAG 2.5.8 — padding lifts each footer link to a >=24px tall hit area;
   negative block margin keeps the visible footer spacing unchanged. */
.footer__links a{text-decoration:none; display:inline-block; padding:5px 0; margin:-5px 0}
.footer__links a:hover{color:var(--ink)}
.footer__fine{margin-top:18px; font-size:0.78rem; color:var(--muted)}
.footer__fine a{color:var(--muted); text-decoration:underline}
.footer__fine a:hover{color:var(--ink)}

/* Tickets page */
.tickets-hero{padding:48px 0 8px; text-align:center}
.tickets-hero p.lede{max-width:56ch; margin:0.6em auto 0; font-size:1.05rem}
.ticket-shows{display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:40px 0 72px}
.flyer-grid{display:grid; grid-template-columns:0.9fr 1fr; gap:32px; align-items:start; max-width:900px; margin:0 auto}
.flyer-img{width:100%; border-radius:16px; border:1px solid var(--line); box-shadow:0 20px 50px -20px rgba(23,21,15,0.3)}
@media (max-width: 880px){ .flyer-grid{grid-template-columns:1fr} .flyer-img{max-width:420px; margin:0 auto} }
.ticket-card{background:var(--bg-card); border:1px solid var(--line); border-radius:24px; padding:32px; display:flex; flex-direction:column}
.ticket-card.city-pick{text-decoration:none; color:var(--ink); transition:border-color 0.15s ease, transform 0.15s ease}
.ticket-card.city-pick:hover{border-color:var(--red); transform:translateY(-2px)}
.ticket-card.city-pick .btn{text-align:center; width:100%}
.ticket-card__venue{font-family:var(--font-display); font-size:1.9rem; margin-bottom:2px}
.ticket-card__addr{color:var(--muted); font-size:0.88rem; margin:0 0 18px}
.ticket-card__meta{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:8px; font-size:0.92rem}
.ticket-card__meta li{display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding-bottom:8px}
.ticket-card__meta strong{font-weight:700}
.ticket-card__avail{font-size:0.85rem; color:var(--muted); margin:0 0 16px}
.ticket-card__buy{display:flex; align-items:center; gap:12px; margin-top:auto}
.ticket-card__buy select{width:90px; flex:none}
.ticket-card__price{font-size:0.78rem; color:var(--muted); margin-top:10px}
.ticket-card__msg{font-size:0.88rem; min-height:1.2em; margin-top:10px}
@media (max-width: 880px){ .ticket-shows{grid-template-columns:1fr} }

.thanks-wrap{max-width:560px; margin:0 auto; padding:80px 24px; text-align:center}
.thanks-wrap .check{font-size:3rem; margin-bottom:16px}

@media (max-width: 980px){
  .cast__grid{grid-template-columns:1fr; max-width:420px; margin:0 auto}
  .podcast__grid{grid-template-columns:1fr}
  .merch__panel{grid-template-columns:1fr}
  .merch__visual{min-height:180px; padding:24px}
}
.mobile-nav-toggle{display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--bg-card); cursor:pointer; flex:none}
.mobile-nav-toggle span, .mobile-nav-toggle span::before, .mobile-nav-toggle span::after{
  content:''; display:block; width:18px; height:2px; background:var(--ink); position:relative;
}
.mobile-nav-toggle span::before{position:absolute; top:-6px}
.mobile-nav-toggle span::after{position:absolute; top:6px}
.mobile-nav-panel{
  display:none; flex-direction:column; gap:2px; background:var(--bg-card); border-top:1px solid var(--line);
  padding:10px 20px 16px;
}
.mobile-nav-panel.open{display:flex}
.mobile-nav-panel a{
  padding:12px 4px; color:var(--ink); text-decoration:none; font-weight:700; font-size:0.95rem;
  border-bottom:1px solid var(--line);
}
.mobile-nav-panel a:last-child{border-bottom:none}

@media (max-width: 880px){
  .hero__grid,.why__grid,.tour__grid{grid-template-columns:1fr}
  .hero__art{display:none}
  .hero__handles{flex-wrap:wrap; justify-content:center; gap:14px 22px}
  nav.links{display:none}
  .navcta .btn--ghost{display:none}
  .mobile-nav-toggle{display:inline-flex}
  .gallery__grid{grid-template-columns:repeat(2, 1fr)}
  .gallery__grid a:nth-child(1),.gallery__grid a:nth-child(6){grid-column:span 2; grid-row:span 1}
  .signup__row{grid-template-columns:1fr}
  .accolades__grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .accolade{justify-content:center; text-align:center; white-space:normal}
  #tickets{padding-top:32px}
  .quote-extra{display:none}
}

/* Sticky buy bar (LA/OC ticket pages) */
.sticky-buy{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--bg-card); border-top:1px solid var(--line); padding:12px 16px;
  box-shadow:0 -12px 30px -14px rgba(23,21,15,0.35);
  transform:translateY(0); transition:transform 0.2s ease;
}
.sticky-buy.hidden{transform:translateY(110%)}
.sticky-buy__info{min-width:0}
.sticky-buy__venue{margin:0; font-weight:800; font-size:0.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sticky-buy__price{margin:1px 0 0; font-size:0.78rem; color:var(--muted)}
.sticky-buy .btn{flex:none; white-space:nowrap}
.sticky-buy__qty{
  flex:none; width:56px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font-weight:700; font-size:0.9rem; text-align:center;
}
body{padding-bottom:0}
body:has(.sticky-buy){padding-bottom:72px}

/* Sticky buy bar — split LA/OC variant (tickets chooser page) */
.sticky-buy--split{gap:10px}
.sticky-buy--split .btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; padding:9px 10px; line-height:1.15; text-align:center;
}
.sticky-buy__city{font-weight:800; font-size:0.86rem}
.sticky-buy__sub{font-weight:600; font-size:0.7rem; opacity:0.85}