@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#080808;
  --white:#f1f1ed;
  --muted:#85857f;
  --line:#292925;
  --orange:#ff5a00;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:Inter,Arial,sans-serif;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

.header {
  height:76px;
  padding:0 4vw;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(8,8,8,.94);
  backdrop-filter:blur(12px);
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:800;
  letter-spacing:.08em;
  font-size:15px;
}
.brand-mark {
  width:29px;
  height:29px;
  border-radius:50%;
  overflow:hidden;
  flex:none;
}
.brand-mark img { width:100%; height:100%; object-fit:cover; }
.nav { display:flex; gap:34px; }
.nav a {
  color:var(--muted);
  font:12px "DM Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.nav a:hover { color:var(--orange); }

.menu-button { display:none; background:none; border:0; }
.menu-button span {
  display:block;
  width:24px;
  height:1px;
  margin:6px;
  background:var(--white);
}

.hero {
  min-height:calc(100vh - 76px);
  max-width:1440px;
  margin:auto;
  padding:5vh 4vw 4vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-top:1px solid var(--line);
  padding-top:22px;
}
.eyebrow,.studio-line,.scroll,.section-label,.game-meta,.kicker,.game-details,.footer {
  font:11px "DM Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.eyebrow { color:var(--muted); margin:0 0 8px; }
.studio-line { margin:0; }
.scroll { color:var(--muted); }
.scroll span { color:var(--orange); margin-left:9px; }

.section {
  max-width:1440px;
  margin:auto;
  padding:9vw 4vw;
  border-top:1px solid var(--line);
}
.section-label {
  display:flex;
  gap:30px;
  color:var(--muted);
  margin-bottom:5vw;
}
.section-label span:first-child { color:var(--orange); }

.game-meta { color:var(--muted); margin-bottom:18px; }
.game-art {
  aspect-ratio:16/9;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:#45453f;
  font:11px "DM Mono",monospace;
  letter-spacing:.14em;
}
.game-info {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:8vw;
  padding-top:30px;
}
.kicker { color:var(--orange); margin:0 0 18px; }
.game-info h1 {
  margin:0;
  font-size:clamp(3rem,7vw,7rem);
  line-height:.88;
  letter-spacing:-.065em;
}
.description {
  max-width:480px;
  color:var(--muted);
  margin-top:28px;
}
.game-details {
  align-self:end;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 30px;
  color:var(--muted);
}
.game-details a {
  grid-column:1/-1;
  color:var(--white);
  border-bottom:1px solid var(--orange);
  padding:13px 0;
  margin-top:18px;
}
.game-details b { color:var(--orange); float:right; }

.about-grid {
  display:grid;
  grid-template-columns:1.5fr .5fr;
  gap:10vw;
}
.about h2 {
  margin:0;
  font-size:clamp(3.2rem,7.5vw,8rem);
  line-height:.9;
  letter-spacing:-.065em;
}
.about-copy {
  color:var(--muted);
  line-height:1.6;
}
.about-copy p:first-child { color:var(--white); }

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  align-items:end;
}
.contact h2 {
  margin:0;
  font-size:clamp(4rem,10vw,10rem);
  line-height:.8;
  letter-spacing:-.07em;
}
.email {
  color:var(--orange);
  font-size:clamp(1.1rem,2vw,2rem);
  border-bottom:1px solid var(--orange);
  padding-bottom:13px;
}
.email span { float:right; }

.footer {
  padding:22px 4vw;
  border-top:1px solid var(--line);
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s ease,transform .75s ease;
}
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width:760px) {
  .header { height:64px; }
  .nav {
    display:none;
    position:absolute;
    left:0; right:0; top:64px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:24px 4vw;
    flex-direction:column;
    gap:20px;
  }
  .nav.open { display:flex; }
  .menu-button { display:block; }

  .hero { min-height:calc(100svh - 64px); padding-top:4vh; }
  .hero-bottom { align-items:flex-start; flex-direction:column; gap:30px; }
  .scroll { align-self:flex-end; }

  .section { padding:18vw 4vw; }
  .section-label { margin-bottom:12vw; }
  .game-info,.about-grid,.contact-grid { grid-template-columns:1fr; gap:10vw; }
  .game-art { aspect-ratio:4/3; }
  .game-info h1 { font-size:18vw; }
  .about h2 { font-size:16vw; }
  .contact h2 { font-size:20vw; }
  .footer { flex-direction:column; gap:8px; }
}