:root {
  --bg:#14181F; --panel:#1E2530; --raised:#283140; --line:#343E4F;
  --ink:#EEF2F7; --mute:#91A0B5; --signal:#4DB8E8; --soft:#2A5F78;
  --coral:#F07167; --coral-wash:#3D2422; --coral-line:#C45A4A;
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; color:var(--ink);
  font:16px/1.5 "Segoe UI",sans-serif;
  background:radial-gradient(1200px 500px at 10% -10%,#1a3040 0%,transparent 55%),linear-gradient(180deg,#10141A 0%,var(--bg) 40%);
  padding:0 0 88px;
}
a { color:var(--signal); }
.spine {
  position:fixed; top:0; right:0; height:100vh; width:2.6rem; z-index:4;
  display:flex; flex-direction:column; justify-content:center; gap:.15rem;
  padding:4rem .2rem 5.5rem; background:var(--panel); border-left:1px solid var(--line);
}
.spine a {
  writing-mode:vertical-rl; transform:rotate(180deg); text-decoration:none; color:var(--mute);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:.35rem 0;
}
.spine a.on, .spine a:hover { color:var(--signal); }
.stage { width:min(1080px, calc(100% - 3.2rem)); margin:0 auto; padding:22px 24px 40px; }
.top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.stamp { margin:0; color:var(--mute); font-size:12px; }
h1.brand { margin:0; font-size:15px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
h1.brand a { color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
h1.brand svg { width:28px; height:28px; flex:none; }
.page { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; min-height:60vh; }
h2.topic { margin:0 0 12px; font-size:34px; font-weight:600; letter-spacing:-.02em; }
h3 { margin:28px 0 10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--signal); }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.card {
  display:flex; flex-direction:column; gap:6px; padding:16px; text-decoration:none; color:inherit;
  background:var(--raised); border:1px solid var(--line); border-radius:14px;
}
.card:hover { border-color:var(--signal); }
.eyebrow { align-self:flex-start; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); border:1px solid var(--line); border-radius:99px; padding:3px 8px; }
.card.archive { background:var(--coral-wash); border-color:var(--coral-line); }
.card.archive .eyebrow, .card.archive strong { color:var(--coral); }
.card.archive .eyebrow { border-color:var(--coral-line); }
.card.name .eyebrow { color:var(--mute); }
.card strong { font-size:20px; }
.card em { font-style:normal; color:var(--signal); font-size:13px; }
.card p, .card .go { margin:0; color:var(--mute); font-size:13px; }
.card .go::after { content:" \2192"; }
.onion { margin:8px 0; font-family:Consolas,monospace; font-size:13px; color:var(--ink); background:#0d1117; border-left:3px solid var(--signal); border-radius:0 8px 8px 0; padding:10px 12px; overflow-wrap:anywhere; }
.vault { margin:8px 0 16px; }
.kicker, .fine, .see { color:var(--mute); }
.fine { font-size:14px; margin-top:28px; }
.warn { margin:16px 0; padding:12px 14px; background:var(--coral-wash); border:1px solid var(--coral-line); border-radius:12px; }
.dates, .ledger { list-style:none; padding:0; margin:8px 0 0; }
.dates li, .ledger li { display:grid; grid-template-columns:160px 1fr; gap:12px; margin-top:8px; padding:12px 14px; background:var(--raised); border:1px solid var(--line); border-radius:12px; }
.ledger a { text-decoration:none; }
.entries { display:flex; flex-direction:column; gap:8px; }
.entry { display:grid; grid-template-columns:36px 72px minmax(0,1fr); gap:8px 12px; padding:12px 14px; background:var(--raised); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:inherit; }
.entry em, .entry i { font-style:normal; font-size:13px; }
.entry em { color:var(--mute); }
.entry i { color:var(--signal); }
.entry.archive i { color:var(--coral); }
.entry strong { font-size:18px; }
.entry .host, .entry span { grid-column:2 / -1; color:var(--mute); }
.host { font-family:Consolas,monospace; font-size:13px; }
.seo-card, table.status { width:100%; border-collapse:collapse; }
.seo-card { padding:12px 14px; margin-top:8px; background:var(--raised); border:1px solid var(--line); border-radius:12px; }
table.status td, table.status th { border-bottom:1px solid var(--line); text-align:left; padding:8px 4px; }
ol { padding-left:18px; }
.dock {
  position:fixed; left:50%; bottom:.7rem; transform:translateX(-50%); z-index:8;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem; max-width:calc(100% - 1rem);
  padding:.4rem; background:rgba(20,24,31,.94); border:1px solid var(--line); border-radius:999px;
  backdrop-filter:blur(10px); box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.dock a {
  text-decoration:none; color:var(--mute); font-size:.88rem; white-space:nowrap;
  padding:.5rem .8rem; border-radius:999px;
}
.dock a.on, .dock a:hover { background:var(--raised); color:var(--ink); }
.dock a.on { color:var(--signal); }
@media (max-width:900px) {
  .spine { display:none; }
  .stage { width:100%; padding:18px 16px 36px; }
  .cards, .dates li, .ledger li, .entry { grid-template-columns:1fr; }
  .entry .host, .entry span { grid-column:1; }
  h2.topic { font-size:28px; }
  .dock { width:calc(100% - .8rem); border-radius:18px; }
}