:root{
  --bg:#050616;
  --panel:#0b1020;
  --panel2:#0e1030;
  --font-body:#b0b0b0;      /* metallic grey */
  --font-heading:#d0d0d0;   /* brighter metallic */
  --muted:#9aa2c4;
  --accent:#7fb3ff;
  --gold:#ffd166;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --r:18px;
  --r2:26px;
  --max:1120px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--font-body);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(127,179,255,.16), transparent 60%),
    radial-gradient(800px 500px at 90% 35%, rgba(255,209,102,.10), transparent 55%),
    linear-gradient(180deg, #050616, #040410 55%, #03030c);
}
a{color:inherit;text-decoration:none}
p,li,span,div{color:inherit}
h1,h2,h3,h4,.title-treatment,.brand-title{
  color:var(--font-heading);
  text-shadow: 0 0 8px rgba(255,255,255,.22);
}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background: rgba(5,6,22,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px}
.sigil{width:42px;height:42px;border-radius:14px;position:relative;overflow:hidden;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), transparent 35%),
              linear-gradient(135deg, rgba(127,179,255,.9), rgba(127,179,255,.1));
  box-shadow:0 0 0 2px rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.35);
}
.sigil:before{content:"";position:absolute;inset:-35%;
  background: radial-gradient(circle at 45% 50%, rgba(255,209,102,.95), transparent 55%);
  transform:rotate(12deg);opacity:.55;
}
.brand-title{font-weight:900;letter-spacing:.10em;text-transform:uppercase;font-size:12px}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{color:var(--muted);font-size:13px;padding:8px 10px;border-radius:999px;border:1px solid transparent}
.nav a:hover{color:var(--font-heading);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.nav a[aria-current="page"]{color:var(--font-heading);border-color:rgba(127,179,255,.55);background:rgba(127,179,255,.10)}
.btn{display:inline-flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);color:var(--font-heading);cursor:pointer;
  transition:.15s ease; font-size:13px;
}
.btn:hover{border-color:rgba(255,255,255,.24);transform:translateY(-1px)}
.btn.primary{border-color:rgba(127,179,255,.65);background:rgba(127,179,255,.12);box-shadow:0 0 0 6px rgba(127,179,255,.12)}
.btn.gold{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.10);box-shadow:0 0 0 6px rgba(255,209,102,.10)}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:var(--muted)
}
.badge.live{color:#7ff0b8}
.badge.soon{color:var(--gold)}
.section{padding:42px 0}
.kicker{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:11px}
.lead{color:rgba(176,176,176,.92);font-size:15px;line-height:1.65;max-width:72ch}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{
  border-radius:var(--r2);
  background:linear-gradient(180deg, rgba(14,16,48,.9), rgba(11,12,34,.92));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-pad{padding:18px}
.two{grid-column:span 6}
.three{grid-column:span 4}
.four{grid-column:span 3}
@media(max-width:980px){.two,.three,.four{grid-column:span 12}}
.media{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25)}
.cover{aspect-ratio:2/3;object-fit:cover}
.thumb{aspect-ratio:4/3;object-fit:cover}
.hero{
  position:relative;overflow:hidden;border-radius:var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,12,34,.70);
  box-shadow:var(--shadow);
  min-height: 92vh; /* full-screen hero feel */
}
.hero .bg{position:absolute;inset:0;background:#000;}
.hero .bg img,.hero .bg video{width:100%;height:100%;object-fit:contain;filter:saturate(1.05) contrast(1.05);transform:scale(1.02)}

/* Home page: yellow typography + ensure hero image is fully visible */
body.home{color:var(--gold)}
body.home h1,body.home h2,body.home h3,body.home h4,body.home .title-treatment,body.home .brand-title{color:var(--gold)}
body.home .hero .title-treatment,
body.home .hero .kicker,
body.home .hero .lead{color:var(--gold);text-shadow:0 0 10px rgba(255,209,102,.20)}
body.home .hero .bg img,body.home .hero .bg video{transform:none}
.hero canvas{position:absolute;inset:0;opacity:.55;mix-blend-mode:screen}
.hero .veil{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(127,179,255,.24), transparent 60%),
    radial-gradient(820px 520px at 80% 30%, rgba(255,209,102,.14), transparent 60%),
    linear-gradient(180deg, rgba(5,6,22,.15), rgba(5,6,22,.92));
}
.hero .content{position:relative;z-index:2;padding:42px;display:flex;flex-direction:column;gap:16px;max-width:780px}
@media(max-width:680px){.hero .content{padding:26px}}
.title-treatment{font-weight:950;letter-spacing:.10em;text-transform:uppercase}
.quicklinks{display:flex;gap:10px;flex-wrap:wrap}
.strip{display:flex;gap:12px;overflow:auto;padding:0 0 8px}
.strip .covercard{min-width:160px;max-width:160px}
.covercard img{border-radius:16px}
.covercard .meta{padding:10px 2px 0;color:var(--muted);font-size:12px;display:flex;justify-content:space-between}
footer{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;color:var(--muted);font-size:13px}
.footer-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lightbox{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.70);backdrop-filter: blur(6px);z-index:80}
.lightbox.open{display:grid}
.lightbox .frame{width:min(980px, 92vw);max-height:90vh;background:rgba(10,11,30,.96);border:1px solid rgba(255,255,255,.10);
  border-radius:22px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.lightbox .frame img{width:100%;height:auto;max-height:calc(90vh - 62px);object-fit:contain}
.lightbox .cap{padding:12px 14px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;align-items:center}
.x{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
  border-radius:999px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;color:var(--font-heading)}
/* Lore text block */
.lore-block{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.lore-block p{margin:0 0 12px}
.lore-block ul{margin:0;padding-left:18px;line-height:1.6}
/* Simple chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}