/* ══════════════════════════════════════════════════════════════════════
   RUBICON ARCHIVE — stylesheet

   The archive is a technical document, not a picture of a CRT. Two
   voices, one type scale, one accent, hard edges. Swap the accent by
   changing --accent / --accent-dim below.
   Alternates:  amber #ffb000 / #a06c00      green #33ff77 / #1c8a41
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── the two voices ────────────────────────────────────────────────
     Coral is the accent: links, the current page, the one thing on a
     screen you are meant to act on. It is deliberately rare — it only
     reads as loud while most of the page is not wearing it.
     Ice is the machine talking about itself: counts, classifications,
     column heads, the clock. Nothing else gets a colour. */
  --accent:     #ff5a3c;
  --accent-dim: #8a2f1e;
  --accent-ink: #0b0a09;   /* what sits on top of an accent fill */

  --ice:        #8fd4e6;
  --ice-dim:    #6fa8b8;

  /* Reserved meanings. Green is the answer to a fight, amber is a seal. */
  --ok:         #5ddba0;
  --warn:       #ffb84d;

  /* ── ground ────────────────────────────────────────────────────────
     Every text-bearing surface is opaque. The backdrop figure lives
     behind the page, never between the reader and a paragraph. */
  --bg:          #0b0a09;
  --surface:     #131110;
  --surface-2:   #1b1817;
  --line:        #2c2825;
  --line-strong: #403934;

  /* ── text ──────────────────────────────────────────────────────────
     --fg-faint is for text nobody has to read (legal, captions). It is
     still above 4.5:1 on --bg; drop it further and it stops reading as
     quiet and starts reading as broken. */
  --fg:       #e8e3dd;
  --fg-muted: #a9a199;
  --fg-faint: #978f87;

  /* ── type ──────────────────────────────────────────────────────────
     Two families and no more. Mono is the machine: labels, grids, ids,
     nav, console — anything the archive says about itself. Sans is the
     record: summaries, lore, doctrine — anything a person wrote for
     another person. The split is the point; a page set entirely in mono
     has no way left to say "this part is prose". */
  --mono: "Cascadia Mono", "JetBrains Mono", "SF Mono", Consolas,
          "DejaVu Sans Mono", ui-monospace, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* One scale, ratio 1.25, rooted at 1rem. If you reach for a size that
     is not here, the thing you are styling wants one that is. */
  --t-micro: 0.64rem;
  --t-meta:  0.8rem;
  --t-body:  1rem;
  --t-lead:  1.25rem;
  --t-h2:    1.5625rem;
  --t-h1:    1.953rem;
  --t-display: clamp(2.441rem, 1.6rem + 3.6vw, 3.815rem);

  /* One spacing unit. Everything aligns to a multiple of it. */
  --u:  0.5rem;
  --u2: 1rem;
  --u3: 1.5rem;
  --u4: 2rem;
  --u6: 3rem;
  --u8: 4rem;

  --measure: 62ch;
  --page:    1180px;
  --gutter:  clamp(1rem, 4vw, 2.5rem);
  --console-w: clamp(320px, 26vw, 400px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* A column, so a short page still puts its footer on the bottom edge of
   the screen instead of halfway up with the backdrop running out below
   it. The view takes the slack. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── the backdrop figure ─────────────────────────────────────────────
   One dithered machine behind the archive, drawn small and upscaled so
   it stays texture and never resolves into an illustration. Its opacity
   is set low enough that the worst case — the hottest pixel of the ramp
   under the faintest text on the page — still clears 4.5:1. Raise it
   and you are trading a measurable gate for atmosphere. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0.14;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

/* ── skip link ───────────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: var(--u) var(--u2);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--t-meta);
  text-decoration: none;
}
.skip:focus { left: var(--u2); top: var(--u2); }

/* ── no script ───────────────────────────────────────────────────── */

.noscript {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--u2) var(--gutter);
  background: var(--warn);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--t-meta);
}

/* ── masthead ────────────────────────────────────────────────────────
   Conventional and boring on purpose: a text wordmark on the left, four
   text labels in the middle, state on the right. No icon-only controls,
   no overlay menu — nobody should have to learn this bar. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.masthead-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u) var(--u3);
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--u) var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6ch;
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
}
.brand-mark { color: var(--accent); font-size: 0.85em; }
.brand:hover .brand-name { color: var(--accent); }

/* The nav scrolls sideways on a phone rather than folding into a menu
   behind an icon: four labels you can read beat one you have to open. */
.nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-right: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  padding: 0.3rem 0.75rem;
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.masthead-tools { display: flex; align-items: center; gap: var(--u); }

/* Machine chrome: mono, small, quiet until you touch it. */
.ctl {
  padding: 0.3rem 0.75rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
}
.ctl:hover { color: var(--fg); border-color: var(--line-strong); }
.ctl b { color: var(--ice); font-weight: 700; }
.ctl[aria-pressed="true"] { color: var(--warn); border-color: var(--warn); }
.ctl[aria-pressed="true"] b { color: var(--warn); }

/* ── page frame ──────────────────────────────────────────────────── */

.view {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--u6) var(--gutter) var(--u8);
  outline: none;
}

/* Prose finds its measure; structural blocks take the full column. */
.view p,
.view .bullets,
.view h2,
.view h3 { max-width: var(--measure); }

/* ── page head ───────────────────────────────────────────────────── */

.crumb {
  margin: 0 0 var(--u);
  color: var(--fg-faint);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
}
.crumb a { color: var(--fg-muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb .sep { color: var(--line-strong); margin: 0 0.6ch; }

.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--u) var(--u3);
  margin: 0 0 var(--u4);
  padding-bottom: var(--u2);
  border-bottom: 1px solid var(--line-strong);
}

/* Display type at moderate weight with the tracking pulled in. Weight
   700 at this size reads as shouting; 600 with negative tracking reads
   as a masthead. */
.title {
  margin: 0;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--fg);
  overflow-wrap: anywhere;
}
/* The unit code in front of a designation is filing, not name. */
.title .title-lo { color: var(--fg-faint); }

.title-meta {
  margin: 0;
  color: var(--ice-dim);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── prose ───────────────────────────────────────────────────────── */

p { margin: 0 0 var(--u2); }

.lede {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg-muted);
}

h2, h3 {
  font-family: var(--mono);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h2 { font-size: var(--t-h2); margin: var(--u6) 0 var(--u2); color: var(--fg); }
h3 { font-size: var(--t-lead); margin: var(--u4) 0 var(--u); color: var(--fg); }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--fg); }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 0.05em 0.4ch;
  background: var(--surface-2);
  color: var(--ice);
}

b, strong { font-weight: 700; color: var(--fg); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--u6) 0; }

/* Section label: a stamp, not a caption. Solid accent with the ground
   knocked out — black on the dim accent is 2.5:1, so a fill is always
   the bright one. */
.stamp {
  display: inline-block;
  margin: var(--u6) 0 var(--u2);
  padding: 0.15rem 0.8rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
}
.stamp-ice { background: var(--ice); }

/* ── home ────────────────────────────────────────────────────────────
   The first viewport has one job: say what this is, who it is for, and
   where to go — with no scroll and no interaction. */
.hero { margin: 0 0 var(--u6); }

.hero-eyebrow {
  margin: 0 0 var(--u2);
  color: var(--ice-dim);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.28em;
}

.hero-title {
  max-width: 24ch;
  margin: 0 0 var(--u2);
  font-family: var(--mono);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--fg);
  text-wrap: balance;
}
.hero-title .hl { color: var(--accent); }

.hero-lede {
  max-width: 54ch;
  margin: 0 0 var(--u3);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Two doors, stated as doors. */
.entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--u2);
  margin: 0 0 var(--u4);
}

.entry {
  display: flex;
  flex-direction: column;
  gap: var(--u);
  padding: var(--u3);
  background: var(--surface);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.entry:hover, .entry:focus-visible {
  border-color: var(--accent);
  background: var(--surface-2);
}

.entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1ch;
}
.entry-name {
  font-family: var(--mono);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.entry:hover .entry-name { color: var(--fg); }
.entry-count {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ice-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entry-desc {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--t-meta);
  line-height: 1.55;
}

/* The machine reciting its own state, demoted to a strip. It is
   flavour; it is not the page's first sentence. */
.readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u) var(--u3);
  margin: 0 0 var(--u3);
  padding: var(--u) var(--u2);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--t-meta);
}
.readout div { display: flex; gap: 0.8ch; }
.readout dt { color: var(--fg-faint); letter-spacing: 0.1em; }
.readout dd { margin: 0; color: var(--ice-dim); font-variant-numeric: tabular-nums; }

.whisper {
  margin: 0 0 var(--u4);
  color: var(--fg-faint);
  font-family: var(--mono);
  font-size: var(--t-meta);
}
.whisper::before { content: "// "; color: var(--line-strong); }

/* ── panels ──────────────────────────────────────────────────────────
   The unit of layout: a framed block whose label is cut into its top
   border, the way a boxed section in a technical manual carries its
   title. Nothing floats loose. */
.panel {
  margin: var(--u4) 0 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.panel-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1ch;
  margin: -0.62em 1.2ch 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.2;
}
.panel-title, .panel-meta { background: var(--surface); padding: 0 0.8ch; }
.panel-title { color: var(--fg); font-weight: 700; letter-spacing: 0.18em; }
.panel-meta {
  color: var(--ice-dim);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.panel-body { padding: var(--u2); }
.panel-body > :last-child { margin-bottom: 0; }

/* ── data grid ───────────────────────────────────────────────────────
   One line per record, tabular numerals, columns that scroll sideways
   rather than collapse into stacks. The rows breathe more than a real
   terminal's would: this is a table read by eye, not a dump. */
.grid-scroll { overflow-x: auto; }

.grid {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}

.grid th {
  padding: var(--u) 0.9rem;
  text-align: left;
  white-space: nowrap;
  color: var(--ice-dim);
  font-weight: 400;
  letter-spacing: 0.16em;
  border-bottom: 1px solid var(--line-strong);
}

.grid td {
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.grid tbody tr:last-child td { border-bottom: 0; }

/* A chapter or class break inside the one table. It is a heading, so it
   is a th — and it carries its own count on the right, the way a panel
   bar does. */
.grid-group th {
  padding: var(--u4) 0.9rem var(--u);
  border-bottom: 1px solid var(--line-strong);
}
.grid tbody tr.grid-group:first-child th { padding-top: var(--u2); }
.grid-group th > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1ch;
}
.grid-group th span {
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 0.2em;
}
.grid-group th .grid-group-meta {
  color: var(--ice-dim);
  font-weight: 400;
  letter-spacing: 0.12em;
}
.grid tbody tr.grid-group:hover th { background: none; }

.grid .num { text-align: right; }
.grid .alias { color: var(--fg-muted); }
.grid .class { color: var(--ice-dim); }

/* The whole row lights up; the name is what carries the colour. */
.grid .rec { color: var(--accent); text-decoration: none; font-weight: 700; }
.grid tbody tr { transition: background-color 0.12s ease; }
.grid tbody tr:hover td,
.grid tbody tr:focus-within td { background: var(--surface-2); }
.grid tbody tr:hover .rec { color: var(--fg); text-decoration: underline; }

/* The prose column is the only one allowed to wrap, and the only place
   in a grid where the record speaks instead of the machine. */
.grid .desc {
  white-space: normal;
  color: var(--fg-muted);
  font-family: var(--sans);
  font-size: var(--t-meta);
  line-height: 1.5;
  min-width: 26ch;
  width: 46%;
}

/* Sealing inside a cell: the tape runs through the column, so the grid
   keeps its shape while the value stays unreadable. */
.redacted {
  padding: 0 0.5ch;
  color: var(--warn);
  letter-spacing: 0.1em;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 184, 77, 0.20) 0px,
    rgba(255, 184, 77, 0.20) 7px,
    transparent 7px,
    transparent 16px);
}

/* ── threat meter ────────────────────────────────────────────────────
   Five cells, drawn rather than typed, so an empty step is a line
   weight instead of a glyph competing with the filled ones. */
.threat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}
.threat i {
  display: block;
  width: 7px;
  height: 11px;
  border: 1px solid var(--line-strong);
}
.threat i.on { background: var(--accent); border-color: var(--accent); }
.threat-n {
  margin-left: 0.8ch;
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}

/* ── dossier layout ──────────────────────────────────────────────────
   Two columns where there is room: the record on the left at its
   measure, the machine's data and the artwork on the right. The single
   column left half of every dossier empty. */
.dossier {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--u4);
  align-items: start;
}
@media (min-width: 1000px) {
  .dossier { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--u6); }
  .dossier-side { position: sticky; top: 5rem; }
}
.dossier-main { min-width: 0; }
.dossier-main > :last-child { margin-bottom: 0; }
.dossier-side > :last-child { margin-bottom: 0; }

/* ── the answer ──────────────────────────────────────────────────────
   Most people who open a dossier are stuck right now. The counter goes
   first, above the fold, before the prose that explains it. Green is
   reserved on this site for the thing you are supposed to do. */
.answer {
  margin: 0 0 var(--u4);
  border: 1px solid var(--ok);
  background: var(--surface);
}
/* It is an h2, so it inherits the heading margin; inside a bordered box
   that margin is a black band above the label. */
.answer-bar {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1ch;
  padding: 0.3rem 0.9rem;
  background: var(--ok);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
}
.answer-body { padding: var(--u2) var(--u2) var(--u); }
.answer-body ol { margin: 0; padding: 0 0 0 2.4ch; }
.answer-body li { margin: 0 0 var(--u); line-height: 1.55; }
.answer-body li::marker {
  color: var(--ok);
  font-family: var(--mono);
  font-size: var(--t-meta);
}

/* ── facts ───────────────────────────────────────────────────────── */

.facts {
  display: grid;
  grid-template-columns: minmax(8ch, max-content) 1fr;
  gap: 0 1.6ch;
  margin: 0 0 var(--u3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  border-top: 1px solid var(--line);
}
.facts dt {
  padding: 0.4rem 0;
  color: var(--ice-dim);
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--line);
}
.facts dd {
  margin: 0;
  padding: 0.4rem 0;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
}

/* ── phases ──────────────────────────────────────────────────────────
   A fight in order, on one rail, so three notes read as one engagement.
   The counter is the peak of each block and is set apart from the
   behaviour it answers. */
.phases { margin: 0 0 var(--u4); }

.phase {
  position: relative;
  border-left: 1px solid var(--line-strong);
  padding: 0 0 0 var(--u3);
  margin: 0 0 var(--u3);
}
.phase:last-child { margin-bottom: 0; }
.phase::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.7em;
  width: 1.1ch;
  border-top: 1px solid var(--line-strong);
}

.phase-name {
  display: inline-block;
  margin: 0 0 var(--u);
  padding: 0.1rem 0.8ch;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
}

.phase p { margin: 0 0 var(--u); }
.phase p:last-child { margin-bottom: 0; }

.counter {
  padding: var(--u) 0 var(--u) var(--u2);
  border-left: 3px solid var(--ok);
  color: var(--fg);
}
.counter b {
  display: block;
  color: var(--ok);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* ── bullets ─────────────────────────────────────────────────────── */

.bullets { margin: 0 0 var(--u4); padding: 0; list-style: none; }
.bullets li {
  position: relative;
  padding-left: 2.4ch;
  margin-bottom: var(--u);
  line-height: 1.55;
}
.bullets li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--accent-dim);
}
.bullets a { overflow-wrap: anywhere; }

/* ── quote ───────────────────────────────────────────────────────── */

.transmission {
  margin: 0 0 var(--u4);
  padding: var(--u2) var(--u3);
  background: var(--surface);
  border-left: 4px solid var(--line-strong);
  color: var(--fg-muted);
}
.transmission p {
  margin: 0 0 var(--u);
  max-width: var(--measure);
  font-size: var(--t-lead);
  line-height: 1.5;
}
.transmission p:last-of-type { margin: 0; }
.transmission cite {
  display: block;
  margin-top: var(--u2);
  color: var(--fg-faint);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-style: normal;
  letter-spacing: 0.16em;
}

/* ── notices ─────────────────────────────────────────────────────── */

.notice {
  margin: 0 0 var(--u3);
  padding: var(--u2);
  max-width: var(--measure);
  border: 1px solid var(--warn);
  border-left-width: 3px;
  color: var(--warn);
  font-size: var(--t-meta);
  line-height: 1.55;
}
.notice-dim { border-color: var(--line); color: var(--fg-faint); }

/* ── portrait ────────────────────────────────────────────────────── */

.portrait {
  position: relative;
  margin: 0 0 var(--u3);
  padding: var(--u);
  border: 1px solid var(--line);
  background: var(--surface);
}

.portrait-canvas {
  display: block;
  width: 100%;
  height: auto;
  /* Space reserved before the canvas is drawn, so nothing under it
     moves when the image lands. */
  aspect-ratio: 16 / 10;
  /* contain, not cover: a generated sprite is 4:3 and a screenshot is
     not, and cropping a portrait to fit a box is how you lose the head
     of the machine. */
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--bg);
}

.portrait figcaption,
.emblem figcaption {
  margin-top: var(--u);
  color: var(--fg-faint);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
}

.emblem {
  margin: 0 0 var(--u3);
  padding: var(--u);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}
.emblem-canvas {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--bg);
}

/* ── doctrine ────────────────────────────────────────────────────────
   A creed is cited by its article, so the numeral is the record's
   handle. It gets the margin and the scale — the only place besides a
   page title where type leaves the body scale. */
.tenet {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 var(--u3);
  margin: 0 0 var(--u6);
  padding-top: var(--u3);
  border-top: 1px solid var(--line);
}

.tenet-n {
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tenet-head {
  margin: 0 0 var(--u);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--t-lead);
  font-weight: 600;
}
.tenet p { margin: 0; max-width: var(--measure); color: var(--fg-muted); }

@media (max-width: 560px) {
  .tenet { grid-template-columns: 1fr; gap: 0; }
  .tenet-n { grid-row: auto; text-align: left; margin-bottom: var(--u); }
}

/* ── spoiler gate ────────────────────────────────────────────────────
   Redaction by hazard tape, not by blur: a blurred paragraph reads as a
   rendering fault, stripes read as a decision someone made. */
.sealed { position: relative; }

.sealed-body {
  opacity: 0.12;
  user-select: none;
  pointer-events: none;
}
.sealed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 184, 77, 0.12) 0px,
    rgba(255, 184, 77, 0.12) 10px,
    transparent 10px,
    transparent 26px);
}
.sealed-overlay {
  z-index: 2;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Anchored near the top: a sealed record can be 1500px tall, and a
     gate you have to scroll to find is a broken gate. */
  justify-content: flex-start;
  gap: var(--u2);
  padding: clamp(1.5rem, 8vh, 4rem) var(--u2) var(--u2);
  text-align: center;
}
.sealed-overlay p {
  margin: 0;
  padding: var(--u) var(--u2);
  background: var(--bg);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
}
.decrypt-btn {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  padding: var(--u) var(--u3);
  color: var(--accent-ink);
  background: var(--warn);
  border: 1px solid var(--warn);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.decrypt-btn:hover { transform: translateY(-1px); }
.decrypt-btn:active { transform: translateY(0); }

/* The end of the "I want to know" task: the tape comes off, and the
   record it was covering announces itself for a beat. Opacity and an
   inset edge only — nothing on the page moves while it runs. */
@keyframes unseal {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
@keyframes unseal-edge {
  from { box-shadow: inset 0 0 0 2px var(--ok); }
  to   { box-shadow: inset 0 0 0 2px transparent; }
}
.just-unsealed { animation: unseal 0.22s ease-out, unseal-edge 0.9s ease-out; }

/* ── console ─────────────────────────────────────────────────────────
   A docked panel you talk to while the page next to it navigates. It
   takes room from the page rather than covering the reading column, and
   it never holds the only route to anything. */
.console {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  width: var(--console-w);
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.18s ease, visibility 0.18s ease;
}
.console.is-open { visibility: visible; transform: none; }

/* The page yields the console's width rather than sliding under it, and
   it yields it once, on the body — so every centred container inside
   re-centres in what is left instead of each one paying separately. */
body.console-open { padding-right: var(--console-w); }

.console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1ch;
  padding: var(--u) var(--u2);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.console-title {
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
}
.console-x {
  font-family: var(--mono);
  font-size: var(--t-meta);
  line-height: 1;
  padding: 0.25rem 0.5rem;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.console-x:hover { color: var(--accent); border-color: var(--line-strong); }

.console-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--u2);
  font-family: var(--mono);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.console-log::-webkit-scrollbar { width: 8px; }
.console-log::-webkit-scrollbar-thumb { background: var(--line-strong); }

.term-echo {
  margin: 0 0 var(--u);
  color: var(--fg-muted);
  font-size: var(--t-meta);
  word-break: break-word;
}
.term-echo::before { content: "> "; color: var(--accent); }

.term-out {
  margin: 0 0 var(--u2);
  padding: var(--u) 0 var(--u) var(--u2);
  border-left: 1px solid var(--line-strong);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--fg-muted);
}
.term-out .t-cmd { color: var(--accent); }
.term-out .t-err { color: var(--warn); }
.term-out .t-key { color: var(--ice); }

.promptbar {
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: var(--u) var(--u2);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.ps1 { color: var(--accent); font-family: var(--mono); font-size: var(--t-meta); }
.cmd {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--fg);
  background: transparent;
  border: 0;
  outline: none;
  caret-color: var(--accent);
}
.cmd::placeholder { color: var(--fg-faint); }

/* ── footer ──────────────────────────────────────────────────────── */

.sitefoot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.sitefoot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2) var(--u3);
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--u3) var(--gutter);
  font-family: var(--mono);
  font-size: var(--t-meta);
}
.identity { display: flex; align-items: baseline; gap: 1.2ch; }
.identity-line { margin: 0; color: var(--ice); letter-spacing: 0.18em; }
.identity-toggle {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  padding: 0;
  color: var(--ice-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.identity-toggle:hover { color: var(--ice); text-decoration: underline; }

.foot-legal { margin: 0; color: var(--fg-faint); max-width: 52ch; line-height: 1.5; }

/* ── back link ───────────────────────────────────────────────────── */

.back {
  display: inline-block;
  margin-bottom: var(--u2);
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-decoration: none;
}
.back:hover { color: var(--accent); }
.back::before { content: "\2190\00a0"; }

/* ── focus ───────────────────────────────────────────────────────────
   One visible ring, everywhere, in a colour used for nothing else on
   the surface it lands on. */
:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 2px;
}

/* ── scrollbar ───────────────────────────────────────────────────── */

html { scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ── narrow screens ──────────────────────────────────────────────────
   The console is a pointer-and-keyboard idea: no room to dock it on a
   phone and no keyboard to enjoy it, so it does not exist there. Every
   command it offers is reachable by tapping something. */
@media (max-width: 900px) {
  .console, .console-toggle { display: none !important; }
  body.console-open { padding-right: 0; }
}

@media (max-width: 700px) {
  .view { padding-top: var(--u4); }
  .masthead-in { gap: var(--u) var(--u2); }
  .nav { order: 3; width: 100%; margin: 0; }
  .nav a { padding: 0.3rem 0.6rem; }
  .masthead-tools { margin-left: auto; }
  .backdrop { opacity: 0.1; }
  .facts { grid-template-columns: minmax(7ch, max-content) 1fr; gap: 0 1ch; }
  .sitefoot-in { flex-direction: column; align-items: flex-start; }
}

/* ── reduced motion ──────────────────────────────────────────────────
   Every effect on the site has a path through here. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}