/* Scream Town — a Midwest town at the end of a dark road. Highway-sign type, sodium-lamp light, rust. */
:root{
  --soot:#17120f; --night:#201915; --highway:#23402f; --bone:#e9e0cc; --sodium:#e3a33a; --rust:#a3221a; --rust-dk:#7f1912; --ash:#9b938a;
  --bg:var(--soot); --ink:var(--bone); --muted:#b0a899; --line:#3a312b; --link:var(--sodium); --focus:var(--sodium);
  --accent:var(--rust); --accent-ink:#fff; --accent-text:#e4685d; --scare:var(--rust);
  --display:'Overpass',system-ui,sans-serif; --display-weight:900; --body:'Overpass',system-ui,sans-serif;
  --buy:var(--rust); --buy-ink:#fff; --buy-hover:#c22a20;
  --banner-bg:var(--sodium); --banner-ink:var(--soot);
  --header-bg:rgba(23,18,15,.94); --header-border:1px solid #2e2620;
  --strip-bg:var(--highway); --strip-ink:var(--bone);
  --card:#241d18; --card-border:1px solid #33291f;
  --cal-open:#2b3d2f; --cal-open-ink:var(--bone); --cal-limited:#5a4320; --cal-sold:#3a1714; --cal-sold-ink:#e8a39d;
  --footer-bg:#0f0b09; --footer-ink:#c9c0b0;
  --field:#f3ede1; --field-ink:#17120f; --field-border:#3a312b;
  --quote-font:'Overpass',sans-serif; --wordmark-track:.02em;
  --radius-btn:3px; --radius-card:2px; --att-gap:12px;
}
body{background:radial-gradient(1200px 600px at 70% -10%,#2a201a 0,transparent 60%),var(--soot)}
.wordmark{text-transform:uppercase;font-weight:900;background:var(--highway);color:var(--bone);padding:4px 12px 2px;border:3px solid var(--bone);border-radius:6px;font-size:1.15rem}
.nav a{font-weight:700}

/* hero: the town-limits sign under a sodium lamp */
.hero-st{padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,100px);background:
  linear-gradient(180deg,rgba(23,18,15,.25),var(--soot) 92%),
  var(--hero-img,none) center/cover no-repeat,
  linear-gradient(180deg,#0e0b09,#1d1712)}
.lamp{position:absolute;inset:-10% 0 auto 0;height:120%;pointer-events:none;
  background:radial-gradient(520px 420px at 32% 18%,rgba(227,163,58,.28),rgba(227,163,58,.08) 45%,transparent 70%);
  animation:lamp-on 2.4s steps(1,end) .2s both}
@keyframes lamp-on{0%{opacity:0}8%{opacity:.9}12%{opacity:.1}20%{opacity:1}24%{opacity:.3}34%{opacity:1}100%{opacity:1}}
.hero-st-inner{position:relative;display:grid;gap:36px;align-items:center}
@media (min-width:980px){.hero-st-inner{grid-template-columns:1.05fr 1fr}}
.road-sign{width:100%;max-width:620px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));transform:rotate(-1.5deg)}
.hero-st h1{font-size:clamp(2.3rem,4.6vw,3.7rem);letter-spacing:-.01em;text-wrap:balance}
.hero-st .lede{color:#d8cfbe}

.hl-v{color:var(--sodium)}
.highlights{border-block:3px solid var(--bone)}
.hl-l{text-transform:none}

/* attractions read like a list of addresses on Main Street */
.attraction{border-left:6px solid var(--highway)}
.attraction.cat-vip{border-left-color:var(--sodium)}
.attraction.cat-haunt,.attraction.cat-trail{border-left-color:var(--rust)}
.attraction h3{font-weight:900;font-size:1.35rem}
.attraction .cat{color:var(--sodium)}

.tier-card.featured{outline-color:var(--sodium)}
.price{color:var(--sodium)}
.review blockquote{font-weight:600}
.home-tickets{background:#1b1511}
.hiring-callout{border-left:6px solid var(--rust)}
.site-footer{border-top:3px solid var(--highway)}
.faq summary{font-weight:800}

/* official key art is 16:9 with the title baked in: never crop it */
.attraction-img{aspect-ratio:16/9}
.brand img{max-height:50px}