/* ============================================================
   BOOK.os — base.css
   Typography, color tokens, baseline reset.
   Bleeker's archivist register: clinical-but-bruised, ornate-but-precise.
   Dragonology / Wizardology lineage; National Geographic restraint.
   ============================================================ */

/* ---------- Imports ----------
   Palette + fonts now matched to NaustalgiaOS website (naustalgia.systems).
   Site stack: Share Tech Mono / Orbitron / Rajdhani.
   Book stack adds: Crimson Pro (body serif) + Spectral SC (small-caps display)
   for the Dragonology-lineage register. Hybrid: glitchpunk OS palette on
   parchment substrate. */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Spectral+SC:wght@400;600;700&family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&family=Caveat:wght@500;700&family=Kalam:wght@400;700&display=swap');

/* ---------- Color tokens — NAUSTALGIA-OS-canonical palette ----------
   DARK MODE BOOK. Locked 2026-05-16 (Fox said "hate the cream").
   Page substrate is now deep OS-navy; ink is bright cream/white.
   The glitchpunk accents pop on dark. Reads as the live broadcast,
   not the artifact left on a shelf. */
:root {
  /* Page substrate — deep OS-navy. Subtle gradient stop in spread.css. */
  --paper:           #12152A;   /* dominant page bg — between OS-black and naval blue */
  --paper-shadow:    #1B1F38;   /* inner cartouche fill, plate backgrounds */
  --paper-deep:      #0A0D1C;   /* deeper cartouche, page embossing edge */
  --paper-edge:      #2A2E50;   /* spine + outer rule color */

  /* Ink — bright cream/white now (inverted). */
  --ink:             #E8E8EE;   /* primary body text */
  --ink-mid:         #C8C8D4;
  --ink-soft:        #9A9DB0;   /* secondary text, captions */
  --ink-faint:       #6E7290;   /* page numbers, marginalia */

  /* NaustalgiaOS signature accents — canonical hexes from naustalgia.systems/css/pages.css */
  --naus-cyan:       #05d9e8;   /* signal cyan, the broadcast color */
  --naus-cyan-dim:   #038a94;
  --naus-magenta:    #ff2a6d;   /* alarm magenta, the warning + the wound */
  --naus-magenta-dim:#b8194d;
  --naus-yellow:     #f9f002;   /* witness yellow — Crash's eye-bar + crosshair halo */
  --naus-purple:     #7b2cbf;   /* depth violet, ADMIN substrate */
  --naus-amber:      #C77B30;   /* warm callouts, vintage accent */

  /* Bleeker — the archivist's palette. Greyscale creep, soft static. */
  --bleeker-grey:    #4D5366;
  --bleeker-fade:    rgba(77, 83, 102, 0.18);  /* margin "documented" wash */

  /* Per-character palette hooks — overridden inside .palette-<name> wrappers.
     spread.css consumers reference these tokens; do not hardcode hex elsewhere. */
  --char-primary:    var(--ink);
  --char-accent:     var(--naus-cyan);
  --char-secondary:  var(--naus-magenta);
  --char-warning:    var(--naus-yellow);

  /* Rule weights + radii */
  --rule-fine:       0.5px;
  --rule-base:       1px;
  --rule-heavy:      2.5px;
  --radius-sm:       2px;
  --radius-md:       4px;

  /* Typography scale — bumped 2026-05-16 for proper book typography
     (per web-search: 16px web baseline, can go 17-18px for reference book,
      line-height 1.5x). Header scale follows minor-third ratio. */
  --fs-root:         17px;
  /* Type scale bumped 2026-05-19 (second pass).
     Closed-book scaled 540 → 760 (1.41×); first-pass text bump (17.5 → 19,
     1.09×) was too shy per Fox. Second-pass scale tracks the container.
     Future containers: bump type AT LEAST the same ratio.
     See `feedback_dont_be_shy_with_text.md`. */
  --fs-page:         22px;     /* body text inside a spread */
  --fs-caption:      17px;
  --fs-margin:       14px;     /* marginal annotations */
  --fs-pagenum:      14px;
  --fs-h1:           78px;     /* character / section name */
  --fs-h2:           44px;     /* section heads */
  --fs-h3:           27px;     /* sub-section */
  --fs-tag:          12.5px;   /* code tags like CR-45H */

  /* Spacing rhythm — 4px base, 8/12/16/24/32/48 cadence. */
  --sp-1:            4px;
  --sp-2:            8px;
  --sp-3:            12px;
  --sp-4:            16px;
  --sp-5:            24px;
  --sp-6:            32px;
  --sp-7:            48px;
  --sp-8:            64px;

  /* Page geometry — sized for 1920×1080 viewport (Naus standard).
     Spread = 1840×1000 fills the viewport with a thin distinct frame
     gutter (40px each side horizontal, 40px top + remaining for nav bottom).
     Print stylesheet still uses real inches via @page. */
  --page-w:          920px;
  --page-h:          1000px;
  --page-pad:        56px;
  --page-pad-inner:  44px;
}

/* ---------- Reset (light-touch, not Eric Meyer kitchen-sink) ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: var(--fs-root);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  /* Reserve top + bottom strips for the fixed chrome layers so the
     centered spread never overlaps them at tight effective viewport
     heights (Edge at Windows 125% display scaling → effective ~864px
     height; spread + watermark + toolbar collided). Top reserve
     clears the .book-watermark banner (0→33) + .book-edit-toolbar
     (top:38 → bottom ≈ 100) + a 12px breathing margin = 112px.
     Bottom reserve clears the floating book-nav stack (~64px) plus
     a small buffer. box-sizing: border-box keeps the min-height:
     100vh measurement honest. Fox 2026-05-24. */
  padding: 112px 0 96px;
  box-sizing: border-box;
  font-family: 'Crimson Pro', 'EB Garamond', 'Lora', Georgia, 'Times New Roman', serif;
  font-size: var(--fs-page);
  line-height: 1.55;
  color: var(--ink);
  /* Browser-viewing substrate — the OS-black background from naustalgia.systems.
     Faint cyan + magenta vignette to nod at the live site's glitch register. */
  background:
    radial-gradient(ellipse at 20% 10%, rgba(5, 217, 232, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(255, 42, 109, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at center, #14182A 0%, #050508 100%);
  background-attachment: fixed;
  min-height: 100vh;
  /* Center every spread in the viewport. Multiple spreads in one file
     stack vertically (legacy) — but spec is 1 spread per file.
     `safe center` clamps the centering so the spread never overflows
     into the top padding (where the watermark + edit-toolbar live).
     At tall viewports the spread is centered; at tight viewports
     (Edge at Windows 125% scaling → ~864px effective height) the
     spread is anchored to the top padding instead of pushing up
     under the toolbar. Bottom overflow is fine — the floating
     bottom-nav is fixed and the user can scroll. */
  display: flex;
  flex-direction: column;
  align-items: safe center;
  justify-content: safe center;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: 'Spectral SC', 'Crimson Pro', serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--char-primary, var(--ink));
}

p {
  margin: 0 0 var(--sp-4) 0;
}

/* Drop cap — for opening paragraph of a character entry.
   Orbitron + glow gives an OS-glitchpunk illuminated-letter feel,
   while the floated layout reads as classic book opening. */
.dropcap::first-letter {
  font-family: 'Orbitron', 'Spectral SC', 'Crimson Pro', serif;
  font-size: 3.8em;
  line-height: 0.82;
  float: left;
  padding: 0.08em var(--sp-3) 0 0;
  color: var(--char-accent, var(--naus-cyan));
  font-weight: 900;
  text-shadow:
    0 0 6px rgba(5, 217, 232, 0.35),
    1px 0 0 var(--char-secondary, var(--naus-magenta)),
    -1px 0 0 var(--char-warning, var(--naus-yellow));
  letter-spacing: -0.02em;
}

ul, ol {
  margin: 0 0 var(--sp-4) 0;
  padding-left: var(--sp-5);
}

li {
  margin-bottom: var(--sp-2);
}

a {
  color: var(--char-accent, var(--naus-cyan));
  text-decoration: none;
  border-bottom: var(--rule-fine) dotted currentColor;
}

a:hover {
  color: var(--char-secondary, var(--naus-magenta));
}

code, kbd, samp, .mono {
  font-family: 'Share Tech Mono', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  letter-spacing: -0.01em;
}

/* ---------- Display + tag primitives ---------- */
.tag {
  display: inline-block;
  font-family: 'Rajdhani', 'Space Grotesk', 'Helvetica Neue', sans-serif;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px var(--sp-2);
  border: var(--rule-base) solid var(--char-primary, var(--ink));
  border-radius: var(--radius-sm);
  background: var(--paper-shadow);
  color: var(--char-primary, var(--ink));
}

.tag--code {
  font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.tag--accent {
  background: var(--char-accent, var(--naus-cyan));
  color: var(--ink);
  border-color: var(--char-accent, var(--naus-cyan));
}

/* Section headers — Orbitron caps with rule lines, OS-glitchpunk-coded */
.section-head {
  font-family: 'Orbitron', 'Spectral SC', serif;
  font-weight: 900;
  font-size: var(--fs-h2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--char-accent, var(--naus-cyan));
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--rule-heavy) solid var(--char-accent, var(--naus-cyan));
  position: relative;
  text-shadow:
    0 0 12px rgba(5, 217, 232, 0.35);
}

.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 60%;
  height: var(--rule-fine);
  background: var(--char-primary, var(--ink));
  opacity: 0.5;
}

.section-head--sub {
  font-size: var(--fs-h3);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: var(--rule-base) solid var(--char-secondary, var(--naus-magenta));
  color: var(--char-secondary, var(--naus-magenta));
  padding-bottom: var(--sp-1);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
  text-shadow: 0 0 8px rgba(255, 42, 109, 0.3);
  font-weight: 700;
}

/* Bleeker frame text — the "documented" wash. Greyscale, slightly recessed.
   Applied to .bleeker-note in margin annotations or framing prose. */
.bleeker-frame {
  font-family: 'Spectral SC', serif;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  color: var(--bleeker-grey);
  text-transform: uppercase;
}

/* Pull quote — italic Crimson, oversize, with leading rule + corner glyphs */
.pull-quote {
  position: relative;
  font-style: italic;
  font-size: 1.18em;
  line-height: 1.42;
  color: var(--ink-soft);
  border-left: var(--rule-heavy) solid var(--char-accent, var(--naus-cyan));
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
  margin: var(--sp-5) 0;
  background: linear-gradient(
    to right,
    rgba(5, 217, 232, 0.04) 0%,
    transparent 60%
  );
}

.pull-quote::before {
  content: "❝";
  position: absolute;
  top: -8px;
  left: 8px;
  font-family: 'Spectral SC', serif;
  font-size: 32px;
  color: var(--char-accent, var(--naus-cyan));
  line-height: 1;
  opacity: 0.7;
}

.pull-quote::after {
  content: "❞";
  position: absolute;
  bottom: -2px;
  right: 8px;
  font-family: 'Spectral SC', serif;
  font-size: 26px;
  color: var(--char-accent, var(--naus-cyan));
  line-height: 1;
  opacity: 0.5;
}

/* Data plate — Space Grotesk callout cards for stats/role/zone/etc.
   Lives in left-page corner cartouches. */
.data-plate {
  font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
  font-size: var(--fs-caption);
  line-height: 1.5;
  background: var(--paper-shadow);
  border: var(--rule-base) solid var(--char-primary, var(--ink));
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
}

.data-plate dt {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  color: var(--char-primary, var(--ink));
  margin-top: var(--sp-2);
}

.data-plate dt:first-child { margin-top: 0; }

.data-plate dd {
  margin: 0 0 var(--sp-1) 0;
  color: var(--ink);
}

/* Code/data callouts — file path references, line numbers, etc. */
.data-callout {
  font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
  font-size: var(--fs-caption);
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Sample-dialogue card — quote-styled with character attribution */
.dialogue-card {
  background: var(--paper-shadow);
  border-left: var(--rule-heavy) solid var(--char-accent, var(--naus-cyan));
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0;
  font-style: italic;
  position: relative;
}

.dialogue-card::before {
  content: open-quote;
  font-size: 2.4em;
  font-family: 'Spectral SC', serif;
  color: var(--char-accent, var(--naus-cyan));
  position: absolute;
  top: -4px;
  left: 4px;
  opacity: 0.4;
  line-height: 1;
}

.dialogue-card .state-tag {
  display: block;
  font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
  font-style: normal;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bleeker-grey);
  margin-bottom: var(--sp-1);
}

/* Color swatch — palette plate inside data-plate or as standalone */
.swatch-row {
  display: flex;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.swatch {
  width: 28px;
  height: 28px;
  border: var(--rule-base) solid var(--ink);
  border-radius: var(--radius-sm);
  position: relative;
}

.swatch::after {
  content: attr(data-hex);
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
  font-size: 8.5px;
  color: var(--ink-faint);
  letter-spacing: 0;
  white-space: nowrap;
}

.swatch-row { margin-bottom: var(--sp-5); }

/* Utility: hide visually but keep accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Selection — match the cyan accent */
::selection {
  background: var(--naus-cyan);
  color: var(--ink);
}

/* ===========================================================
   GLITCHPUNK ADDITIONS — naustalgia.systems register
   Display styles that "step outside the box" per Fox 2026-05-16.
   =========================================================== */

/* Orbitron display — for OS-coded headings (BOOK.os title, section masts). */
.os-display {
  font-family: 'Orbitron', 'Spectral SC', serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--char-primary, var(--ink));
}

.os-display--glitch {
  position: relative;
  text-shadow:
    1px 0 0 var(--naus-cyan),
    -1px 0 0 var(--naus-magenta);
}

/* Rajdhani UI — for tags, captions, OS-coded UI labels */
.ui-label {
  font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--fs-tag);
  color: var(--char-primary, var(--ink));
}

/* Share Tech Mono — for terminal-coded text (filenames, addresses, sigils) */
.tech-mono {
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.04em;
}

/* ===========================================================
   LEXICON FOOTNOTES — page-bottom small-print term refs.
   Educational-textbook pattern: each lexicon term used in the
   page body gets a tiny entry at the bottom citing its
   appendix page + a one-line gloss.
   ============================================================ */

.lexicon-footer {
  position: absolute;
  bottom: 50px;          /* sits ABOVE the page-num band (page-num bottom: 22) */
  left: var(--page-pad);
  right: var(--page-pad);
  border-top: var(--rule-fine) dashed var(--ink-soft);
  padding-top: 7px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  /* leading accent rule on the dashed border */
  background-image: linear-gradient(
    to right,
    var(--char-accent, var(--naus-cyan)) 0%,
    var(--char-accent, var(--naus-cyan)) 36px,
    transparent 36px,
    transparent 100%
  );
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.lexicon-footer::before {
  content: "LEX.";
  font-family: 'Share Tech Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--char-accent, var(--naus-cyan));
  margin-right: 6px;
  text-shadow: 0 0 4px rgba(5, 217, 232, 0.4);
}

/* Lexicon-footer must stay within the body content column — not extend
   into the outer-margin sidebar where margin-notes live (180px reserve). */
.page--right .lexicon-footer {
  left: var(--page-pad-inner);
  right: 180px;
}

.page--left .lexicon-footer {
  left: 180px;
  right: var(--page-pad-inner);
}

.lex-ref {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.lex-ref .lex-term {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9.5px;
  color: var(--char-primary, var(--ink));
  text-transform: lowercase;
  font-weight: 600;
}

.lex-ref .lex-term::before { content: "[ "; color: var(--char-accent, var(--naus-cyan)); }
.lex-ref .lex-term::after  { content: " ]"; color: var(--char-accent, var(--naus-cyan)); }

.lex-ref .lex-gloss {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 9.5px;
}

.lex-ref .lex-page {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--ink-faint);
  margin-left: 4px;
}

.lex-ref .lex-page::before { content: "→ p."; opacity: 0.7; }

/* In-prose lexicon term — bold, accented, anchors the eye.
   These are the keywords readers should latch onto first when scanning.
   Visual hierarchy: lexicon term > body italics > body roman. */
.lex {
  font-family: 'Rajdhani', 'Crimson Pro', serif;
  font-weight: 700;
  color: var(--naus-yellow);
  text-shadow: 0 0 6px rgba(249, 240, 2, 0.35);
  letter-spacing: 0.01em;
  cursor: help;
  transition: color 0.18s, text-shadow 0.18s;
}

/* Per-palette tint override — lex term uses the character's accent color */
.palette-crash .lex,
.palette-mark .lex,
.palette-l1nt .lex {
  /* yellow is right for these */
}

.palette-bleeker .lex,
.palette-trigon .lex {
  color: var(--naus-cyan);
  text-shadow: 0 0 6px rgba(5, 217, 232, 0.35);
}

.palette-bracket .lex,
.palette-trent .lex,
.palette-404 .lex {
  color: var(--naus-magenta);
  text-shadow: 0 0 6px rgba(255, 42, 109, 0.35);
}

/* ===========================================================
   POLISH UTILITY CLASSES — consolidated from inline styles.
   =========================================================== */

/* Two-column data plate grid (used by data-plate dl on dense entries) */
.data-plate--grid dl,
.data-plate dl.grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  align-items: baseline;
  margin: 0;
}

.data-plate--grid dl dt,
.data-plate dl.grid dt {
  margin-top: 0;
  font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--char-accent, var(--naus-cyan));
  padding-top: 1px;
}

.data-plate--grid dl dd,
.data-plate dl.grid dd {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 12.5px;
  line-height: 1.45;
}

/* Thesis pillar — Roman numeral + body claim, for the Introduction */
.pillars dl dt {
  font-family: 'Orbitron', 'Spectral SC', serif;
  font-weight: 900;
  font-size: 16px;
  color: var(--naus-magenta);
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(255, 42, 109, 0.35);
  margin: 0;
  padding-top: 1px;
}

.pillars dl dd strong {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--naus-cyan);
  margin-bottom: 2px;
}

/* Side-by-side voice + threads grid (Crash + Bleeker spreads) */
.voice-threads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.voice-threads-grid > div {
  min-width: 0;
}

/* Compact dialogue card variant */
.dialogue-card.dialogue-card--compact {
  padding: 6px 12px;
  margin: 4px 0;
  font-size: 12.5px;
}

.dialogue-card.dialogue-card--compact .state-tag {
  font-size: 8.5px;
  letter-spacing: 0.13em;
  margin-bottom: 0;
}

/* Compact thread */
.thread.thread--compact {
  margin-top: 4px;
  padding-top: 4px;
  border-top-style: dotted;
}

.thread.thread--compact .thread-body {
  font-size: 11.5px;
}

/* Page utility: bleeker-frame paragraph sized for sub-titles */
.sub-deck {
  margin-bottom: var(--sp-4);
}

/* ===========================================================
   SUBTLE CRT SCANLINE OVERLAY for parchment pages.
   Very faint — present as the OS's signal beneath the paper.
   Layered via .page::before so it doesn't break paper grain.
   =========================================================== */
.page--crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(5, 217, 232, 0.025) 4px,
    transparent 5px,
    transparent 7px
  );
  z-index: 1;
  mix-blend-mode: multiply;
}

/* Pillar dl spacing tuned for thesis-pillars block */
.pillars .data-plate {
  background: rgba(27, 31, 56, 0.65);
  border: var(--rule-base) solid var(--char-secondary, var(--naus-magenta));
}

/* Sub-section head no-margin variant — used on first child in a column */
.section-head--sub.section-head--first {
  margin-top: 0;
}

/* Spread + page utility — slight inner glow on parchment */
.page-inner-glow {
  box-shadow:
    inset 0 0 60px rgba(5, 217, 232, 0.04),
    inset 0 0 120px rgba(255, 42, 109, 0.03);
}

/* Margin-bottom utilities — small, controlled. Avoid inline styles. */
.plate-mb-14 { margin-bottom: 14px; }
.plate-mb-16 { margin-bottom: 16px; }
.plate-mt-10 { margin-top: 10px; }
.plate-mt-16 { margin-top: 16px; }
.plate-mt-0  { margin-top: 0; }

/* Swatch-row override for data-plate--grid (margin-top: 10px is already in CSS,
   but ensure it sits below the dl) */
.data-plate--grid .swatch-row,
.data-plate dl.grid + .swatch-row {
  margin-top: 12px;
  margin-bottom: 4px;
}

/* H1 sizing utility for character entry titles */
.h1--character {
  font-family: 'Orbitron', 'Spectral SC', serif;
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  color: var(--char-primary, var(--ink));
  font-weight: 900;
  text-shadow:
    1px 0 0 var(--char-accent, var(--naus-cyan)),
    -1px 0 0 var(--char-secondary, var(--naus-magenta));
}

/* Page-num color polish — match palette accent */
.page-num {
  color: var(--char-primary, var(--ink-faint));
  opacity: 0.6;
}

/* ===========================================================
   FIELD-GUIDE PRIMITIVES — Dragonology / Froud / DK lineage,
   translated into NaustalgiaOS dark glitchpunk register.
   Used for fauna, flora, items, specimen-style entries
   (L1NT feral form, the Magic 8-Ball, cave creatures, etc.).
   =========================================================== */

/* Handwriting register — field notes, naturalist's marginalia,
   the kind of hand-drawn ink scribble that gives a reference book
   the feel of being a personal artifact. */
.hand {
  font-family: 'Caveat', 'Kalam', 'Brush Script MT', cursive;
  font-size: 1.35em;
  line-height: 1.42;
  color: var(--naus-cyan);
  letter-spacing: 0.01em;
}

.hand-pen {
  font-family: 'Kalam', 'Caveat', 'Marker Felt', cursive;
  font-size: 1.18em;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-mid);
  letter-spacing: 0.01em;
}

/* Inset card — floating "pinned" / "taped" card. The Dragonology
   parchment-clip in dark mode: dark substrate, neon outline, faint
   inner glow. Position absolute inside .page so it floats. */
.inset-card {
  position: absolute;
  background: var(--paper-shadow);
  border: 1px solid var(--char-accent, var(--naus-cyan));
  border-radius: 2px;
  padding: var(--sp-3) var(--sp-4);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(5, 217, 232, 0.08),
    inset 0 0 24px rgba(5, 217, 232, 0.04);
  font-size: 0.94em;
  line-height: 1.5;
  z-index: 3;
  max-width: 280px;
  transform: rotate(-1.4deg);
}

.inset-card--tilt-r { transform: rotate(2deg); }
.inset-card--tilt-l { transform: rotate(-2.4deg); }
.inset-card--tilt-r-sm { transform: rotate(0.8deg); }
.inset-card--tilt-l-sm { transform: rotate(-0.8deg); }
.inset-card--straight { transform: none; }

.inset-card--magenta {
  border-color: var(--naus-magenta);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(255, 42, 109, 0.1),
    inset 0 0 24px rgba(255, 42, 109, 0.04);
}

.inset-card--yellow {
  border-color: var(--naus-yellow);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(249, 240, 2, 0.1),
    inset 0 0 24px rgba(249, 240, 2, 0.04);
}

.inset-card .card-head {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--char-accent, var(--naus-cyan));
  margin-bottom: var(--sp-2);
  border-bottom: 1px dashed currentColor;
  padding-bottom: 3px;
}

.inset-card--magenta .card-head { color: var(--naus-magenta); }
.inset-card--yellow .card-head { color: var(--naus-yellow); }

/* Field stamp — the "NOT A DRAGON" / "ARTIFACT" / "PERSISTS" stamp.
   Dashed-border magenta or yellow, slightly rotated. */
.field-stamp {
  display: inline-block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--naus-magenta);
  border: 2px dashed var(--naus-magenta);
  padding: 3px 9px;
  background: rgba(255, 42, 109, 0.08);
  transform: rotate(-6deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  text-shadow: 0 0 4px rgba(255, 42, 109, 0.4);
}

.field-stamp--yellow {
  color: var(--naus-yellow);
  border-color: var(--naus-yellow);
  background: rgba(249, 240, 2, 0.08);
  text-shadow: 0 0 4px rgba(249, 240, 2, 0.4);
}

.field-stamp--cyan {
  color: var(--naus-cyan);
  border-color: var(--naus-cyan);
  background: rgba(5, 217, 232, 0.08);
  text-shadow: 0 0 4px rgba(5, 217, 232, 0.4);
}

.field-stamp--tilt-r { transform: rotate(5deg); }
.field-stamp--tilt-l { transform: rotate(-6deg); }

/* Field tape — a torn-edge strip "holding" something to the page */
.field-tape {
  position: absolute;
  width: 70px;
  height: 22px;
  background: linear-gradient(
    180deg,
    rgba(249, 240, 2, 0.35) 0%,
    rgba(249, 240, 2, 0.22) 50%,
    rgba(249, 240, 2, 0.35) 100%
  );
  border-top: 1px solid rgba(249, 240, 2, 0.45);
  border-bottom: 1px solid rgba(249, 240, 2, 0.45);
  transform: rotate(-12deg);
  clip-path: polygon(
    0% 8%, 6% 0%, 22% 6%, 48% 0%, 72% 8%, 92% 0%, 100% 92%,
    92% 100%, 70% 92%, 45% 100%, 22% 90%, 5% 100%
  );
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.field-tape--tilt-r { transform: rotate(10deg); }
.field-tape--cyan {
  background: linear-gradient(
    180deg,
    rgba(5, 217, 232, 0.32) 0%,
    rgba(5, 217, 232, 0.18) 50%,
    rgba(5, 217, 232, 0.32) 100%
  );
  border-color: rgba(5, 217, 232, 0.45);
}

/* Field pin — a glowing pinpoint */
.field-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--naus-yellow) 0%,
    var(--naus-amber) 60%,
    transparent 100%
  );
  box-shadow:
    0 0 8px var(--naus-yellow),
    0 0 16px rgba(249, 240, 2, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.7);
  z-index: 10;
  pointer-events: none;
}

.field-pin--magenta {
  background: radial-gradient(
    circle,
    var(--naus-magenta) 0%,
    var(--naus-magenta-dim) 60%,
    transparent 100%
  );
  box-shadow:
    0 0 8px var(--naus-magenta),
    0 0 16px rgba(255, 42, 109, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.7);
}

.field-pin--cyan {
  background: radial-gradient(
    circle,
    var(--naus-cyan) 0%,
    var(--naus-cyan-dim) 60%,
    transparent 100%
  );
  box-shadow:
    0 0 8px var(--naus-cyan),
    0 0 16px rgba(5, 217, 232, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.7);
}

/* Anatomy callout — a labeled note pointing to part of an illustration.
   Place at desired x/y via inline style or wrapper. The leader-line is
   drawn via the ::before pseudo on the label, or via the .anatomy-line
   utility (uses absolute SVG overlay; see field-guide.html demo). */
.anatomy-label {
  position: absolute;
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--paper-shadow);
  padding: 5px 11px;
  border: 1px solid var(--naus-cyan);
  border-radius: 1px;
  max-width: 180px;
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.anatomy-label .label-head {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--naus-cyan);
  margin-bottom: 1px;
}

/* Connecting line — for anatomy callouts. Position absolutely with
   inline style for x/y/length/rotation. */
.anatomy-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--naus-cyan) 0%,
    rgba(5, 217, 232, 0.4) 100%
  );
  transform-origin: left center;
  z-index: 3;
  pointer-events: none;
}

.anatomy-line::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 5px;
  height: 5px;
  background: var(--naus-cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--naus-cyan);
}

/* Polaroid-style cropped specimen photo */
.polaroid {
  position: absolute;
  padding: 8px 8px 22px 8px;
  background: var(--paper-shadow);
  border: 1px solid var(--ink-soft);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(5, 217, 232, 0.08);
  z-index: 3;
  transform: rotate(-3deg);
}

.polaroid img,
.polaroid .polaroid-placeholder {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
}

.polaroid .polaroid-caption {
  font-family: 'Caveat', cursive;
  font-size: 14px;
  color: var(--naus-cyan);
  text-align: center;
  margin-top: 4px;
}

/* Diary-entry — handwritten with date stamp */
.diary-entry {
  position: absolute;
  font-family: 'Kalam', 'Caveat', cursive;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-mid);
  max-width: 240px;
  z-index: 3;
}

.diary-entry .diary-date {
  display: block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--naus-yellow);
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* Inset-card dl with .grid — used inside field-guide cards */
.inset-card dl.grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  align-items: baseline;
  margin: 0;
}

.inset-card dl.grid dt {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--char-accent, var(--naus-yellow));
  margin: 0;
  padding: 0;
}

.inset-card--yellow dl.grid dt { color: var(--naus-yellow); }
.inset-card--magenta dl.grid dt { color: var(--naus-magenta); }

.inset-card dl.grid dd {
  margin: 0;
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  line-height: 1.45;
}

/* Compact paragraph utility for field-guide cards */
.inset-card .p-compact {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.5;
}

.inset-card .p-compact + .p-compact {
  margin-top: 6px;
}