:root{
  --void:#08080A;
  --slab:#101014;
  --rule:#23232B;
  --fog:#8C8C99;
  --bone:#F5F5F2;
  --hazard:#F5F5F2;
  --chrome:rgba(8,8,10,.86);

  --breach:#FF4A3D;
  --vector:#4FC9E8;

  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --gutter:clamp(20px,5vw,72px);
  --bar:52px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

:focus-visible{outline:2px solid var(--hazard);outline-offset:3px}

.label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fog);
}

.hazard-rule{
  height:3px;
  background:linear-gradient(90deg,var(--breach),var(--vector));
  opacity:.9;
}

/* ---------- header ---------- */
.top{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--bar);
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 var(--gutter);
  background:var(--chrome);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.top .mark{
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.top nav{display:flex;gap:22px}
.top nav a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fog);
  transition:color .18s ease;
}
.top nav a:hover{color:var(--bone)}

/* ---------- hero ---------- */
.hero{
  min-height:min(92vh,860px);
  padding:calc(var(--bar) + 8vh) var(--gutter) 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero .eyebrow{margin-bottom:26px}
.wordmark{
  font-family:var(--display);
  font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(56px,15.5vw,232px);
  line-height:.82;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.wordmark span{display:block}
.wordmark .lit{color:var(--hazard)}

.hero p.lede{
  max-width:46ch;
  margin:34px 0 0;
  font-size:clamp(16px,1.5vw,20px);
  color:var(--fog);
}
.hero p.lede strong{color:var(--bone);font-weight:500}

.strip{
  margin-top:auto;
  padding:18px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  border-top:1px solid var(--rule);
}
.strip .cell{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}
.strip .cell b{color:var(--bone);font-weight:500}
.hero .hazard-rule{margin:26px calc(var(--gutter) * -1) 0}

/* ---------- generic section ---------- */
.section{padding:clamp(72px,10vw,132px) var(--gutter)}
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(32px,5vw,56px);
}
.section-head h2{
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(26px,4vw,46px);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
}

/* ---------- title cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.card-game{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0D0D11;
  border:1px solid var(--rule);
  isolation:isolate;
}
.card-game img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.75) brightness(.62);
  transform:scale(1.02);
  transition:filter .5s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  z-index:-2;
}
.card-game::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(0deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.5) 48%,rgba(8,8,10,.12) 100%);
  transition:background .45s ease;
}
.card-game::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--tone);
  transition:width .35s cubic-bezier(.2,.7,.3,1);
}
.card-game:hover img{filter:saturate(1.1) brightness(.8);transform:scale(1.06)}
.card-game:hover::before{background:linear-gradient(0deg,rgba(8,8,10,.9) 0%,color-mix(in srgb,var(--tone) 30%,transparent) 66%,transparent 100%)}
.card-game:hover::after{width:12px}

.card-in{
  position:relative;
  height:100%;
  min-height:inherit;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:9px;
  padding:clamp(18px,2.4vw,28px);
}
.card-kicker{
  font-size:14px;
  font-weight:500;
  color:var(--tone);
}
.card-game h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 122,'wght' 900;
  font-size:clamp(34px,4.6vw,58px);
  line-height:.88;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.card-game p{color:#C7C7CF;max-width:46ch}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chip{
  padding:5px 12px;
  font-size:12.5px;
  color:#D6D6DE;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
}
.card-go{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  font-size:15px;
  font-weight:500;
  color:#fff;
  transition:gap .3s ease;
}
.card-game:hover .card-go{gap:17px}

/* ---------- studio ---------- */
.studio{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
}
.studio p{color:var(--fog);max-width:56ch}
.studio p + p{margin-top:18px}
.studio p strong{color:var(--bone);font-weight:500}
.facts{display:grid;gap:0;align-content:start}
.fact{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:15px 0;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.fact:last-child{border-bottom:1px solid var(--rule)}
.fact dt{color:var(--fog)}
.fact dd{color:var(--bone);text-align:right}

/* ---------- faq ---------- */
.faq{max-width:840px}
details{border-top:1px solid var(--rule)}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{
  list-style:none;
  cursor:pointer;
  padding:22px 40px 22px 0;
  position:relative;
  font-size:clamp(16px,2vw,19px);
  font-weight:500;
  transition:color .2s ease;
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--hazard)}
summary::after{
  content:"+";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:18px;
  color:var(--hazard);
}
details[open] summary::after{content:"–"}
details p{padding:0 40px 24px 0;color:var(--fog);max-width:64ch}

/* ---------- contact ---------- */
.contact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.card{background:var(--void);padding:clamp(24px,3vw,36px);transition:background .24s ease}
a.card:hover{background:var(--slab)}
.card .label{display:block;margin-bottom:14px}
.card .val{
  font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 700;
  font-size:clamp(18px,2vw,24px);
  text-transform:uppercase;
  letter-spacing:-.005em;
  word-break:break-word;
}
.card small{display:block;margin-top:10px;color:var(--fog);font-size:13px;text-transform:none;letter-spacing:0}
a.card:hover .val{color:var(--hazard)}

/* ---------- footer ---------- */
footer{
  padding:28px var(--gutter) 40px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:14px 28px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fog);
}
footer nav{display:flex;flex-wrap:wrap;gap:24px}
footer a:hover{color:var(--bone)}

/* ---------- load sequence ---------- */
.wordmark span{animation:flick .9s steps(1,end) both}
.wordmark span:nth-child(1){animation-delay:.1s}
.wordmark span:nth-child(2){animation-delay:.32s}
@keyframes flick{
  0%{opacity:0}
  22%{opacity:.5}
  34%{opacity:0}
  55%{opacity:1}
  62%{opacity:.25}
  100%{opacity:1}
}

@media (max-width:880px){
  .entry{grid-template-columns:1fr}
  .art{order:-1}
  .studio{grid-template-columns:1fr}
  .top nav a:nth-child(2){display:none}
}
@media (max-width:520px){
  .top nav{gap:16px}
  .top nav a:nth-child(1){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- legal pages ---------- */
.legal-head{padding:calc(var(--bar) + 72px) var(--gutter) 0}
.legal-head h1{
  font-family:var(--display);
  font-variation-settings:'wdth' 122,'wght' 900;
  font-size:clamp(38px,8vw,96px);
  line-height:.88;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin-top:22px;
}
.legal-head .updated{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fog);
}
.legal-head .hazard-rule{margin:26px calc(var(--gutter) * -1) 0}

.legal{padding:clamp(48px,7vw,88px) var(--gutter) clamp(72px,10vw,120px)}
.legal .doc{max-width:68ch}
.legal h2{
  font-family:var(--display);
  font-variation-settings:'wdth' 108,'wght' 800;
  font-size:clamp(20px,2.6vw,28px);
  line-height:1.15;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--hazard);
  margin:clamp(44px,5vw,64px) 0 16px;
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bone);
  margin:32px 0 12px;
}
.legal p{color:var(--fog);line-height:1.75;margin-bottom:16px}
.legal p:last-child{margin-bottom:0}
.legal a{color:var(--bone);border-bottom:1px solid var(--rule)}
.legal a:hover{color:var(--hazard);border-color:var(--hazard)}
.legal ul{list-style:none;margin:0 0 20px}
.legal li{position:relative;color:var(--fog);line-height:1.7;padding:0 0 9px 22px}
.legal li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:8px;
  height:1px;
  background:var(--hazard);
}
.legal .back{
  display:inline-flex;
  gap:10px;
  margin-top:64px;
  padding-bottom:5px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone);
  border-bottom:1px solid var(--rule);
  transition:gap .24s ease,border-color .24s ease;
}
.legal .back:hover{gap:16px;border-color:var(--hazard)}

/* ---------- tilt engine (shared) ---------- */
.tilt{perspective:1000px}
.stage{
  position:relative;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tilt.live .stage{transition:transform .08s linear}
.frame{position:relative;overflow:hidden;border-radius:2px}
.frame img.bg,.frame video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.06) translate3d(calc(var(--px,0)*-12px),calc(var(--py,0)*-12px),0);
}
.sheen{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.4) 50%,transparent 66%);
  transform:translate3d(calc(var(--px,0)*90px),0,0);
  opacity:.8;
}
@media (prefers-reduced-motion:reduce){
  .stage,.frame img.bg,.frame video,.sheen{transform:none!important}
}