:root{
  --ink:         #1A0F0C;
  --espresso:    #3E2723;
  --espresso-2:  #2A1A16;
  --orange:      #F0660A;
  --orange-bright:#FF7A1F;
  --orange-soft: #F89456;
  --bone:        #F2ECE3;
  --bone-2:      #E6DED1;
  --paper:       #EFE7DB;
  --blue:        #2E5C8A;
  --blue-deep:   #1A3D63;
  --blue-soft:   #5A8BB8;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(240,102,10,0.08), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(46,92,138,0.06), transparent 60%),
    var(--paper);
  color: var(--ink);
  font-family:'Barlow Condensed', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.display{ font-family:'Archivo Black', sans-serif; }
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color: inherit; }
::selection{ background: var(--orange); color: var(--ink); }

/* film grain overlay */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity:.4;
}

/* ============ NAV ============ */
.nav{
  position: sticky; top:0; z-index:100;
  background: var(--ink);
  border-bottom: 2px solid var(--orange);
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 40px;
  color: var(--bone);
}
.nav-brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.nav-mark{
  width:38px; height:38px; background: var(--orange);
  display:grid; place-items:center; flex:none;
}
.nav-mark img{ width:26px; height:26px; display:block; }
.nav-wordmark{
  font-family:'Archivo Black', sans-serif; font-size:18px; letter-spacing:.02em;
  color: var(--bone); text-transform:uppercase; line-height:1;
}
.nav-wordmark .o{ color: var(--orange); }
.nav-links{ display:flex; gap:4px; align-items:center; }
.nav-links a{
  text-decoration:none; color: var(--bone-2);
  font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:13px;
  padding:8px 14px; border-radius:2px;
  transition: color .15s, background .15s;
}
.nav-links a:hover{ background: rgba(240,102,10,.15); color: var(--orange); }
.lang-toggle{
  display:flex; border:1px solid rgba(242,236,227,.3); border-radius:2px;
  overflow:hidden; margin-left:12px;
}
.lang-toggle button{
  background:none; border:none; cursor:pointer;
  font-family:'JetBrains Mono'; font-size:11px; font-weight:700; letter-spacing:.08em;
  color: var(--bone-2); padding:7px 11px; transition: all .15s;
}
.lang-toggle button.active{ background: var(--orange); color: var(--ink); }

/* ============ HERO ============ */
.hero{
  position:relative; overflow:hidden;
  background: var(--ink); color: var(--bone);
  min-height: 88vh;
  display:flex; align-items:center;
  padding: 80px 40px;
}
.hero .canyon-bg{
  position:absolute; inset:0; opacity:.2; pointer-events:none;
  width:100%; height:100%;
}
.hero-wrap{
  max-width:1400px; margin:0 auto; position:relative; z-index:2;
  display:grid; grid-template-columns: 1.1fr 1fr; gap:60px; align-items:center;
  width:100%;
}
.hero .eyebrow{
  font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.25em;
  color: var(--orange); text-transform:uppercase; margin-bottom:24px;
}
.hero h1{
  font-family:'Archivo Black'; font-size: clamp(42px, 10vw, 140px);
  line-height:.84; letter-spacing:-.03em; text-transform:uppercase;
}
.hero h1 .o{ color: var(--orange); }
.hero .tag{
  margin-top:32px; font-size:22px; line-height:1.4;
  color: var(--bone-2); max-width:520px;
}
.hero .chips{ display:flex; gap:10px; margin-top:32px; flex-wrap:wrap; }
.chip{
  padding:6px 14px; border:1px solid rgba(242,236,227,.35);
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.15em; text-transform:uppercase;
}
.chip.filled{ background: var(--orange); color: var(--ink); border-color: var(--orange); }
.hero-mark{
  position:relative; aspect-ratio:1/1; width:100%;
  max-width:520px; justify-self:end;
}
.hero-mark .stamp{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }

/* ============ ABOUT ============ */
.about{ background: var(--bone); padding: 90px 40px; position:relative; z-index:2; }
.about-wrap{ max-width:1400px; margin:0 auto; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  border-bottom:1px solid rgba(26,15,12,.2); padding-bottom:20px; margin-bottom:52px;
}
.section-head .kicker{
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--orange); margin-bottom:10px;
}
.section-head h2{
  font-family:'Archivo Black'; font-size: clamp(44px, 6vw, 88px);
  line-height:.9; letter-spacing:-.02em; text-transform:uppercase;
}
.section-head .side{ max-width:420px; font-size:18px; line-height:1.4; opacity:.75; text-align:right; }

.about-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2px; background: var(--ink); border:2px solid var(--ink); }
.about-lead{
  font-size: clamp(22px, 2.6vw, 34px); line-height:1.35;
  font-weight:500; margin-bottom:44px; max-width:1000px; text-wrap: pretty;
}
.about-lead b{ color: var(--orange); font-weight:700; }
.value-card{
  background: var(--paper); padding:32px 28px; min-height:220px;
  position:relative;
}
.value-card h3{
  font-family:'Archivo Black'; font-size:22px; text-transform:uppercase;
  margin:0 0 12px; letter-spacing:-.01em;
}
.value-card p{ font-size:16px; line-height:1.55; opacity:.78; }

/* ============ MANIFESTO ============ */
.manifesto{
  background: var(--orange); color: var(--ink);
  padding: 100px 0 0; position:relative; z-index:2;
}
.manifesto-wrap{
  max-width:900px; margin:0 auto; padding:0 20px; text-align:center;
}
.manifesto .kicker{
  font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; opacity:.7; margin-bottom:16px;
}
.manifesto h2{
  font-family:'Archivo Black'; font-size: clamp(40px, 5.5vw, 72px);
  line-height:1; text-transform:uppercase; letter-spacing:-.02em; margin-bottom:37px;
}
.manifesto p{
  font-size:22px; line-height:1.5; opacity:.85; max-width:720px; margin:0 auto;
}
.manifesto .sign{
  margin-top:48px; font-family:'Archivo Black'; font-size:24px;
  letter-spacing:-.01em; text-transform:uppercase;
}

/* ============ GAMES ============ */
.games{ background: var(--ink); color: var(--bone); padding: 90px 40px; position:relative; z-index:2; }
.games .section-head{ border-bottom-color: rgba(242,236,227,.18); }
.games .section-head .side{ color: var(--bone-2); opacity:.8; }
.games-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:2px; background: var(--orange); border:2px solid var(--orange); }
.game-card{
  background: var(--espresso-2); padding:0;
  display:flex; flex-direction:column;
}
.game-cover{
  position:relative; aspect-ratio:16/9;
  overflow:hidden; background: var(--espresso);
}
.game-art{ width:100%; height:100%; object-fit:cover; display:block; }
.game-cover .tape{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:'JetBrains Mono'; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; background: var(--orange); color:var(--ink); padding:5px 10px;
}
.game-cover .tape.tape-bottom{ top:auto; bottom:14px; }
.game-body{ padding:20px 22px 28px; flex:1; display:flex; flex-direction:column; }
.game-info{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.game-info h3{
  font-family:'Archivo Black'; font-size:22px; text-transform:uppercase; letter-spacing:-.01em;
}
.game-info .genre{
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--orange); white-space:nowrap;
}
.game-desc{
  font-size:15px; line-height:1.5; color: var(--bone-2); opacity:.8;
  margin-top:10px; flex:1;
}

/* coming soon card */
.game-cover.soon{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 18px, rgba(240,102,10,.06) 18px, rgba(240,102,10,.06) 36px),
    var(--espresso);
  border-bottom:1px dashed rgba(240,102,10,.35);
}
.soon-inner{ text-align:center; padding:24px; }
.soon-inner .qmark{
  font-family:'Archivo Black'; font-size:72px; color: rgba(240,102,10,.55); line-height:1;
}
.soon-inner .st{
  font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color: var(--orange); margin-top:16px;
}

/* ============ CONTACT ============ */
.contact{
  background: var(--ink); color: var(--bone);
  padding: 100px 40px; position:relative; z-index:2; overflow:hidden;
}
.contact-bg{
  position:absolute; inset:0; opacity:.18; pointer-events:none;
  width:100%; height:100%; object-fit:cover;
}
.contact-wrap{ max-width:1000px; margin:0 auto; position:relative; z-index:2; text-align:center; }
.contact .kicker{
  font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color: var(--orange); margin-bottom:20px;
}
.contact h2{
  font-family:'Archivo Black'; font-size: clamp(40px, 6.5vw, 92px);
  line-height:.9; letter-spacing:-.02em; text-transform:uppercase;
}
.contact p{
  font-size:20px; line-height:1.45; margin:26px auto 0;
  max-width:600px; color: var(--bone-2); text-wrap:pretty;
}
.contact-mail{
  display:inline-flex; align-items:center; gap:14px; margin-top:40px;
  background: var(--orange); color: var(--ink); text-decoration:none;
  font-family:'Archivo Black'; font-size: clamp(18px, 2.8vw, 28px); letter-spacing:-.01em;
  text-transform:uppercase; padding:16px 32px;
  transition: transform .15s, background .15s;
}
.contact-mail:hover{ transform: translateY(-3px); background: var(--orange-bright); }
.contact-mail img{ width:24px; height:24px; filter: brightness(0); }

/* ============ FOOTER ============ */
footer{
  background: var(--ink); color: var(--bone-2);
  padding: 56px 40px 40px; position:relative; z-index:2;
  border-top: 2px solid var(--orange);
}
.footer-wrap{
  max-width:1400px; margin:0 auto;
  display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.footer-brand img.fb-badge{ width:220px; height:auto; }
.footer-brand .fb-loc{
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.55;
}
.footer-links{ display:flex; gap:48px; flex-wrap:wrap; }
.footer-col h4{
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--orange); margin-bottom:14px;
}
.footer-col a{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--bone-2);
  font-size:15px; padding:5px 0; transition: color .15s;
}
.footer-col a:hover{ color: var(--orange); }
.footer-col a img{ width:17px; height:17px; flex:none; filter: brightness(0) invert(1); }
.footer-bottom{
  max-width:1400px; margin:44px auto 0; padding-top:24px;
  border-top:1px solid rgba(242,236,227,.12);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.5;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .nav{ padding:12px 20px; flex-wrap:wrap; gap:10px; }
  .nav-links a{ padding:6px 9px; letter-spacing:.05em; }
  .hero{ padding:56px 20px; min-height:auto; }
  .hero-wrap{ grid-template-columns:1fr; gap:48px; }
  .hero-mark{ order:-1; max-width:300px; margin:0 auto; justify-self:center; }
  .about, .games, .contact{ padding:64px 20px; }
  .manifesto{ padding:64px 0 0; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .section-head .side{ text-align:left; }
  .about-cols{ grid-template-columns:1fr; }
  .games-grid{ grid-template-columns:1fr; }
  .footer-wrap{ flex-direction:column; }
}
@media (max-width: 560px){
  .nav-links{ width:100%; justify-content:space-between; }
  .contact-mail{
    font-size:14px; padding:14px 18px; gap:10px;
    max-width:100%; text-align:center; overflow-wrap:anywhere;
  }
  .contact-mail img{ width:18px; height:18px; flex:none; }
}

/* ============ REVEAL TITLE ANIMATION ============ */
.reveal-title{ overflow:hidden; }
.js .reveal-title{ visibility:hidden; }   /* hidden until split, to avoid a flash on load */
.reveal-title .line-wrap{ display:block; overflow:hidden; }
.reveal-title .word{ display:inline-block; white-space:nowrap; }
.reveal-title .char{
  display:inline-block; transform:translateY(115%); opacity:0;
  will-change: transform, opacity;
}
.reveal-title .char.is-visible{
  transform:translateY(0); opacity:1;
  transition: transform .75s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}

/* ============ SCALE-IN ON SCROLL ============ */
/* grows from its centre when it scrolls into view */
.js .scale-in{ opacity:0; }
.scale-in.is-visible{ opacity:1; animation: scaleIn 2.4s cubic-bezier(.22,1,.36,1); }
@keyframes scaleIn{
  from{ transform: scale(.4); opacity:0; }
  to{   transform: scale(1);  opacity:1; }
}

/* ============ SIGN MARQUEE ============ */
.sign-marquee{
  margin: 98px 0 0; overflow: hidden;
  background: var(--espresso);
  padding: 16px 0;
}
.marquee-track{ display: flex; width: max-content; }
.marquee-track.is-ready{ animation: marquee 20s linear infinite; }
.marquee-group{ display: flex; align-items: center; flex: 0 0 auto; }
.mq-text{
  font-family: 'Archivo Black', sans-serif; font-size: 20px;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--bone); white-space: nowrap; padding-right: 2.4rem;
}
.mq-icon{ display: inline-flex; color: var(--bone); padding-right: 2.4rem; }
.mq-icon svg{ width: 22px; height: 22px; display: block; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{   transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track.is-ready{ animation: none; }
}