/* ==========================================================================
   NOSTR PROTOCOL — OFFICIAL INSTRUCTION MANUAL
   Visual identity: early-2000s printed game manual.
   Warm paper spreads on a dark desk, beveled chrome bars, safety-orange
   and steel-blue accents, Eurostile-style display type.
   ========================================================================== */

/* Self-hosted fonts (latin subset). font-display: optional -> no late swap,
   no layout shift; preload links in each page head fetch them by first paint. */
@font-face {
  font-family: 'Michroma'; font-style: normal; font-weight: 400;
  font-display: optional; src: url('fonts/michroma-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed'; font-style: normal; font-weight: 500;
  font-display: optional; src: url('fonts/sairacondensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed'; font-style: normal; font-weight: 600;
  font-display: optional; src: url('fonts/sairacondensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed'; font-style: normal; font-weight: 700;
  font-display: optional; src: url('fonts/sairacondensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2'; font-style: normal; font-weight: 400 700;
  font-display: optional; src: url('fonts/exo2-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2'; font-style: italic; font-weight: 400;
  font-display: optional; src: url('fonts/exo2-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400;
  font-display: optional; src: url('fonts/sharetechmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* palette */
  --desk: #14171c;
  --desk-2: #1d232b;
  --paper: #f2eee2;
  --paper-2: #e9e4d3;
  --paper-edge: #d8d2bd;
  --ink: #23262b;
  --ink-soft: #4b4f58;
  --chrome-hi: #f4f6f8;
  --chrome: #b8bfc9;
  --chrome-lo: #7d8794;
  --steel: #2e5f9e;
  --steel-deep: #1d3f6b;
  --orange: #f26a00;
  --orange-hot: #ff8a1f;
  --danger: #c0392b;
  --ok: #2c7a3f;
  --crt: #0d1410;
  --crt-green: #7dff9e;
  --crt-dim: #35513d;

  --f-display: 'Michroma', 'Eurostile', sans-serif;
  --f-label: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Exo 2', 'Verdana', sans-serif;
  --f-mono: 'Share Tech Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -100px, #262e39 0%, transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,.012) 14px 15px),
    var(--desk);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.62;
  padding: 34px 14px 70px;
}

/* ---------- the booklet page ---------- */
.page {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-radius: 6px 14px 14px 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 22px 60px rgba(0,0,0,.55),
    inset 0 0 90px rgba(120,100,50,.07);
  padding: 0 0 26px;
  overflow: hidden;
}
/* paper grain */
.page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
/* spine shading (booklet gutter, left edge) */
.page::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26px; z-index: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 55%, transparent);
  pointer-events: none;
}
.page > * { position: relative; z-index: 1; }

/* staples on the spine */
.staple {
  position: absolute; left: 9px; width: 5px; height: 40px; z-index: 2;
  background: linear-gradient(90deg, #cfd4da, #8d949c 50%, #666c74);
  border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.staple.s1 { top: 14%; } .staple.s2 { bottom: 14%; }

/* ---------- chrome header band ---------- */
.band {
  background:
    linear-gradient(180deg, #fdfeff 0%, var(--chrome) 46%, var(--chrome-lo) 52%, #a8b0ba 100%);
  border-bottom: 3px solid var(--steel-deep);
  padding: 14px 34px 12px 44px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.14), inset 0 2px 0 #fff;
}
.band .logo {
  font-family: var(--f-display); font-size: 15px; letter-spacing: .12em;
  color: var(--steel-deep); text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  text-decoration: none;
}
.band .logo b { color: var(--orange); }
.band .booklet-note {
  margin-left: auto; font-family: var(--f-label); font-weight: 600;
  font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #3c4650; text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

/* section tab strip (like manual edge tabs) */
.tabs {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 0 34px 0 44px;
  background: var(--steel-deep);
}
.tabs a {
  font-family: var(--f-label); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: #cfe0f5; padding: 6px 14px 5px;
  background: linear-gradient(180deg, var(--steel) 0%, var(--steel-deep) 100%);
  border-radius: 0 0 6px 6px;
}
.tabs a:hover, .tabs a.on { background: linear-gradient(180deg, var(--orange-hot), var(--orange)); color: #fff; }

/* ---------- chapter header ---------- */
.chapter {
  display: flex; align-items: flex-end; gap: 22px;
  padding: 30px 34px 18px 44px;
  border-bottom: 2px dotted var(--paper-edge);
}
.chapter .nipno {
  font-family: var(--f-display); font-size: 64px; line-height: .9;
  color: transparent;
  -webkit-text-stroke: 2px var(--steel-deep);
  text-stroke: 2px var(--steel-deep);
  position: relative; flex: 0 0 auto;
}
.chapter .nipno::after {
  content: attr(data-n); position: absolute; left: 3px; top: 3px; z-index: -1;
  -webkit-text-stroke: 0; color: var(--orange); opacity: .55;
}
.chapter .titles h1 {
  margin: 0; font-family: var(--f-display); font-size: 26px; line-height: 1.25;
  letter-spacing: .02em; color: var(--ink); text-transform: uppercase;
}
.chapter .titles .kicker {
  font-family: var(--f-label); font-weight: 600; font-size: 13px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--steel);
  margin-bottom: 6px;
}
.chapter .titles .sub { color: var(--ink-soft); font-size: 15px; margin-top: 8px; max-width: 56ch; }

/* deprecated / merged rubber stamp */
.stamp {
  align-self: center; margin-left: auto; flex: 0 0 auto;
  font-family: var(--f-display); font-size: 17px; letter-spacing: .1em;
  color: var(--danger); border: 3px double var(--danger); border-radius: 6px;
  padding: 8px 14px; transform: rotate(-8deg); text-transform: uppercase;
  opacity: .82; mix-blend-mode: multiply; background: rgba(192,57,43,.05);
}
.stamp.merged { color: var(--steel); border-color: var(--steel); background: rgba(46,95,158,.05); }

/* ---------- layout ---------- */
.spread { display: grid; grid-template-columns: 1fr 250px; gap: 30px; padding: 26px 34px 10px 44px; }
.spread > .main { min-width: 0; }
@media (max-width: 900px) {
  .spread { grid-template-columns: 1fr; }
  .chapter { flex-wrap: wrap; row-gap: 10px; }
  .stamp { margin-left: 0; }
}
.chapter .titles { min-width: 0; flex: 1 1 240px; }
.chapter .titles h1 { overflow-wrap: break-word; }
@media (max-width: 480px) {
  .tabs { padding: 0 14px; }
  .tabs a { padding: 5px 10px 4px; font-size: 11px; letter-spacing: .08em; }
  .chapter { padding: 24px 20px 16px 24px; }
  .chapter .nipno { font-size: 48px; }
  .chapter .titles h1 { font-size: 20px; overflow-wrap: anywhere; }
}

/* ---------- section headers: beveled bars ---------- */
h2.bar {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-display); font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #4a7cc0 0%, var(--steel) 45%, var(--steel-deep) 50%, #274e83 100%);
  border: 1px solid var(--steel-deep); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  padding: 9px 14px; margin: 40px 0 16px;
}
h2.bar:first-child { margin-top: 0; }
h2.bar .num {
  font-family: var(--f-label); font-weight: 700; font-size: 15px;
  background: var(--orange); color: #fff; border-radius: 4px;
  padding: 1px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
h3 {
  font-family: var(--f-label); font-weight: 700; font-size: 17px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel-deep);
  border-bottom: 2px solid var(--paper-edge); padding-bottom: 4px; margin: 28px 0 12px;
}
h4 { font-family: var(--f-label); font-weight: 600; font-size: 15.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 20px 0 8px; }

p { margin: 0 0 14px; }
a { color: var(--steel); text-decoration-color: rgba(46,95,158,.4); }
a:hover { color: var(--orange); }
strong { color: var(--ink); }
code {
  font-family: var(--f-mono); font-size: .92em; background: rgba(46,95,158,.08);
  border: 1px solid rgba(46,95,158,.18); border-radius: 4px; padding: 0 4px;
  color: var(--steel-deep); white-space: nowrap;
}
li { margin-bottom: 6px; }
ul, ol { padding-left: 24px; margin: 0 0 14px; }

/* ---------- sidebar cartridge (spec box) ---------- */
.cartridge {
  position: sticky; top: 20px;
  background: linear-gradient(180deg, #2a3038, #1b2027);
  border-radius: 10px; padding: 4px; color: #dfe5ec;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.cartridge .inner { border: 1px solid #3c4650; border-radius: 7px; padding: 14px 14px 10px; }
.cartridge h3.cardhead {
  margin: 0 0 10px; font-family: var(--f-display); font-size: 11px;
  letter-spacing: .18em; color: var(--orange-hot); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.cartridge h3.cardhead::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--orange), transparent); }
.cartridge dl { margin: 0; font-size: 13.5px; }
.cartridge dt {
  font-family: var(--f-label); font-weight: 600; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase; color: #8fa2b8; margin-top: 10px;
}
.cartridge dd { margin: 2px 0 0; font-family: var(--f-mono); font-size: 13px; color: #eef2f7; overflow-wrap: anywhere; }
.cartridge dd a { color: #7db4ee; }
.cartridge .lights { display: flex; gap: 6px; margin: 12px 0 2px; }
.cartridge .led { width: 8px; height: 8px; border-radius: 50%; background: #39424d; }
.cartridge .led.on { background: var(--crt-green); box-shadow: 0 0 6px var(--crt-green); }
.cartridge .led.warn { background: var(--orange-hot); box-shadow: 0 0 6px var(--orange-hot); }
.cartridge .led.err { background: #ff5a48; box-shadow: 0 0 6px #ff5a48; }

/* tag chips (draft/final/optional/…) */
.chip {
  display: inline-block; font-family: var(--f-label); font-weight: 700;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 3px; padding: 2px 7px 1px; margin: 2px 3px 2px 0;
  background: #39424d; color: #cdd7e2; border: 1px solid #4a5561;
}
.chip.final { background: var(--ok); border-color: #1f5a2e; color: #eaffef; }
.chip.draft { background: var(--steel); border-color: var(--steel-deep); color: #e8f1fc; }
.chip.unrecommended, .chip.deprecated { background: var(--danger); border-color: #8e2a1f; color: #ffece9; }
.chip.mandatory { background: var(--orange); border-color: #b34e00; color: #fff; }

/* ---------- callout boxes ---------- */
.box { border-radius: 10px; margin: 20px 0; padding: 14px 16px 12px 16px; position: relative; }
.box .tag {
  position: absolute; top: -11px; left: 14px;
  font-family: var(--f-display); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; padding: 3px 10px; border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.box p:last-child, .box ul:last-child { margin-bottom: 2px; }
.box.hint { background: rgba(46,95,158,.07); border: 2px solid var(--steel); }
.box.hint .tag { background: linear-gradient(180deg, #4a7cc0, var(--steel-deep)); }
.box.warn { background: rgba(242,106,0,.08); border: 2px solid var(--orange); }
.box.warn .tag { background: linear-gradient(180deg, var(--orange-hot), #c85700); }
.box.danger { background: rgba(192,57,43,.07); border: 2px dashed var(--danger); }
.box.danger .tag { background: linear-gradient(180deg, #e05545, #96271b); }
.box.tech { background: rgba(35,38,43,.05); border: 2px solid var(--ink-soft); }
.box.tech .tag { background: linear-gradient(180deg, #5d636d, #33373e); }

/* ---------- CRT terminal (code examples) ---------- */
.crt { margin: 20px 0; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.35); border: 1px solid #000; }
.crt .titlebar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #454c55, #23272d);
  padding: 6px 12px; font-family: var(--f-label); font-weight: 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #b9c3ce;
}
.crt .titlebar::before { content: "▶"; color: var(--orange-hot); font-size: 10px; }
.crt pre {
  margin: 0; padding: 16px 18px; background:
    repeating-linear-gradient(0deg, rgba(125,255,158,.035) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 0%, #101a13 0%, var(--crt) 70%);
  color: var(--crt-green); font-family: var(--f-mono); font-size: 13.5px;
  line-height: 1.55; overflow-x: auto; text-shadow: 0 0 4px rgba(125,255,158,.35);
}
.crt pre .c { color: var(--crt-dim); text-shadow: none; }       /* comment */
.crt pre .k { color: #ffd45e; }                                  /* key/keyword */
.crt pre .s { color: #9ecfff; }                                  /* string val */
.crt pre .send { color: #ffab6b; }                               /* client→relay */
.crt pre .recv { color: #8fe3ff; }                               /* relay→client */

/* ---------- reference tables (controller-mapping style) ---------- */
/* horizontal scroller for wide reference tables (every table.ref sits in one) */
.tscroll { overflow-x: auto; margin: 18px 0; }
table.ref { width: 100%; border-collapse: collapse; margin: 0; font-size: 14.5px; }
table.ref caption {
  caption-side: top; text-align: left; font-family: var(--f-label); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; font-size: 12.5px;
  color: var(--ink-soft); padding-bottom: 6px;
}
table.ref th {
  font-family: var(--f-label); font-weight: 700; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; text-align: left;
  background: linear-gradient(180deg, #474d56, #2e3238);
  color: #e8edf2; padding: 7px 12px; border: 1px solid #23272d;
}
table.ref td { padding: 7px 12px; border: 1px solid var(--paper-edge); vertical-align: top; }
table.ref tr:nth-child(even) td { background: rgba(46,95,158,.045); }
table.ref td.btn, td .kbd, .kbd {
  font-family: var(--f-mono); font-size: 13px; white-space: nowrap;
  background: linear-gradient(180deg, #fff, #dfe3e8); border: 1px solid #aab2bb;
  border-radius: 5px; padding: 1px 8px; box-shadow: 0 2px 0 #aab2bb; color: var(--ink);
  display: inline-block; margin: 1px 0;
}

/* ---------- diagrams ---------- */
figure.diagram { margin: 22px 0; text-align: center; }
figure.diagram .frame {
  background: linear-gradient(180deg, #fbfaf4, #efeadb);
  border: 2px solid var(--paper-edge); border-radius: 10px;
  box-shadow: inset 0 0 30px rgba(120,100,50,.08); padding: 18px 10px;
}
figure.diagram svg { max-width: 100%; height: auto; }
figure.diagram figcaption {
  font-family: var(--f-label); font-weight: 600; font-size: 12.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px;
}
figure.diagram figcaption b { color: var(--orange); }
/* svg helper classes */
.d-actor { fill: #fff; stroke: var(--steel-deep); stroke-width: 2; }
.d-actor-label { font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: .1em; fill: var(--steel-deep); text-transform: uppercase; }
.d-wire { stroke: var(--ink-soft); stroke-width: 2; fill: none; }
.d-msg { stroke: var(--orange); stroke-width: 2.5; fill: none; marker-end: url(#arr); }
.d-msg.blue { stroke: var(--steel); marker-end: url(#arrb); }
.d-flow { stroke-dasharray: 7 5; animation: march 1.1s linear infinite; }
.d-label { font-family: var(--f-mono); font-size: 12px; fill: var(--ink); }
.d-note { font-family: var(--f-body); font-size: 12px; fill: var(--ink-soft); }
@keyframes march { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) {
  .d-flow { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- version history (patch notes) ---------- */
.patchnotes { list-style: none; padding: 0; margin: 18px 0; border-left: 3px solid var(--paper-edge); }
.patchnotes li { position: relative; padding: 2px 0 14px 22px; margin: 0; }
.patchnotes li::before {
  content: ""; position: absolute; left: -8px; top: 8px; width: 11px; height: 11px;
  background: linear-gradient(180deg, var(--orange-hot), var(--orange));
  border: 2px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 2px var(--orange);
}
.patchnotes li.minor::before { background: var(--chrome); box-shadow: 0 0 0 2px var(--chrome-lo); }
.patchnotes .ver {
  font-family: var(--f-label); font-weight: 700; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--steel-deep);
  background: rgba(46,95,158,.1); border-radius: 3px; padding: 1px 7px; margin-right: 8px;
}
.patchnotes .when { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-soft); margin-right: 6px; }

/* ---------- credits / original proposal ---------- */
.credits {
  background: linear-gradient(180deg, #2a3038, #1b2027); color: #dfe5ec;
  border-radius: 10px; padding: 18px 20px; margin: 20px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.credits h3.cardhead { margin: 0 0 10px; font-family: var(--f-display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-hot); }
.credits table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.credits td { padding: 4px 8px 4px 0; border: 0; vertical-align: top; }
.credits td:first-child { font-family: var(--f-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 11.5px; color: #8fa2b8; white-space: nowrap; padding-right: 16px; }
.credits a { color: #7db4ee; }
.credits td { color: #eef2f7; }

/* ---------- footer ---------- */
.pagefoot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 44px; padding: 14px 34px 0 44px;
  border-top: 2px dotted var(--paper-edge);
  font-family: var(--f-label); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.pagefoot a { text-decoration: none; color: var(--steel); }
.pagefoot a:hover { color: var(--orange); }
.pagefoot .pageno { font-family: var(--f-display); font-size: 13px; }

/* prev/next chunky buttons */
.navbtns { display: flex; gap: 12px; justify-content: space-between; padding: 26px 34px 0 44px; }
.navbtns a {
  font-family: var(--f-label); font-weight: 700; font-size: 13.5px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: #fff; padding: 9px 18px; border-radius: 8px;
  background: linear-gradient(180deg, #4a7cc0, var(--steel-deep));
  border: 1px solid var(--steel-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #17304f;
}
.navbtns a:hover { background: linear-gradient(180deg, var(--orange-hot), #c85700); border-color: #a04600; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #7c3600; }
.navbtns a:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 #17304f; }

/* ---------- selection policy ----------
   UI chrome, buttons, and decorations are not selectable, so copied spec text
   stays clean. All content (prose, tables, code, cartridge, credits) remains
   copyable. */
.staple, .band .logo, .band .booklet-note, .tabs a, .chapter .nipno, .stamp,
h2.bar .num, .box .tag, .crt .titlebar, .navbtns a, .toc-tools .filterbtn,
.pagefoot .pageno {
  -webkit-user-select: none;
  user-select: none;
}

/* ==========================================================================
   COVER + TABLE OF CONTENTS (index page)
   ========================================================================== */
.cover {
  position: relative; text-align: center; padding: 70px 30px 60px; overflow: hidden;
  background:
    radial-gradient(700px 340px at 50% -60px, rgba(242,106,0,.28), transparent 65%),
    repeating-linear-gradient(-35deg, transparent 0 26px, rgba(255,255,255,.03) 26px 27px),
    linear-gradient(180deg, #223a5c 0%, var(--steel-deep) 45%, #142b49 100%);
  color: #fff; border-bottom: 6px solid var(--orange);
}
.cover .kicker { font-family: var(--f-label); font-weight: 600; font-size: 14px; letter-spacing: .5em; text-transform: uppercase; color: #a9c4e6; }
/* one unbreakable word in Michroma: size must track the cover width all the way down */
.cover h1 { font-family: var(--f-display); font-size: clamp(19px, calc(7vw - 8px), 56px); margin: 14px 0 4px; letter-spacing: .04em; text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 34px rgba(255,138,31,.35); }
.cover h1 b { color: var(--orange-hot); }
.cover .subtitle { font-family: var(--f-display); font-size: clamp(13px, 2.4vw, 18px); letter-spacing: .3em; text-transform: uppercase; color: #cfe0f5; }
.cover .blurb { max-width: 60ch; margin: 22px auto 0; color: #d7e3f2; font-size: 15.5px; }
.ratingbox {
  position: absolute; right: 26px; bottom: 22px; width: 84px;
  background: #fff; color: var(--ink); border-radius: 6px; padding: 8px 6px 6px;
  font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.ratingbox .letter { font-family: var(--f-display); font-size: 34px; line-height: 1; color: var(--ink); }
@media (max-width: 640px) { .ratingbox { display: none; } }

.toc-tools { display: flex; gap: 12px; align-items: center; padding: 26px 34px 0 44px; flex-wrap: wrap; }
.toc-tools input {
  flex: 1; min-width: 220px; font-family: var(--f-mono); font-size: 14px;
  padding: 9px 14px; border-radius: 8px; border: 2px solid var(--chrome-lo);
  background: #fff; color: var(--ink); outline: none;
}
.toc-tools input:focus { border-color: var(--orange); }
.toc-tools .filterbtn {
  cursor: pointer; font-family: var(--f-label); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; border-radius: 6px;
  border: 1px solid var(--chrome-lo); background: linear-gradient(180deg, #fff, #dfe3e8);
  padding: 7px 12px; color: var(--ink-soft); box-shadow: 0 2px 0 var(--chrome-lo);
}
.toc-tools .filterbtn.on { background: linear-gradient(180deg, var(--orange-hot), var(--orange)); color: #fff; border-color: #b34e00; box-shadow: 0 2px 0 #8a3c00; }
@media (max-width: 640px) {
  .toc-tools { padding: 22px 20px 0 24px; }
  .toc-tools input { flex-basis: 100%; min-width: 0; }
}

.toc { list-style: none; margin: 10px 0 0; padding: 18px 34px 8px 44px; column-gap: 40px; }
@media (min-width: 720px) { .toc { columns: 2; } }
.toc li { break-inside: avoid; margin: 0 0 3px; }
.toc a {
  display: flex; align-items: baseline; gap: 10px; text-decoration: none;
  color: var(--ink); padding: 4px 6px; border-radius: 5px; font-size: 14.5px;
}
.toc a:hover { background: rgba(242,106,0,.1); color: var(--ink); }
.toc .no { font-family: var(--f-display); font-size: 12.5px; color: var(--steel-deep); flex: 0 0 34px; }
.toc .dots { flex: 1; border-bottom: 2px dotted var(--paper-edge); transform: translateY(-4px); min-width: 20px; }
.toc .flag { font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; padding: 1px 5px; }
.toc .flag.dep { background: var(--danger); color: #fff; }
.toc .flag.mrg { background: var(--steel); color: #fff; }
.toc li.dim a { opacity: .55; }
.toc li.hidden { display: none; }

/* generic utility */
.small { font-size: 13px; color: var(--ink-soft); }
hr.tear { border: 0; border-top: 2px dashed var(--paper-edge); margin: 30px 0; }