: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:1000; background:linear-gradient(180deg, rgba(0,0,0,.5), transparent); pointer-events:none; }
.site-header .brand { font-weight:800; letter-spacing:.5px; text-decoration:none; font-size:18px; }
.site-header .brand, .site-header nav { pointer-events:auto; }
.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; }