/* jwl works — shared styles.
   Colour tokens are lifted from the game's own locked palette (src/art/palette.js)
   so the site and the game are literally the same set of colours. */
:root{
  --ink:#16121e;        /* ground — a step deeper than palette ink for web contrast */
  --panel:#211a2e;
  --panel-2:#2a2138;
  --line:#332a44;
  --text:#f2f6fa;       /* palette.neutral[6] */
  --dim:#9aa0b0;        /* palette.neutral[4] */
  --faint:#6a6a7a;      /* palette.neutral[3] */
  --sky:#6ad4ff;        /* palette.cyan[1] — CHROMA's blue */
  --sky-deep:#2a5a8a;   /* palette.cyan[0] */
  --goo:#7ecb7e;        /* palette.green[2] — the capsule's goo band */
  --goo-deep:#3e8a1e;   /* palette.green[1] */
  --max:1060px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Game art is pixel art. Never let a browser smooth it. */
img.px{image-rendering:pixelated; image-rendering:crisp-edges}

a{color:var(--sky); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

/* ── pixel display type ───────────────────────────── */
.px-font{font-family:"Silkscreen","IBM Plex Sans",monospace; font-weight:400}

/* ── studio bar ───────────────────────────────────── */
.bar{
  border-bottom:1px solid var(--line);
  background:rgba(22,18,30,.9);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:20;
}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; gap:16px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:20px; width:auto}
.brand .name{font-family:"Silkscreen",monospace; font-size:15px; letter-spacing:.02em; color:var(--text)}
.bar nav{display:flex; gap:20px; font-size:14px}
.bar nav a{color:var(--dim)}
.bar nav a:hover{color:var(--text); text-decoration:none}

/* ── studio intro ─────────────────────────────────── */
.intro{padding:56px 0 40px}
.intro h1{
  font-family:"Silkscreen",monospace; font-weight:400;
  font-size:clamp(28px,6vw,46px); line-height:1.25; margin:0 0 18px;
  letter-spacing:.01em; text-wrap:balance;
}
.intro h1 .dot{color:var(--sky)}
.intro p{color:var(--dim); max-width:56ch; margin:0; font-size:17px}

/* ── goo divider — the capsule's signature, as a rule ── */
.goo{display:block; width:100%; height:26px; margin:0}
.goo rect{fill:var(--goo-deep)}
.goo path{fill:var(--goo-deep)}
.goo .lip{fill:var(--goo)}

/* ── game ─────────────────────────────────────────── */
.game{padding:0 0 72px}
.hero{
  position:relative; margin:0 0 0; background:#0b0910;
  border-bottom:1px solid var(--line);
}
.hero img.art{display:block; width:100%; height:auto}
.hero .logo{
  position:absolute; left:6%; bottom:12%; width:min(38%,340px); height:auto;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.55));
}
.game .wrap{padding-top:40px}
.eyebrow{
  font-family:"Silkscreen",monospace; font-size:11px; letter-spacing:.2em;
  color:var(--goo); text-transform:uppercase; margin:0 0 10px;
}
.pitch{font-size:19px; line-height:1.6; max-width:62ch; margin:0 0 28px; color:#dfe4ee}
.pitch b{color:var(--text); font-weight:600}

.cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 12px}
.btn{
  display:inline-block; font-family:"Silkscreen",monospace; font-size:14px;
  padding:14px 22px; border-radius:4px; letter-spacing:.04em;
  background:var(--sky); color:#06222f; border:none;
}
.btn:hover{background:#8ee0ff; text-decoration:none}
.btn.ghost{background:transparent; color:var(--sky); border:1px solid var(--sky-deep)}
.btn.ghost:hover{background:rgba(106,212,255,.09); text-decoration:none}
.cta-note{color:var(--faint); font-size:13.5px; margin:0 0 40px}

/* ── facts strip ──────────────────────────────────── */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:6px; overflow:hidden; margin:0 0 48px;
}
.facts div{background:var(--panel); padding:16px 18px}
.facts .n{font-family:"Silkscreen",monospace; font-size:20px; color:var(--sky); display:block}
.facts .l{font-size:13px; color:var(--dim); display:block; margin-top:4px}

/* ── shots ────────────────────────────────────────── */
h2.sec{
  font-family:"Silkscreen",monospace; font-weight:400; font-size:16px;
  letter-spacing:.12em; color:var(--dim); text-transform:uppercase;
  margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; margin:0 0 56px}
.shots a{display:block; border:1px solid var(--line); border-radius:5px; overflow:hidden; background:#0b0910; line-height:0}
.shots a:hover{border-color:var(--sky-deep)}
.shots img{width:100%; height:auto; display:block}

/* ── footer ───────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding:36px 0 60px; color:var(--dim); font-size:14.5px}
footer .cols{display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between}
footer h3{font-family:"Silkscreen",monospace; font-weight:400; font-size:12px; letter-spacing:.14em;
  color:var(--faint); text-transform:uppercase; margin:0 0 10px}
footer p{margin:0 0 6px}
footer .fine{margin-top:32px; color:var(--faint); font-size:13px; max-width:70ch}

/* ── press page ───────────────────────────────────── */
.doc{padding:44px 0 20px}
.doc h1{font-family:"Silkscreen",monospace; font-weight:400; font-size:clamp(24px,5vw,34px); margin:0 0 8px}
.doc .lede{color:var(--dim); max-width:60ch; margin:0 0 36px}
.doc h2{font-family:"Silkscreen",monospace; font-weight:400; font-size:15px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); margin:40px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.doc table{border-collapse:collapse; width:100%; font-size:14.5px; margin:0 0 10px}
.doc td,.doc th{border-bottom:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
.doc th{color:var(--faint); font-weight:600; width:34%; font-size:13.5px}
.doc ul{padding-left:20px; color:#dfe4ee}
.doc li{margin:6px 0}
.dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:0 0 10px}
.dl a{display:block; border:1px solid var(--line); border-radius:5px; padding:14px 16px; background:var(--panel); color:var(--text)}
.dl a:hover{border-color:var(--sky-deep); text-decoration:none}
.dl .k{font-family:"Silkscreen",monospace; font-size:12px; color:var(--sky); display:block; margin-bottom:4px}
.dl .v{font-size:13px; color:var(--dim)}
.tblwrap{overflow-x:auto}

@media (max-width:640px){
  .hero .logo{left:5%; bottom:8%; width:46%}
  .bar nav{gap:14px}
  .intro{padding:40px 0 30px}
}

/* ── the wordmark ─────────────────────────────────────
   Drawn from a pixel table in scripts/wordmark.mjs and inlined as SVG, so the
   studio logo is code like everything else — no image file, nothing traced. */
.brand .mark{display:block; width:132px}
.brand .mark svg{display:block; width:100%; height:auto; color:var(--text)}
.bigmark{width:min(380px,74vw); margin:0 0 26px; color:var(--text)}  /* body white so the slime dot reads */
.bigmark svg{display:block; width:100%; height:auto}
@media (max-width:640px){ .brand .mark{width:104px} }