/* LIVING.FIELDS — shared chassis (ported from political.design, then extended).
   Every page declares four things and inherits the rest:
     --paper  page background
     --ink    body text
     --accent the system's one loud colour
     --font-*  display / body / mono stacks
   A kit file (shared/kits/<kit>.css) sets these for a culture; the page's
   own inline <style> then nudges them for the individual system.

   Diagram tokens (same meaning on every page, local hue per kit):
     --d-water --d-soil --d-leaf --d-stone --d-sun --d-crop --d-animal --d-built
*/

:root {
  --paper: #ffffff;
  --ink: #111111;
  --accent: #6b7f3a;
  --accent-2: var(--accent);
  --on-accent: #ffffff;
  --rule: color-mix(in srgb, var(--ink) 18%, transparent);
  --soft: color-mix(in srgb, var(--ink) 66%, transparent);
  --whisper: color-mix(in srgb, var(--ink) 6%, transparent);
  --card: color-mix(in srgb, var(--paper) 92%, var(--ink));
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --step: clamp(3.5rem, 9vw, 7.5rem);
  --radius: 0;

  --d-water: #3f7fa0;
  --d-soil: #7a5a3a;
  --d-leaf: #4f7a3a;
  --d-stone: #9a948a;
  --d-sun: #e0a82e;
  --d-crop: #c9a13a;
  --d-animal: #6b4a36;
  --d-built: #b9a78c;
  --d-sky: color-mix(in srgb, var(--paper) 70%, var(--d-water));
  --d-line: var(--ink);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.18rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--paper); }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), 76rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 46rem); margin-inline: auto; }
.section { padding-block: var(--step); position: relative; }
.prose { max-width: var(--measure); }
.stack > * + * { margin-top: 1.4rem; }
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }
.split { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }

/* kit border motif as a horizontal rule: <div class="motif-rule" aria-hidden="true"></div> */
.motif-rule { height: 14px; background: var(--border-motif, none) repeat-x left center; opacity: 0.9; }
.motif-rule--thick { height: 24px; background-size: auto 100%; }

/* ---------- shared type components ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.lede {
  font-size: clamp(1.2rem, 1.1vw + 1rem, 1.6rem);
  line-height: 1.44;
  max-width: 40rem;
}

/* The one-sentence answer a six-year-old gets first. */
.kid {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw + 0.9rem, 2.1rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  max-width: 36rem;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

.section-title {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  margin-bottom: 1.6rem;
}

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 3rem 0;
  padding-left: 1.4rem;
  border-left: 4px solid var(--accent);
  max-width: 44rem;
  text-wrap: balance;
}
.pull cite {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 1rem;
}

.mono-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--soft);
}

/* contested / uncertain figure — always links to a note that explains why */
.contested {
  text-decoration: underline dotted color-mix(in srgb, var(--accent) 80%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.contested::after {
  content: "?";
  font-family: var(--font-mono);
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 0.1em;
  color: var(--accent);
}

/* ---------- figures ---------- */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2.2rem;
}
figure { margin: 0; }
figure .frame {
  border: 1px solid var(--rule);
  background: var(--whisper);
  position: relative;
  overflow: hidden;
}
figure .frame > svg { width: 100%; height: auto; display: block; }
figcaption {
  font-size: 0.86rem;
  line-height: 1.5;
  margin-top: 0.75rem;
  color: var(--soft);
}
figcaption b { color: var(--ink); font-weight: 600; }
.credit {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.45rem;
  opacity: 0.8;
}
.credit:empty { display: none; }
.tag-manner {
  position: absolute;
  top: 0; right: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  background: var(--ink);
  color: var(--paper);
  z-index: 3;
}

/* ---------- icons (sprite injected by icons.js) ---------- */
.ico {
  width: 1.25em; height: 1.25em;
  display: inline-block;
  vertical-align: -0.22em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ico--lg { width: 2.4rem; height: 2.4rem; }
.ico--xl { width: 3.4rem; height: 3.4rem; stroke-width: 1.3; }

/* ---------- diagram fills bound to kit tokens ---------- */
.f-water { fill: var(--d-water); }  .s-water { stroke: var(--d-water); }
.f-soil  { fill: var(--d-soil); }   .s-soil  { stroke: var(--d-soil); }
.f-leaf  { fill: var(--d-leaf); }   .s-leaf  { stroke: var(--d-leaf); }
.f-stone { fill: var(--d-stone); }  .s-stone { stroke: var(--d-stone); }
.f-sun   { fill: var(--d-sun); }    .s-sun   { stroke: var(--d-sun); }
.f-crop  { fill: var(--d-crop); }   .s-crop  { stroke: var(--d-crop); }
.f-animal{ fill: var(--d-animal); } .s-animal{ stroke: var(--d-animal); }
.f-built { fill: var(--d-built); }  .s-built { stroke: var(--d-built); }
.f-sky   { fill: var(--d-sky); }
.f-paper { fill: var(--paper); }    .s-paper { stroke: var(--paper); }
.f-ink   { fill: var(--ink); }      .s-ink   { stroke: var(--ink); }
.f-accent{ fill: var(--accent); }   .s-accent{ stroke: var(--accent); }
.f-none  { fill: none; }

/* ---------- hotspot diagram ---------- */
.diagram .frame { background: transparent; }
.diagram svg text { font-family: var(--font-mono); }
.pin { cursor: pointer; outline: none; }
.pin__hit { fill: transparent; }
.pin__dot {
  fill: var(--accent);
  stroke: var(--paper);
  stroke-width: 3;
  transition: transform 0.2s;
  transform-box: fill-box;
  transform-origin: center;
}
.pin__n {
  fill: var(--on-accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  pointer-events: none;
}
.pin:hover .pin__dot, .pin:focus-visible .pin__dot { transform: scale(1.25); }
.pin:focus-visible .pin__dot { stroke: var(--ink); stroke-width: 4; }
.pin__pulse {
  fill: none; stroke: var(--accent); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: pin-pulse 2.6s ease-out infinite;
}
@keyframes pin-pulse { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }

.legend {
  list-style: none;
  counter-reset: pin;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.35rem 1.4rem;
  font-size: 0.92rem;
}
.legend li { counter-increment: pin; display: flex; gap: 0.6rem; align-items: baseline; line-height: 1.4; }
.legend li::before {
  content: counter(pin);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  flex: none;
  width: 1.5rem; height: 1.5rem;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(0.1rem);
}
.legend a { font-weight: 600; }
.legend span { color: var(--soft); }

/* wide / tall artwork swap */
.v-tall { display: none; }
@media (max-width: 40rem) {
  .has-tall .v-wide { display: none; }
  .has-tall .v-tall { display: block; }
}

/* ---------- cast cards ---------- */
.cast {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 1px;
  padding: 1px;
}
.cast a {
  box-shadow: 0 0 0 1px var(--rule);
  background: var(--paper);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.4rem;
  padding: 1.3rem 1.2rem 1.4rem;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
  min-height: 12rem;
}
.cast a svg.cast__art { width: 4.2rem; height: 4.2rem; margin-bottom: 0.6rem; }
.cast a:hover, .cast a:focus-visible { background: var(--accent); color: var(--on-accent); }
.cast a:hover .cast__role, .cast a:focus-visible .cast__role { color: inherit; opacity: 0.85; }
.cast__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.cast__role { font-size: 0.85rem; line-height: 1.45; color: var(--soft); }
.cast__kind {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}
.cast a:hover .cast__kind, .cast a:focus-visible .cast__kind { color: inherit; }

/* ---------- idea list (why it's clever) ---------- */
.ideas { display: grid; gap: 2.4rem; counter-reset: idea; }
@media (min-width: 58rem) { .ideas { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; } }
.idea { counter-increment: idea; border-top: 2px solid var(--ink); padding-top: 1.2rem; }
.idea__icon { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.idea__icon::before {
  content: counter(idea, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--soft);
}
.idea h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); margin-bottom: 0.7rem; }
.idea > p { font-size: 1.05rem; }

/* ---------- accordion ("dig deeper") ---------- */
.dig {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 1.2rem 0;
}
.dig + .dig { margin-top: -1.2rem; border-top: 0; }
/* accordions laid out in a grid: no stacking overlap */
.seasons .dig, .seasons .dig + .dig { margin: 0 0 -1px; border-top: 1px solid var(--rule); }
.dig > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "k d" "t d";
  column-gap: 1rem;
  padding: 0.9rem 0.1rem;
  transition: background 0.2s, padding 0.2s;
}
.dig > summary::-webkit-details-marker { display: none; }
.dig > summary:hover { background: var(--whisper); padding-inline: 0.7rem; }
.dig__kicker {
  grid-area: k;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.dig__title { grid-area: t; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.25; }
.dig__depth {
  grid-area: d;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--soft);
  letter-spacing: 0.25em;
}
.dig__depth::after {
  content: "+";
  font-size: 1.4rem;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink);
  transition: transform 0.25s;
  width: 1rem;
  text-align: center;
}
.dig[open] > summary .dig__depth::after { transform: rotate(45deg); }
.dig__body { padding: 0.3rem 0.1rem 1.4rem; max-width: 44rem; font-size: 0.98rem; }
.dig__body > :last-child { margin-bottom: 0; }
.dig__body h4 { font-size: 0.98rem; margin: 1.2rem 0 0.4rem; }
.dig__body ul, .dig__body ol { padding-left: 1.2rem; margin: 0 0 1em; }
.dig__body li { margin-bottom: 0.35rem; }
.dig__body table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0 0 1em; }
.dig__body th, .dig__body td { text-align: left; padding: 0.45rem 0.6rem 0.45rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.dig__body th { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); font-weight: 400; }
.dig-all {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
  color: inherit;
  border: 1px solid var(--rule);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.dig-all:hover { background: var(--ink); color: var(--paper); }

/* ---------- glossary term ---------- */
a.term {
  text-decoration: underline dashed;
  text-decoration-color: color-mix(in srgb, var(--accent) 75%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  cursor: help;
}
a.term:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* ---------- media slot ---------- */
.media { position: relative; }
.media__box {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  background: var(--whisper);
  border: 1px solid var(--rule);
}
.media__stand { position: absolute; inset: 0; }
.media__stand > svg { width: 100%; height: 100%; }
.media__want {
  position: absolute;
  left: 0.8rem; bottom: 0.8rem; right: 0.8rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.media__want span {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  padding: 0.35rem 0.55rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.media__want .ico { width: 1.6rem; height: 1.6rem; padding: 0.3rem; background: var(--ink); color: var(--paper); stroke-width: 1.8; }
.media__box > img, .media__box > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.media__box > audio { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; width: calc(100% - 2rem); }
.media[data-filled] .media__want { display: none; }
.media[data-filled="image"] .media__stand,
.media[data-filled="video"] .media__stand { display: none; }
html.show-slots .media__box { outline: 3px dashed #e5007a; outline-offset: -3px; }
html.show-slots .media__box::before {
  content: attr(data-slot-label);
  position: absolute; top: 0; left: 0; z-index: 5;
  background: #e5007a; color: #fff;
  font: 700 0.7rem/1 var(--font-mono);
  padding: 0.4rem 0.5rem;
}
.gallery { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* ---------- fact sheet ---------- */
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1px; padding: 1px; }
.facts div { box-shadow: 0 0 0 1px var(--rule); background: var(--paper); padding: 1rem 1.1rem 1.1rem; }
.facts dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); margin-bottom: 0.35rem; }
.facts dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.facts dd small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--soft); margin-top: 0.25rem; }

/* ---------- criteria (FAO's five) ---------- */
.criteria { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.criteria li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.8rem; align-items: start; }
.criteria li > .ico { width: 2.2rem; height: 2.2rem; padding: 0.4rem; border: 1px solid var(--rule); border-radius: 50%; }
.criteria b { display: block; font-family: var(--font-display); }

/* ---------- field notebook (modal bodies live here) ---------- */
.notebook > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.notebook > summary::-webkit-details-marker { display: none; }
.notebook > summary h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.notebook > summary span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.notebook__grid { display: grid; gap: 0; padding-top: 1rem; }
@media (min-width: 60rem) { .notebook__grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

.note { padding: 1.6rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 5rem; }
.note:target { background: var(--whisper); }
.note__kind {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.note h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 0.3rem; outline: none; }
.note__sci { font-size: 0.95rem; color: var(--soft); margin: 0 0 1rem; }
.note__art { max-width: 14rem; margin: 0 0 1rem; }
.note__kid { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; margin-bottom: 1rem; }
.note__body { font-size: 0.96rem; }
.note__body > :last-child { margin-bottom: 0; }
.note__body ul { padding-left: 1.2rem; }
.note__body dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; font-size: 0.88rem; margin: 1rem 0 0; }
.note__body dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); padding-top: 0.2rem; }
.note__body dd { margin: 0; }

/* ---------- the one shared dialog ---------- */
dialog.modal {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  max-width: min(46rem, 100% - 2rem);
  width: 100%;
  max-height: min(88svh, 60rem);
  margin: auto;
  overflow: visible;
}
dialog.modal::backdrop {
  background: rgba(10, 11, 14, 0.62); /* fixed: ::backdrop can't rely on page variables in every browser */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal__sheet {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--accent);
  max-height: min(88svh, 60rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 clamp(1.2rem, 4vw, 2.6rem) 1.6rem;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45);
}
.modal__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 0 0.7rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.4rem;
}
.modal__bar button, .modal__bar a {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: none;
  color: inherit;
  border: 1px solid var(--rule);
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  text-decoration: none;
}
.modal__bar button:hover, .modal__bar a:hover { background: var(--ink); color: var(--paper); }
.modal__bar button[disabled] { opacity: 0.3; cursor: default; background: none; color: inherit; }
.modal__nav { display: flex; gap: 0.4rem; }
.modal .note { border-bottom: 0; padding-bottom: 0.4rem; }
.modal .note:target { background: none; }

/* glossary slip — bottom sheet on phones */
dialog.modal--slip { max-width: min(30rem, 100% - 2rem); }
.slip__term { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; margin: 0.4rem 0 0.6rem; }
.slip__kid { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.35; margin-bottom: 1rem; }
.slip__pro { font-size: 0.92rem; color: var(--soft); border-top: 1px solid var(--rule); padding-top: 0.8rem; }
.slip__pro b { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; display: block; color: var(--accent); margin-bottom: 0.3rem; }
@media (max-width: 40rem) {
  dialog.modal--slip { margin: auto 0 0; max-width: 100%; }
  dialog.modal--slip .modal__sheet { border-inline: 0; border-bottom: 0; }
}

/* ---------- marginal gauge ---------- */
.gauge {
  position: fixed;
  right: max(0.5rem, calc(var(--gutter) * 0.25));
  top: 20svh;
  bottom: 20svh;
  width: 3.4rem;
  z-index: 40;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--soft);
  display: none;
}
@media (min-width: 70rem) { .gauge { display: block; } }
.gauge::before { content: ""; position: absolute; top: -2.2rem; bottom: -0.8rem; right: -0.45rem; width: 3.9rem; background: linear-gradient(to left, color-mix(in srgb, var(--paper) 62%, transparent), transparent); z-index: -1; pointer-events: none; }
.gauge__tick { color: var(--ink); opacity: 0.75; }
.gauge__rail { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.gauge__tick { position: absolute; right: 0; display: flex; align-items: center; gap: 0.3rem; transform: translateY(-50%); white-space: nowrap; }
.gauge__tick::after { content: ""; width: 0.5rem; height: 1px; background: var(--soft); }
.gauge__mark {
  position: absolute;
  right: -0.35rem;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px var(--paper);
}
.gauge__read {
  position: absolute;
  right: 1.1rem;
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.2rem 0.4rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- kin + sources ---------- */
.lineage { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1px; padding: 1px; }
.lineage a {
  box-shadow: 0 0 0 1px var(--rule);
  background: var(--paper);
  padding: 1.5rem 1.4rem;
  text-decoration: none;
  display: block;
  transition: background 0.25s, color 0.25s;
}
.lineage a:hover, .lineage a:focus-visible { background: var(--lin-accent, var(--accent)); color: #fff; }
.lineage a:hover .lineage-why, .lineage a:hover .lineage-yr,
.lineage a:focus-visible .lineage-why, .lineage a:focus-visible .lineage-yr { color: rgba(255,255,255,0.85); }
.lineage a[data-fallow] { background-image: repeating-linear-gradient(135deg, var(--whisper) 0 2px, transparent 2px 9px); }
.lineage-yr { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--soft); display: block; }
.lineage-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; margin: 0.35rem 0 0.5rem; display: block; line-height: 1.1; }
.lineage-why { font-size: 0.85rem; line-height: 1.5; color: var(--soft); display: block; }

.sources { columns: 2 17rem; column-gap: 2.5rem; font-size: 0.85rem; line-height: 1.55; padding-left: 1.1rem; }
.sources li { break-inside: avoid; margin-bottom: 0.9rem; color: var(--soft); }
.sources li cite { font-style: italic; color: var(--ink); }
.reviewed { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--soft); margin-top: 2rem; }

/* ---------- injected nav ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
  transition: transform 0.35s ease;
}
.site-nav[data-hidden="true"] { transform: translateY(-105%); }
.site-nav a { text-decoration: none; }
.site-nav__mark { font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; }
.site-nav__mark span { color: var(--accent); }
.site-nav__here { color: var(--soft); flex: 1; text-align: center; display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 46rem) { .site-nav__here { display: block; } }
.site-nav__btn {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: none;
  border: 1px solid var(--rule);
  color: inherit;
  padding: 0.42rem 0.8rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.site-nav__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--accent);
  z-index: 95;
  width: 0;
  pointer-events: none;
}

/* ---------- index overlay (a <dialog>) ---------- */
dialog.atlas-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  background: #12110f;
  color: #f2efe8;
  overflow-y: auto;
  padding: 5rem var(--gutter) 4rem;
}
dialog.atlas-overlay[open] { animation: atlas-in 0.3s ease; }
@keyframes atlas-in { from { opacity: 0; } to { opacity: 1; } }
.atlas-overlay__close {
  position: fixed;
  top: 0.7rem; right: var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #12110f;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 0.42rem 0.8rem;
  cursor: pointer;
  z-index: 2;
}
.atlas-overlay__close:hover { background: #fff; color: #000; }
.atlas-overlay h2 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  width: min(100%, 60rem);
  margin: 2.2rem auto 0.6rem;
}
.atlas-list { list-style: none; margin: 0 auto; padding: 0; width: min(100%, 60rem); }
.atlas-list li { border-top: 1px solid rgba(255,255,255,0.12); }
.atlas-list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.atlas-list a, .atlas-list .fallow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.6rem 0.4rem;
  text-decoration: none;
  transition: background 0.2s, padding 0.2s;
}
.atlas-list a:hover { background: rgba(255,255,255,0.06); padding-left: 1rem; }
.atlas-list a[aria-current="page"] { background: rgba(255,255,255,0.1); }
.atlas-list .fallow { color: rgba(255,255,255,0.38); }
.atlas-list .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.25rem); letter-spacing: -0.01em; line-height: 1.2; }
.atlas-list .y { font-family: var(--font-mono); font-size: 0.66rem; color: rgba(255,255,255,0.45); white-space: nowrap; }
.atlas-list .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; margin-right: 0.55rem; vertical-align: 0.05em; }
.atlas-list .fallow .dot { background: transparent !important; border: 1px solid rgba(255,255,255,0.35); }

/* ---------- prev / next + footer ---------- */
.pagination { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.pagination a {
  padding: 2.4rem var(--gutter);
  text-decoration: none;
  display: block;
  transition: background 0.25s, color 0.25s;
}
.pagination a:last-child { text-align: right; border-left: 1px solid var(--rule); }
.pagination a:only-child { grid-column: 1 / -1; }
.pagination a:hover { background: var(--pg-accent, var(--accent)); color: #fff; }
.pagination a:hover small { color: rgba(255,255,255,0.8); }
.pagination small { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); margin-bottom: 0.5rem; }
.pagination strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.1; display: block; }

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 2.5rem var(--gutter) 3.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
}
.site-foot a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.site-foot a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .pin__pulse { display: none; }
}

@media print {
  .site-nav, .progress, .gauge, .pagination, .dig-all, dialog { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { font-size: 11pt; }
  .section { padding-block: 1.5rem; }
}