/* ============================================================
   Extremism in History — Ty i Ja look, redesigned 2026-07-31 toward the
   historical-events spark-map layout. Palette PROVISIONAL, not in
   copy/page_color_palettes.txt.
   Base inks:
     paper #F1E8D0   ink #131010
     crimson #9E1B32 (--lead) · mustard #C9A227 (--mic: the
       CLAUDE COMMENT stamp and the map's sparkle cells ONLY)
   Map category inks (like the events page's four cat inks —
   warm print gamut, no blues):
     faith  plum        #6E2A50
     left   crimson     #9E1B32  (doubles as --lead)
     right  burnt orange #C25E1F
     power  olive       #66702D
   Flat throughout: no gradients, no blurred shadows; offsets are
   solid ink. This :root is the single source of truth; app.js
   reads every color via getComputedStyle.
   ============================================================ */
:root {
  --bg: #f1e8d0;
  --ink: #131010;

  --lead: #9e1b32;
  --mic: #c9a227;
  --lead-screen: #e3b6be;
  --mic-screen: #ead9a7;

  --cat-faith: #6e2a50;
  --cat-left: #9e1b32;
  --cat-right: #c25e1f;
  --cat-power: #66702d;
  --map-land: #ddd2b4;

  --muted: #6e6250;
  --line: #dccfaf;
  --band: #e7dbbd;
  --soft-ink: #a5987f;

  --serif: "Lora", Georgia, serif;
  --display: "Shrikhand", "Cooper Black", serif;
  --caps: "Anton", "Arial Narrow", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

/* paper grain: texture, not shading */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mag-label {
  font-family: var(--caps);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
a.mag-label:hover { color: var(--ink); }

.mag-stamp {
  font-family: var(--caps);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  padding: 4px 10px;
  transform: rotate(-2deg);
  cursor: pointer;
}
.mag-stamp:hover { background: var(--ink); color: var(--bg); }

/* ---------- header ---------- */
.page-head {
  text-align: center;
  padding: 26px 16px 4px;
}
.page-head h1 {
  font-family: var(--caps);
  font-size: clamp(30px, 5.5vw, 52px);
  line-height: 1.02;
  text-transform: uppercase;
  margin-top: 12px;
}
.page-sub {
  margin: 10px auto 0;
  max-width: 640px;
  font-size: 14.5px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.55;
}
.mic-word { color: #8a6d12; font-weight: 700; }

.wrap { max-width: 980px; margin: 0 auto; padding: 18px 16px 40px; }

/* ---------- legend + transport ---------- */
.legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.legend-sep { width: 2px; align-self: stretch; background: var(--line); margin: 0 4px; }
.legend button {
  font-family: var(--caps);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 2px solid;
  background: none;
  cursor: pointer;
}
.transport { display: flex; gap: 8px; }

/* ---------- the spark map ---------- */
.mapwrap {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--bg);
  box-shadow: 6px 6px 0 var(--ink);
}
#sparkmap { display: block; width: 100%; aspect-ratio: 800 / 390; }
.year-readout {
  position: absolute;
  bottom: 6px;
  left: 14px;
  font-family: var(--caps);
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.map-stamp {
  position: absolute;
  top: 10px;
  right: 10px;
  pointer-events: none;
  transform: rotate(2deg);
  font-size: 10px;
}
.map-tip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  background: var(--bg);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 11px;
  max-width: 260px;
}
.map-tip .tip-name { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.map-tip .tip-desc { font-style: italic; font-size: 12px; line-height: 1.4; margin-top: 2px; }
.map-tip .tip-meta { margin-top: 4px; }

/* ---------- current card ---------- */
.paper-card {
  border: 2px solid var(--ink);
  background: var(--bg);
  box-shadow: 5px 5px 0 var(--ink);
}
.current-card {
  margin-top: 18px;
  padding: 14px 16px;
  min-height: 118px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.current-card .idle-note, .feed .idle-note {
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
  align-self: center;
}
.cat-chip {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--ink);
  margin-top: 4px;
}
.current-card h3 {
  font-family: var(--caps);
  font-size: clamp(17px, 2.6vw, 24px);
  line-height: 1.08;
  text-transform: uppercase;
  margin-top: 3px;
}
.current-card .cc-blurb {
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
}
.cc-profile {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

/* backing stamps (shared by cards and ledger) */
.backing {
  font-family: var(--caps);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1.5px solid;
  padding: 1.5px 6px;
  transform: rotate(-1.5deg);
  white-space: nowrap;
}
.backing-data { color: var(--lead); border-color: var(--lead); }
.backing-scholarship { color: var(--ink); border-color: var(--ink); }
.backing-claude { color: #8a6d12; border-color: var(--mic); background: var(--mic-screen); transform: rotate(1.5deg); }

/* influence rating: 1 contained · 2 local/regional · 3 changed history */
.influence {
  display: inline-block;
  font-family: var(--caps);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1.5px solid;
  padding: 1.5px 6px;
  white-space: nowrap;
}
.inf-1 { color: var(--muted); border-color: var(--soft-ink); }
.inf-2 { color: var(--cat-power); border-color: var(--cat-power); }
.inf-3 { color: var(--bg); border-color: var(--lead); background: var(--lead); }
p.influence { margin-top: 7px; }
.influence-key {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  max-width: 62ch;
}
.influence-key .influence { margin: 0 2px; }

/* ---------- scrubber ---------- */
.scrub-block { margin-top: 16px; }
.time-scrub {
  width: 100%;
  appearance: none;
  height: 4px;
  background: var(--ink);
  outline: none;
}
.time-scrub::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 22px;
  background: var(--lead);
  border: 2px solid var(--ink);
  cursor: ew-resize;
}
.time-scrub::-moz-range-thumb {
  width: 14px;
  height: 20px;
  border-radius: 0;
  background: var(--lead);
  border: 2px solid var(--ink);
  cursor: ew-resize;
}
.scrub-labels { position: relative; height: 18px; margin-top: 4px; }
.scrub-labels span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--caps);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.caveat {
  margin: 16px auto 0;
  max-width: 760px;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- feed ---------- */
.feed-block { margin-top: 22px; }
.feed { border-top: 2px solid var(--ink); margin-top: 6px; }
.feed-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.feed-row .cat-chip { width: 10px; height: 10px; margin-top: 0; align-self: center; }
.feed-row .f-year { font-family: var(--caps); font-size: 13px; width: 74px; flex-shrink: 0; }
.feed-row .f-name { font-size: 13.5px; line-height: 1.4; }
.feed-row .f-geo { color: var(--muted); }
.feed .idle-note { display: block; padding: 10px 0; }

/* ---------- wave cards ---------- */
.wave-card {
  margin-top: 34px;
  border: 2px solid var(--ink);
  background: var(--bg);
  box-shadow: 6px 6px 0 var(--ink);
}
.ww-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px 4px;
}
.ww-head h2 {
  font-family: var(--caps);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ww-head .ww-unit { font-size: 12px; font-style: italic; color: var(--muted); }
#wordwave-svg, #divided-svg { display: block; width: 100%; height: 240px; }
.ww-foot {
  border-top: 2px solid var(--ink);
  padding: 8px 16px 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* menace ledger */
.menace-scroll { overflow-x: auto; }
.menace-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 13px;
}
.menace-table th {
  font-family: var(--caps);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  padding: 6px 8px;
  text-align: left;
}
.menace-table td {
  border-bottom: 1px solid var(--line);
  padding: 4px 8px;
  font-style: italic;
  vertical-align: top;
}
.menace-table td .leader { display: block; }
.menace-table td .also {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
}
.menace-table td.turnover .also {
  color: var(--bg);
  opacity: 0.7;
  font-weight: 400;
}
.menace-table td.decade {
  font-family: var(--caps);
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  width: 62px;
}
.menace-table td.turnover {
  font-style: normal;
  font-weight: 700;
  color: var(--bg);
  background: var(--ink);
}
.menace-table td.blank { color: var(--soft-ink); }

/* ---------- ledger + filters ---------- */
.ledger-head { margin-top: 40px; }
.ledger-head h2 {
  font-family: var(--caps);
  font-size: clamp(24px, 3.4vw, 34px);
  text-transform: uppercase;
  color: var(--lead);
}
.ledger-head p { font-style: italic; color: var(--muted); font-size: 14px; }

.controls {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-top: 12px;
  border: 2.5px solid var(--ink);
  background: var(--bg);
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-row .row-label {
  font-family: var(--caps);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.chip {
  font-family: var(--caps);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  padding: 3px 9px;
  cursor: pointer;
}
.chip:hover { background: var(--band); }
.chip.on { background: var(--ink); color: var(--bg); }
.chip.on.chip-claude { background: var(--mic); color: var(--ink); }
.count-readout {
  margin-left: auto;
  font-family: var(--caps);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--lead);
  white-space: nowrap;
}

.era-block { margin-top: 30px; }
.era-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.era-head h2 {
  font-family: var(--caps);
  font-size: clamp(20px, 2.6vw, 28px);
  text-transform: uppercase;
  color: var(--lead);
}
.era-head .era-span {
  font-family: var(--caps);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.era-note {
  margin-top: 3px;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  max-width: 640px;
}
.era-rule {
  height: 8px;
  margin-top: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 7 L4 1 L8 7 L12 1 L16 7' fill='none' stroke='%239e1b32' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}

.entry {
  display: grid;
  grid-template-columns: 150px 1fr;
  border: 2px solid var(--ink);
  background: var(--bg);
  box-shadow: 5px 5px 0 var(--ink);
  margin-top: 16px;
}
.entry.is-claude { box-shadow: 5px 5px 0 var(--mic); }
.entry-rail {
  border-right: 2px solid var(--ink);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  background: var(--band);
}
.entry-span { font-family: var(--caps); font-size: 15px; letter-spacing: 0.04em; line-height: 1.15; }
.entry-geo { font-size: 12px; font-style: italic; color: var(--muted); }
.entry-type {
  font-family: var(--caps);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  padding: 2px 6px;
}
.entry-body { padding: 11px 15px 13px; }
.entry-body h3 {
  font-family: var(--caps);
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
  display: inline;
  margin-right: 8px;
}
.entry-family {
  font-family: var(--caps);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lead);
  white-space: nowrap;
}
.entry-blurb { margin-top: 6px; font-size: 14.5px; line-height: 1.55; }

/* the ten-year-old explanation */
.eli10 {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
}
.eli10-label {
  font-family: var(--caps);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--lead);
  padding: 2px 6px;
  margin-right: 8px;
  white-space: nowrap;
  transform: rotate(-1deg);
  display: inline-block;
}

/* structured profile: colorful keys, ink values */
.profile {
  list-style: none;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 18px;
}
.profile li { display: flex; align-items: baseline; gap: 7px; }
.profile .pk {
  font-family: var(--caps);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.profile .pk::after { content: " ·"; color: var(--soft-ink); }
/* one ink for every key (user call 2026-07-31); values stay near-black */
.pk-0, .pk-1, .pk-2, .pk-3 { color: var(--lead); }
.profile .pv { font-size: 13px; line-height: 1.45; color: var(--ink); }
@media (max-width: 640px) {
  .profile { grid-template-columns: 1fr; }
}
.entry-src {
  margin-top: 7px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.claude-note {
  margin-top: 9px;
  padding: 8px 11px;
  border-left: 4px solid var(--mic);
  background: var(--mic-screen);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.55;
}
.claude-note strong {
  font-family: var(--caps);
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a6d12;
  display: block;
  margin-bottom: 3px;
}

.empty-note { margin-top: 26px; text-align: center; font-style: italic; color: var(--muted); }

/* ---------- colophon ---------- */
.colophon { margin-top: 50px; border-top: 2.5px solid var(--ink); background: var(--band); }
.colophon-inner { max-width: 860px; margin: 0 auto; padding: 28px 24px 40px; font-size: 14.5px; line-height: 1.62; }
.colophon h2 { font-family: var(--caps); font-size: 22px; text-transform: uppercase; margin-bottom: 12px; }
.colophon p + p { margin-top: 11px; }
.colophon-caution { color: var(--lead); }
.colophon-src { margin-top: 18px; font-style: italic; }
.colophon a { color: var(--lead); }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .entry { grid-template-columns: 1fr; }
  .entry-rail { border-right: none; border-bottom: 2px solid var(--ink); flex-direction: row; flex-wrap: wrap; align-items: center; }
  .count-readout { margin-left: 0; }
  .year-readout { font-size: 30px; }
}