/* ─────────────────────────────────────────────────────────────────
   CONVERSATIONS — global.css

   UNIVERSAL GRID
   ─────────────────
   Every full-width section is itself a grid container using the
   shared --page-grid-cols track definition. Named lines are
   therefore available to direct children of any section element —
   no wrapper class required.

     c1  = left edge of column  1  (content start)
     c2  = left edge of column  2
     …
     c12 = left edge of column 12
     c13 = right edge of column 12 (content end)

   Usage (works on children of any section):
     grid-column: c3 / c9;    columns 3 – 8
     grid-column: c1 / c13;   full content width

   The track definition lives in --page-grid-cols (custom property).
   All sections share --grid-margin, --grid-gutter, and max-width,
   so c8 in the footer and c8 in the conversation header fall on
   the same vertical line.

   .page-grid is kept as a utility class for one-off containers
   that need the same grid outside of section elements.

   COLOR SYSTEM
   ─────────────
   Three base tokens: --c-bg, --c-fg, --c-accent-01.
   Two explicit UI tokens: --c-rule, --c-selection.
   All other color values computed via color-mix() from these five.

   No tonal aliases (muted, dim, surface, etc.).

   TYPOGRAPHY SWAP
   ────────────────
   Update @font-face src + first value in --ff-sans.
   All scales and spacing follow via variables.

   Structure:
     0  Reset
     1  Custom properties
     1  Universal grid
     1  Base typography
     2  Site header
     2  Site footer
     2  Index page
     2  Conversation page: header, body, footer
     2  Map page
     2  Timeline page
     3  Filter effects
     4  Reader mode / theme
     4  Responsive
   ───────────────────────────────────────────────────────────────── */


/* ── @font-face ─────────────────────────────────────────────────── */

@font-face {
  font-family: "Ronzino Regular";
  src: url("../fonts/Ronzino-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "NimbusSans";
  src: url("https://fonts.cdnfonts.com/s/15099/NimbusSanL-Reg.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "NimbusSans";
  src: url("https://fonts.cdnfonts.com/s/15099/NimbusSanL-RegIta.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "NimbusSans";
  src: url("https://fonts.cdnfonts.com/s/15099/NimbusSanL-Bol.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "NimbusSans";
  src: url("https://fonts.cdnfonts.com/s/15099/NimbusSanL-BolIta.woff") format("woff");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

/* M PLUS 1: variable weight, loaded via Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap");
/* NOTE: do not redeclare a @font-face for a Google-imported family —
   the @import above already registers it; the duplicate block with
   `font-weight: <weight>` (literal angle bracket) was invalid syntax. */


/* ════════════════════════════════════════════════════════════════
   0 — RESET
   ════════════════════════════════════════════════════════════════ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
  color-scheme: light dark;
}


/* ════════════════════════════════════════════════════════════════
   1 — CUSTOM PROPERTIES
   ════════════════════════════════════════════════════════════════ */

:root {

  /* Authoritative base values */
  --_bg: #0a0a0a;
  --_fg: #ffffff;

  /* Public color tokens */
  --c-bg: var(--_bg);
  --c-fg: var(--_fg);
  --c-accent-01: #ff3b00;

  /* Derived UI tokens — not tonal aliases */
  --c-rule:      color-mix(in srgb, var(--c-fg) 10%, transparent);
  --c-selection: color-mix(in srgb, var(--c-accent-01) 25%, transparent);

  /* Per-conversation hook — override via conversationCSS */
  --c-conv-accent: var(--c-accent-01);

  /* ── Type scale (perfect fifth, anchored at 1rem) ── */
  /* NOTE: --fs-0 was declared twice; only the second value (0.444rem) survived.
     Kept both distinct levels and renamed so the scale is contiguous. */
  --fs-00: 0.296rem; /* 1rem / 1.5³ — rarely needed, keep as safety stop */
  --fs-0:  0.444rem; /* 1rem / 1.5²  — superscript, footnote counters */
  --fs-1:  0.667rem; /* 1rem / 1.5   — captions, footnote body */
  --fs-2:  1rem;     /* base          — meta labels */
  --fs-3:  1.5rem;   /* body text     — primary UI text size */
  --fs-4:  2.25rem;
  --fs-5:  3.375rem;
  --fs-6:  5.063rem;
  --fs-7:  7.594rem;
  --fs-8:  11.391rem;
  --fs-9:  17.086rem;
  --fs-10: 25.629rem;
  --fs-11: 38.444rem;
  --fs-12: 57.666rem;
  --fs-13: 86.499rem;
  --fs-14: 129.748rem;
  --fs-15: 194.623rem;

  /* ── Leading ── */
  --lh-body:    1.5;
  --lh-tight:   0.92;
  --lh-display: 0.84;

  /* ── Spacing (8px baseline multiples) ── */
  --sp-1:  0.5rem;   /*   8px */
  --sp-2:  1rem;     /*  16px */
  --sp-3:  1.5rem;   /*  24px */
  --sp-4:  2rem;     /*  32px */
  --sp-5:  2.5rem;   /*  40px */
  --sp-6:  3rem;     /*  48px */
  --sp-8:  4rem;     /*  64px */
  --sp-10: 5rem;     /*  80px */
  --sp-12: 6rem;     /*  96px */
  --sp-16: 8rem;     /* 128px */
  /* NOTE: --sp-7, --sp-9, --sp-11, --sp-13–15 omitted intentionally. */

  /* ── Grid ── */
  --grid-cols:   12;
  --grid-gutter: 1rem;
  --grid-margin: 1.5rem;
  --grid-max:    95vw;

  /* ── Letter-spacing ── */
  --ls-tight: -0.01em;
  --ls-body:   0.02em;
  --ls-meta:   0em;
  --ls-loose:  0.04em;
  --ls-wide:   0.06em;

  /* ── Font stacks ── */
  --ff-sans:  "Ronzino Regular", "NimbusSans", "Tex Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-serif: "Source Serif 4", "Noto Serif", serif;
  --ff-cjk:   "M PLUS 1", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --ff-mono:  "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med:  300ms;
  --dur-slow: 600ms;

  /* ── Z-index ── */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 200;

  /* ── Shell geometry ── */
  --header-height: 3rem;
}

@media (min-width: 768px) {
  :root {
    --grid-margin:   2rem;
    --grid-gutter:   1.5rem;
    --header-height: 3.5rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --grid-margin: 3rem;
  }
}


/* ════════════════════════════════════════════════════════════════
   1 — UNIVERSAL GRID
   ════════════════════════════════════════════════════════════════

   --page-grid-cols holds the track definition. Applied to every
   full-width section so named lines (c1–c13) are available to
   direct children everywhere — no wrapper class required.

   .page-grid is kept as a utility for one-off containers.
   ════════════════════════════════════════════════════════════════ */

:root {
  --page-grid-cols:
    [c1] 1fr [c2] 1fr [c3] 1fr  [c4] 1fr
    [c5] 1fr [c6] 1fr [c7] 1fr  [c8] 1fr
    [c9] 1fr [c10] 1fr [c11] 1fr [c12] 1fr
    [c13];
}

/* Tablet: collapse to 8 active columns, c9–c13 share a line */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --page-grid-cols:
      [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr
      [c5] 1fr [c6] 1fr [c7] 1fr [c8] 1fr
      [c9 c10 c11 c12 c13];
  }
}

/* Mobile: collapse to 4 active columns, c5–c13 share a line */
@media (max-width: 767px) {
  :root {
    --page-grid-cols:
      [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr
      [c5 c6 c7 c8 c9 c10 c11 c12 c13];
  }
}

/* Every full-width section is a grid container */
.page-grid,
.site-footer,
.index-about,
.conversation-header,
.conversation-body,
.conversation-footer,
.footnotes,
.map-section,
.timeline,
.timeline-section,
.conversation-table__head,
.conversation-table__row {
  display: grid;
  grid-template-columns: var(--page-grid-cols);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  max-width: var(--grid-max);
  margin-inline: auto;
  width: 100%;
}


/* ════════════════════════════════════════════════════════════════
   1 — BASE TYPOGRAPHY
   ════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-3);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-fg);
  background-color: var(--c-bg);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
}

::selection {
  background: var(--c-selection);
  color: var(--c-fg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-sans);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-7); line-height: var(--lh-display); }
h2 { font-size: var(--fs-6); }
h3 { font-size: var(--fs-5); }
h4 { font-size: var(--fs-4); font-weight: 600; }
h5 { font-size: var(--fs-3); font-weight: 600; letter-spacing: var(--ls-meta); }
/* FIXED: h6 referenced --fs2 (missing dash) → corrected to --fs-2 */
h6 { font-size: var(--fs-2); font-weight: 600; letter-spacing: var(--ls-meta); }

p {
  margin-bottom: var(--sp-4);
  max-width: 65ch;
}

a {
  color: var(--c-fg);
  text-decoration: underline;
  text-decoration-color: var(--c-fg);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--c-accent-01); }

/* NOTE: small, .text-sm, .text-xs all resolve to the same size (--fs-3).
   If you need a genuine "small" text step, use --fs-2 or --fs-1 here.
   Left as-is to preserve existing behavior. */
small,
.text-sm { font-size: var(--fs-3); }
.text-xs  { font-size: var(--fs-3); letter-spacing: var(--ls-loose); }

.text-serif { font-family: var(--ff-serif); }
.text-mono  { font-family: var(--ff-mono); font-size: 0.9em; }

.label {
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
}

/* ── CJK script overrides ────────────────────────────────────── */

:lang(ja), :lang(zh), :lang(ko) {
  font-family: var(--ff-cjk);
  line-height: 1.85;
  letter-spacing: 0.04em;
  word-break: normal;          /* was break-all — wrong for JP */
  overflow-wrap: anywhere;
  font-feature-settings: "palt" 1, "kern" 1;
}

/* Headings in CJK context */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3,
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3,
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* Latin/other-language spans embedded in Japanese context
   (requires <span lang="en|it|es"> wrapping in Portable Text output) */
:lang(ja) :lang(en),
:lang(ja) :lang(it),
:lang(ja) :lang(es),
:lang(zh) :lang(en),
:lang(ko) :lang(en) {
  font-family: var(--ff-sans);
  letter-spacing: var(--ls-body);
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

/* Don't override font in code contexts */
code:lang(ja), pre:lang(ja), kbd:lang(ja) {
  font-family: var(--ff-mono);
  font-feature-settings: normal;
  letter-spacing: normal;
  word-break: normal;
}

/* ════════════════════════════════════════════════════════════════
   2 — SITE HEADER
   ════════════════════════════════════════════════════════════════

   FIX: The blurred background was previously constrained by the
   shared-grid rule (max-width: var(--grid-max); margin-inline: auto),
   so it never reached the screen edges. The header is now split:

   .site-header        — full-bleed position shell (100vw, sticky)
   .site-header__inner — grid container for content alignment

   The background + backdrop-filter live on .site-header (full bleed).
   The grid lives on .site-header__inner.

   In header.astro, wrap content in <div class="site-header__inner">.
   ════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  /* Full-bleed: override the shared grid constraint intentionally */
  width: 100%;
  max-width: 100%;          /* override shared rule's --grid-max */
  margin-inline: 0;         /* override shared rule's auto margins */
  padding-inline: 0;        /* override shared rule's --grid-margin */
  z-index: var(--z-sticky);
  height: var(--header-height);
  background-color: color-mix(in srgb, var(--c-bg) 30%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* display: grid still applies from shared rule — used for the inner wrapper */
  align-items: center;
}

/* Inner wrapper carries the grid + content padding */
.site-header__inner {
  display: grid;
  grid-template-columns: var(--page-grid-cols);
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  max-width: var(--grid-max);
  margin-inline: auto;
  width: 100%;
  height: 100%;
  align-items: center;
}

.site-header__title {
  grid-column: c1 / c7;
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  text-decoration: none;
  color: var(--c-fg);
  text-transform: uppercase;
}
.site-header__title:hover {
  color: var(--c-fg);
  text-decoration: none;
}

.site-header__nav {
  grid-column: c10 / c13; 
  justify-self: end;
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-3);
  letter-spacing: var(--ls-meta);
}
.site-header__nav a {
  text-decoration: none;
  color: var(--c-fg);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-header__nav a:hover {
  color: var(--c-fg);
  text-decoration: none;
}
.site-header__nav a[aria-current="page"] {
  color: var(--c-fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--c-fg);
}


/* ════════════════════════════════════════════════════════════════
   2 — SITE FOOTER
   ════════════════════════════════════════════════════════════════ */

.site-footer {
  padding-block: var(--sp-12);
  margin-top: var(--sp-16);
  row-gap: var(--sp-8);
  align-items: start;
}

.site-footer__about   { grid-column: c1 / c6; }
.site-footer__nav-col { grid-column: c8 / c10; }

.site-footer__about {
  font-size: var(--fs-3);
  line-height: 1.6;
  color: var(--c-fg);
}

.site-footer__col-title {
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-meta);
  margin-bottom: var(--sp-2);
}

.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.site-footer__links a {
  text-decoration: none;
  font-size: var(--fs-3);
  color: var(--c-fg);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__links a:hover { color: var(--c-accent-01); }

.site-footer__colophon {
  grid-column: c1 / c13;
  font-size: var(--fs-3);
  color: var(--c-fg);
  letter-spacing: var(--ls-meta);
  padding-top: var(--sp-4);
}


/* ════════════════════════════════════════════════════════════════
   2 — INDEX PAGE
   ════════════════════════════════════════════════════════════════ */

.page-title {
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-display);
  padding-block: var(--sp-12) var(--sp-8);
  grid-column: c1 / c13;
}

.empty-state {
  padding: var(--sp-8) var(--grid-margin);
  color: var(--c-fg);
  font-size: var(--fs-3);
  max-width: none;
}

/* About statement */

.index-about {
  padding-block: var(--sp-10) var(--sp-8);
  align-items: start;
}

.index-about__text {
  font-size: var(--fs-3);
  line-height: 1;
  letter-spacing: var(--ls-body);
  margin: 0;
  grid-column: c1 / c12;
}

/* ── Conversation table ─────────────────────────────────────────
   Column grid (12 cols): PLACE=2 · TITLE=8 · TIME=1 · LANG=1
   Maps to: c1/c3 · c3/c11 · c11/c12 · c12/c13              */

.conversation-table {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
}

.conversation-table__head,
.conversation-table__row {
  align-items: baseline;
}

.ct-place { grid-column: c1 / c3; }
.ct-title { grid-column: c3 / c11; }
.ct-time  { grid-column: c11 / c12; }
.ct-lang  { grid-column: c12 / c13; }

.conversation-table__head {
  padding-block: var(--sp-1);
  position: sticky;
  top: var(--header-height);
  z-index: calc(var(--z-sticky) - 1);
  background-color: color-mix(in srgb, var(--c-bg) 60%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.conversation-table__head .ct-cell {
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--c-fg);
}

.conversation-table__row {
  padding-block: var(--sp-1);
  transition: background var(--dur-fast) var(--ease-out);
}

.conversation-table__row:hover {
  background-color: color-mix(in srgb, var(--c-fg) 3%, transparent);
}

.ct-cell { min-width: 0; }

.ct-place__text {
  font-size: var(--fs-3);
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
  display: block;
  text-align: right;
}

.ct-title__link,
.ct-title__text {
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  display: block;
}

.ct-title__link {
  text-decoration: none;
  color: var(--c-fg);
  transition: color var(--dur-fast) var(--ease-out);
}
.ct-title__link:hover { color: var(--c-accent-01); }

.ct-title__text { color: var(--c-fg); }

.ct-time {
  font-size: var(--fs-3);
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
  white-space: nowrap;
}

.ct-lang__code {
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--c-fg);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  text-align: right;
}
.ct-lang__code:hover { color: var(--c-accent-01); }

/* NOTE: .ct-lang__code--original::after has empty content: '' — effectively a no-op.
   Placeholder kept; populate content when the indicator is specified. */
.ct-lang__code--original::after {
  content: "";
  font-size: 0.6em;
  vertical-align: middle;
  margin-left: 0.1em;
}

/* ── Conversation card (mobile list fallback) ── */

.conversation-card {
  padding-block: var(--sp-6);
}

.conversation-card__cluster {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.conversation-card__version {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  column-gap: var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-1);
  text-decoration: none;
  color: var(--c-fg);
  transition: color var(--dur-fast) var(--ease-out);
}
.conversation-card__version:hover { color: var(--c-accent-01); text-decoration: none; }

.version-lang {
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--c-fg);
  white-space: nowrap;
}

.version-title {
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.version-meta {
  font-size: var(--fs-3);
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
  white-space: nowrap;
}

.conversation-card__footer {
  padding-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.conversation-card__blurb {
  font-size: var(--fs-3);
  color: var(--c-fg);
  margin-bottom: 0;
}

.conversation-card__themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-3);
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
}


/* ════════════════════════════════════════════════════════════════
   2 — CONVERSATION PAGE: HEADER
   ════════════════════════════════════════════════════════════════ */

.conversation-header {
  padding-block: var(--sp-2) var(--sp-8);
  align-items: start;
  row-gap: 0;
}

/* Default child placements — override per-conversation as needed */
.conversation-header__title      { grid-column: c2 / c12; grid-row: 1; }
.conversation-header__time       { grid-column: c2 / c5;  grid-row: 2; }
.conversation-header__placeNames { grid-column: c10 / c13; grid-row: 2; }
.version-nav                     { grid-column: c6 / c10; grid-row: 2; }
.conversation-header__blurb      { grid-column: c4 / c10; grid-row: 3; }
.conversation-header__translator { grid-column: c2 / c9; }

.conversation-header__title {
  font-size: var(--fs-8);
  font-weight: 900;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-display);
  margin-bottom: var(--sp-4);
}

.conversation-header__blurb {
  margin-top: var(--sp-6);
  font-size: var(--fs-3);
  line-height: 1.55;
  color: var(--c-fg);
  margin-bottom: var(--sp-6);
}

.conversation-header__translator {
  font-size: var(--fs-3);
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
  margin-top: var(--sp-3);
}

.version-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-3);
  letter-spacing: var(--ls-meta);
  margin-bottom: var(--sp-4);
}
.version-nav a {
  text-decoration: none;
  color: var(--c-fg);
  transition: color var(--dur-fast) var(--ease-out);
}
.version-nav a:hover { color: var(--c-accent-01); }
.version-nav .active {
  color: var(--c-fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--c-fg);
}


/* ════════════════════════════════════════════════════════════════
   2 — CONVERSATION PAGE: BODY
   ════════════════════════════════════════════════════════════════ */

.conversation-body {
  padding-block: var(--sp-8) var(--sp-12);
  row-gap: 0;
  align-items: start;
}

.conversation-turn {
  grid-column: c1 / c13;
  display: grid;
  grid-template-columns: subgrid;
  align-items: first baseline;
  margin-bottom: var(--sp-3);
}

.speaker-label {
  grid-column: c3 / c4;
  text-align: right;
  font-size: var(--fs-2);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  color: var(--c-fg);
  margin: 0;
}

.conversation-turn__body {
  grid-column: c4 / c10;
  min-width: 0;
}

.conversation-turn__body p {
  font-size: var(--fs-3);
  line-height: 1.65;
  letter-spacing: var(--ls-body);
  max-width: 65ch;
  margin-bottom: var(--sp-1);
}

/* ── Inline annotation marks ── */

.annotation-theme,
.annotation-place,
.annotation-time {
  cursor: default;
}

.ann-icon {
  display: inline-block;
  font-size: 0.58em;
  line-height: 1;
  vertical-align: super;
  margin-left: 0.08em;
  opacity: 0.55;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.annotation-theme:hover .ann-icon,
.annotation-place:hover .ann-icon,
.annotation-time:hover .ann-icon,
.annotation-link:hover .ann-icon {
  opacity: 0.9;
}


/* ── Footnotes ── */

.footnote-ref a {
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--c-accent-01);
  text-decoration: none;
  vertical-align: super;
  line-height: 0;
  padding-inline: 0.1em;
  transition: color var(--dur-fast) var(--ease-out);
}
.footnote-ref a:hover { color: var(--c-fg); }

.footnotes__list {
  grid-column: c4 / c10;
  margin-top: var(--sp-12);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footnotes__item {
  counter-increment: footnote-counter;
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  column-gap: var(--sp-2);
  align-items: start;
}

.footnotes__item::before {
  content: counter(footnote-counter);
  font-size: var(--fs-0);
  font-weight: 700;
  color: var(--c-accent-01);
  padding-top: 0.2em;
}

.footnotes__body { font-size: var(--fs-1); line-height: 1.5; }

.footnotes__back {
  font-size: var(--fs-1);
  color: var(--c-fg);
  text-decoration: none;
  opacity: 0.4;
  padding-top: 0.15em;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.footnotes__back:hover { opacity: 1; }


/* ════════════════════════════════════════════════════════════════
   2 — CONVERSATION PAGE: FOOTER
   ════════════════════════════════════════════════════════════════ */

.conversation-footer {
  padding-block: var(--sp-8) var(--sp-12);
  column-gap: var(--grid-gutter);
  row-gap: var(--sp-6);
  align-items: start;
}

.conversation-footer__section { grid-column: c1 / c7; }

.conversation-footer__heading {
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
  margin-bottom: var(--sp-1);
}

.conversation-footer__items {
  font-size: var(--fs-3);
  color: var(--c-fg);
  line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════
   2 — CONVERSATION IMAGE BLOCK
   ════════════════════════════════════════════════════════════════ */

.conversation-image {
  margin-block: var(--sp-6);
  max-width: 65ch;
}

.conversation-image.img-full {
  max-width: none;
  width: 100%;
}

.conversation-image.img-float-left {
  float: left;
  max-width: 32ch;
  margin-right: var(--sp-6);
  margin-bottom: var(--sp-4);
  margin-top: var(--sp-1);
}
.conversation-image.img-float-right {
  float: right;
  max-width: 32ch;
  margin-left: var(--sp-6);
  margin-bottom: var(--sp-4);
  margin-top: var(--sp-1);
}

.conversation-image__frame {
  display: block;
  line-height: 0;
}

.conversation-image__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.conversation-image.img-halftone .conversation-image__img {
  filter: url(#halftone) contrast(1.3) grayscale(1);
  mix-blend-mode: luminosity;
}
.conversation-image.img-high-contrast .conversation-image__img {
  filter: grayscale(1) contrast(2.5) brightness(0.9);
}
.conversation-image.img-duotone .conversation-image__img {
  filter: grayscale(1) contrast(1.4);
  mix-blend-mode: multiply;
}

.conversation-image__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
}

.conversation-image__caption {
  font-size: var(--fs-0);
  color: var(--c-fg);
  letter-spacing: var(--ls-meta);
  line-height: 1.5;
  flex: 1;
}

.conversation-image__credit {
  font-size: var(--fs-0);
  color: var(--c-fg);
  letter-spacing: var(--ls-meta);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════
   2 — MAP PAGE
   ════════════════════════════════════════════════════════════════ */

.map-section {
  padding-block: var(--sp-8);
  row-gap: var(--sp-4);
  align-items: start;
}

.locations-map         { grid-column: c1 / c13; }
.map-section .page-title { grid-column: c4 / c10; }

.locations-map {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.map-pill-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
  margin-bottom: var(--sp-3);
}

.map-pill__btn {
  font-family: var(--ff-sans);
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-meta);
  color: color-mix(in srgb, var(--c-fg) 45%, transparent);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.3em var(--sp-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  line-height: 1.4;
  white-space: nowrap;
}
.map-pill__btn:hover { color: var(--c-fg); }
.map-pill__btn--active {
  color: var(--c-fg);
  background: color-mix(in srgb, var(--c-fg) 8%, transparent);
}

.locations-map__viewport {
  width: 100%;
  aspect-ratio: 960 / 500;
  overflow: hidden;
}

.locations-map__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Map SVG classes */
.map-sphere {
  fill: var(--c-accent-01);
  stroke: color-mix(in srgb, var(--c-bg) 18%, transparent);
  stroke-width: 0.5px;
}

.map-graticule {
  fill: none;
  stroke: color-mix(in srgb, var(--c-bg) 10%, transparent);
  stroke-width: 0.4px;
}

.map-land {
  fill: var(--c-fg);
  stroke: none;
}

.map-borders {
  fill: none;
  stroke: color-mix(in srgb, var(--c-fg) 40%, transparent);
  stroke-width: 0.4px;
}

.map-point__dot {
  fill: var(--c-accent-01);
  stroke: var(--c-fg);
  stroke-width: 1.5px;
  transition: r var(--dur-fast) var(--ease-out);
}

.map-point--inline .map-point__dot {
  fill: var(--c-bg);
  opacity: 0.7;
}

.map-point:hover .map-point__dot,
.map-point:focus-within .map-point__dot {
  r: 8;
  opacity: 1;
}

.map-empty {
  font-size: var(--fs-3);
  color: var(--c-fg);
  letter-spacing: var(--ls-meta);
  margin-top: var(--sp-2);
  max-width: none;
}

.locations-map__unlocated {
  margin-top: var(--sp-2);
  font-size: var(--fs-3);
  letter-spacing: var(--ls-meta);
}
.locations-map__unlocated-label {
  color: var(--c-fg);
  display: block;
  margin-bottom: var(--sp-1);
}
.locations-map__unlocated ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}


/* ════════════════════════════════════════════════════════════════
   2 — TIMELINE PAGE
   ════════════════════════════════════════════════════════════════ */

.timeline {
  padding-block: var(--sp-8) var(--sp-12);
  row-gap: var(--sp-6);
  align-items: start;
}

.timeline__group { grid-column: c1 / c13; }

.timeline__group {
  display: grid;
  grid-template-columns: 4rem 1fr;
  column-gap: var(--sp-4);
  align-items: start;
}

.timeline__year {
  font-size: var(--fs-3);
  font-weight: 700;
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
  padding-top: 0.15em;
  text-align: right;
}

.timeline__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding-left: var(--sp-3);
}

.timeline__item {
  font-size: var(--fs-3);
  padding-block: var(--sp-1);
}
.timeline__item:last-child { border-bottom: none; }

.timeline__item a {
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out);
}
.timeline__item a:hover { color: var(--c-accent-01); }


/* ════════════════════════════════════════════════════════════════
   2 — STICKY UTILITIES
   ════════════════════════════════════════════════════════════════ */

.sticky-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--sp-4));
  align-self: start;
}

.sticky-label {
  position: sticky;
  top: calc(var(--header-height) + var(--sp-6));
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: var(--ls-meta);
  color: var(--c-fg);
  writing-mode: vertical-lr;
  text-orientation: mixed;
}


/* ════════════════════════════════════════════════════════════════
   3 — FILTER EFFECTS
   ════════════════════════════════════════════════════════════════ */

/* Ink bleed / letterpress — blur ≤ 0.6px */

.fx-ink-bleed {
  text-shadow:
     0      0     0.3px var(--c-fg),
     0.2px  0.1px 0.4px var(--c-fg),
    -0.1px  0.2px 0.3px var(--c-fg);
  -webkit-font-smoothing: auto;
  font-smooth: auto;
}
.fx-ink-bleed-heavy {
  text-shadow:
     0      0     0.5px var(--c-fg),
     0.3px  0.2px 0.6px var(--c-fg),
    -0.2px  0.3px 0.5px var(--c-fg),
     0.1px -0.1px 0.4px var(--c-fg);
  -webkit-font-smoothing: auto;
  font-smooth: auto;
}
.fx-ink-bleed-dark {
  text-shadow:
     0      0     0.3px var(--c-bg),
     0.2px  0.1px 0.4px var(--c-bg),
    -0.1px  0.2px 0.3px var(--c-bg);
}

/* SVG filter references (filters defined in Base.astro SVG block) */
.fx-halftone        { filter: url(#halftone); }
.fx-halftone-coarse { filter: url(#halftone-coarse); }
.fx-photocopy-text  { filter: url(#photocopy-text); }
.fx-photocopy       { filter: url(#photocopy-noise); }

.fx-grain { position: relative; }
.fx-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  filter: url(#grain);
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Image treatments */
.halftone-img { color: var(--c-fg); width: 100%; height: 100%; object-fit: cover; }

.img-halftone {
  display: block;
  position: relative;
  background: var(--c-bg);
  line-height: 0;
  overflow: hidden;
}

.img-duotone {
  filter: grayscale(1) contrast(1.4);
  mix-blend-mode: multiply;
}
.img-high-contrast {
  filter: grayscale(1) contrast(2.5) brightness(0.9);
}
.img-float-object {
  filter: grayscale(1) contrast(1.8) brightness(1.1);
  mix-blend-mode: screen;
  transition: transform var(--dur-slow) var(--ease-out);
}
.img-float-object:hover {
  transform: scale(1.02) rotate(0.5deg);
}


/* ════════════════════════════════════════════════════════════════
   4 — THEME (light / dark)
   ════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  --c-bg: var(--_bg);
  --c-fg: var(--_fg);
}

html[data-theme="light"] {
  --c-bg: var(--_fg);
  --c-fg: var(--_bg);
}

/* ── Reader mode ────────────────────────────────────────────────
   NOTE: [data-mode="reader"] and [data-theme] are parallel
   mechanisms. Consolidate to one if both are not both needed.
   Currently reader mode explicitly sets --c-bg/#c-fg to the same
   inverted values as [data-theme="light"]. If reader mode is only
   ever "light on dark", just alias it to the light theme state.   */

[data-mode="reader"] {
  --c-bg: #e8e4df;
  --c-fg: #0a0a0a;
  --c-accent-01: #ff3b00;
}

[data-mode="reader"] .site-header {
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
}

/* text-shadow uses static color values; must be re-declared in reader mode */
[data-mode="reader"] .fx-ink-bleed,
[data-mode="reader"] .fx-ink-bleed-heavy {
  text-shadow:
     0      0     0.3px var(--c-fg),
     0.2px  0.1px 0.4px var(--c-fg),
    -0.1px  0.2px 0.3px var(--c-fg);
}


/* ════════════════════════════════════════════════════════════════
   4 — RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  .page-title,
  .conversation-header__title { font-size: var(--fs-7); }
}

@media (max-width: 767px) {
  h1 { font-size: var(--fs-6); }
  h2 { font-size: var(--fs-5); }
  h3 { font-size: var(--fs-3); }

  .page-title {
    font-size: var(--fs-6);
    padding-top: 20vh;
  }

  .conversation-header__title {
    font-size: var(--fs-5);
    max-width: none;
    padding-top: 10vh;
  }

  /* Conversation header: all children full width on mobile */
  .conversation-header__title,
  .conversation-header__time,
  .conversation-header__placeNames,
  .conversation-header__blurb,
  .conversation-header__translator,
  .version-nav {
    grid-column: c1 / c5;
    grid-row: auto;
  }


  
  .site-footer__about    { grid-column: c1 / c13; }
  .site-footer__colophon { grid-column: c1 / c13; }

  .conversation-footer__section { grid-column: c1 / c13; }

  .conversation-turn {
    grid-column: c1 / c13;
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .conversation-turn__body p {
  font-size: var(--fs-2);
  line-height: 1.65;
  letter-spacing: var(--ls-body);
  max-width: 65ch;
  margin-bottom: var(--sp-1);
}

 .conversation-header__blurb {
  font-size: var(--fs-2);
 }

  .speaker-label {
    grid-column: 1;
    text-align: left;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-1);
  }

  .conversation-turn__body { grid-column: 1; }

  .conversation-card__version { grid-template-columns: 2.5rem 1fr; }
  .version-meta { display: none; }

  .index-about { padding-block: var(--sp-8) var(--sp-6); }
  .index-about__text {
    font-size: var(--fs-3);
    grid-column: c1 / c13;
  }

  /* Mobile table: override subgrid with explicit template-areas */
  .conversation-table__head,
  .conversation-table__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title lang"
      "time  lang";
  }

  .ct-place { display: none; }
  .ct-title { grid-area: title; }
  .ct-time  { grid-area: time; font-size: var(--fs-3); padding-top: var(--sp-1); }
  .ct-lang  { grid-area: lang; align-items: flex-end; justify-content: center; align-self: center; }

  .conversation-table__head .ct-place,
  .conversation-table__head .ct-time { display: none; }
  .conversation-table__head { grid-template-areas: "title lang"; }

  .timeline__group { grid-column: c1 / c13; grid-template-columns: 3rem 1fr; }

  .map-pill-toggle { align-self: flex-start; }
  .locations-map__viewport {
    aspect-ratio: auto;
    height: 56vw;
    min-height: 200px;
  }

  .conversation-image.img-float-left,
  .conversation-image.img-float-right {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }
  .conversation-image__meta { flex-direction: column; gap: var(--sp-1); }
  .conversation-image__credit { white-space: normal; }
/*--- site header mobile */
.site-header__title { font-size: var(--fs-2); }

.site-header__nav {
  grid-column: c10 / c13; 
  justify-self: end;
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-2);
  letter-spacing: var(--ls-meta);
}

}