/*
Theme Name: Germann Lights
Description: Seasonal charity light show theme. Server-rendered season, live show status, and automatic announcements.
Version: 0.6.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: germann-lights
*/

/* ---------------------------------------------------------------------------
   1. Tokens. The palette is taken from the display itself: night sky, warm
   bulb white, and per-season accents matching the pixels in the photos.
   --------------------------------------------------------------------------- */
:root{
  color-scheme:dark;
  --bg:#0b0c10;--bg-2:#111219;--surface:#161720;--surface-2:#1c1d28;
  --ink:#f5f0e8;--ink-2:#d9d4cb;--muted:#9c9aa4;
  --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.18);
  --accent:#ffc46b;--accent-ink:#1d1305;--accent-2:#8fb3ff;--glow:rgba(255,196,107,.32);
  --danger:#ff7a6b;
  --font-display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px;--gutter:clamp(18px,5vw,48px);--radius:8px;
}
body[data-season=halloween]{--accent:#ff8a2b;--accent-ink:#1c0d02;--accent-2:#9b7bff;--glow:rgba(255,138,43,.34)}
body[data-season=christmas]{--accent:#ff5d5d;--accent-ink:#1c0505;--accent-2:#5fe08f;--glow:rgba(255,93,93,.32)}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--font-body);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
button,select,input{font:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.1;letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:2px}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:12px;top:-100px;background:var(--accent);color:var(--accent-ink);padding:10px 14px;z-index:50;font-weight:700;border-radius:4px}
.skip:focus{top:12px}
[hidden]{display:none!important}
.eyebrow{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.lede{color:var(--ink-2);font-size:18px;max-width:58ch}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:6px;font-family:var(--font-display);font-weight:600;font-size:16px;text-decoration:none;border:1px solid var(--line-2);color:var(--ink);background:rgba(255,255,255,.04);transition:transform .15s ease,background .15s ease,border-color .15s ease}
.button:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.button.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;box-shadow:0 10px 30px -12px var(--glow)}
.button.primary:hover{filter:brightness(1.06)}
.button svg{width:18px;height:18px;flex:none}
.button.small{min-height:42px;padding:0 16px;font-size:15px}

/* ---------------------------------------------------------------------------
   3. Live status bar. The first thing a visitor wants to know is whether the
   show is on tonight, so it lives at the very top and glows when live.
   --------------------------------------------------------------------------- */
.status-bar{position:sticky;top:0;z-index:40;background:var(--bg-2);border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:14px;letter-spacing:.01em}
.status-inner{display:flex;align-items:center;gap:12px;min-height:44px;padding-block:6px}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none;box-shadow:0 0 0 0 transparent}
.status-bar strong{font-weight:600}
.status-detail{color:var(--muted)}
.status-detail:empty{display:none}
.status-meta{margin-left:auto;color:var(--muted);white-space:nowrap}
.status-bar[data-phase=live]{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,var(--bg-2)),var(--bg-2) 60%)}
.status-bar[data-phase=live] .status-dot{background:var(--accent);animation:pulse 1.8s ease-out infinite}
.status-bar[data-phase=live] strong{color:var(--accent)}
.status-bar[data-phase=before] .status-dot{background:var(--accent)}
.status-bar[data-phase=closure]{background:linear-gradient(90deg,rgba(255,122,107,.22),var(--bg-2) 60%)}
.status-bar[data-phase=closure] .status-dot{background:var(--danger);animation:pulse 1.8s ease-out infinite}
.status-bar[data-phase=closure] strong{color:var(--danger)}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------------------------------------------------------------------------
   4. Header
   --------------------------------------------------------------------------- */
.site-header{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none}
.brand-logo{width:88px;height:auto}
.brand-location{font-family:var(--font-display);font-size:11px;letter-spacing:.2em;line-height:1.6;color:var(--muted);border-left:1px solid var(--line-2);padding-left:18px}
.site-header nav{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:15px;font-weight:500}
.site-header nav a{text-decoration:none;padding:10px 12px;border-radius:6px;min-height:44px;display:inline-flex;align-items:center;color:var(--ink-2)}
.site-header nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.site-header nav ul{list-style:none;display:flex;gap:6px;padding:0;margin:0}
.site-header nav li{position:relative}
.site-header nav ul ul{position:absolute;left:0;top:100%;min-width:200px;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px;display:none;box-shadow:0 20px 40px -20px #000}
.site-header nav li:hover>ul,.site-header nav li:focus-within>ul{display:flex}
.site-header nav ul ul a{white-space:nowrap;width:100%}
.nav-listen{margin-left:10px;border:1px solid var(--line-2);color:var(--accent)!important;gap:10px}
.nav-listen svg{width:16px;height:16px}
.menu-toggle{display:none}

/* ---------------------------------------------------------------------------
   5. Hero: the photo is the page. Copy sits on top, the show card overlaps
   the bottom edge so the schedule reads as part of the scene.
   --------------------------------------------------------------------------- */
.closure{margin:8px 0 18px;padding:18px 22px;border-radius:var(--radius);background:rgba(255,122,107,.12);border:1px solid rgba(255,122,107,.45);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.closure svg{width:24px;height:24px;color:var(--danger);margin-top:2px}
.closure strong{display:block;font-family:var(--font-display);color:var(--danger);margin-bottom:4px}
.closure p{margin:0;color:var(--ink-2)}

.hero{position:relative;margin-top:8px}
.hero-media{position:relative;height:clamp(420px,62vh,680px);border-radius:14px;overflow:hidden;background:#000}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,12,16,.95) 0%,rgba(11,12,16,.55) 38%,rgba(11,12,16,.05) 70%),linear-gradient(to right,rgba(11,12,16,.35),transparent 55%)}
.hero-caption{position:absolute;right:18px;top:16px;margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(0,0,0,.35);padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px);z-index:2}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);gap:48px;align-items:end;margin-top:clamp(-260px,-32vh,-160px);padding-inline:clamp(20px,4vw,56px)}
.hero-copy{padding-bottom:34px}
.hero h1{font-size:clamp(40px,5.6vw,72px);font-weight:800;letter-spacing:-.025em;line-height:1.02;max-width:14ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .intro{color:var(--ink-2);font-size:18px;max-width:52ch;margin:22px 0 0;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.show-card{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:26px 28px 24px;box-shadow:0 30px 80px -30px #000,0 0 0 1px rgba(0,0,0,.4);transform:translateY(34px)}
.status-pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding:6px 12px 6px 10px;border-radius:999px}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
body[data-phase=live] .status-pill::before{animation:pulse 1.8s ease-out infinite}
.show-card h2{font-size:30px;font-weight:700;margin:16px 0 4px}
.show-dates{color:var(--muted);margin:0 0 18px;font-size:15px}
.facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.facts>div{padding:12px 0;border-bottom:1px solid var(--line)}
.facts>div:nth-child(odd){padding-right:16px;border-right:1px solid var(--line)}
.facts>div:nth-child(even){padding-left:16px}
.facts dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--font-display)}
.facts dd{margin:3px 0 0;font-family:var(--font-display);font-weight:600;font-size:17px}
.facts dd small{font-weight:400;color:var(--muted);font-size:13px}
.show-address{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:15px;color:var(--ink-2)}
.show-address svg{width:18px;height:18px;color:var(--accent);flex:none}

/* Latest announcement strip, fed by the newest post. */


/* ---------------------------------------------------------------------------
   7. Sections
   --------------------------------------------------------------------------- */
.section{padding:clamp(64px,8vw,104px) 0}
.section+.section{border-top:1px solid var(--line)}
.section-head{max-width:720px;margin-bottom:clamp(32px,4vw,52px)}
.section-head h2{font-size:clamp(32px,4vw,50px);font-weight:800;letter-spacing:-.025em;text-wrap:balance;margin-bottom:16px}
.section-head .lede{margin:0}

/* Visit steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px 24px 24px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s ease,transform .2s ease}
.step:hover{border-color:var(--line-2);transform:translateY(-2px)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1;margin-bottom:8px}
.step h3{font-size:22px;font-weight:700}
.step p{color:var(--ink-2);font-size:15.5px;margin:0}
.step a{margin-top:auto;padding-top:10px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:40px}
.step a:hover{text-decoration:underline}
.dial{width:100%;color:var(--muted);margin:2px 0 4px}
.dial .mark{fill:var(--accent)}
.dial text{fill:currentColor;font:600 11px var(--font-display)}
.dial .freq{fill:var(--accent);font:800 13px var(--font-display)}

/* Food drive */
.give-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:clamp(32px,5vw,72px);align-items:start}
.give{background:radial-gradient(60% 80% at 100% 0%,color-mix(in srgb,#ff9b2f 12%,transparent),transparent 70%)}
.give-copy h2{font-size:clamp(32px,4vw,50px);font-weight:800;letter-spacing:-.025em;margin-bottom:16px;text-wrap:balance}
.give-copy>p{color:var(--ink-2);font-size:18px;max-width:58ch}
.give-copy a:not(.button){color:var(--accent)}
.give-facts{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.give-facts h3{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--ink)}
.give-facts p{color:var(--ink-2);font-size:15.5px}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.checklist li{position:relative;padding-left:28px;color:var(--ink-2);font-size:15.5px}
.checklist li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.checklist li::after{content:"";position:absolute;left:5px;top:8px;width:5px;height:8px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.give-logo{background:#fff7e8;border-radius:14px;padding:34px 30px;text-align:center;color:#3a2a10;box-shadow:0 30px 70px -40px #000}
.give-logo a{display:inline-block}
.give-logo img{width:180px;margin:0 auto}
.give-logo p{margin:22px 0 0;font-size:15px;color:#5b4423;line-height:1.5}
.give-logo strong{font-family:var(--font-display);color:#e8781a}

/* News */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.news{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s ease,transform .2s ease}
.news:hover{border-color:var(--line-2);transform:translateY(-2px)}
.news time{font-family:var(--font-display);font-size:13px;color:var(--accent);letter-spacing:.04em}
.news h3{font-size:22px;font-weight:700;line-height:1.2}
.news h3 a{text-decoration:none}
.news h3 a:hover{text-decoration:underline}
.news p{color:var(--ink-2);font-size:15.5px;margin:0}
.read-story{margin-top:auto;padding-top:10px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--accent);text-decoration:none;min-height:40px;display:inline-flex;align-items:center;gap:8px}
.news-empty{color:var(--muted)}

/* FAQ */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--font-display);font-weight:600;font-size:19px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:28px;line-height:1;color:var(--accent);transition:transform .2s ease;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);margin:0 0 22px;max-width:66ch}

/* ---------------------------------------------------------------------------
   8. Footer
   --------------------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px);padding:52px 0 36px;color:var(--muted);font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-brand img{width:72px;margin-bottom:16px}
.footer-brand p{margin:0;max-width:34ch}
.footer-brand strong{color:var(--ink);font-family:var(--font-display)}
.site-footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

/* ---------------------------------------------------------------------------
   9. Inner pages (posts, pages, archives)
   --------------------------------------------------------------------------- */
.prose{width:min(860px,100% - 2*var(--gutter));margin-inline:auto;padding:48px 0 80px;min-height:50vh}
.prose h1{font-size:clamp(34px,4.5vw,54px);font-weight:800;letter-spacing:-.025em;margin-bottom:14px}
.prose .post-meta{color:var(--muted);font-family:var(--font-display);font-size:14px;margin-bottom:28px}
.prose article+article{margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
.prose article h1 a,.prose article h2 a{text-decoration:none}
.prose img{max-width:100%;height:auto;border-radius:8px}
.prose iframe{max-width:100%}
.prose a{color:var(--accent)}
.prose .wp-block-embed{margin:28px 0}
.prose .featured{border-radius:12px;margin-bottom:28px}
.nav-links{display:flex;justify-content:space-between;gap:16px;margin-top:40px;font-family:var(--font-display)}

/* Preview-only toolbar */
.preview-tools{background:#1a1b23;border-bottom:1px solid var(--line);padding:8px 5%;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font:13px var(--font-display);color:#c6c5c2}
.preview-tools select{background:#0b0c10;color:white;border:1px solid #555;padding:5px 8px;border-radius:4px;font-size:13px}
.preview-tools label{display:flex;align-items:center;gap:8px}

/* ---------------------------------------------------------------------------
   10. Responsive
   --------------------------------------------------------------------------- */
@media(max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr;gap:0;margin-top:-140px}
  .hero-copy{padding-bottom:0}
  .show-card{transform:none;margin-top:28px}
}
@media(max-width:860px){
  .status-meta{display:none}
  .site-header{flex-wrap:wrap;gap:12px;padding:14px 0}
  .brand-logo{width:70px}
  .menu-toggle{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;background:transparent;color:var(--ink);border:1px solid var(--line-2);border-radius:6px;font-family:var(--font-display);font-weight:600;font-size:14px;cursor:pointer}
  .site-header nav{width:100%;flex-direction:column;align-items:stretch;gap:2px;padding:10px 0 6px;border-top:1px solid var(--line)}
  .js-nav .site-header nav:not(.is-open){display:none}
  .site-header nav a{font-size:16px;min-height:48px}
  .site-header nav ul{flex-direction:column;gap:2px}
  .site-header nav ul ul{display:flex;position:static;border:0;padding:0 0 0 16px;background:transparent;box-shadow:none}
  .nav-listen{margin:8px 0 0;justify-content:space-between}
  .hero-media{height:clamp(340px,52vh,520px);border-radius:12px}
  .hero-grid{padding-inline:clamp(18px,5vw,32px);margin-top:-120px}
  .hero h1{font-size:clamp(36px,9vw,52px)}
  .hero .intro{font-size:16.5px;margin-top:16px}
  .give-grid{grid-template-columns:1fr}
  .give-facts{grid-template-columns:1fr;gap:22px}
  .give-logo{padding:26px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:600px){
  .brand-location{display:none}
  .status-inner{gap:10px;font-size:13px}
  .actions{display:grid;grid-template-columns:1fr}
  .actions .button{justify-content:space-between}
  .show-card{padding:22px 20px 20px}
  .facts{grid-template-columns:1fr}
  .facts>div:nth-child(odd){padding-right:0;border-right:0}
  .facts>div:nth-child(even){padding-left:0}
  .steps,.news-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* Show-poster direction: open layouts, warm paper, and framed seasonal photography. */
:root{--bg:#101310;--bg-2:#171b16;--surface:#1a201b;--surface-2:#232b24;--ink:#f4f0df;--ink-2:#cccdbf;--muted:#a0a797;--line:rgba(231,235,213,.15);--line-2:rgba(231,235,213,.28);--radius:2px}
body[data-season=halloween]{--accent:#ff9a3c;--accent-ink:#1c0d02;--accent-2:#c7a6f5;--glow:rgba(255,154,60,.4);--bg:#0f0c14;--bg-2:#161020;--surface:#1b1424;--surface-2:#241a30;--line:rgba(220,205,240,.14);--line-2:rgba(220,205,240,.28)}
body[data-season=christmas]{--accent:#ff6f66;--accent-ink:#1c0605;--accent-2:#7fd6a2;--glow:rgba(255,111,102,.34)}
.site-header{padding:20px 0 24px}.brand-logo{width:72px}.brand-location{color:var(--ink-2)}
.button,.site-header nav a{border-radius:2px}.button.primary{box-shadow:none}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:0 44px;isolation:isolate;padding-top:30px;border-top:1px solid var(--line)}
.hero-media{grid-column:2;grid-row:1;height:540px;border-radius:2px;transform:rotate(2deg);margin:10px 8px 25px 0;border:8px solid #e5e0cc;box-shadow:10px 14px 0 #222a22}
.hero-media img{object-position:center;filter:none}.hero-media::after{background:linear-gradient(transparent 75%,rgba(0,0,0,.65))}
.hero-caption{top:auto;bottom:12px;left:12px;right:auto;border-radius:2px;background:rgba(0,0,0,.55);backdrop-filter:none;color:#fff;font-size:11px;padding:5px 9px}
.hero-grid{display:contents}.hero-copy{grid-column:1;grid-row:1;align-self:center;padding:0 0 30px}
.hero h1{font-size:clamp(48px,5.5vw,76px);line-height:1.04;letter-spacing:-.045em;text-shadow:none;max-width:none;text-wrap:initial}
.hero h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:italic;letter-spacing:-.05em}
.hero .intro{max-width:42ch;text-shadow:none;font-size:17px;line-height:1.7;margin-top:26px}
.hero .eyebrow{font-size:11px}.actions{gap:10px}.actions .button{padding-inline:17px;font-size:14px}
.show-card{grid-column:1/-1;transform:none;margin:22px 0 0;padding:20px 28px 24px;background:#eae5d3;color:#232b22;border:0;border-radius:2px;box-shadow:none;display:grid;grid-template-columns:1fr 1.6fr;column-gap:40px;--muted:#58604f;--line:rgba(35,43,34,.22);--ink-2:#394334;--accent:#654018}
.ticket-label{grid-column:1/-1;display:flex;justify-content:space-between;font:600 11px/1.4 var(--font-display);letter-spacing:.16em;text-transform:uppercase;padding-bottom:14px;margin-bottom:18px;border-bottom:1px dashed #929883}
.ticket-label span{font-size:11px}.status-pill{grid-column:1;justify-self:start;border:0;background:transparent;padding:0;font-size:12px;border-radius:0}
.show-card h2{grid-column:1;font-size:30px;margin-top:12px}.show-dates{grid-column:1;margin-bottom:0}
.facts{grid-column:2;grid-row:2/5;border-top:0}.facts dd{font-size:17px}.facts>div{padding:8px 0}.show-address{grid-column:1/-1;padding-top:14px;border-top:1px dashed #929883;font-size:13px}
.section>.wrap{width:100%}.section-head h2,.give-copy h2{font-size:clamp(36px,4.2vw,54px);letter-spacing:-.035em}.section-head{max-width:670px}
.steps{gap:0}.step{background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;padding:25px 24px 0 0;margin-right:24px}.step:last-child{margin-right:0;padding-right:0}.step:hover{transform:none}.step-num{border:0;border-radius:0;background:none;justify-content:start;font:italic 42px Georgia,serif;width:auto;height:auto;margin-bottom:18px}.step h3{font-size:23px}.step p{font-size:15px}.step a::after{content:' ↗'}
.give{background:#eae5d3;color:#232b22;padding:60px 42px;--ink:#232b22;--ink-2:#414b39;--muted:#58604f;--accent:#785028;--line:rgba(35,43,34,.2)}.give-grid{grid-template-columns:1.5fr .5fr;align-items:center;gap:40px}.give-logo{background:none;box-shadow:none;border-radius:0;padding:0}.give-logo img{mix-blend-mode:multiply}.give-logo strong{color:#785028}.give .button{color:#232b22;border-color:#858b77}.give-copy>p{font-size:16px}.give-facts{gap:24px}
.news-grid{display:block}.news{display:grid;grid-template-columns:150px 1fr 1fr auto;align-items:start;gap:24px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:28px 0}.news:hover{transform:none}.news h3{font-size:23px}.news p{font-size:14px}.news time{color:var(--muted);font:600 12px/1.5 var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding-top:5px}.read-story{font-size:13px;padding-top:0}.read-story::after{content:' ↗'}
#questions>.wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.faq summary{font-size:17px}.site-footer{margin-top:0}.footer-brand{display:flex;align-items:start;gap:20px}.footer-brand img{width:60px}.footer-bottom{font:500 12px/1.7 var(--font-display);letter-spacing:.03em}
@media(max-width:1080px){.hero{gap:0 28px}.hero-media{height:460px}.hero h1{font-size:54px}.hero-copy{padding-bottom:0}.show-card{margin-top:25px}.steps{gap:30px 0}.news{grid-template-columns:120px 1fr auto}.news p{grid-column:2;grid-row:2}.read-story{grid-column:3;grid-row:1}}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:22px}.hero-copy{grid-row:1;padding-bottom:20px}.hero h1{font-size:clamp(44px,9vw,64px)}.hero .intro{margin-top:14px}.show-card{grid-row:2;margin-top:0}.hero-media{grid-column:1;grid-row:3;height:260px;margin:34px 8px 12px;transform:rotate(1deg)}.show-card{grid-template-columns:1fr;padding:20px}.ticket-label{font-size:10px}.status-pill,.show-card h2,.show-dates,.facts,.show-address{grid-column:1;grid-row:auto}.facts{margin-top:20px;grid-template-columns:1fr 1fr}.facts>div:nth-child(odd){border-right:1px solid var(--line);padding-right:10px}.facts>div:nth-child(even){padding-left:12px}.facts dd{font-size:15px}#questions>.wrap{grid-template-columns:1fr;gap:24px}.give{padding:40px 22px}.give-grid{grid-template-columns:1fr}.give-logo{border-top:1px solid var(--line);padding-top:28px;display:flex;align-items:center;gap:24px;text-align:left}.give-logo img{width:100px}.give-logo p{margin:0}.news{grid-template-columns:1fr auto;gap:12px}.news time{grid-column:1/-1}.news h3{grid-column:1}.news p{grid-column:1/-1;grid-row:3}.read-story{grid-column:2;grid-row:2}.section-head{margin-bottom:28px}}
@media(max-width:400px){.ticket-label{letter-spacing:.08em}.news{grid-template-columns:1fr}.read-story{grid-column:1;grid-row:4}}

/* A clear parking instruction before the visit steps. */
.parking-notice{border:2px solid var(--accent);border-left-width:8px;padding:22px 26px;margin:0 0 36px;background:color-mix(in srgb,var(--accent) 7%,var(--bg))}.parking-notice strong{display:block;font-family:var(--font-display);font-size:clamp(21px,3vw,30px);font-weight:800;letter-spacing:.035em;line-height:1.2;color:var(--accent)}.parking-notice p{margin:10px 0 0;color:var(--ink-2);max-width:75ch;font-size:16px}

/* Latest announcement strip, fed by a recent post. */
.latest{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label date" "title action";align-items:center;gap:12px 32px;margin-top:48px;padding:26px 30px;background:#1c251d;border:0;border-radius:3px;box-shadow:none;text-decoration:none;transition:background .18s ease}
.latest:hover{background:#253127}
.latest-label{grid-area:label;color:var(--accent);font:600 10px/1.5 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.latest-title{grid-area:title;color:var(--ink);font:600 23px/1.3 var(--font-display);letter-spacing:-.015em;overflow-wrap:anywhere}
.latest time{grid-area:date;justify-self:end;color:var(--muted);font-size:12px;white-space:nowrap}
.latest-cta{grid-area:action;justify-self:end;color:var(--accent);font:600 14px/1.5 var(--font-display);white-space:nowrap}
.latest-cta::after{content:" →"}.latest:hover .latest-cta{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.latest{margin-top:36px;padding:22px;gap:12px 16px}.latest-title{font-size:21px}}
@media(max-width:480px){.latest{grid-template-columns:1fr;grid-template-areas:"label" "title" "date" "action";gap:9px}.latest time,.latest-cta{justify-self:start}.latest-cta{margin-top:8px}.latest-title{font-size:21px}}

/* Halloween headline: three deliberate lines with a contrasting opening. */
.hero h1 .halloween-spooky{display:block;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:1.3em;line-height:1.03;color:var(--accent);letter-spacing:-.045em;margin-bottom:8px}
.hero h1 .halloween-sights{display:block;font-size:clamp(30px,3.55vw,48px);line-height:1.12;letter-spacing:-.04em}
.hero h1 .halloween-location{display:block;font-size:clamp(22px,2.3vw,31px);font-weight:500;line-height:1.3;letter-spacing:-.015em;margin-top:18px;color:var(--ink-2)}
@media(max-width:760px){.hero h1 .halloween-sights{font-size:clamp(28px,7.5vw,48px)}.hero h1 .halloween-location{font-size:clamp(22px,5.5vw,30px);margin-top:14px}}

/* ---------------------------------------------------------------------------
   11. Review fixes: the ticket leads with hours and shows its live state, the
   bands between the hero and the visit steps share one quiet voice, and the
   parking rule rides on the ticket itself.
   --------------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ticket hierarchy: status and hours first, the show name as a quiet subtitle. */
.status-pill{font-size:15px;font-weight:700;letter-spacing:0}
.status-pill::before{width:10px;height:10px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.show-card h2{font-size:20px;font-weight:600;color:var(--muted);margin-top:10px;letter-spacing:0}
.show-dates{font-size:15px;color:var(--ink-2)}
.facts>div:first-child dd{font-size:clamp(24px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.facts dd small{font-size:12px}
body[data-phase=live] .show-card{--accent:#1f6b3a}
body[data-phase=before] .show-card{--accent:#3c5a1f}
body[data-phase=closure] .show-card{--accent:#a2382a}
body[data-phase=after] .show-card{--accent:#58604f}
.show-rule{grid-column:1/-1;margin:12px 0 0;padding-top:12px;border-top:1px dashed #929883;font:700 14px/1.45 var(--font-display);letter-spacing:.02em;color:#232b22}

/* Latest announcement as a hairline row, in the same voice as the news list. */
.latest{margin:40px 0 -16px;padding:22px 0;background:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;grid-template-areas:"label action" "title action";gap:8px 32px}
.latest:hover{background:none}
.latest time{display:none}
.latest-label{font-size:11px}
.latest-title{font-size:21px}
.latest-cta{align-self:center}
.latest:hover .latest-title{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
@media(max-width:480px){.latest{grid-template-areas:"label" "title" "action";gap:8px}.latest-cta{margin-top:4px}}


/* Parking reminder as a lead-in above the steps; the full rule is on the ticket. */
.parking-notice{border:0;border-left:4px solid var(--accent);background:none;padding:4px 0 4px 20px;margin:0 0 30px}
.parking-notice strong{font-size:clamp(20px,2.4vw,24px);letter-spacing:0;text-transform:none}
.parking-notice p{margin-top:6px;font-size:15.5px}

/* ---------------------------------------------------------------------------
   12. Christmas: red and evergreen together, a candy-stripe edge on the
   ticket, and a soft glow on the headline. Halloween keeps its single amber.
   --------------------------------------------------------------------------- */
body[data-season=christmas] .eyebrow,body[data-season=christmas] .brand-location{color:var(--accent-2)}
body[data-season=christmas] .hero h1 em{color:#ff8b82;text-shadow:0 0 28px rgba(255,120,110,.45)}
body[data-season=christmas] .button:not(.primary){border-color:color-mix(in srgb,var(--accent-2) 55%,transparent);color:var(--accent-2)}
body[data-season=christmas] .nav-listen{color:var(--accent-2)!important;border-color:color-mix(in srgb,var(--accent-2) 55%,transparent)}
body[data-season=christmas] .status-bar[data-phase=off],body[data-season=christmas] .status-bar[data-phase=before]{background:linear-gradient(90deg,color-mix(in srgb,var(--accent-2) 16%,var(--bg-2)),var(--bg-2) 55%,color-mix(in srgb,var(--accent) 12%,var(--bg-2)))}
body[data-season=christmas] .status-bar[data-phase=off] .status-dot{background:var(--accent-2)}
body[data-season=christmas] .status-bar[data-phase=off] strong{color:var(--accent-2)}
body[data-season=christmas] .show-card{--accent:#b33a30;background:repeating-linear-gradient(-45deg,#c8382d 0 10px,#f3eee0 10px 14px,#2f7a4c 14px 24px,#f3eee0 24px 28px) top/100% 7px no-repeat,#eae5d3;padding-top:26px}
body[data-season=christmas][data-phase=live] .show-card{--accent:#1f6b3a}
body[data-season=christmas][data-phase=closure] .show-card{--accent:#a2382a}
body[data-season=christmas] .hero-media{border-color:#ebe2c8;box-shadow:10px 14px 0 #23352a}
body[data-season=christmas] .step:nth-child(even) .step-num,body[data-season=christmas] .step:nth-child(even) a{color:var(--accent-2)}
body[data-season=christmas] .faq summary::after,body[data-season=christmas] .news time{color:var(--accent-2)}
body[data-season=christmas] .checklist li::before{border-color:#2f7a4c;background:rgba(47,122,76,.12)}
body[data-season=christmas] .checklist li::after{border-color:#2f7a4c}

/* ---------------------------------------------------------------------------
   13. Halloween: a bruised purple-black night, violet as the second color,
   a slow flicker on the headline, and a dripping edge on the ticket.
   --------------------------------------------------------------------------- */
body[data-season=halloween] .eyebrow,body[data-season=halloween] .brand-location{color:var(--accent-2)}
body[data-season=halloween] .hero{background:radial-gradient(55% 60% at 22% 45%,rgba(120,72,180,.22),transparent 70%)}
body[data-season=halloween] .hero h1 .halloween-spooky{text-shadow:0 0 18px rgba(255,154,60,.55),0 0 46px rgba(255,120,30,.3);animation:gl-flicker 7s ease-in-out infinite}
body[data-season=halloween] .hero h1 .halloween-location{color:var(--accent-2)}
@keyframes gl-flicker{0%,100%{opacity:1}42%{opacity:1}44%{opacity:.72}46%{opacity:1}72%{opacity:1}73%{opacity:.85}74%{opacity:1}}
body[data-season=halloween] .button:not(.primary){border-color:color-mix(in srgb,var(--accent-2) 55%,transparent);color:var(--accent-2)}
body[data-season=halloween] .nav-listen{color:var(--accent-2)!important;border-color:color-mix(in srgb,var(--accent-2) 55%,transparent)}
body[data-season=halloween] .status-bar[data-phase=off]{background:linear-gradient(90deg,color-mix(in srgb,var(--accent-2) 16%,var(--bg-2)),var(--bg-2) 55%,color-mix(in srgb,var(--accent) 12%,var(--bg-2)))}
body[data-season=halloween] .status-bar[data-phase=off] .status-dot{background:var(--accent-2)}
body[data-season=halloween] .status-bar[data-phase=off] strong{color:var(--accent-2)}
body[data-season=halloween] .hero-media{border-color:#e2d9c4;box-shadow:10px 14px 0 #2a1c38}
body[data-season=halloween] .show-card{--accent:#b3471a;background:radial-gradient(circle at 50% 0,#1a1222 0 7px,transparent 8px) 0 0/22px 14px repeat-x,radial-gradient(circle at 50% 0,#1a1222 0 4px,transparent 5px) 11px 6px/22px 14px repeat-x,#eae5d3;padding-top:30px}
body[data-season=halloween][data-phase=live] .show-card{--accent:#1f6b3a}
body[data-season=halloween][data-phase=closure] .show-card{--accent:#a2382a}
body[data-season=halloween] .step:nth-child(even) .step-num,body[data-season=halloween] .step:nth-child(even) a{color:var(--accent-2)}
body[data-season=halloween] .faq summary::after,body[data-season=halloween] .news time{color:var(--accent-2)}
body[data-season=halloween] .give{background:#e6dcc9}

/* ---------------------------------------------------------------------------
   14. Anniversary flair on the ticket, donation thank-you, and the
   between-seasons homepage (about the build, meet the cast).
   --------------------------------------------------------------------------- */
.ticket-year{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;color:var(--accent)}
.ticket-year::before,.ticket-year::after{content:"\2726";font-size:9px;line-height:1;opacity:.85}
body[data-season=christmas] .ticket-year{color:#b33a30}
body[data-season=christmas] .ticket-year::before,body[data-season=christmas] .ticket-year::after{color:#2f7a4c}
body[data-season=halloween] .ticket-year{color:#7a4a9e}
body[data-season=halloween] .ticket-year::before,body[data-season=halloween] .ticket-year::after{content:"\2726";color:#b3471a}
body[data-season=neutral] .ticket-year{color:#654018}
@media(max-width:600px){.ticket-label{flex-wrap:wrap;row-gap:6px}.ticket-year{order:3;flex-basis:100%;justify-content:center;border-top:1px dashed #929883;padding-top:8px;margin-top:2px}}

/* Donation line inside the in-season food drive. */
.give-total{margin:16px 0 0;font-size:15px;color:var(--ink-2)}
.give-total strong{font-family:var(--font-display);font-size:19px;color:var(--ink)}

/* Between seasons: two framed photos in the hero. */
.hero-offseason .hero-duo{grid-column:2;grid-row:1;position:relative;height:540px;margin:10px 8px 25px 0}
.duo-frame{position:absolute;margin:0;border:8px solid #e5e0cc;background:#000;overflow:hidden;box-shadow:10px 14px 0 #222a22}
.duo-frame img{width:100%;height:100%;object-fit:cover}
.duo-frame figcaption{position:absolute;left:12px;bottom:12px;font:600 11px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:5px 9px;border-radius:2px}
.duo-halloween{left:0;top:0;width:62%;height:64%;transform:rotate(-2.5deg);z-index:1}
.duo-christmas{right:0;bottom:0;width:66%;height:66%;transform:rotate(2deg);z-index:2}
.hero-offseason .hero-copy{align-self:center}
@media(max-width:1080px){.hero-offseason .hero-duo{height:460px}}
@media(max-width:760px){.hero-offseason .hero-duo{grid-column:1;grid-row:3;height:300px;margin:34px 8px 12px}.duo-frame{box-shadow:6px 8px 0 #222a22}}

/* Thank-you panel: warm paper, one big number. */
.thanks{background:#eae5d3;color:#232b22;--ink:#232b22;--ink-2:#414b39;--muted:#58604f;--accent:#785028;--line:rgba(35,43,34,.2);padding:56px 42px}
.thanks-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.thanks h2{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;text-wrap:balance;margin-bottom:14px}
.thanks h2 [data-donation-amount]{color:#b3471a}
.thanks p{color:var(--ink-2);font-size:17px;max-width:60ch;margin:0}
.thanks a:not(.thanks-logo){color:var(--accent)}
.thanks-logo img{width:150px;mix-blend-mode:multiply}
@media(max-width:760px){.thanks{padding:40px 22px}.thanks-grid{grid-template-columns:1fr}.thanks-logo img{width:110px}}

/* How the show is built. */
.build-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin:0 0 36px;border-top:1px solid var(--line-2)}
.build-fact{padding:26px 0 24px;border-bottom:1px solid var(--line)}
.build-fact strong{display:block;font:italic 400 clamp(40px,4vw,56px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.03em;color:var(--accent)}
.build-fact span{display:block;margin-top:10px;color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:30ch}
@media(max-width:860px){.build-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}}
@media(max-width:480px){.build-grid{grid-template-columns:1fr}.build-fact{padding:20px 0 18px}}

/* Meet the cast. */
.cast-list{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cast-item{border-top:1px solid var(--line-2);padding-top:24px;display:flex;flex-direction:column;gap:12px}
.cast-year{margin:0;font:600 11px/1.5 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.cast-item h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.025em}
.cast-item p:not(.cast-year){color:var(--ink-2);font-size:16px;margin:0}
.cast-item a{margin-top:auto;padding-top:8px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:40px}
.cast-item a::after{content:' \2197'}
.cast-item a:hover{text-decoration:underline}
@media(max-width:760px){.cast-list{grid-template-columns:1fr;gap:28px}}

/* Breathing room between the paper ticket and the paper thank-you. */
.thanks{margin-top:48px}
@media(max-width:760px){.thanks{margin-top:32px}}