/* Semblature: the game's own palette (prototype canon): ink ground,
   verdigris + brass accents. Two typographic registers on purpose, echoing
   the game's rule that fiction and bench text never share a face:
   serif carries the fiction, mono carries the facts. Spectral (interim
   display face) holds the wordmark slot until the real one exists. */

@font-face {
  font-family: 'Spectral SB';
  src: url('fonts/Spectral-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Dark-only, and deliberately: this is the game's own palette (prototype
     canon), so a light variant would be a second register for no gain.
     Declaring the scheme makes form controls and scrollbars match the page. */
  color-scheme: dark;

  --ink: #12161d;
  --ink-2: #1a202a;
  --ink-3: #232b37;
  --line: #303a49;
  --fg: #e8e6e0;
  --dim: #9aa2ae;
  --verd: #46b096;
  --brass: #d8a648;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --disp: 'Spectral SB', Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.65;
}

a { color: var(--verd); text-underline-offset: 3px; }
a:hover { color: var(--fg); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--disp); font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.9rem; margin: 0 0 0.6em; }
h2 { font-size: 1.4rem; margin: 2em 0 0.5em; letter-spacing: 0.04em; }
h3 { font-size: 1.05rem; margin: 0 0 0.3em; color: var(--brass); }

.measure { max-width: 68ch; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* Header */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 64rem; margin: 0 auto; padding: 1.1rem 1.25rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--fg); text-decoration: none;
  font-family: var(--disp); letter-spacing: 0.22em; text-transform: uppercase;
  font-size: 0.95rem;
}
.brand svg { color: var(--verd); }
.site-head nav { display: flex; gap: 1.3rem; align-items: center; }
.site-head nav a {
  color: var(--dim); text-decoration: none;
  font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.site-head nav a:hover { color: var(--fg); }
.site-head nav .nav-steam { color: var(--brass); }

/* Hero */
.hero { text-align: center; padding: 2.5rem 1.25rem 1rem; max-width: 52rem; margin: 0 auto; }
.title {
  font-family: var(--disp);
  font-size: clamp(2.2rem, 7vw, 4rem);
  letter-spacing: 0.28em;
  margin: 0;
  text-indent: 0.28em; /* balance the tracking */
}
.subtitle {
  font-family: var(--mono); font-size: 1.05rem; color: var(--brass);
  letter-spacing: 0.26em; text-transform: uppercase; margin: 0.7rem 0 0;
}
.pron { font-family: var(--mono); font-size: 0.92em; color: var(--dim);
  text-transform: none; letter-spacing: 0.04em; font-style: normal; }

.bench { margin: 2rem auto 0; max-width: 640px; }
.bench svg { width: 100%; height: auto; display: block; }

/* Unit anatomy. Every colour sampled from the 2026-08-24 build, and the
   host glyph contour-traced from it, so the site and the game agree. */
.panel { fill: #263242; stroke: #374555; stroke-width: 1.4; transition: stroke 0.4s; }
.plate { fill: #1c2632; stroke: #2b3646; stroke-width: 1.2; }
.plate-line { fill: #3f4c5d; }
.numeral {
  fill: #3b2a16; font-family: var(--disp); font-weight: 600; font-size: 25px;
  text-anchor: middle; dominant-baseline: central;
}
.chev { fill: #e8a34b; }
.ring-cream { fill: #fff3dd; }
.ring-dark { fill: #4e433f; }
.disc { fill: #e8a34b; }

/* Unaligned: the statement reads false, so the port never lit. */
.ring-dash { fill: none; stroke: #5a6a7a; stroke-width: 2.4; stroke-dasharray: 6 4.8; }
.disc-dark { fill: #161c26; }
.numeral-dim { fill: #71808f; }
.chev-dim { fill: #5a6a7a; }

/* Four status slots per unit, laid out as the game lays them out:
   working / broken down the left, clear / hosting a Shade down the right.
   Glyph colours sampled from the build. No verdict is entered at rest, because
   entering them is the game. */
.slot { fill: #222c3a; stroke: #33405a; stroke-width: 1; }
.m-ok, .m-bad { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-ok { stroke: #719f43; }
.m-bad { stroke: #ac543a; }
.m-clear { fill: none; stroke: #75a3bf; stroke-width: 1.7; }
.m-shade { fill: #8b67b7; }

/* Seeming vs being: attention lights the Shade slot on the two that have
   one, the way the game lights a slot you have committed to. */
.inhabited .host-slot { transition: fill 0.55s ease, stroke 0.55s ease; }
.bench:hover .inhabited .host-slot,
.bench:focus-within .inhabited .host-slot { fill: #3a2d50; stroke: #a678d8; }
.bench:hover .panel, .bench:focus-within .panel { stroke: #4a5c72; }

@media (prefers-reduced-motion: no-preference) {
  .inhabited .host-slot { animation: admit 9s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes admit {
    0%, 55%, 100% { fill: #222c3a; stroke: #33405a; }
    70%, 85% { fill: #3a2d50; stroke: #a678d8; }
  }
  .bench:hover .inhabited .host-slot { animation: none; fill: #3a2d50; stroke: #a678d8; }
}

/* Premise + the three-step loop, from the store description. */
.premise { margin: 3rem 0 0; }
.premise .lede { font-size: 1.12rem; }
.premise em { font-style: italic; }
.loop { list-style: none; counter-reset: step; padding: 0; margin: 1.8rem 0 0; }
.loop li { counter-increment: step; position: relative; padding-left: 2.6rem; margin: 0 0 1.4rem; }
.loop li::before {
  content: counter(step); position: absolute; left: 0; top: 0.1rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: #263242; border: 1px solid #4e433f; color: var(--brass);
  font-family: var(--mono); font-size: 0.85rem; line-height: 1.65rem;
  text-align: center;
}
.loop h3 { margin: 0 0 0.25rem; font-size: 1.02rem; color: var(--fg); }
.loop p { margin: 0; color: var(--dim); }

.thesis { font-size: 1.25rem; margin: 1.8rem 0 0.5rem; font-style: italic; text-wrap: balance; }
.facts {
  font-family: var(--mono); font-size: 0.75rem; color: var(--dim);
  letter-spacing: 0.14em; margin: 1.2rem 0;
}
.cta { margin: 1.4rem 0 0.4rem; }
.cta-sub { color: var(--dim); font-size: 0.9rem; margin: 0; }

.btn {
  display: inline-block; padding: 0.75rem 1.6rem;
  background: var(--brass); color: var(--ink);
  text-decoration: none; border-radius: 3px;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.btn:hover { background: var(--fg); color: var(--ink); }

/* Covenant */
.covenant h2 {
  font-family: var(--mono); font-size: 0.8rem; color: var(--verd);
  letter-spacing: 0.25em; text-align: center; margin-top: 3rem;
}
.covenant-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.2rem;
}
.covenant-grid > div {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1.1rem 1.25rem;
}
.covenant-grid p { margin: 0; color: var(--dim); font-size: 0.95rem; }
@media (max-width: 42rem) { .covenant-grid { grid-template-columns: 1fr; } }

/* Screenshots ------------------------------------------------------------
   These captures are almost entirely TEXT: statements, chips, the report's
   rows. Inside the 68ch reading measure a three-across grid renders each one
   about 165px wide, which is roughly a ninth of capture width and leaves the
   statements as grey smear. So the section breaks out to the 64rem the header
   and footer already use and runs two across, and every shot links to the
   full-size capture for anyone who wants to actually read a bench. */
.shots-note { color: var(--dim); font-size: 0.9rem; margin-top: -0.4rem; }
/* Only the grid breaks out; the heading and the note stay in normal flow so
   they keep the measure's left edge. (Constraining them by 68ch instead does
   NOT line up, because `ch` resolves against each element's own font, and the h2 is
   set in the display face.) */
.shot-row {
  width: min(64rem, 100vw - 2.5rem);
  position: relative; left: 50%; transform: translateX(-50%);
  display: grid; gap: 1.1rem;
  /* Two across only while a column can still stay above ~26rem; under that
     it drops to one full-width shot rather than two unreadable ones. The
     min() guards the floor so a narrow phone can't be made to overflow. */
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}
.shot-row figure { margin: 0; }
.shot-row a { display: block; border-radius: 4px; }
.shot-row a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.shot-row img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 4px;
  transition: border-color 0.2s;
}
.shot-row a:hover img { border-color: var(--verd); }
.shot-row figcaption {
  font-family: var(--mono); font-size: 0.7rem; color: var(--dim);
  letter-spacing: 0.08em; margin-top: 0.4rem;
}

/* Entry lists (release notes) */
.entry-list { list-style: none; margin: 0; padding: 0; }
.entry-list li { margin: 0 0 1.5rem; }
.entry-date, .entry-meta {
  font-family: var(--mono); font-size: 0.72rem; color: var(--dim);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.entry-list .entry-date { display: block; margin-bottom: 0.15rem; }
.entry-list a {
  font-family: var(--disp); font-size: 1.15rem;
  color: var(--fg); text-decoration: none;
}
.entry-list a:hover { color: var(--verd); }
.entry-desc { margin: 0.25rem 0 0; color: var(--dim); font-size: 0.95rem; }
.empty { color: var(--dim); font-style: italic; }
.lede { color: var(--dim); }
.more { margin-top: 1.5rem; }
.feed-link { margin-top: 2rem; }
.entry-meta { display: block; margin-bottom: 0.4rem; }
.entry-back { margin-top: 3rem; }

.from-studio {
  border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.5rem;
  color: var(--dim); font-size: 0.95rem;
}

.draft-tag {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #e08585;
  border: 1px solid #e08585; border-radius: 3px; padding: 0.05em 0.4em;
  vertical-align: middle;
}
.draft-banner {
  background: #7c2b2b; color: #fff; text-align: center;
  font-family: var(--mono); font-size: 0.8rem; padding: 0.5rem;
}

/* Article body */
.page img, .entry img { max-width: 100%; height: auto; }
.page h1, .entry h1 { margin-top: 1.5rem; }
blockquote {
  margin: 1.2em 0; padding: 0.2em 1.2em;
  border-left: 3px solid var(--verd); color: var(--dim);
}
pre {
  background: var(--ink-2); border: 1px solid var(--line);
  padding: 1rem; border-radius: 4px; overflow-x: auto; font-size: 0.85rem;
}
code { font-family: var(--mono); font-size: 0.9em; }
hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* Footer */
.site-foot {
  border-top: 1px solid var(--line);
  max-width: 64rem; margin: 0 auto; padding: 2rem 1.25rem 3rem;
  text-align: center;
}
.foot-title {
  font-family: var(--disp); letter-spacing: 0.25em; font-size: 0.9rem; margin: 0 0 0.6rem;
}
.foot-title span { letter-spacing: 0.02em; font-family: var(--serif); color: var(--dim); text-transform: none; }
.foot-links { font-family: var(--mono); font-size: 0.78rem; }
.foot-links a { color: var(--dim); }
.foot-links a:hover { color: var(--fg); }
.foot-fine { color: var(--dim); font-size: 0.8rem; }

/* Disclosure entries (ai.html) ------------------------------------------
   Each asset class gets its own heading with a status chip. The shipped /
   not-yet-shipped split is the first thing a reader needs and should never
   have to be dug out of a sentence.

   The chip carries its own WORD, not just a colour, the same rule the game
   itself is held to (no information by colour alone), and it is what makes
   the distinction survive a screen reader or a greyscale print. */
.made {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 2.4rem 0 0.5rem;
}
.made + p { margin-top: 0; }

.stat {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.55rem;
  border: 1px solid;
  border-radius: 2px;
  white-space: nowrap;
  position: relative;
  top: -0.15em;
}
/* Shipped: brass, the palette's "live" accent, and it is in players' hands. */
.stat-ship { color: var(--brass); border-color: #6b5220; background: #241d0e; }
/* Not yet: recessed, so the page reads at a glance as mostly still ahead. */
.stat-soon { color: var(--dim); border-color: var(--line); background: var(--ink-2); }

/* The build list: facts, so mono, and tight enough to scan as a table. */
.built { list-style: none; margin: 0; padding: 0; }
.built li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.2rem 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
}
.built li:last-child { border-bottom: 1px solid var(--line); }
.built .what { font-family: var(--mono); font-size: 0.82rem; color: var(--fg); }
.built .how { color: var(--dim); font-size: 0.95rem; }
.built .ai { color: var(--brass); font-family: var(--mono); font-size: 0.7rem;
             text-transform: uppercase; letter-spacing: 0.1em; }

@media (max-width: 34rem) {
  .built li { grid-template-columns: 1fr; }
}

/* Entry headings carry TWO axes, and they are different questions:
   ship status (is this in players' hands yet) and AI status (was a model
   involved). One pill each, always in that order, so the page can be scanned
   down the right-hand side without reading a word of prose.

   The AI pill is the LOUDER of the two, and the quiet one is "no AI". That
   asymmetry is deliberate: on a disclosure page the safe direction to bias is
   toward surfacing AI, never toward making it easy to skim past. */
.made-t { font-size: 1.32rem; line-height: 1.15; margin-right: 0.1rem; }

.stat-ai   { color: var(--fg);  border-color: #4d5b6d; background: var(--ink-3); }
.stat-noai { color: var(--dim); border-color: var(--line); background: transparent; }