:root { --ink:#f4f1ea; --bg:#10131a; --muted:#9aa3b2; --accent:#7a5cff; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); min-height:100dvh; display:flex; flex-direction:column; }
a { color:inherit; }

/* Shared chrome */
.site-header { position:fixed; inset:0 0 auto 0; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 20px; z-index:50; background:linear-gradient(180deg, rgba(0,0,0,.5), transparent); }
.site-header .brand { font-weight:800; letter-spacing:.5px; text-decoration:none; font-size:18px; }
.site-header nav { display:flex; gap:14px; flex-wrap:wrap; }
.site-header nav a { text-decoration:none; opacity:.82; font-size:14px; }
.site-header nav a:hover, .site-header nav a.current { opacity:1; color:var(--accent); }
main { flex:1; }
.site-footer { padding:16px 20px; text-align:center; font-size:13px; color:var(--muted); }

/* Immersive events: full-screen scene; chrome floats as a subtle overlay */
body.immersive { overflow:hidden; }
body.immersive .site-header { background:linear-gradient(180deg, rgba(0,0,0,.35), transparent); }
body.immersive .site-header nav a { color:rgba(255,255,255,.85); }
body.immersive .site-footer { position:fixed; left:0; right:0; bottom:0; padding:6px 12px; z-index:6; text-align:center; background:transparent; pointer-events:none; color:rgba(255,255,255,.6); font-size:12px; }

/* Normal (landing / stub) pages */
.hero { min-height:100dvh; display:grid; place-content:center; text-align:center; gap:18px; padding:96px 20px 48px; }
.hero h1 { font-size:clamp(32px,6vw,64px); line-height:1.05; color:var(--accent); }
.hero p { color:var(--muted); max-width:60ch; margin:0 auto; font-size:clamp(15px,2.2vw,20px); }
.badge { display:inline-block; padding:6px 14px; border:1px solid currentColor; border-radius:999px; font-size:13px; opacity:.85; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; max-width:920px; margin:0 auto; padding:0 20px; }
.card { display:block; text-decoration:none; padding:22px; border-radius:14px; background:#1a1f2b; border:1px solid #2a3040; transition:transform .15s, border-color .15s; }
.card:hover { transform:translateY(-3px); border-color:var(--accent); }
.card h3 { font-size:20px; margin-bottom:6px; color:var(--accent); }
.card p { color:var(--muted); font-size:14px; }

/* Landing page */
body.landing { background:#121014; }
body.landing .site-header { background:linear-gradient(180deg, rgba(12,9,15,.72), rgba(12,9,15,0)); }
.landing-hero { position:relative; min-height:min(760px,82dvh); overflow:hidden; display:grid; align-items:start; isolation:isolate; }
.landing-hero picture { position:absolute; inset:0; z-index:-2; }
.landing-hero img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.landing-hero:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,8,16,.08) 0%, rgba(11,8,16,.18) 42%, rgba(18,16,20,.92) 100%), radial-gradient(ellipse at 50% 16%, rgba(255,244,216,.5), transparent 34%); pointer-events:none; }
.hero-copy { width:min(760px, calc(100% - 40px)); margin:clamp(92px,13dvh,142px) auto 0; text-align:center; text-shadow:0 3px 24px rgba(0,0,0,.6); }
.hero-copy .badge { color:#fff5d8; background:rgba(22,14,22,.28); backdrop-filter:blur(8px); }
.hero-copy h1 { margin-top:14px; font-size:clamp(42px,7vw,86px); line-height:.96; color:#fff5d8; }
.hero-copy p { margin:14px auto 0; max-width:42ch; color:#fff9ee; font-size:clamp(16px,2vw,22px); font-weight:650; }
.holiday-nav { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; width:min(1080px, calc(100% - 32px)); margin:clamp(-92px,-8vw,-44px) auto 40px; position:relative; z-index:3; }
.holiday-link { --holiday:#fff; min-height:78px; display:flex; align-items:end; padding:14px; border-radius:8px; text-decoration:none; color:#fff; background:linear-gradient(180deg, rgba(22,17,23,.64), rgba(22,17,23,.9)); border:1px solid color-mix(in srgb, var(--holiday) 64%, transparent); box-shadow:0 14px 32px rgba(0,0,0,.28); overflow:hidden; position:relative; transition:transform .15s ease, border-color .15s ease, background .15s ease; }
.holiday-link:before { content:""; position:absolute; inset:auto 0 0; height:4px; background:var(--holiday); box-shadow:0 0 18px var(--holiday); }
.holiday-link span { position:relative; font-size:clamp(14px,1.6vw,18px); line-height:1.1; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.42); }
.holiday-link:hover, .holiday-link:focus-visible { transform:translateY(-3px); border-color:var(--holiday); background:linear-gradient(180deg, rgba(34,25,33,.72), rgba(22,17,23,.95)); outline:none; }
.holiday-link.halloween { --holiday:#ff7a18; }
.holiday-link.christmas { --holiday:#38c96b; }
.holiday-link.thanksgiving { --holiday:#d98b2b; }
.holiday-link.july { --holiday:#457bff; }
.holiday-link.newyear { --holiday:#f5c84b; }
.holiday-link.easter { --holiday:#f49ad4; }
.holiday-link.patricks { --holiday:#39d75f; }
.holiday-link.valentines { --holiday:#ff537e; }
.holiday-link.jons40 { --holiday:#00f0ff; }

@media (max-width:820px) {
  .landing-hero { min-height:72dvh; }
  .hero-copy { margin-top:88px; }
  .holiday-nav { grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:-54px; }
}

@media (max-width:520px) {
  .landing-hero { min-height:68dvh; }
  .landing-hero img { object-position:center top; }
  .hero-copy { width:calc(100% - 28px); margin-top:80px; }
  .holiday-nav { width:calc(100% - 24px); gap:10px; margin-bottom:28px; }
  .holiday-link { min-height:64px; padding:12px; }
}