:root{
  --iron:#222A2A; --deep:#181e1e; --ink:#E2DAC2; --mute:#aeb0a2; --line:#ffffff1c;
  --aqua:#4FBBBC; --rust:#EC4624; --heat:#F39120;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;background:var(--iron)}
body{background:var(--iron);color:var(--ink);font:400 1.0625rem/1.6 "Geist",system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--heat);color:var(--iron)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--heat);outline-offset:4px;border-radius:2px}
html{scrollbar-color:#4a5555 var(--iron);scrollbar-width:thin}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--iron)}::-webkit-scrollbar-thumb{background:#4a5555;border-radius:6px}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);background:linear-gradient(var(--iron) 55%,#222a2a00)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;letter-spacing:-.01em}
.top nav{display:flex;align-items:center;gap:clamp(14px,3vw,34px);font-size:.95rem}
.top nav a{text-decoration:none;color:var(--mute);transition:color .25s}
.top nav a:hover{color:var(--ink)}
.top nav .pill{color:var(--iron);background:var(--ink);padding:8px 16px;border-radius:99px;font-weight:500}
.top nav .pill:hover{background:var(--heat);color:var(--iron)}

/* layout */
main{padding:0 var(--pad)}
.block{max-width:1200px;margin:0 auto;padding:clamp(72px,12vw,150px) 0 0}
h2{font-size:.95rem;font-weight:500;color:var(--mute);letter-spacing:.01em;margin-bottom:28px}
.big{font-size:clamp(1.5rem,3.2vw,2.25rem);line-height:1.2;font-weight:500;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.quiet{color:var(--mute);font-size:.98rem}

/* hero */
.hero{min-height:100svh;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(24px,5vw,80px);padding:120px 0 60px}
h1{font-size:clamp(2.6rem,6.4vw,5.5rem);line-height:1;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.lede{margin-top:28px;max-width:42ch;font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--mute)}
.hero-links{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.btn{display:inline-block;text-decoration:none;font-weight:500;color:var(--iron);background:var(--ink);padding:14px 24px;border-radius:99px;transition:background .25s,transform .35s var(--ease)}
.btn:hover{background:var(--heat);transform:translateY(-2px)}
.text-link{color:var(--ink);text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:#E2DAC266}
.text-link:hover{text-decoration-color:var(--heat)}
.hero-mark{justify-self:end;width:min(100%,520px);aspect-ratio:1}
#mark{width:100%;height:100%;transition:transform .8s var(--ease);will-change:transform}
#mark path{stroke-dasharray:1;stroke-dashoffset:0}
.js.ready #mark path{animation:draw 1.5s var(--ease) backwards}
.js.ready #mark path:nth-child(2){animation-delay:.08s}
.js.ready #mark path:nth-child(3){animation-delay:.16s}
.js.ready #mark path:nth-child(4){animation-delay:.24s}
.js.ready #mark path:nth-child(5){animation-delay:.32s}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* rows */
.rows{list-style:none;padding:0;border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line);position:relative}
.row::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--c);transition:width .6s var(--ease)}
.row:hover::after,.row:focus-within::after{width:100%}
.row-in{display:grid;grid-template-columns:minmax(150px,.7fr) 2fr auto;align-items:baseline;gap:8px 32px;padding:30px 0;text-decoration:none}
.row-name{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.row-desc{color:var(--mute);max-width:46ch}
.row-status{font-size:.9rem;color:var(--mute);white-space:nowrap}
.row-status.live{color:var(--iron);background:var(--c);padding:3px 12px;border-radius:99px;font-weight:500}
a.row-in:hover .row-name{color:var(--c)}

/* stream */
.stream{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,6vw,96px);align-items:center}
.stream-text p{margin-top:20px;max-width:52ch}
.stream-text .big{margin-top:0;max-width:20ch}
.stream-text .btn{margin-top:12px}
.shots{position:relative;aspect-ratio:1.18;margin:0}
.shot{position:absolute;border-radius:10px;border:1px solid var(--line);box-shadow:0 30px 50px -24px #000b,0 6px 14px -6px #0006}
.s1{width:88%;left:0;top:0;transition:transform .7s var(--ease)}
.s2{width:76%;right:0;bottom:6%;transition:transform .7s var(--ease)}
.shots:hover .s1{transform:translate(-8px,-6px)}
.shots:hover .s2{transform:translate(8px,6px)}
.shots figcaption{position:absolute;left:0;bottom:-8px;font-size:.85rem;color:var(--mute)}

/* games */
.section-note{margin:-12px 0 28px;color:var(--mute)}
.games{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.game{position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:var(--deep);border:1px solid var(--line)}
.game svg{position:absolute;inset:0;width:100%;height:100%;transition:transform 1s var(--ease)}
.game:hover svg{transform:scale(1.05)}
.game-text{position:absolute;inset:auto 0 0 0;padding:28px;background:linear-gradient(#18201f00,#181e1ee6 70%)}
.game h3{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:600;letter-spacing:-.03em}
.game p{color:var(--mute);font-size:.92rem}

/* about + contact */
.about-text{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,6vw,96px);align-items:start}
.about-text p:not(.big){color:var(--mute);max-width:46ch}
.mail{display:inline-block;font-size:clamp(1.6rem,6.5vw,5rem);font-weight:600;letter-spacing:-.045em;line-height:1.1;text-decoration:none;word-break:break-word;transition:color .3s}
.mail:hover{color:var(--heat)}
.elsewhere{margin-top:28px;display:flex;gap:28px;color:var(--mute)}
.elsewhere a{text-underline-offset:5px}
.elsewhere a:hover{color:var(--ink)}
footer{max-width:1200px;margin:clamp(80px,12vw,160px) auto 0;padding:28px var(--pad) 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);color:var(--mute);font-size:.9rem}
@media(min-width:1328px){footer{padding-inline:0}}

/* reveal: content stays visible without JS */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:110px;min-height:auto;gap:40px}
  .hero-mark{justify-self:start;width:min(78%,360px);order:-1}
  .row-in{grid-template-columns:1fr auto}
  .row-desc{grid-column:1/-1;order:3}
  .stream,.about-text{grid-template-columns:1fr}
  .games{grid-template-columns:1fr}
  .top nav a:not(.pill){display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* chat */
.chat{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,6vw,96px);align-items:center}
.chat-text p{margin-top:20px;max-width:52ch}
.chat-text .big{margin-top:0;max-width:20ch}
.chat-text .btn{margin-top:12px}
.chat-text .facts{margin-top:24px;max-width:52ch}
.facts{list-style:none;padding:0;border-top:1px solid var(--line)}
.facts li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--mute);font-size:.98rem}
.chat-shot{margin:0}
.chat-shot img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:0 30px 50px -24px #000b,0 6px 14px -6px #0006}
.chat-shot figcaption{margin-top:12px;font-size:.85rem;color:var(--mute)}
@media(max-width:860px){.chat{grid-template-columns:1fr}}