/* ============================================================
   SECRET LEVEL STUDIOS — v2  (clean dark cinematic, no brand-guide concept)
   ============================================================ */

:root{
  --bg:#0d0d0f;
  --bg-2:#151518;
  --panel:#1a1a1e;
  --ink:#f4f3f1;
  --muted:rgba(244,243,241,0.60);
  --faint:rgba(244,243,241,0.40);
  --line:rgba(244,243,241,0.12);
  --line-2:rgba(244,243,241,0.22);
  --accent:#ff5c38;            /* ember (overridable via Tweaks) */
  --accent-ink:#0d0d0f;
  --maxw:1240px;
  --gutter:clamp(20px,5vw,80px);
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Hanken Grotesk', system-ui, sans-serif;
  --radius:0px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 50% at 50% -8%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(255,255,255,0.04) 0%, transparent 55%);
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.shell{ position:relative; z-index:1; }

/* type helpers */
.eyebrow{
  font-family:var(--body); font-weight:600; font-size:12.5px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:11px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent); display:inline-block; }
.eyebrow.center::before{ display:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--gutter);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.nav .brand img{ height:30px; width:auto; }
.nav .brand{ display:flex; align-items:center; }
.nav .brand-name{
  font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; transition:color .2s;
}
.nav .brand-name::before{
  content:""; display:inline-block; width:20px; height:2px; background:var(--accent); margin-right:11px;
}
.nav .brand:hover .brand-name{ color:var(--ink); }
.nav .links{ display:flex; align-items:center; gap:4px; }
.nav .links a{
  font-weight:500; font-size:15px; letter-spacing:0.01em;
  padding:9px 16px; color:var(--muted); border-radius:999px; transition:color .2s, background .2s;
}
.nav .links a:hover{ color:var(--ink); background:rgba(255,255,255,0.05); }
.nav .links a.cta{
  color:var(--accent-ink); background:var(--accent); font-weight:600; margin-left:8px;
}
.nav .links a.cta:hover{ filter:brightness(1.08); color:var(--accent-ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:clamp(580px,90vh,900px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:90px var(--gutter) 100px;
}
.hero .logo{
  width:min(360px,64vw); height:auto; margin-bottom:46px;
  filter:drop-shadow(0 20px 60px rgba(0,0,0,0.6));
}
.hero h1{
  font-family:var(--display); font-weight:700; font-optical-sizing:auto;
  font-size:clamp(38px,6.6vw,88px); line-height:0.98; letter-spacing:-0.02em;
  margin:0 0 28px; max-width:16ch; text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p.lede{
  font-size:clamp(17px,1.7vw,21px); line-height:1.6; color:var(--muted);
  max-width:60ch; margin:0 auto 40px; text-wrap:pretty;
}
.hero .actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:15px; letter-spacing:0.01em;
  padding:14px 24px; border-radius:999px; transition:transform .2s, background .2s, color .2s, border-color .2s, filter .2s;
}
.btn .arr{ transition:transform .2s; }
.btn:hover .arr{ transform:translateX(4px); }
.btn.solid{ background:var(--accent); color:var(--accent-ink); }
.btn.solid:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.btn.ghost{ border:1px solid var(--line-2); color:var(--ink); }
.btn.ghost:hover{ border-color:var(--ink); background:rgba(255,255,255,0.04); transform:translateY(-2px); }

.hero .scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.hero .scroll .bar{ width:1px; height:40px; background:linear-gradient(var(--line-2), transparent); }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-top:36px; padding-bottom:34px; border-top:1px solid var(--line);
}
.section-head h2{
  font-family:var(--display); font-weight:700; font-size:clamp(26px,3.6vw,42px);
  letter-spacing:-0.02em; margin:0; line-height:1;
}
.section-head .meta{ font-size:14px; color:var(--faint); white-space:nowrap; }

/* ============================================================
   GAMES
   ============================================================ */
.games{ padding-bottom:40px; }

.game{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px); align-items:center;
  padding:clamp(40px,6vw,80px) 0;
  border-top:1px solid var(--line);
}
.game:first-child{ border-top:none; }
.game.mirror .art{ order:2; }
.game.mirror .copy{ order:1; }

/* art */
.art{ position:relative; }
.art .frame{
  position:relative; width:100%; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--radius); background:var(--panel);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.8);
}
.art .frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line-2);
  border-radius:inherit;
}
.art image-slot{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.05), transparent 60%),
    var(--panel);
}
.art .art-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.art .num{ display:none; }

/* copy */
.copy .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tag{
  font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap;
  padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted);
}
.tag.live{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); color:var(--accent); }
.tag.dot::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:7px; transform:translateY(-1px); }

.game .title{
  font-family:var(--display); font-weight:700; font-optical-sizing:auto;
  font-size:clamp(32px,4.4vw,58px); line-height:0.98; letter-spacing:-0.02em;
  margin:0 0 18px;
}
.game .blurb{ font-size:clamp(16px,1.3vw,18px); color:var(--muted); margin:0 0 22px; max-width:48ch; text-wrap:pretty; }
.game .did{
  font-size:15px; color:var(--ink); margin:0 0 28px; max-width:46ch;
  padding-left:18px; border-left:2px solid var(--accent);
}
.game .did .role{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--faint); margin-bottom:5px;
}
.game .did b{ color:var(--ink); font-weight:700; }

/* link row */
.links{ display:flex; flex-wrap:wrap; gap:10px; }
.lnk{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:14px; font-weight:600; padding:11px 18px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--ink); transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.lnk .arr{ color:var(--faint); transition:transform .2s, color .2s; }
.lnk:hover{ background:rgba(255,255,255,0.04); color:var(--ink); border-color:var(--ink); transform:translateY(-2px); }
.lnk:hover .arr{ color:var(--ink); transform:translateX(3px); }
.lnk.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.lnk.primary:hover{ filter:brightness(1.08); background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.lnk.primary .arr{ color:color-mix(in srgb, var(--accent-ink) 55%, transparent); }

/* teaser (unannounced) art */
.art.teaser .frame{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(80% 80% at 50% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--panel);
}
.art.teaser .teaser-mark{
  text-align:center; padding:24px;
}
.art.teaser .teaser-mark .eq{
  font-family:var(--display); font-weight:700; font-size:clamp(30px,4vw,52px);
  letter-spacing:-0.02em; line-height:1; color:var(--ink);
}
.art.teaser .teaser-mark .sub{
  margin-top:12px; font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); font-weight:600;
}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.caps{ padding:8px var(--gutter) 80px; }
.caps .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.caps .cap{ background:var(--bg); padding:30px 26px; }
.caps .cap .n{ font-family:var(--display); font-weight:700; font-size:14px; color:var(--accent); }
.caps .cap h4{ font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-0.01em; margin:14px 0 9px; }
.caps .cap p{ font-size:14.5px; color:var(--muted); margin:0; }
@media (max-width:860px){ .caps .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .caps .grid{ grid-template-columns:1fr; } }

/* ============================================================
   CTA BAND
   ============================================================ */
.band{
  border-top:1px solid var(--line);
  padding:clamp(60px,9vw,120px) 0;
  text-align:center;
}
.band h3{
  font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,64px);
  letter-spacing:-0.025em; line-height:1; margin:0 0 22px; text-wrap:balance;
}
.band p{ font-size:clamp(16px,1.5vw,19px); color:var(--muted); max-width:52ch; margin:0 auto 36px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding:56px var(--gutter) 40px; }
.footer .foot-name{
  font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center;
}
.footer .foot-name::before{
  content:""; display:inline-block; width:20px; height:2px; background:var(--accent); margin-right:11px;
}
.footer .foot-tagline{
  font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-0.01em;
  color:var(--ink); line-height:1.18; margin:16px 0 0; white-space:nowrap;
}
.footer .foot-tagline .hl{ color:var(--accent); }
.footer .top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer .top img{ height:40px; }
.footer .cols{ display:flex; gap:clamp(36px,7vw,110px); flex-wrap:wrap; }
.footer .fcol{ display:flex; flex-direction:column; gap:11px; }
.footer .fcol .h{ font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; }
.footer .fcol a{ font-size:15px; color:var(--muted); transition:color .2s; width:fit-content; }
.footer .fcol a:hover{ color:var(--ink); }
.footer .base{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13px; color:var(--faint);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .game{ grid-template-columns:1fr; gap:26px; }
  .game.mirror .art{ order:0; }
  .game.mirror .copy{ order:0; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .nav .links a{ padding:8px 11px; font-size:14px; }
  .nav .links a.cta{ display:none; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:8px; }
}