/* 13FORGE — the forge, not a SaaS deck.
   Warm sovereign palette pulled from the engine token sheet (forge-canvas/tokens.rs):
   ink/dust grounds, ash text, ember + gold as active exceptions, rust for depth.
   Dark Canvas law: quiet = dark; colour illuminates only what is active. Teal is dead. */
:root {
  --ink:        #0a0706;   /* bg_far  — page ground (--ink) */
  --dust:       #15110d;   /* bg_near — panels/cards (--panel/BgDust) */
  --dust-hi:    #1c160f;   /* raised panel */
  --edge:       #2a2018;   /* warm hairline */
  --edge-hot:   #3a2c1e;   /* warmer hairline on focus rows */
  --ash:        #ecdfcd;   /* fg_text (--ash / TextPrimary) */
  --ash-dim:    #a89a86;   /* fg_muted */
  --ash-faint:  #6f6557;   /* deep muted / captions */
  --ember:      #e8843c;   /* accent_primary (--ember) */
  --ember-hot:  #f6b35a;   /* border focus / hot (--ember-hot) */
  --gold:       #f4cd7a;   /* headings / key values (--gold) */
  --rust:       #bf4a22;   /* deep secondary accent (--deep) */
  /* node accents (lane variety) */
  --n-dialogue: #5e93b0;
  --n-lore:     #9a86e0;
  --n-town:     #5fc285;
  --n-place:    #e2ad3a;
  --maxw:       1180px;
  --ease:       cubic-bezier(.2,.7,.2,1);
  --mono:       ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans:       system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
}

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

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 78% -10%, color-mix(in srgb, var(--rust) 14%, transparent), transparent 60%),
    radial-gradient(900px 500px at 10% 8%, color-mix(in srgb, var(--ember) 8%, transparent), transparent 55%),
    var(--ink);
  color: var(--ash);
  font: 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.skip-link { position: absolute; left: -999px; top: 0; background: var(--ember); color: var(--ink); padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

a { color: var(--ash); text-decoration: none; }
a:hover, a:focus-visible { color: var(--gold); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px; }
code { font-family: var(--mono); font-size: .9em; color: var(--ember-hot); }

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--edge);
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(10px);
}
.wordmark { display: inline-flex; align-items: baseline; gap: .12rem; font-weight: 800; letter-spacing: .04em; font-family: var(--mono); }
.wordmark .glyph { color: var(--ember); text-shadow: 0 0 18px color-mix(in srgb, var(--ember) 50%, transparent); }
.wordmark .word { color: var(--ash); }
.wordmark.small { font-size: .95rem; }
.site-nav { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); margin-left: 1rem; font-size: .9rem; text-transform: lowercase; letter-spacing: .02em; }
.site-nav a { color: var(--ash-dim); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold); }
.site-head .btn-sm { margin-left: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.25rem; border-radius: 7px; font-weight: 600; font-size: .95rem;
  min-height: 44px; border: 1px solid var(--edge);
  transition: transform .15s var(--ease), border-color .15s, background .15s, color .15s;
}
.btn-sm { min-height: 36px; padding: .45rem .9rem; font-size: .85rem; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ember); color: var(--ink); border-color: var(--ember); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember) 60%, transparent); }
.btn-primary:hover { background: var(--ember-hot); border-color: var(--ember-hot); color: var(--ink); box-shadow: 0 6px 30px -8px color-mix(in srgb, var(--ember) 70%, transparent); }
.btn-ghost { background: transparent; color: var(--ash); }
.btn-ghost:hover { border-color: var(--ember-hot); color: var(--gold); }

/* ---------- hero ---------- */
.hero {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem);
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.kicker { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--ash-dim); text-transform: lowercase; margin: 0 0 1rem; }
.hero-copy h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; margin: 0 0 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.hero-copy h1 em { color: var(--gold); font-style: normal; text-shadow: 0 0 40px color-mix(in srgb, var(--gold) 28%, transparent); }
.hero-copy .lede { color: var(--ash-dim); font-size: 1.06rem; max-width: 52ch; }
.hero-copy .lede strong { color: var(--ember-hot); font-weight: 600; }
.cta-row { display: flex; gap: .75rem; margin-top: 1.6rem; flex-wrap: wrap; }
.micro { color: var(--ash-faint); font-size: .84rem; margin-top: 1.2rem; max-width: 50ch; }

/* ---------- the console (engine demonstrating itself) ---------- */
.console {
  margin: 0; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--dust-hi), var(--dust));
  box-shadow: 0 30px 80px -40px #000, inset 0 1px 0 color-mix(in srgb, var(--ember) 8%, transparent);
}
.console-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem; border-bottom: 1px solid var(--edge);
  background: color-mix(in srgb, var(--ink) 50%, var(--dust));
  font-family: var(--mono); font-size: .76rem;
}
.console-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--edge-hot); }
.console-bar .dot:nth-child(2) { background: #3a2c1e; }
.console-title { margin-left: .4rem; color: var(--ash-dim); letter-spacing: .06em; }
.console-live { margin-left: auto; color: var(--ember); display: inline-flex; align-items: center; gap: .4rem; }
.console-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--ember) 70%, transparent); animation: breathe 2.4s var(--ease) infinite; }
.console-live[data-mode="2d"] { color: var(--ash-dim); }
.console-live[data-mode="2d"]::before { background: var(--ash-dim); box-shadow: none; animation: none; }

.console-body { display: grid; grid-template-columns: 0.92fr 1.08fr; min-height: 300px; }
@media (max-width: 560px) { .console-body { grid-template-columns: 1fr; } }
.vx-source {
  margin: 0; padding: 1rem 1rem .8rem; font-family: var(--mono); font-size: .72rem; line-height: 1.55;
  color: var(--ash-dim); background: color-mix(in srgb, var(--ink) 55%, var(--dust));
  border-right: 1px solid var(--edge); white-space: pre-wrap; overflow: hidden;
  min-height: 300px;
}
@media (max-width: 560px) { .vx-source { border-right: 0; border-bottom: 1px solid var(--edge); min-height: 180px; } }
.vx-source .k { color: var(--n-dialogue); }   /* keyword: ui */
.vx-source .s { color: var(--n-town); }        /* string */
.vx-source .n { color: var(--gold); }          /* number */
.vx-source .p { color: var(--ash-faint); }     /* punctuation/key */
.vx-source .c { color: var(--ash-faint); font-style: italic; } /* comment */
.vx-source .caret { background: var(--ember); color: var(--ember); animation: blink 1s steps(1) infinite; }

.canvas-wrap { position: relative; display: grid; place-items: center; padding: 14px; background:
  repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--ember) 3%, transparent) 23px 24px),
  var(--dust); }
#forge-canvas { display: block; width: 100%; height: auto; max-height: 340px; border-radius: 6px;
  image-rendering: optimizeQuality; background: #0c0a08; }

.pipeline {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0; padding: .8rem 1rem; list-style: none; counter-reset: stage;
  border-top: 1px solid var(--edge); font-family: var(--mono); font-size: .72rem;
}
.pipeline li {
  position: relative; padding: .35rem .7rem; border: 1px solid var(--edge); border-radius: 999px;
  color: var(--ash-faint); letter-spacing: .03em; transition: color .25s, border-color .25s, background .25s, box-shadow .25s;
}
.pipeline li + li::before { content: "→"; position: absolute; left: -.85rem; top: 50%; transform: translateY(-50%); color: var(--ash-faint); }
.pipeline li.on {
  color: var(--ink); background: var(--ember); border-color: var(--ember);
  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--ember) 70%, transparent);
}
.pipeline li.done { color: var(--ember-hot); border-color: var(--edge-hot); }
.console-note { margin: 0; padding: 0 1rem 1rem; color: var(--ash-faint); font-size: .76rem; }
.console-note code { color: var(--ember-hot); }

/* ---------- bands ---------- */
.band { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem); }
.band-alt { max-width: none; background:
  linear-gradient(180deg, color-mix(in srgb, var(--ink) 40%, transparent), transparent),
  color-mix(in srgb, var(--dust) 55%, var(--ink));
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.band-alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.band-head { margin-bottom: 1.8rem; }
.band-h { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .5rem; letter-spacing: -.01em; }
.band-sub { color: var(--ash-dim); margin: 0; max-width: 64ch; }

/* ---------- mechanisms (moat) ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.6rem; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr; } }
.mech { padding: 1.2rem; border: 1px solid var(--edge); border-radius: 10px; background: var(--dust);
  position: relative; overflow: hidden; }
.mech::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--ember); opacity: .5; }
.mech h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--gold); }
.mech p { margin: 0; color: var(--ash-dim); font-size: .92rem; }

/* ---------- software lanes ---------- */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; padding: 0; margin: 0; }
@media (max-width: 900px) { .lanes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lanes { grid-template-columns: 1fr; } }
.lane {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem;
  border: 1px solid var(--edge); border-radius: 10px; background: var(--dust);
  transition: border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.lane:hover { transform: translateY(-2px); border-color: var(--edge-hot);
  box-shadow: 0 18px 40px -28px #000, inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--ember)) 22%, transparent); }
.lane-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.lane-id { font-family: var(--mono); font-size: .72rem; color: var(--ash-faint); }
.lane-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--ember)); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent, var(--ember)) 60%, transparent); }
.lane h3 { margin: 0; font-size: 1.06rem; }
.lane .role { color: var(--ash-dim); font-size: .9rem; margin: 0; flex: 1; }
.lane .lane-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--edge); }
.lane .crates { font-family: var(--mono); font-size: .72rem; color: var(--ash-faint); }
.pull { font-family: var(--mono); font-size: .74rem; color: var(--ash-dim); border: 1px solid var(--edge); background: transparent;
  border-radius: 6px; padding: .35rem .7rem; min-height: 36px; cursor: not-allowed; }
.pull[data-ready="1"] { color: var(--ink); background: var(--ember); border-color: var(--ember); cursor: pointer; }

/* ---------- games ---------- */
.games { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; list-style: none; padding: 0; margin: 0; }
@media (max-width: 900px) { .games { grid-template-columns: 1fr; } }
.game { display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: var(--dust); }
.game-art { aspect-ratio: 16 / 9; position: relative; background:
  radial-gradient(120% 100% at 30% 0%, color-mix(in srgb, var(--rust) 40%, transparent), transparent 60%),
  radial-gradient(80% 90% at 80% 100%, color-mix(in srgb, var(--n-lore) 22%, transparent), transparent 60%),
  #0c0a08; border-bottom: 1px solid var(--edge); }
.game-art.flagship { aspect-ratio: 16 / 10; }
.game-art .stamp { position: absolute; right: .75rem; top: .75rem; font-family: var(--mono); font-size: .68rem;
  color: var(--ash); background: color-mix(in srgb, var(--ink) 60%, transparent); border: 1px solid var(--edge-hot);
  padding: .25rem .55rem; border-radius: 999px; }
.game-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.game h3 { margin: 0; font-size: 1.15rem; color: var(--gold); }
.game .tag { margin: 0; color: var(--ash-dim); font-size: .92rem; flex: 1; }
.game .game-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; }
.game .price { font-family: var(--mono); font-size: .8rem; color: var(--ash-dim); }
.game.empty { align-items: center; justify-content: center; min-height: 200px; color: var(--ash-faint);
  border-style: dashed; }
.game.empty .game-art { display: none; }

/* ---------- the deal / split-rail ---------- */
.deal { display: grid; gap: 1.4rem; max-width: 880px; }
.deal-free { display: flex; flex-direction: column; gap: .4rem; }
.deal-tag, .game .stamp { text-transform: uppercase; }
.deal-tag { align-self: flex-start; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--n-town);
  border: 1px solid color-mix(in srgb, var(--n-town) 40%, var(--edge)); border-radius: 999px; padding: .25rem .7rem; }
.deal-free h3 { margin: .2rem 0 0; font-size: clamp(1.2rem, 2.6vw, 1.7rem); }
.deal-free p { margin: 0; color: var(--ash-dim); max-width: 60ch; }
.split-rail { display: flex; width: 100%; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge); }
.split-seg { width: var(--w); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .4rem; text-align: center; font-size: .74rem; min-width: 0; }
.split-seg b { font-family: var(--mono); font-size: 1.05rem; }
.split-seg span { color: color-mix(in srgb, #000 35%, currentColor); line-height: 1.15; }
.seg-creator { background: color-mix(in srgb, var(--ember) 85%, #000); color: var(--ink); }
.seg-company { background: color-mix(in srgb, var(--gold) 60%, var(--dust)); color: var(--ink); }
.seg-heal    { background: color-mix(in srgb, var(--n-lore) 70%, #000); color: var(--ash); }
.seg-heal span { color: color-mix(in srgb, var(--ash) 80%, transparent); }
.deal-foot { color: var(--ash-dim); margin: 0; max-width: 64ch; }
.deal-foot strong { color: var(--gold); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--edge); background: color-mix(in srgb, var(--dust) 70%, var(--ink)); margin-top: 1rem; }
.foot-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem;
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2.5rem) 1.5rem; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.foot-tag { color: var(--ash-dim); font-size: .9rem; max-width: 40ch; }
.foot-col h4 { margin: 0 0 .75rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ash-faint); }
.foot-list { list-style: none; padding: 0; margin: 0; color: var(--ash-dim); font-size: .92rem; display: grid; gap: .4rem; }
.foot-list strong { color: var(--ash); }
.license-block { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.license-block summary { cursor: pointer; color: var(--ash-dim); padding: .75rem 0; border-top: 1px solid var(--edge); font-family: var(--mono); font-size: .82rem; }
.license-block summary:hover { color: var(--gold); }
.license-block pre { white-space: pre-wrap; color: var(--ash-faint); font-size: .76rem; line-height: 1.5; font-family: var(--mono);
  background: var(--ink); border: 1px solid var(--edge); border-radius: 8px; padding: 1rem; overflow-x: auto; }
.copyline { max-width: var(--maxw); margin: 0 auto; padding: 1.4rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  color: var(--ash-faint); font-size: .84rem; border-top: 1px solid var(--edge); font-family: var(--mono); }

/* ---------- motion ---------- */
@keyframes breathe { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .console-live::before, .vx-source .caret { animation: none; }
  .btn:hover, .lane:hover, .game:hover { transform: none; }
}