/* ==========================================================================
   Canonical Theme Page — v2 (Premium Reading Experience)
   Locked spec: CANONICAL_THEME_RENDERING_SPEC.md v1.0-rc1-locked
   Contract: one CTP → three renderings (Overview / Study / Scholar)
   All content lives in the DOM; CSS gates visibility by body[data-mode].
   ========================================================================== */

:root {
  /* Unified Themes identity: emerald/teal field, parchment/copper light. */
  --theme-night: #050d0d;
  --theme-deep: #071816;
  --theme-surface: #0b211d;
  --theme-panel: #0d2722;
  --theme-panel-soft: #12332d;
  --theme-line: rgba(181, 126, 62, 0.42);
  --theme-line-soft: rgba(181, 126, 62, 0.18);
  --theme-parchment: #f1dfb4;
  --theme-parchment-soft: #d8c699;
  --theme-copper: #b57e3e;
  --theme-copper-bright: #d3a35a;
  --theme-copper-deep: #704722;
  --theme-emerald: #68b98a;
  --theme-teal: #4ea39a;
  --theme-coral: #c86f55;

  --navy-deep: var(--theme-night);
  --navy-mid: var(--theme-surface);
  --navy-top: var(--theme-panel-soft);
  --navy-panel: var(--theme-deep);
  --navy-warm: #12332d;
  --navy-line: var(--theme-line-soft);
  --navy-line-strong: var(--theme-line);

  --gold: var(--theme-copper-bright);
  --gold-bright: var(--theme-parchment);
  --gold-soft: #f7e7bd;
  --gold-deep: var(--theme-copper-deep);
  --gold-shadow: #3f2813;

  /* Ink hierarchy */
  --ink:         var(--theme-parchment);
  --ink-mute:    var(--theme-parchment-soft);
  --ink-body:    #eadfbe;
  --ink-quote:   #d1c097;
  --ink-cross:   #A8A090;

  /* Era ribbon palette */
  --era-creation:      #3F9E70;
  --era-patriarchs:    #C69150;
  --era-exodus:        #B25E45;
  --era-monarchy:      #9A4D8F;
  --era-exile:         #5A6E88;
  --era-christ:        #C7A44E;
  --era-church:        #4D82C4;
  --era-consummation:  #6B8FC9;
  --era-fallback:      #D8B36A;

  /* Verification indicators */
  --v-verified:   #7BB98A;
  --v-partial:    #E6C885;
  --v-unverified: #A8A090;
  --v-disputed:   #D98C74;

  /* Spacing scale (8pt-ish base with editorial breathing) */
  --sp-1:  6px;
  --sp-2:  12px;
  --sp-3:  20px;
  --sp-4:  32px;
  --sp-5:  52px;
  --sp-6:  80px;
  --sp-7:  112px;

  /* Typography scale */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-reading: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --lh-prose:   1.72;
  --lh-tight:   1.35;

  /* Reading columns */
  --read-col:   780px;    /* prose */
  --wide-col:   1120px;   /* cards, diagrams */
  --sidebar-w:  260px;    /* sticky sidebar */

  /* Elevation */
  --shadow-card:   0 12px 40px rgba(0, 0, 0, 0.42),
                   inset 0 1px 0 rgba(240, 221, 168, 0.06);
  --shadow-modal:  0 24px 64px rgba(0, 0, 0, 0.65),
                   inset 0 1px 0 rgba(240, 221, 168, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--navy-deep);
  color: var(--ink);
  font-family: var(--font-reading);
  line-height: 1.5;
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

/* Parchment-grained deep-navy backdrop */
body {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(211, 163, 90, 0.11) 0%, transparent 60%),
    radial-gradient(ellipse 54% 42% at 12% 18%, rgba(104, 185, 138, 0.09) 0%, transparent 62%),
    radial-gradient(ellipse 48% 38% at 82% 22%, rgba(78, 163, 154, 0.08) 0%, transparent 62%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0, 0, 0, 0.6) 0%, transparent 65%),
    linear-gradient(180deg, var(--navy-top) 0%, var(--navy-mid) 50%, var(--navy-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

.tr-no-js {
  color: var(--ink);
  text-align: center;
  padding: var(--sp-4);
  font-style: italic;
}
.tr-loading {
  color: var(--ink-mute);
  text-align: center;
  padding: var(--sp-4);
  font-style: italic;
}

/* =================================================================
   Reading progress bar (top of viewport)
   ================================================================= */
.tr-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--theme-emerald), var(--gold-bright), var(--theme-coral));
  z-index: 200;
  transition: width 60ms linear;
  box-shadow: 0 0 8px rgba(211, 163, 90, 0.5);
}

/* =================================================================
   Fixture switcher (dev preview only) + Mode picker
   ================================================================= */
.tr-page-nav {
  max-width: var(--wide-col);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.tr-fixture-switch {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  align-items: center;
}
.tr-fixture-switch a {
  color: var(--ink-mute);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease);
}
.tr-fixture-switch a:hover,
.tr-fixture-switch a.active {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: rgba(216, 179, 106, 0.08);
}
.tr-fixture-meta {
  color: var(--ink-cross);
  font-size: 10px;
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Sticky top bar — appears after hero */
.tr-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(5, 13, 13, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-line);
  transform: translateY(-100%);
  transition: transform 260ms var(--ease);
}
.tr-topbar.is-visible { transform: translateY(0); }
.tr-topbar-inner {
  max-width: var(--wide-col);
  margin: 0 auto;
  padding: 10px var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
}
.tr-topbar-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mode picker — segmented control */
.tr-mode-picker {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  background: rgba(7, 24, 22, 0.85);
  gap: 2px;
}
.tr-mode-picker button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms var(--ease), background 150ms var(--ease);
}
.tr-mode-picker button:hover { color: var(--gold-bright); }
.tr-mode-picker button[aria-pressed="true"] {
  color: var(--navy-deep);
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(74, 52, 24, 0.25);
}
.tr-mode-picker button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* =================================================================
   Page shell — sidebar + content, or single column mobile
   ================================================================= */
/* Content column is ALWAYS centered on the true page width — the sidebar
   lives in a symmetric gutter column so it never pulls the reading column
   off-center. (Both outer tracks share the same minmax floor + fr weight,
   so they grow in lockstep and col2 stays exactly page-centered.) */
.tr-theme-page {
  max-width: var(--wide-col);
  margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
.tr-content {
  position: relative;
  min-width: 0;
  width: 100%;
  padding: clamp(32px, 5.5vw, 64px) clamp(24px, 4vw, 56px);
  border: 1px solid rgba(216, 179, 106, 0.35);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 25% at 50% 0%, var(--theme-accent-glow, rgba(216, 179, 106, 0.08)), transparent 60%),
    linear-gradient(90deg, rgba(244, 228, 184, 0.015) 1px, transparent 1px),
    linear-gradient(180deg, rgba(244, 228, 184, 0.01) 1px, transparent 1px),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0, 0, 0, 0.35), transparent 75%),
    linear-gradient(180deg, rgba(18, 51, 45, 0.96), rgba(5, 13, 13, 0.98));
  background-size: 100% 100%, 34px 34px, 34px 34px, 100% 100%, 100% 100%;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(244, 228, 184, 0.06);
  overflow: hidden;
}
.tr-content::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(216, 179, 106, 0.15);
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1750px) {
  .tr-theme-page {
    max-width: 1900px;
    grid-template-columns: minmax(260px, 1fr) min(var(--wide-col), 100%) minmax(260px, 1fr);
    column-gap: var(--sp-5);
  }
  .tr-content { min-width: 0; grid-column: 2; }
  .tr-sidebar { grid-column: 3; align-self: start; justify-self: start; }
}

/* =================================================================
   Breadcrumb (production only — hidden in dev)
   ================================================================= */
.tr-breadcrumb {
  max-width: var(--wide-col);
  margin: 0 auto;
  padding: 18px var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tr-breadcrumb li + li::before {
  content: "›";
  color: var(--gold-deep);
  margin-right: 8px;
}
.tr-breadcrumb a {
  color: var(--ink-mute);
  text-decoration: none;
}
.tr-breadcrumb a:hover { color: var(--gold-bright); }
.tr-breadcrumb [aria-current="page"] { color: var(--gold-bright); }

/* =================================================================
   Section chrome (shared)
   ================================================================= */
.tr-section {
  padding: var(--sp-5) 0 var(--sp-2);
  border-top: 1px solid var(--navy-line);
  scroll-margin-top: 80px;
}
.tr-section:first-of-type { border-top: 0; padding-top: 0; }
.tr-section-inner {
  max-width: min(var(--read-col), 100%);
  margin: 0 auto;
  min-width: 0;
}
.tr-section-wide {
  max-width: min(var(--wide-col), 100%);
  margin: 0 auto;
  min-width: 0;
}
.tr-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tr-eyebrow::before,
.tr-eyebrow::after {
  content: "";
  height: 1px;
  width: 32px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.tr-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 19px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 var(--sp-3);
  text-shadow: 0 1px 0 var(--gold-shadow);
}
.tr-section-body p {
  font-family: var(--font-reading);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: var(--lh-prose);
  color: var(--ink-body);
  margin: 0 0 var(--sp-3);
}
.tr-section-body p:last-child { margin-bottom: 0; }

/* Ornamental divider (used between hero and content) */
.tr-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: var(--sp-3) auto var(--sp-2);
  color: var(--gold);
  max-width: 400px;
}
.tr-ornament::before,
.tr-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.tr-ornament-diamond {
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 8px rgba(216, 179, 106, 0.5);
}

/* =================================================================
   1. Hero — illuminated opening (theme-accent-aware)
   ================================================================= */
.tr-hero {
  --theme-accent: var(--gold);
  --theme-accent-glow: rgba(216, 179, 106, 0.28);
  padding: var(--sp-5) var(--sp-3) var(--sp-6);
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(216, 179, 106, 0.14);
  overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--theme-accent-glow), transparent 75%);
  margin-top: 0;
}
.tr-hero::before {
  display: none;
}
.tr-hero-inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

/* Illuminated corner ornaments — manuscript style */
.tr-hero-corner {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  color: var(--theme-accent);
  opacity: 0.75;
}
.tr-hero-corner--tl { top: 18px; left: 18px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; border-top-left-radius: 8px; }
.tr-hero-corner--tr { top: 18px; right: 18px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-top-right-radius: 8px; }
.tr-hero-corner--bl { bottom: 18px; left: 18px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; border-bottom-left-radius: 8px; }
.tr-hero-corner--br { bottom: 18px; right: 18px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; border-bottom-right-radius: 8px; }
.tr-hero-corner::before,
.tr-hero-corner::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 999px;
  opacity: 0.8;
}
.tr-hero-corner::before { width: 4px; height: 4px; box-shadow: 0 0 8px currentColor; }
.tr-hero-corner--tl::before { top: -3px; left: -3px; }
.tr-hero-corner--tr::before { top: -3px; right: -3px; }
.tr-hero-corner--bl::before { bottom: -3px; left: -3px; }
.tr-hero-corner--br::before { bottom: -3px; right: -3px; }

/* Emblem — large illuminated seal above the title */
.tr-hero-emblem {
  width: clamp(110px, 12vw, 148px);
  height: clamp(110px, 12vw, 148px);
  margin: 0 auto var(--sp-3);
  color: var(--theme-accent);
  filter: drop-shadow(0 6px 20px var(--theme-accent-glow));
}
.tr-hero-emblem svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tr-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--theme-accent);
  text-transform: uppercase;
  padding: 6px 18px;
  border: 1px solid;
  border-color: color-mix(in oklab, var(--theme-accent) 55%, transparent);
  border-radius: 999px;
  margin-bottom: var(--sp-4);
  background: rgba(11, 21, 40, 0.5);
  box-shadow: 0 0 20px var(--theme-accent-glow);
}
.tr-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 72px);
  color: var(--gold-bright);
  margin: 0 0 var(--sp-2);
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.tr-hero-subtitle {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 22px);
  color: var(--ink-mute);
  margin: 0 auto var(--sp-4);
  max-width: 780px;
  line-height: 1.45;
}
.tr-hero-one-sentence {
  font-family: var(--font-reading);
  font-size: clamp(18px, 1.9vw, 22px);
  color: var(--ink-body);
  margin: var(--sp-4) auto 0;
  max-width: 720px;
  line-height: 1.6;
}

/* Hero Key Verse */
.tr-hero-verse {
  margin: var(--sp-5) auto 0;
  max-width: 640px;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--navy-line-strong);
  border-bottom: 1px solid var(--navy-line-strong);
  position: relative;
}
.tr-hero-verse-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 var(--sp-1);
}
.tr-hero-verse-ref {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  margin: 0 0 var(--sp-2);
}
.tr-hero-verse-text {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 22px);
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

/* Hero Quick facts */
.tr-hero-facts {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}
.tr-hero-fact {
  text-align: center;
}
.tr-hero-fact-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--gold-bright);
  display: block;
  line-height: 1;
}
.tr-hero-fact-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-cross);
  margin-top: 4px;
  display: block;
}

/* Continue Exploring CTA (end of Overview mode) */
.tr-continue-cta {
  text-align: center;
  padding: var(--sp-5) 0 var(--sp-3);
  margin-top: var(--sp-5);
  border-top: 1px solid var(--navy-line);
}
.tr-continue-cta-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-cross);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.tr-continue-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(11, 21, 40, 0.6);
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.tr-continue-cta-button:hover {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--navy-deep);
}
.tr-continue-cta-arrow {
  display: inline-block;
  transform: translateY(1px);
  transition: transform 200ms var(--ease);
}
.tr-continue-cta-button:hover .tr-continue-cta-arrow {
  transform: translate(2px, 1px);
}

/* Status pill */
.tr-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.tr-status-draft     { color: var(--v-unverified); border-color: var(--v-unverified); }
.tr-status-curated   { color: var(--v-partial);    border-color: var(--v-partial); }
.tr-status-ui_ready  { color: var(--v-verified);   border-color: var(--v-verified); }
.tr-status-hold      { color: var(--v-disputed);   border-color: var(--v-disputed); }
.tr-status-deprecated{ color: var(--v-disputed);   border-color: var(--v-disputed); opacity: 0.7; }

/* =================================================================
   Definition + Key Verse block
   ================================================================= */
.tr-definition {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
@media (min-width: 900px) {
  .tr-definition { grid-template-columns: 3fr 2fr; align-items: start; }
}
.tr-key-verse {
  background: linear-gradient(180deg, rgba(216, 179, 106, 0.08), rgba(216, 179, 106, 0.02));
  border: 1px solid var(--gold-deep);
  border-radius: 8px;
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-card);
  position: relative;
}
.tr-key-verse::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(216, 179, 106, 0.15);
  border-radius: 5px;
  pointer-events: none;
}
.tr-key-verse-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 var(--sp-1);
}
.tr-key-verse-ref {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
  margin: 0 0 var(--sp-2);
}
.tr-key-verse-text {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

/* Canonical Question — pull-quote treatment */
.tr-canonical-question {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-4);
  border-left: 3px solid var(--gold);
  background: rgba(216, 179, 106, 0.05);
  position: relative;
}
.tr-canonical-question-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-1);
}
.tr-canonical-question-text {
  font-family: var(--font-reading);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}

/* =================================================================
   Journey strip (Overview mode) — canonical era chain
   ================================================================= */
.tr-journey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--sp-4) 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tr-journey-node {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--sp-2);
  min-width: 90px;
}
.tr-journey-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(216, 179, 106, 0.6);
  border: 2px solid var(--navy-deep);
}
.tr-journey-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-body);
  margin-top: 10px;
  text-align: center;
  line-height: 1.3;
}
.tr-journey-connector {
  flex: 0 0 auto;
  height: 2px;
  min-width: 32px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
  margin-top: -20px;
  align-self: center;
  border-radius: 1px;
  opacity: 0.7;
}
@media (max-width: 640px) {
  .tr-journey {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .tr-journey-connector {
    width: 2px;
    height: 24px;
    min-width: 2px;
    margin: 0;
    background: linear-gradient(180deg, var(--gold-deep), var(--gold), var(--gold-deep));
  }
}

/* =================================================================
   Canonical Movement chips (Study mode, adjacent to significance)
   ================================================================= */
.tr-movement {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-3);
}
.tr-movement-chip {
  padding: 6px 14px;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  font-family: var(--font-reading);
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  background: rgba(11, 21, 40, 0.6);
}

/* =================================================================
   Significance — pull-quote emphasis + supporting prose
   ================================================================= */
.tr-significance-quote {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--gold-bright);
  line-height: 1.4;
  padding: var(--sp-3) 0;
  margin: 0 0 var(--sp-4);
  text-align: center;
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
}

/* =================================================================
   Diagram (Study mode) — premium timeline
   ================================================================= */
.tr-diagram {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--gold-deep);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(216, 179, 106, 0.05), transparent 60%),
    var(--navy-panel);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}
.tr-diagram-title {
  font-family: var(--font-reading);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 15px;
  margin: 0 0 var(--sp-4);
  text-align: center;
}
.tr-diagram-canvas {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  min-height: 140px;
  padding: var(--sp-2) 0;
  position: relative;
}
.tr-diagram-node {
  flex: 0 0 auto;
  min-width: 130px;
  max-width: 180px;
  padding: 14px 12px;
  text-align: center;
  border: 1px solid var(--gold-deep);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(216, 179, 106, 0.08), rgba(11, 21, 40, 0.9));
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  position: relative;
}
.tr-diagram-node:hover,
.tr-diagram-node:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(216, 179, 106, 0.4);
  outline: 0;
}
.tr-diagram-edge {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 0 6px;
  color: var(--gold);
  font-size: 20px;
  align-self: center;
  text-align: center;
  opacity: 0.75;
  position: relative;
}
.tr-diagram-edge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold), var(--gold-deep), transparent);
  transform: translateY(-50%);
}
.tr-diagram-edge::after {
  content: "▸";
  position: relative;
  z-index: 1;
  background: var(--navy-panel);
  padding: 0 4px;
}
@media (max-width: 768px) {
  .tr-diagram-canvas {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .tr-diagram-node { min-width: 100%; max-width: 100%; }
  .tr-diagram-edge {
    min-width: 100%;
    padding: 6px 0;
    text-align: center;
    line-height: 1;
    font-size: 22px;
  }
  .tr-diagram-edge::before {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--gold-deep), var(--gold), var(--gold-deep), transparent);
  }
  .tr-diagram-edge::after { content: "▾"; }
}

/* =================================================================
   Milestones (Study mode) — chapter-like cards, collapsible
   ================================================================= */
.tr-milestones {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.tr-milestone {
  border: 1px solid var(--gold-deep);
  border-radius: 12px;
  padding: var(--sp-4);
  background:
    linear-gradient(180deg, rgba(216, 179, 106, 0.05), transparent 40%),
    var(--navy-panel);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: visible;
}
.tr-milestone::before {
  content: "";
  position: absolute;
  top: 0; left: 24px;
  width: 68px; height: 3px;
  background: var(--gold);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 10px rgba(216, 179, 106, 0.4);
}
.tr-milestone-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.tr-milestone-order {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--gold-bright);
  letter-spacing: 0.06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tr-milestone-era {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 3px 10px;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
}
.tr-milestone-role {
  font-family: var(--font-reading);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 13px;
}
.tr-milestone-title {
  font-family: var(--font-reading);
  font-weight: 700;
  font-size: clamp(27px, 3.2vw, 38px);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  line-height: 1.25;
}
.tr-milestone-short {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: clamp(17px, 1.05vw, 18.5px);
  color: var(--ink-body);
  margin: 0 0 var(--sp-3);
  line-height: 1.6;
}
.tr-milestone-detail {
  display: none;
}
.tr-milestone[data-open="true"] .tr-milestone-detail { display: block; }
.tr-milestone-exposition {
  --milestone-node-center: 50px;
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(216, 179, 106, 0.2);
}
.tr-milestone-exposition::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-4) + 26px);
  bottom: 18px;
  left: var(--milestone-node-center);
  width: 1px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gold) 4%, transparent),
    color-mix(in srgb, var(--gold) 28%, transparent) 18%,
    color-mix(in srgb, #76abc0 24%, transparent) 45%,
    color-mix(in srgb, #b7b36a 22%, transparent) 70%,
    color-mix(in srgb, #b78093 20%, transparent)
  );
  pointer-events: none;
}
.tr-milestone-canonical-narrative,
.tr-milestone-narrative-block {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
}
.tr-milestone-canonical-narrative {
  --narrative-accent: var(--gold);
  z-index: 1;
  align-items: start;
  padding: 24px 26px;
  border: 1px solid color-mix(in srgb, var(--narrative-accent) 30%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 13% 12%, color-mix(in srgb, var(--narrative-accent) 16%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--narrative-accent) 7%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(244, 228, 184, 0.038), rgba(2, 23, 19, 0.24));
  box-shadow:
    inset 0 1px 0 rgba(244, 228, 184, 0.085),
    inset 0 0 0 1px rgba(244, 228, 184, 0.024),
    0 16px 34px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.tr-milestone-canonical-narrative--with-study {
  grid-template-columns: 56px minmax(0, 1fr) minmax(210px, 30%);
  align-items: start;
}
.tr-milestone-canonical-narrative::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--narrative-accent) 10%, transparent);
  pointer-events: none;
}
.tr-milestone-section-medallion {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--narrative-accent, var(--gold)) 72%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--narrative-accent, var(--gold)) 28%, transparent), rgba(2, 23, 19, 0.94) 64%),
    rgba(5, 16, 14, 0.92);
  box-shadow:
    inset 0 0 0 3px rgba(5, 18, 16, 0.9),
    inset 0 0 0 4px color-mix(in srgb, var(--narrative-accent, var(--gold)) 22%, transparent),
    inset 0 1px 0 rgba(244, 228, 184, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.22);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 1;
}
.tr-milestone-section-medallion svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tr-milestone-section-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 14px;
}
.tr-milestone-section-question {
  flex-basis: 100%;
  margin: 0;
  color: color-mix(in srgb, var(--ink-mute) 88%, var(--narrative-accent, var(--gold)));
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tr-milestone-long {
  font-family: var(--font-reading);
  font-size: clamp(18px, 1.08vw, 20px);
  font-weight: 500;
  color: color-mix(in srgb, var(--ink-body) 90%, #fff9ec);
  margin: 0;
  line-height: 1.72;
  text-wrap: pretty;
}
.tr-milestone-more {
  appearance: none;
  background: transparent;
  border: 1px solid var(--gold-deep);
  color: var(--gold-bright);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: var(--sp-2);
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.tr-milestone-more:hover,
.tr-milestone-more:focus-visible {
  background: rgba(216, 179, 106, 0.14);
  outline: 0;
}
.tr-milestone[data-open="true"] .tr-milestone-more[data-role="expand"] { display: none; }
.tr-milestone-more[data-role="collapse"] { display: none; }
.tr-milestone[data-open="true"] .tr-milestone-more[data-role="collapse"] { display: inline-block; }

.tr-milestone-refs {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--navy-line);
  font-size: 13px;
  color: var(--ink-mute);
}
.tr-milestone-ref-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--sp-2);
  row-gap: 8px;
  margin: 0 0 var(--sp-2);
}
.tr-milestone-ref-row:last-child {
  margin-bottom: 0;
}
.tr-milestone-ref-row .tr-ref-cap {
  margin: 0;
}
.tr-milestone-ref-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  flex: 0 0 auto;
  min-width: 84px;
}
.tr-milestone-witnesses,
.tr-milestone-atlas-topics {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(154, 104, 39, 0.34);
  font-size: 13px;
  color: var(--ink-mute);
}
/* #504 — Related Atlas Topics reuses the same chip visuals as the
   Theme-wide Related section's context chips (tr-related-context-chip),
   since both open the identical topic-detail modal; only the label row
   above them differs ("Related Atlas Topics" vs a Topic pill's own name). */
.tr-milestone-atlas-topics .tr-related-context-chip {
  margin: 0;
}
.tr-milestone-witness-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.tr-milestone-witness-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  max-width: 100%;
  border: 1px solid rgba(216, 179, 106, 0.48);
  border-radius: 999px;
  padding: 7px 12px;
  background:
    linear-gradient(180deg, rgba(216, 179, 106, 0.08), rgba(1, 13, 14, 0.32));
  box-shadow: inset 0 1px 0 rgba(244, 228, 184, 0.08);
}
.tr-milestone-witness-name {
  overflow-wrap: anywhere;
  font-family: var(--font-reading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.tr-milestone-witness-kind,
.tr-milestone-witness-confidence {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.86;
}
.tr-milestone-witness-confidence {
  color: var(--ink-mute);
  opacity: 0.72;
}
.tr-milestone-narrative-blocks {
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.tr-milestone-narrative-block {
  --narrative-accent: var(--gold);
  position: relative;
  z-index: 1;
  grid-template-columns: 56px minmax(0, 1fr) minmax(210px, 30%);
  align-items: start;
  gap: 22px;
  padding: 22px 26px;
  border: 1px solid color-mix(in srgb, var(--narrative-accent) 26%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--narrative-accent) 13%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--narrative-accent) 6%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(244, 228, 184, 0.03), rgba(2, 23, 19, 0.2));
  box-shadow:
    inset 0 1px 0 rgba(244, 228, 184, 0.07),
    inset 0 0 0 1px rgba(244, 228, 184, 0.025),
    0 12px 26px rgba(0, 0, 0, 0.17);
  overflow: hidden;
}
.tr-milestone-narrative-block::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--narrative-accent) 10%, transparent);
  pointer-events: none;
}
.tr-milestone-narrative-block--gold {
  --narrative-accent: #e3bc69;
}
.tr-milestone-narrative-block--bronze {
  --narrative-accent: #76abc0;
}
.tr-milestone-narrative-block--olive {
  --narrative-accent: #b7b36a;
}
.tr-milestone-narrative-block--plum {
  --narrative-accent: #b78093;
}
.tr-milestone-section-main {
  max-width: 68ch;
}
.tr-milestone-section-body {
  max-width: 70ch;
}
.tr-milestone-narrative-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--narrative-accent) 82%, var(--gold-bright));
  margin: 0;
  line-height: 1.25;
}
.tr-milestone-narrative-label span {
  color: color-mix(in srgb, var(--narrative-accent) 72%, var(--gold-bright));
  letter-spacing: 0.12em;
}
.tr-milestone-narrative-text {
  font-family: var(--font-reading);
  font-style: italic;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 88%, #fff9ec);
  font-size: clamp(19px, 1.22vw, 23px);
  margin: 0;
  line-height: 1.5;
  text-wrap: pretty;
}
.tr-milestone-insight-prose {
  display: grid;
  gap: 10px;
  max-width: 68ch;
}
.tr-milestone-supporting-text {
  margin: 0;
  font-family: var(--font-reading);
  font-size: clamp(16px, 1.02vw, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.68;
  color: color-mix(in srgb, var(--ink-body) 88%, #fff9ec);
  text-wrap: pretty;
}

/* #502 — Study Further: authored cross-references following each narrative
   section's prose. Reuses the milestone-ref-label + witness-chipset visual
   language (same rhythm as Witnesses/Related Atlas Topics) so it reads as
   part of the existing card grammar rather than a new UI pattern. */
.tr-study-further {
  display: grid;
  gap: 10px;
  align-self: start;
  align-content: start;
  margin-top: 1px;
  padding: 0 0 0 22px;
  border-top: 0;
  border-left: 1px solid color-mix(in srgb, var(--narrative-accent) 38%, transparent);
}
.tr-milestone-narrative-block--study-center .tr-study-further {
  align-self: center;
}
.tr-study-further--compact {
  max-width: 210px;
}
.tr-study-further .tr-milestone-ref-label {
  min-width: 0;
  color: color-mix(in srgb, var(--narrative-accent) 82%, var(--gold-bright));
  line-height: 1.2;
}
.tr-study-further .tr-milestone-witness-chipset {
  display: grid;
  position: relative;
  align-items: start;
  justify-items: start;
  gap: 9px;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}
.tr-study-further .tr-milestone-witness-chipset::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 3px;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--narrative-accent) 50%, transparent), transparent);
}
.tr-study-further-item {
  display: block;
  margin: 0;
  max-width: 100%;
}
.tr-study-further-chip {
  display: inline-flex;
  align-items: center;
  position: relative;
  max-width: 100%;
  overflow-wrap: anywhere;
  border: 1px solid color-mix(in srgb, var(--narrative-accent) 48%, transparent);
  border-radius: 999px;
  min-height: 34px;
  padding: 5px 12px;
  background: linear-gradient(180deg, rgba(216, 179, 106, 0.06), rgba(1, 13, 14, 0.34));
  box-shadow: inset 0 1px 0 rgba(244, 228, 184, 0.08);
  font-family: var(--font-reading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tr-study-further .tr-study-further-chip::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--narrative-accent) 86%, var(--gold-bright));
  box-shadow: 0 0 0 3px rgba(5, 18, 16, 0.92);
  transform: translateY(-50%);
}
.tr-study-further-floating-tooltip {
  position: fixed;
  z-index: 1000;
  width: max-content;
  max-width: min(430px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(236, 214, 162, 0.6);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(28, 46, 35, 0.98), rgba(5, 18, 16, 0.98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.46);
  color: color-mix(in srgb, var(--ink) 92%, white);
  font-family: var(--font-reading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
}
.tr-study-further-chip--primary {
  border-color: color-mix(in srgb, var(--narrative-accent) 72%, var(--ink));
  background: linear-gradient(180deg, color-mix(in srgb, var(--narrative-accent) 24%, transparent), rgba(1, 13, 14, 0.28));
}
.tr-study-further-chip--fulfillment {
  border-color: color-mix(in srgb, var(--gold) 66%, transparent);
  background: linear-gradient(180deg, rgba(227, 188, 105, 0.16), rgba(1, 13, 14, 0.26));
}
.tr-study-further-chip--supporting {
  color: color-mix(in srgb, var(--ink) 86%, var(--ink-mute));
}
.tr-study-further-chip:hover,
.tr-study-further-chip:focus-visible {
  border-color: color-mix(in srgb, var(--narrative-accent) 88%, var(--ink));
  background: linear-gradient(180deg, color-mix(in srgb, var(--narrative-accent) 18%, transparent), rgba(1, 13, 14, 0.32));
  color: color-mix(in srgb, var(--ink) 92%, #fff9ec);
  outline: 2px solid color-mix(in srgb, var(--narrative-accent) 40%, transparent);
  outline-offset: 3px;
}
.tr-study-further-chip[data-verse-tooltip]::after {
  display: none;
}
.tr-study-further-chip[data-verse-tooltip]::after {
  content: none;
}
.tr-study-further-chip[data-verse-tooltip]:hover::after,
.tr-study-further-chip[data-verse-tooltip]:focus-visible::after {
  display: none;
}

.tr-principles {
  display: grid;
  gap: 28px;
  width: min(1180px, 100%);
  margin: 34px auto 0;
}

.tr-theme-framework > .tr-section-wide {
  border: 1px solid rgba(197, 148, 73, 0.58);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(135deg, rgba(197, 148, 73, 0.09), transparent 30%),
    rgba(2, 24, 20, 0.72);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.tr-framework-controls {
  margin: 22px 0 28px;
}

.tr-framework-control-label {
  margin: 0 0 8px;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tr-framework-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tr-framework-segment {
  appearance: none;
  border: 1px solid rgba(197, 148, 73, 0.46);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(3, 26, 22, 0.7);
  color: var(--cream);
  font: 700 0.78rem var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.tr-framework-segment[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(228, 189, 116, 0.96), rgba(176, 119, 47, 0.92));
  color: #130d06;
  border-color: rgba(247, 220, 163, 0.88);
  box-shadow: 0 0 0 2px rgba(228, 189, 116, 0.12);
}

.tr-framework-segment em {
  color: inherit;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.76;
}

.tr-framework-dimension-section {
  margin: 22px 0 28px;
}

.tr-framework-dimension-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tr-framework-dimension-card {
  border: 1px solid rgba(114, 173, 141, 0.32);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(114, 173, 141, 0.09), transparent 52%),
    rgba(3, 24, 22, 0.68);
}

.tr-framework-dimension-card h3 {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.18;
}

.tr-framework-dimension-card p:last-child {
  margin: 10px 0 0;
  color: rgba(251, 238, 202, 0.88);
  line-height: 1.55;
}

.tr-framework-panel > .tr-section {
  padding: 0;
}

.tr-framework-panel > .tr-section > .tr-section-wide {
  padding: 0;
  max-width: none;
}

.tr-framework-view-head {
  margin: 0 0 18px;
}

.tr-framework-view-title {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.05;
}

.tr-framework-profile-set {
  display: grid;
  gap: 18px;
}

.tr-framework-profile-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.tr-framework-profile-tab {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  border: 1px solid rgba(197, 148, 73, 0.34);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(3, 24, 22, 0.68);
  color: var(--cream);
  font: 700 0.82rem var(--font-sans);
  text-align: left;
  cursor: pointer;
}

.tr-framework-profile-tab[aria-selected="true"] {
  border-color: rgba(232, 193, 125, 0.78);
  background: linear-gradient(135deg, rgba(228, 189, 116, 0.18), rgba(4, 25, 24, 0.82));
}

.tr-framework-profile-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.tr-framework-profiles {
  display: grid;
}

.tr-framework-profile {
  border: 1px solid rgba(197, 148, 73, 0.46);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(circle at 10% 0%, rgba(238, 209, 144, 0.13), transparent 24rem),
    linear-gradient(135deg, rgba(28, 38, 32, 0.92), rgba(4, 20, 18, 0.95));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(250, 231, 184, 0.08);
}

.tr-framework-profile-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.tr-framework-order {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.tr-framework-kicker {
  margin: 0 0 4px;
  color: rgba(232, 193, 125, 0.78);
  font: 700 0.68rem var(--font-sans);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tr-framework-profile h4 {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.8vw, 2.65rem);
  line-height: 1.08;
}

.tr-framework-profile-meta {
  display: inline-grid;
  gap: 5px;
  justify-items: end;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}

.tr-framework-profile-meta em {
  color: rgba(251, 238, 202, 0.72);
  font: 700 0.65rem var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tr-framework-profile-thesis {
  max-width: 920px;
  margin: 18px 0 0;
  color: rgba(251, 238, 202, 0.9);
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  font-style: italic;
  line-height: 1.55;
}

.tr-framework-profile-body {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.tr-framework-profile-section {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  border-top: 1px solid rgba(197, 148, 73, 0.22);
  padding-top: 16px;
}

.tr-framework-section-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(197, 148, 73, 0.42);
  border-radius: 50%;
  color: var(--gold);
  font: 700 0.86rem var(--font-sans);
}

.tr-framework-profile-section h5 {
  margin: 0 0 7px;
  color: var(--gold);
  font: 700 0.78rem var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tr-framework-profile-section p {
  margin: 0;
  color: rgba(251, 238, 202, 0.9);
  font-size: 1rem;
  line-height: 1.68;
}

.tr-framework-references,
.tr-framework-dimensions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.tr-framework-ref,
.tr-framework-dimensions span {
  border: 1px solid rgba(197, 148, 73, 0.4);
  border-radius: 999px;
  padding: 5px 9px;
  color: rgba(251, 238, 202, 0.9);
  font: 700 0.72rem var(--font-sans);
}

.tr-framework-dimensions span {
  border-color: rgba(114, 173, 141, 0.36);
  color: rgba(179, 220, 197, 0.92);
}

@media (max-width: 760px) {
  .tr-framework-controls,
  .tr-framework-dimension-grid,
  .tr-framework-profile-nav {
    grid-template-columns: 1fr;
  }

  .tr-theme-framework > .tr-section-wide {
    padding: 18px;
  }

  .tr-framework-profile-header,
  .tr-framework-profile-section {
    grid-template-columns: 1fr;
  }

  .tr-framework-profile-meta {
    justify-items: start;
  }
}

.tr-principle-card {
  --principle-accent: var(--gold);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(207, 146, 54, 0.44);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  background:
    radial-gradient(circle at 18% 0%, rgba(238, 209, 144, 0.14), transparent 24rem),
    linear-gradient(135deg, rgba(30, 38, 31, 0.9), rgba(4, 20, 18, 0.94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(250, 231, 184, 0.08);
}

.tr-principle-card::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(236, 185, 96, 0.78), transparent);
}

.tr-principle-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.tr-principle-order {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: 0.9;
  color: var(--ink);
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.tr-principle-kicker,
.tr-principle-pattern span {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(238, 209, 144, 0.7);
}

.tr-principle-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.02;
  color: var(--ink);
}

.tr-principle-key-ref {
  justify-self: end;
  border: 1px solid rgba(238, 209, 144, 0.68);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(2, 17, 16, 0.42);
}

.tr-principle-summary {
  margin: 22px 0 0;
  max-width: 900px;
  font-family: var(--font-reading);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-style: italic;
  line-height: 1.38;
  color: color-mix(in srgb, var(--ink) 94%, white);
}

.tr-principle-body,
.tr-principle-pattern p {
  margin: 14px 0 0;
  max-width: 940px;
  font-family: var(--font-reading);
  font-size: clamp(1.05rem, 1.35vw, 1.24rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 78%, var(--ink-mute));
}

.tr-principle-pattern {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(238, 209, 144, 0.2);
}

.tr-principle-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(238, 209, 144, 0.18);
}

.tr-principle-meta-group {
  min-width: 0;
}

.tr-principle-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.tr-principle-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(238, 209, 144, 0.46);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(2, 17, 16, 0.3);
  color: var(--ink);
  font-family: var(--font-reading);
  font-size: 0.95rem;
  line-height: 1.15;
}

.tr-principle-chip em {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 209, 144, 0.62);
}

@media (max-width: 760px) {
  .tr-principle-card-header {
    grid-template-columns: 1fr;
  }
  .tr-principle-key-ref {
    justify-self: start;
  }
  .tr-principle-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .tr-milestone-canonical-narrative--with-study,
  .tr-milestone-narrative-block {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .tr-study-further {
    align-self: stretch;
    grid-column: 2;
    margin-top: 2px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--narrative-accent) 32%, transparent);
  }
  .tr-milestone-narrative-block--study-center .tr-study-further {
    align-self: stretch;
  }
  .tr-study-further--compact {
    max-width: none;
  }
}

/* =================================================================
   Unified Journey v2 — selector + synced diagram + active milestone
   ================================================================= */
.tr-journey-v2 {
  margin-top: var(--sp-3);
}
.tr-journey-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  align-items: start;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-2);
  border-bottom: 1px solid var(--navy-line-strong);
  position: relative;
}
.tr-journey-track::before {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), var(--gold), var(--gold-deep), transparent);
  opacity: 0.55;
}
.tr-journey-stage {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  min-height: 76px;
  padding: 0 var(--sp-1);
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.tr-journey-stage .tr-journey-dot {
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.tr-journey-stage[aria-selected="true"] .tr-journey-dot,
.tr-journey-stage:hover .tr-journey-dot,
.tr-journey-stage:focus-visible .tr-journey-dot {
  background: var(--gold-bright);
  transform: scale(1.18);
  box-shadow: 0 0 18px rgba(236, 214, 162, 0.85);
}
.tr-journey-stage[aria-selected="true"] .tr-journey-label {
  color: var(--gold-bright);
}
.tr-journey-stage:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
  border-radius: 8px;
}
.tr-journey-study {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
.tr-map-toggle {
  display: none;
}
.tr-journey-diagram {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}
.tr-journey-diagram .tr-diagram-canvas {
  min-height: 112px;
  align-items: center;
  /* Overflow content in a centered flex row scrolls unevenly: the browser can
     bleed content off both edges, but scrollLeft can never go negative, so
     anything centered past the left edge becomes permanently unreachable.
     Left-align instead so the active node (which grows larger than its
     siblings) always stays within scrollable bounds. */
  justify-content: flex-start;
}
.tr-journey-diagram .tr-diagram-node {
  min-width: 78px;
  max-width: 98px;
  padding: 12px 7px;
  font-size: 9px;
  opacity: 0.58;
}
.tr-journey-diagram .tr-diagram-edge {
  min-width: 20px;
  padding: 0 3px;
}
.tr-journey-diagram .tr-diagram-node[data-state="complete"] {
  opacity: 1;
  color: var(--gold-bright);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(216, 179, 106, 0.08), rgba(11, 21, 40, 0.82));
}
.tr-journey-diagram .tr-diagram-node[data-state="active"] {
  opacity: 1;
  color: var(--navy-deep);
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 24px rgba(216, 179, 106, 0.34);
  min-width: 220px;
  max-width: 320px;
  padding: 26px 24px;
  z-index: 2;
  align-self: center;
}
.tr-journey-diagram .tr-diagram-node[data-state="active"]:hover,
.tr-journey-diagram .tr-diagram-node[data-state="active"]:focus-visible {
  transform: translateY(-3px);
}
/* The diagram title ("Divine Presence") lives inside the active box instead of
   as a separate line above the row — removes a redundant margin above the
   boxes while still surfacing the theme name at the moment it's relevant. */
.tr-diagram-node-title {
  display: none;
}
.tr-journey-diagram .tr-diagram-node[data-state="active"] .tr-diagram-node-title {
  display: block;
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--navy-deep);
  opacity: 0.72;
  margin: 0 0 8px;
}
.tr-journey-diagram .tr-diagram-node[data-state="active"] .tr-diagram-node-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  white-space: normal;
}
@media (max-width: 768px) {
  .tr-journey-diagram .tr-diagram-node[data-state="active"] {
    min-width: 200px;
    max-width: 100%;
  }
}
.tr-journey-diagram .tr-diagram-node[data-state="future"] {
  border-color: rgba(216, 179, 106, 0.28);
}
.tr-journey-carousel {
  display: grid;
  gap: var(--sp-3);
}
.tr-journey-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.tr-journey-nav {
  appearance: none;
  background: rgba(11, 21, 40, 0.72);
  border: 1px solid var(--gold-deep);
  color: var(--gold-bright);
  border-radius: 999px;
  padding: 8px 18px;
  min-width: 122px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), opacity 150ms var(--ease);
}
.tr-journey-nav:hover,
.tr-journey-nav:focus-visible {
  background: rgba(216, 179, 106, 0.12);
  border-color: var(--gold);
  outline: 0;
}
.tr-journey-nav:disabled {
  cursor: default;
  opacity: 0.38;
}
.tr-journey-count {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-cross);
}
.tr-milestones--single {
  display: block;
  margin-top: 0;
}
.tr-milestones--single .tr-milestone[hidden] {
  display: none;
}
.tr-milestones--single .tr-milestone {
  min-height: 360px;
}
.tr-milestones--single .tr-milestone-detail {
  display: none;
}
.tr-milestones--single .tr-milestone[data-open="true"] .tr-milestone-detail {
  display: block;
}
.tr-milestones--single .tr-milestone[data-open="true"] .tr-milestone-more[data-role="expand"] {
  display: inline-block;
}
.tr-milestones--single .tr-milestone-more[data-role="collapse"] {
  display: none !important;
}
@media (max-width: 768px) {
  .tr-journey-track {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--sp-2) 2px var(--sp-3);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .tr-journey-track::before {
    display: none;
  }
  .tr-journey-stage {
    flex: 0 0 clamp(246px, 76vw, 322px);
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    gap: var(--sp-2);
    min-height: 132px;
    width: 100%;
    padding: var(--sp-3) var(--sp-2);
    border: 1px solid rgba(181, 126, 62, 0.22);
    background: rgba(7, 24, 22, 0.42);
    scroll-snap-align: center;
  }
  .tr-journey-stage .tr-journey-dot {
    justify-self: center;
  }
  .tr-journey-stage .tr-journey-label {
    text-align: center;
    margin-top: 0;
    overflow-wrap: anywhere;
  }
  .tr-map-toggle {
    appearance: none;
    display: inline-flex;
    justify-content: center;
    justify-self: stretch;
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid var(--gold-deep);
    border-radius: 999px;
    background: rgba(7, 24, 22, 0.72);
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .tr-map-toggle:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
  }
  .tr-journey-diagram {
    display: none;
  }
  .tr-journey-v2.is-map-open .tr-journey-diagram {
    display: block;
  }
  .tr-journey-diagram {
    padding: var(--sp-3);
  }
  .tr-journey-carousel-controls {
    flex-wrap: wrap;
  }
  .tr-journey-count {
    order: -1;
    width: 100%;
    text-align: center;
  }
  .tr-journey-nav {
    flex: 1 1 0;
    min-width: 0;
  }
  .tr-milestones--single .tr-milestone {
    min-height: 0;
  }
}

/* =================================================================
   Reference capsules — clickable, verification-tinted
   ================================================================= */
.tr-ref-cap {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(216, 179, 106, 0.08);
  border: 1px solid var(--gold-deep);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease);
  text-decoration: none;
}
.tr-ref-cap:hover,
.tr-ref-cap:focus-visible {
  background: rgba(216, 179, 106, 0.16);
  border-color: var(--gold);
  outline: 0;
  transform: translateY(-1px);
}
.tr-ref-cap.tr-verified   { border-color: var(--v-verified); color: var(--v-verified); }
.tr-ref-cap.tr-partial    { border-color: var(--v-partial);  color: var(--v-partial); }
.tr-ref-cap.tr-unverified { border-color: var(--v-unverified); color: var(--v-unverified); opacity: 0.85; }
.tr-ref-cap.tr-disputed   { border-color: var(--v-disputed); color: var(--v-disputed); }

/* Legacy class kept for compatibility */
.tr-milestone-ref-item { /* alias to tr-ref-cap look */
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(216, 179, 106, 0.08);
  border: 1px solid var(--gold-deep);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  cursor: pointer;
}
.tr-milestone-ref-item.tr-verified   { border-color: var(--v-verified); color: var(--v-verified); }
.tr-milestone-ref-item.tr-partial    { border-color: var(--v-partial);  color: var(--v-partial); }
.tr-milestone-ref-item.tr-unverified { border-color: var(--v-unverified); color: var(--v-unverified); opacity: 0.85; }
.tr-milestone-ref-item.tr-disputed   { border-color: var(--v-disputed); color: var(--v-disputed); }

/* =================================================================
   Fulfillment — warmer background, prominent typography
   ================================================================= */
.tr-fulfillment-wrap {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(216, 179, 106, 0.04), transparent 60%),
    rgba(181, 126, 62, 0.05);
  border-top: 1px solid rgba(216, 179, 106, 0.22);
  border-bottom: 1px solid rgba(216, 179, 106, 0.22);
  padding: clamp(32px, 5.5vw, 64px) clamp(24px, 4vw, 56px);
  margin: 0 calc(-1 * clamp(24px, 4vw, 56px));
}
.tr-fulfillment-inner {
  max-width: var(--wide-col);
  margin: 0 auto;
}
.tr-fulfillment-inner .tr-section-title { text-align: center; }
.tr-fulfillment {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
@media (min-width: 900px) {
  .tr-fulfillment { grid-template-columns: repeat(3, 1fr); }
}
.tr-fulfill-card {
  padding: var(--sp-4);
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  background: rgba(11, 21, 40, 0.55);
  box-shadow: var(--shadow-card);
}
.tr-fulfill-card-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-2);
  text-align: center;
}
.tr-fulfill-card-text {
  font-family: var(--font-reading);
  font-size: 16px;
  color: var(--ink-body);
  margin: 0;
  line-height: 1.6;
}

/* =================================================================
   Formation — practical cards
   ================================================================= */
.tr-formation-summary {
  font-family: var(--font-reading);
  font-style: italic;
  color: var(--ink-body);
  font-size: 18px;
  margin: 0 0 var(--sp-3);
  line-height: 1.7;
}
.tr-formation-outcomes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}
@media (min-width: 768px) {
  .tr-formation-outcomes { grid-template-columns: repeat(2, 1fr); }
}
.tr-formation-outcome {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--gold);
  background: rgba(216, 179, 106, 0.06);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-reading);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.55;
}

/* =================================================================
   Related Themes cards (Study/Scholar)
   ================================================================= */
.tr-related-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: var(--sp-3);
}
.tr-related-card {
  padding: var(--sp-3);
  border: 1px solid var(--gold-deep);
  border-radius: 8px;
  background: rgba(11, 21, 40, 0.6);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease), transform 150ms var(--ease);
  appearance: none;
  color: inherit;
  font: inherit;
  width: 100%;
}
.tr-related-card:hover,
.tr-related-card:focus-visible {
  border-color: var(--gold);
  background: rgba(11, 21, 40, 0.9);
  transform: translateY(-2px);
  outline: 0;
}
.tr-related-card-kind {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.tr-related-card-name {
  font-family: var(--font-reading);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 4px;
}
.tr-related-card-rel {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
}

.tr-related-witnesses {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--navy-line-strong);
}
.tr-related-witness-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(104, 185, 138, 0.18), transparent 50%),
    linear-gradient(90deg, rgba(13, 39, 34, 0.94), rgba(7, 24, 22, 0.86));
  box-shadow: var(--shadow-card);
}
.tr-related-witness-count {
  text-align: right;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--navy-line-strong);
}
.tr-related-witness-count-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  color: var(--gold-bright);
}
.tr-related-witness-count-label {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-related-witness-count-context {
  display: block;
  margin-top: 6px;
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute);
}
.tr-related-witness-count-context:empty {
  display: none;
}
.tr-related-filter[hidden] {
  display: none;
}
/* Mechanical, non-theological summary line — a count sentence, not a
   claim about what the records mean. Sits above the view tabs so it reads
   first, before any filter chrome. */
.tr-related-summary {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-reading);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-mute);
}
/* Story / Evidence / Compare — a third facet alongside Topic and Kind.
   Deliberately styled with MORE visual weight than the filter bar below
   it: this is the primary navigation for the section, the Kind filter is
   secondary (see the demoted `.tr-related-filterbar` rules further down). */
.tr-related-view-tabs {
  display: flex;
  gap: 4px;
  margin-top: var(--sp-3);
  padding: 4px;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  background: rgba(5, 13, 13, 0.5);
  width: fit-content;
}
.tr-related-view-tab {
  appearance: none;
  border: 0;
  padding: 8px 20px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.tr-related-view-tab:hover:not(:disabled),
.tr-related-view-tab:focus-visible:not(:disabled) {
  color: var(--gold-bright);
  outline: 0;
}
.tr-related-view-tab.is-active {
  background: var(--gold);
  color: var(--navy-deep);
}
.tr-related-view-tab.is-disabled,
.tr-related-view-tab:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
/* Demoted filter bar — Explore-evidence toolbar, secondary to the view
   tabs above it. Smaller and quieter in Story view (the default); the
   Evidence view restores full prominence since that's where kind-scanning
   is the primary activity. */
[data-view="story"] .tr-related-filterbar {
  margin-top: var(--sp-2);
  padding: 6px var(--sp-2);
  font-size: 0.9em;
  opacity: 0.88;
}
[data-view="story"] .tr-related-filter {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 10px;
}
[data-view="evidence"] .tr-related-filterbar {
  margin-top: var(--sp-4);
}
/* Story-view stage headers — named movements of the Theme's own story
   (e.g. "The Royal Seed of David"), derived from each milestone's already-
   curated presentation.title/shortSummary (see canonical-query.js's
   milestoneStageById). Positioned purely via inline `order`, interleaved
   with witness-group rows in the SAME single-column `.tr-related-list`
   grid — see components/related.js's buildStoryLayout. Hidden entirely in
   Evidence view, which isn't organized by Stage. */
.tr-story-stage-header {
  padding: 14px var(--sp-2) 6px;
  border-bottom: 1px solid rgba(211, 163, 90, 0.3);
}
.tr-story-stage-header:first-child {
  padding-top: 2px;
}
.tr-story-stage-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.tr-story-stage-summary {
  margin: 4px 0 0;
  font-family: var(--font-reading);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 62ch;
}
[data-view="evidence"] .tr-story-stage-header {
  display: none;
}
.tr-related-witness-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(211, 163, 90, 0.55);
  border-radius: 50%;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 28px;
  background: rgba(104, 185, 138, 0.08);
  box-shadow: inset 0 0 0 1px rgba(244, 228, 184, 0.08);
}
.tr-related-witness-kicker {
  margin: 0 0 4px;
  font-family: var(--font-reading);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 17px;
}
.tr-related-witness-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  text-transform: uppercase;
}
.tr-related-filterbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2);
  margin-top: var(--sp-4);
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  background: rgba(5, 13, 13, 0.54);
}
.tr-related-filter-label {
  padding: 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-related-filter {
  appearance: none;
  min-height: 38px;
  padding: 7px 16px;
  border: 1px solid rgba(181, 126, 62, 0.42);
  border-radius: 999px;
  background: rgba(7, 24, 22, 0.62);
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tr-related-filter span {
  color: var(--gold);
  font-style: italic;
}
.tr-related-filter:hover,
.tr-related-filter:focus-visible,
.tr-related-filter.is-active {
  color: var(--gold-bright);
  border-color: var(--gold);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(211, 163, 90, 0.18), transparent 60%),
    rgba(7, 24, 22, 0.92);
  outline: 0;
}
.tr-related-list {
  display: grid;
  gap: 10px;
  margin-top: var(--sp-4);
}
/* One row per distinct witness (kind+title) instead of one per relationship
   record — repeat targets like "Christ" or "Covenant" used to render as
   several near-identical rows differing only in a small subtitle. Each
   connection now shows as its own clickable chip inside the row. */
.tr-related-group {
  display: grid;
  gap: 12px;
  padding: 16px var(--sp-4);
  border: 1px solid rgba(181, 126, 62, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 21, 40, 0.0), rgba(7, 24, 22, 0.74) 10%, rgba(5, 13, 13, 0.86));
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.tr-related-group:has(.tr-related-context-chip:hover),
.tr-related-group:has(.tr-related-context-chip:focus-visible) {
  border-color: var(--gold);
}
.tr-related-group[hidden] {
  display: none;
}
.tr-related-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tr-related-group-title {
  color: var(--ink);
  font-family: var(--font-reading);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.25;
}
.tr-related-group-kind {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(211, 163, 90, 0.48);
  border-radius: 5px;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tr-related-group-contexts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tr-related-context-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(216, 198, 153, 0.28);
  border-radius: 999px;
  background: rgba(5, 13, 13, 0.5);
  color: var(--ink-mute);
  font: inherit;
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}
.tr-related-context-chip:hover,
.tr-related-context-chip:focus-visible {
  transform: translateY(-1px);
  color: var(--gold-bright);
  border-color: var(--gold);
  background: rgba(211, 163, 90, 0.12);
  outline: 0;
}
.tr-related-context-chip-confidence {
  color: var(--ink-cross);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* -----------------------------------------------------------------
   Theme x Topic intersection — Related Topics index + filter pills.
   Counts are canonical-resolved (registry-backed), never inferred
   from names; see components/related.js.
   ----------------------------------------------------------------- */
.tr-topic-index {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  background: rgba(5, 13, 13, 0.54);
}
.tr-topic-index-label {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-topic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tr-topic-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 16px;
  border: 1px solid rgba(181, 126, 62, 0.42);
  border-radius: 999px;
  background: rgba(7, 24, 22, 0.62);
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.tr-topic-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(211, 163, 90, 0.18);
  color: var(--gold-bright);
  font-size: 10px;
}
.tr-topic-pill:hover,
.tr-topic-pill:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold);
  outline: 0;
}
.tr-topic-pill.is-active {
  color: var(--ink);
  border-color: var(--gold-bright);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(211, 163, 90, 0.3), transparent 60%),
    rgba(7, 24, 22, 0.94);
  box-shadow: 0 0 0 1px rgba(211, 163, 90, 0.25) inset;
}
.tr-topic-pill.is-active .tr-topic-pill-count {
  background: var(--gold-bright);
  color: #1a1305;
}
.tr-topic-intersection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 12px var(--sp-3);
  border: 1px solid rgba(211, 163, 90, 0.5);
  border-radius: 8px;
  background: rgba(211, 163, 90, 0.08);
}
.tr-topic-intersection-bar[hidden] {
  display: none;
}
.tr-topic-intersection-text {
  margin: 0;
  font-family: var(--font-reading);
  font-size: 13px;
  color: var(--ink-mute);
}
.tr-topic-intersection-theme {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.tr-topic-intersection-sep {
  margin: 0 6px;
  color: var(--ink-cross);
}
.tr-topic-intersection-name {
  font-weight: 700;
  color: var(--gold-bright);
  text-transform: uppercase;
}
.tr-topic-intersection-count {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.tr-topic-intersection-count span {
  color: var(--gold-bright);
  font-weight: 700;
}
.tr-topic-intersection-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.tr-topic-clear,
.tr-topic-open-full {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.tr-topic-clear {
  border: 1px solid rgba(216, 198, 153, 0.3);
  background: transparent;
  color: var(--ink-mute);
}
.tr-topic-clear:hover,
.tr-topic-clear:focus-visible {
  color: var(--gold-bright);
  border-color: var(--gold);
  outline: 0;
}
.tr-topic-open-full {
  border: 1px solid var(--gold-deep);
  background: rgba(211, 163, 90, 0.14);
  color: var(--gold-bright);
}
.tr-topic-open-full:hover,
.tr-topic-open-full:focus-visible {
  border-color: var(--gold);
  background: rgba(211, 163, 90, 0.24);
  outline: 0;
}
.tr-topic-empty-state {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px dashed rgba(216, 198, 153, 0.3);
  border-radius: 8px;
  color: var(--ink-mute);
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 13px;
}
.tr-topic-empty-state[hidden] {
  display: none;
}

/* =================================================================
   Scholar sections — Typology, Events, Ontology, Boundary,
   Commentary
   ================================================================= */
.tr-list-plain {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: grid;
  gap: var(--sp-2);
}
.tr-list-plain li {
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--gold-deep);
  background: rgba(216, 179, 106, 0.03);
  font-family: var(--font-reading);
  font-size: 15px;
  color: var(--ink-body);
  line-height: 1.55;
}

.tr-scholar-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-3);
  font-family: var(--font-reading);
  font-size: 14px;
}
.tr-scholar-table th,
.tr-scholar-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--navy-line);
  text-align: left;
  vertical-align: top;
}
.tr-scholar-table th {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom-color: var(--gold-deep);
  font-weight: 600;
}
.tr-scholar-table td { color: var(--ink-body); }
.tr-scholar-table tr:last-child td { border-bottom: 0; }

.tr-commentary-block {
  margin-top: var(--sp-4);
}
.tr-commentary-block h3 {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-2);
}
.tr-commentary-block p {
  font-family: var(--font-reading);
  font-size: 17px;
  color: var(--ink-body);
  line-height: 1.72;
  margin: 0 0 var(--sp-2);
}
.tr-section-transition {
  max-width: 760px;
  margin: var(--sp-2) auto var(--sp-4);
  font-family: var(--font-reading);
  font-style: italic;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--ink-body);
  text-align: center;
}
.tr-synthesis-panel {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.tr-synthesis-block {
  padding: var(--sp-4);
  border: 1px solid rgba(216, 179, 106, 0.24);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(236, 214, 162, 0.07), transparent 54%),
    rgba(6, 16, 31, 0.42);
}
.tr-synthesis-block h3 {
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--navy-line);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-synthesis-block p {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-reading);
  font-size: 17px;
  color: var(--ink-body);
  line-height: 1.72;
}
.tr-guardrail-group {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid rgba(216, 179, 106, 0.24);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.tr-guardrail-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-guardrail-group summary small {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-cross);
}
.tr-guardrail-group .tr-list-plain {
  margin-top: var(--sp-3);
}


/* =================================================================
   Interpretive cautions
   ================================================================= */
.tr-cautions {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px dashed rgba(216, 179, 106, 0.35);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
}
.tr-cautions-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
.tr-cautions-list {
  margin: 0;
  padding-left: var(--sp-3);
  font-family: var(--font-reading);
  font-style: italic;
  color: var(--ink-mute);
}

/* =================================================================
   Missing content notice + placeholders + error
   ================================================================= */
.tr-missing {
  color: var(--ink-cross);
  font-style: italic;
  padding: var(--sp-2);
  text-align: center;
  border: 1px dashed var(--navy-line);
  border-radius: 4px;
}
.tr-error {
  color: var(--v-disputed);
  padding: var(--sp-4);
  border: 1px solid var(--v-disputed);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
}
.tr-error h2 {
  font-family: var(--font-display);
  margin: 0 0 var(--sp-2);
}

/* =================================================================
   Sidebar (desktop sticky, mobile drawer)
   ================================================================= */
.tr-sidebar {
  align-self: start;
}
.tr-sidebar-inner {
  position: sticky;
  top: 80px;
  padding: var(--sp-3);
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  background: rgba(11, 21, 40, 0.7);
  box-shadow: var(--shadow-card);
}
.tr-sidebar-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
.tr-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3);
  display: grid;
  gap: 2px;
}
.tr-sidebar-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--ink-mute);
  text-decoration: none;
  font-family: var(--font-reading);
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
.tr-sidebar-nav a:hover { color: var(--gold-bright); background: rgba(216, 179, 106, 0.06); }
.tr-sidebar-nav a[aria-current="true"] {
  color: var(--gold-bright);
  border-left-color: var(--gold);
  background: rgba(216, 179, 106, 0.08);
}
.tr-sidebar-facts {
  display: grid;
  gap: 8px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--navy-line);
  margin-top: var(--sp-2);
}
.tr-sidebar-fact {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-reading);
  font-size: 13px;
  color: var(--ink-mute);
}
.tr-sidebar-fact-value {
  font-family: var(--font-display);
  color: var(--gold-bright);
  font-weight: 600;
}
.tr-sidebar-progress {
  margin-top: var(--sp-3);
}
.tr-sidebar-progress-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-cross);
  margin: 0 0 6px;
}
.tr-sidebar-progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(216, 179, 106, 0.1);
  overflow: hidden;
}
.tr-sidebar-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  border-radius: 999px;
  transition: width 120ms linear;
}

/* Sidebar only renders once there's genuinely enough room to show it WITHOUT
   compromising center alignment of the reading column (see the symmetric
   grid at .tr-theme-page above — sidebar only appears >=1750px). Below that
   width it's hidden entirely rather than squeezed, so content stays centered
   at every viewport. In Overview mode, nav links are hidden via a per-mode
   rule so the sidebar reads as a "facts panel" not a nav. */
body[data-mode="overview"] .tr-sidebar-nav { display: none; }
body[data-mode="overview"] .tr-sidebar-inner { padding-top: var(--sp-4); }
@media (max-width: 1749px) {
  .tr-sidebar { display: none; }
}

/* =================================================================
   Modal (verse popups, milestone detail, related theme detail)
   ================================================================= */
.tr-modal {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  max-width: 720px;
  width: calc(100vw - 32px);
  max-height: 84vh;
  border-radius: 12px;
  overflow: hidden;
}
.tr-modal[open] { animation: tr-modal-in 240ms var(--ease); }
@keyframes tr-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tr-modal::backdrop {
  background: rgba(6, 16, 31, 0.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tr-modal-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(216, 179, 106, 0.08), transparent 60%),
    var(--navy-panel);
  border: 1px solid var(--gold-deep);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  max-height: 84vh;
  overflow-y: auto;
}
.tr-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--navy-line);
  background: rgba(6, 16, 31, 0.6);
  position: sticky;
  top: 0;
  z-index: 1;
}
.tr-modal-eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 4px;
}
.tr-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.5vw, 30px);
  color: var(--gold-bright);
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.tr-modal-panel--witnesses .tr-modal-head {
  align-items: center;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(104, 185, 138, 0.16), transparent 52%),
    linear-gradient(90deg, rgba(13, 39, 34, 0.92), rgba(7, 20, 25, 0.9));
}
.tr-modal-panel--witnesses .tr-modal-eyebrow {
  font-family: var(--font-reading);
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
}
.tr-modal-panel--witnesses .tr-modal-title {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.tr-modal-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--gold-deep);
  color: var(--gold-bright);
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.tr-modal-close:hover,
.tr-modal-close:focus-visible {
  background: var(--gold);
  color: var(--navy-deep);
  outline: 0;
}
.tr-modal-body {
  padding: var(--sp-4);
}
.tr-modal-body p {
  font-family: var(--font-reading);
  font-size: 17px;
  color: var(--ink-body);
  line-height: 1.7;
  margin: 0 0 var(--sp-3);
}
.tr-modal-section {
  margin-top: var(--sp-3);
}
.tr-modal-panel--wide .tr-modal-section {
  padding: 16px 18px;
  border: 1px solid rgba(216, 179, 106, 0.18);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(216, 179, 106, 0.05), transparent 58%),
    linear-gradient(135deg, rgba(9, 30, 27, 0.38), rgba(5, 15, 15, 0.18));
}
.tr-modal-section h4 {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.tr-modal-witness-intro {
  color: var(--ink-mute);
  font-style: italic;
}
.tr-modal-witness-count-summary {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-modal-atlas-root {
  display: grid;
  gap: 16px;
}
.tr-modal-atlas-search {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(216, 179, 106, 0.18);
  border-radius: 10px;
  background: rgba(5, 13, 13, 0.32);
}
.tr-modal-atlas-search label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-modal-atlas-search input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(216, 179, 106, 0.26);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(3, 10, 16, 0.7);
  color: var(--ink);
  font-family: var(--font-reading);
  font-size: 15px;
}
.tr-modal-atlas-search input:focus {
  border-color: rgba(216, 179, 106, 0.62);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(216, 179, 106, 0.1);
}
.tr-modal-atlas-empty {
  padding: 14px 16px;
  border: 1px solid rgba(216, 179, 106, 0.18);
  border-radius: 10px;
  background: rgba(5, 13, 13, 0.28);
}
.tr-modal-atlas-empty p:last-child {
  margin-bottom: 0;
}
.tr-modal-atlas-category {
  margin-top: 12px;
}
.tr-modal-atlas-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(216, 179, 106, 0.16);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-modal-atlas-category-head em {
  font-style: normal;
  color: var(--gold-bright);
}
.tr-modal-atlas-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.tr-modal-atlas-card {
  appearance: none;
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 14px;
  text-align: left;
  border: 1px solid rgba(216, 179, 106, 0.2);
  border-radius: 8px;
  color: var(--ink-body);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(216, 179, 106, 0.08), transparent 54%),
    rgba(5, 13, 13, 0.45);
  cursor: pointer;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease), background 160ms var(--ease);
}
.tr-modal-atlas-card:hover,
.tr-modal-atlas-card:focus-visible {
  border-color: rgba(216, 179, 106, 0.54);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(216, 179, 106, 0.12), transparent 56%),
    rgba(8, 23, 22, 0.72);
  transform: translateY(-1px);
  outline: 0;
}
.tr-modal-atlas-card-ref {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-modal-atlas-card-badge {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid rgba(216, 179, 106, 0.25);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-modal-atlas-card-badge strong {
  color: var(--gold-bright);
  font-weight: 700;
}
.tr-modal-atlas-card-title {
  font-family: var(--font-reading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gold-bright);
}
.tr-modal-atlas-card-summary {
  font-family: var(--font-reading);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-body);
}
.tr-modal-atlas-card-relevance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tr-modal-atlas-card-relevance span {
  padding: 3px 7px;
  border: 1px solid rgba(104, 185, 138, 0.28);
  border-radius: 999px;
  background: rgba(104, 185, 138, 0.08);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.tr-modal-atlas-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tr-modal-atlas-card-meta span {
  padding: 3px 7px;
  border: 1px solid rgba(216, 179, 106, 0.24);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-modal-atlas-topic-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 18px;
  border: 1px solid rgba(216, 179, 106, 0.32);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(216, 179, 106, 0.11), transparent 58%),
    linear-gradient(90deg, rgba(5, 13, 13, 0.64), rgba(8, 25, 22, 0.76));
}
.tr-modal-atlas-topic-action span {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-modal-atlas-topic-action strong {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.15;
  color: var(--gold-bright);
}
.tr-modal-atlas-topic-action p {
  margin: 6px 0 0;
  font-family: var(--font-reading);
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-mute);
}
.tr-modal-atlas-topic-action a {
  flex: 0 0 auto;
  max-width: 310px;
  padding: 10px 15px;
  border: 1px solid rgba(216, 179, 106, 0.42);
  border-radius: 999px;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}
.tr-modal-atlas-topic-action a:hover,
.tr-modal-atlas-topic-action a:focus-visible {
  border-color: rgba(216, 179, 106, 0.72);
  background: rgba(216, 179, 106, 0.08);
  outline: 0;
  transform: translateY(-1px);
}
.tr-modal-verse {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.55;
  padding: var(--sp-3);
  border-left: 3px solid var(--gold);
  background: rgba(216, 179, 106, 0.04);
  margin: 0 0 var(--sp-2);
}

/* Related-item modal: Pattern -> Fulfillment comparison (Type kind) */
.tr-modal-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid rgba(181, 126, 62, 0.34);
  border-radius: 8px;
  background: rgba(5, 13, 13, 0.4);
}
.tr-modal-compare-col { min-width: 0; }
.tr-modal-compare-label {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-modal-compare-value {
  margin: 0;
  font-family: var(--font-reading);
  font-weight: 700;
  font-size: 17px;
  color: var(--gold-bright);
  line-height: 1.3;
}
.tr-modal-compare-ref {
  margin: 4px 0 0;
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
}
.tr-modal-compare-arrow {
  color: var(--gold);
  font-size: 20px;
  text-align: center;
}
/* A constrained, deterministically-assembled sentence — flagged so it's
   never mistaken for authored theological commentary. */
.tr-modal-derived {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-reading);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-body);
}
.tr-modal-derived-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(216, 198, 153, 0.28);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-cross);
  vertical-align: middle;
}
/* Honest enrichment-state line — replaces empty "Definition" blocks for
   kinds (topic/person/thread stub/etc.) that have no curated prose yet. */
.tr-modal-enrichment {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-style: italic;
  color: var(--ink-cross);
  opacity: 0.85;
}
/* Collapsed drawer for scope/confidence/status — present but no longer
   competing with reader-facing content for visual weight. */
.tr-modal-provenance {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--navy-line);
}
.tr-modal-provenance summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-cross);
  list-style: none;
}
.tr-modal-provenance summary::-webkit-details-marker { display: none; }
.tr-modal-provenance summary::before {
  content: '▸ ';
  color: var(--gold);
}
.tr-modal-provenance[open] summary::before {
  content: '▾ ';
}
.tr-modal-provenance dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--sp-2);
  margin: var(--sp-2) 0 0;
}
.tr-modal-provenance dt {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-modal-provenance dd {
  margin: 0;
  font-family: var(--font-reading);
  font-size: 13px;
  color: var(--ink-mute);
}
@media (max-width: 480px) {
  .tr-modal-compare-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .tr-modal-compare-arrow { transform: rotate(90deg); }
}

/* Topic modal — Theme-context rendering (Theme -> Topic bridge). Wider than
   the default related-item modal to give the Supporting Witnesses chip
   wrap and footer actions room to breathe. */
.tr-modal:has(.tr-modal-panel--wide) {
  max-width: min(760px, calc(100vw - 32px));
}
.tr-modal:has(.tr-modal-panel--witnesses) {
  max-width: min(var(--wide-col), calc(100vw - 32px));
}
.tr-modal-witness-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.tr-modal-witness-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(181, 126, 62, 0.34);
  border-radius: 999px;
  background: rgba(5, 13, 13, 0.4);
  color: var(--ink-body);
  font-family: var(--font-reading);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}

.tr-modal-topic-intro {
  margin: 0 0 var(--sp-3);
  padding: 18px 20px;
  border-left: 3px solid rgba(216, 179, 106, 0.7);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(216, 179, 106, 0.1), transparent 62%),
    rgba(2, 15, 15, 0.34);
}
.tr-modal-topic-intro p {
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
}
.tr-modal-witness-chip:hover,
.tr-modal-witness-chip:focus-visible {
  border-color: var(--gold);
  background: rgba(216, 179, 106, 0.08);
  outline: 0;
}
.tr-modal-witness-chip-title {
  font-weight: 600;
}
.tr-modal-witness-chip-kind {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-modal-witness-collection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid rgba(211, 163, 90, 0.42);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(104, 185, 138, 0.14), transparent 55%),
    rgba(5, 13, 13, 0.48);
}
.tr-modal-witness-collection-head p {
  margin: 0;
  font-family: var(--font-reading);
  font-size: 16px;
  color: var(--ink-mute);
}
.tr-modal-witness-collection-head strong {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  color: var(--gold-bright);
}
.tr-modal-witness-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 680px);
  overflow: auto;
  padding-right: 4px;
}
.tr-modal-witness-kind-group {
  display: grid;
  gap: 10px;
}
.tr-modal-witness-kind-group + .tr-modal-witness-kind-group {
  margin-top: 12px;
}
.tr-modal-witness-kind-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 6px;
  border-bottom: 1px solid rgba(216, 179, 106, 0.18);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.tr-modal-witness-kind-head em {
  font-style: normal;
  color: var(--gold-bright);
}
.tr-modal-witness-row {
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  border: 1px solid rgba(181, 126, 62, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(5, 13, 13, 0.72), rgba(7, 24, 22, 0.88));
}
.tr-modal-witness-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.tr-modal-witness-row-title {
  font-family: var(--font-reading);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  color: var(--ink);
}
.tr-modal-witness-row-kind {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(211, 163, 90, 0.44);
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.tr-modal-witness-contexts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tr-modal-witness-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid rgba(216, 198, 153, 0.26);
  border-radius: 999px;
  background: rgba(1, 13, 14, 0.42);
  font-family: var(--font-reading);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
}
.tr-modal-witness-confidence {
  font-family: var(--font-display);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
@media (max-width: 680px) {
  .tr-modal-atlas-topic-action {
    align-items: stretch;
    flex-direction: column;
  }
  .tr-modal-atlas-topic-action a {
    width: 100%;
    max-width: none;
  }
}
/* Subdued, secondary — never the visual center of the modal, per the rule
   that an uncurated Topic definition must not read as an apology. */
.tr-modal-status-subdued {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--ink-cross);
  opacity: 0.8;
}
.tr-modal-topic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--navy-line);
}
.tr-modal-action {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-deep);
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.tr-modal-action-primary {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
}
.tr-modal-action-primary:hover:not(:disabled),
.tr-modal-action-primary:focus-visible:not(:disabled) {
  background: var(--gold-bright);
  outline: 0;
}
.tr-modal-action-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tr-modal-action-secondary {
  background: transparent;
  color: var(--ink-cross);
}
.tr-modal-action-secondary.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
@media (max-width: 480px) {
  .tr-modal-topic-actions { flex-direction: column; align-items: stretch; }
}

/* Brief highlight when a Supporting Witness chip jumps the reader to the
   matching Witness card in the main list below the modal. */
.tr-related-group--highlight {
  animation: tr-related-group-highlight 1.6s var(--ease);
}
@keyframes tr-related-group-highlight {
  0%   { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(216, 179, 106, 0.35); }
  100% { border-color: rgba(181, 126, 62, 0.34); box-shadow: none; }
}

/* =================================================================
   Theme navigation (previous / library / next) at page bottom
   ================================================================= */
.tr-theme-nav {
  margin-top: var(--sp-6);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--navy-line);
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tr-theme-nav-prev  { text-align: left; }
.tr-theme-nav-index { text-align: center; }
.tr-theme-nav-next  { text-align: right; }
.tr-theme-nav a {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 150ms var(--ease);
}
.tr-theme-nav a:hover { color: var(--gold-bright); }

/* =================================================================
   Mode gating — the heart of the progressive-disclosure architecture
   ================================================================= */
body[data-mode="overview"] [data-min-mode="study"],
body[data-mode="overview"] [data-min-mode="scholar"] { display: none; }
body[data-mode="study"] [data-min-mode="scholar"]    { display: none; }

/* max-mode: hide when mode exceeds — used for "Continue Exploring" CTA
   which should only show in Overview */
body[data-mode="study"]   [data-max-mode="overview"],
body[data-mode="scholar"] [data-max-mode="overview"] { display: none; }
body[data-mode="scholar"] [data-max-mode="study"]    { display: none; }

/* Non-JS fallback — reveal everything so crawlers/no-JS clients see all content */
html.no-js body [data-min-mode],
html.no-js body [data-max-mode] { display: revert !important; }

/* .tr-content already fills its grid track exactly (100% of col 2, which is
   min(1120px,100%) and page-centered — see .tr-theme-page above). No
   per-mode override needed; every mode gets the same centered column. */

/* =================================================================
   Utility
   ================================================================= */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =================================================================
   Premium editorial finish — illuminated manuscript section system
   ================================================================= */
/* All direct section children inside tr-content flow cleanly as segments of a single page */
.tr-content > .tr-section {
  position: relative;
  margin: 0;
  padding: clamp(32px, 5.5vw, 64px) 0;
  border-bottom: 1px solid rgba(216, 179, 106, 0.12);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* Fulfillment is self-contained with its own wrapper full-bleed styling */
#section-fulfillment {
  padding: 0;
  border-bottom: none;
}
.tr-content > .tr-section:last-of-type {
  border-bottom: none;
}
.tr-section > .tr-section-inner,
.tr-section > .tr-section-wide {
  position: relative;
  z-index: 1;
}
.tr-content > .tr-section .tr-eyebrow {
  width: 100%;
  justify-content: center;
  margin-bottom: var(--sp-2);
}
.tr-content > .tr-section .tr-eyebrow::before,
.tr-content > .tr-section .tr-eyebrow::after {
  width: min(120px, 22vw);
  background: linear-gradient(90deg, transparent, rgba(216, 179, 106, 0.72), transparent);
}
.tr-content > .tr-section .tr-section-title {
  text-align: center;
  margin-bottom: var(--sp-5);
  text-shadow: 0 0 18px rgba(216, 179, 106, 0.16), 0 1px 0 var(--gold-shadow);
}
.tr-content > .tr-section .tr-section-title::after {
  content: "";
  display: block;
  max-width: 520px;
  margin: 12px auto 0;
  font-family: var(--font-reading);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
  text-shadow: none;
}
#section-overview .tr-section-title::after { content: "A framed reading of the theme's core movement."; }
#section-dimensions .tr-section-title::after { content: "Unifying the distinct theological dimensions of the theme."; }
#section-significance .tr-section-title::after { content: "Why this thread matters for the whole story."; }
#section-journey .tr-section-title::after { content: "Tracing the theme's movement across the canon."; }
#section-fulfillment .tr-section-title::after { content: "How the thread converges in Christ and reaches its end."; }
#section-connections .tr-section-title::after { content: "How the theme converges with other canonical strands."; }
#section-formation .tr-section-title::after { content: "Practices shaped by the story this theme tells."; }
#section-related .tr-section-title::after { content: "Canonical neighbors grouped for quick filtering and slower study."; }
#section-typology .tr-section-title::after { content: "Patterns, figures, and fulfillments across the canon."; }
#section-events .tr-section-title::after { content: "Concrete biblical moments where the thread appears."; }
#section-commentary .tr-section-title::after { content: "Curator notes for slower theological reading."; }

.tr-definition {
  gap: var(--sp-5);
}
.tr-definition .tr-section-body {
  grid-column: 1 / -1;
  padding: var(--sp-3) 0 0;
}
.tr-definition .tr-section-body p:first-child {
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.tr-definition .tr-section-body p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.55em;
  line-height: 0.82;
  padding: 8px 12px 0 0;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(216, 179, 106, 0.28);
}
.tr-key-verse,
.tr-hero-verse {
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(244, 228, 184, 0.26), transparent 42%),
    linear-gradient(135deg, rgba(211, 163, 90, 0.18), rgba(7, 24, 22, 0.9) 48%, rgba(104, 185, 138, 0.08));
  border: 1px solid rgba(236, 214, 162, 0.48);
}
.tr-key-verse {
  padding: var(--sp-4);
}
.tr-key-verse::after,
.tr-hero-verse::after {
  content: "\"";
  position: absolute;
  right: 18px;
  bottom: -20px;
  font-family: var(--font-display);
  font-size: 92px;
  line-height: 1;
  color: rgba(236, 214, 162, 0.12);
  pointer-events: none;
}
.tr-key-verse-text,
.tr-hero-verse-text {
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.4;
}
.tr-canonical-question {
  margin: var(--sp-5) auto 0;
  max-width: 900px;
  padding: clamp(38px, 6vw, 64px);
  text-align: center;
  border-left: 0;
  border-top: 1px solid var(--navy-line-strong);
  border-bottom: 1px solid var(--navy-line-strong);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(216, 179, 106, 0.12), transparent 68%),
    linear-gradient(90deg, transparent, rgba(216, 179, 106, 0.055), transparent);
}
.tr-canonical-question::before {
  content: "";
  display: block;
  width: 4px;
  height: 84px;
  margin: 0 auto var(--sp-3);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 28px rgba(216, 179, 106, 0.34);
}
.tr-canonical-question-label {
  margin-bottom: var(--sp-3);
}
.tr-canonical-question-text {
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.4;
  color: var(--gold-soft);
  text-wrap: balance;
}
.tr-definition .tr-canonical-question {
  grid-column: 1 / -1;
  align-self: start;
  max-width: none;
  width: 100%;
  margin: var(--sp-3) 0 var(--sp-2);
  padding: clamp(26px, 3.4vw, 40px);
  text-align: center;
  border: 1px solid rgba(236, 214, 162, 0.36);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(244, 228, 184, 0.16), transparent 44%),
    linear-gradient(135deg, rgba(211, 163, 90, 0.13), rgba(7, 24, 22, 0.88) 52%, rgba(104, 185, 138, 0.06));
  box-shadow: var(--shadow-card);
}
.tr-definition .tr-canonical-question::before {
  display: none;
}
.tr-definition .tr-canonical-question-label {
  margin-bottom: var(--sp-2);
}
.tr-definition .tr-canonical-question-text {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.4;
}
/* Thread composition — "Woven From N Threads" (Overview). Presentation-only
   library cards for the flagship and absorbed canonical threads. */
.tr-thread-composition {
  grid-column: 1 / -1;
  margin: 72px 0 var(--sp-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.tr-thread-composition-head {
  padding: clamp(26px, 3.2vw, 36px);
  border: 1px solid rgba(236, 214, 162, 0.32);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 16% 0%, rgba(244, 228, 184, 0.14), transparent 44%),
    linear-gradient(180deg, rgba(216, 179, 106, 0.08), transparent 54%),
    rgba(18, 23, 20, 0.88);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}
.tr-thread-composition-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(236, 214, 162, 0.72), transparent);
  pointer-events: none;
}
.tr-thread-composition-kicker {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-cross);
  margin: 0 0 var(--sp-2);
  text-align: center;
}
.tr-thread-composition-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-2);
  text-align: center;
  text-shadow: 0 1px 0 var(--gold-shadow);
}
.tr-thread-composition-lede {
  font-family: var(--font-reading);
  font-style: normal;
  font-size: clamp(18px, 1.35vw, 21px);
  color: var(--ink-body);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 780px;
  text-align: center;
}
.tr-thread-connector {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 18px 0 22px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-thread-connector i {
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0.74;
}
.tr-thread-connector strong {
  font-size: 15px;
  color: var(--gold-bright);
  letter-spacing: 0.16em;
}
.tr-thread-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 36px;
}
.tr-thread-card {
  min-height: 100%;
  padding: 28px;
  border: 1px solid rgba(216, 179, 106, 0.72);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(236, 214, 162, 0.08), transparent 34%),
    rgba(18, 23, 20, 0.88);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
  transition:
    transform 120ms var(--ease),
    border-color 120ms var(--ease),
    background-color 120ms var(--ease),
    box-shadow 120ms var(--ease);
}
.tr-thread-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(236, 214, 162, 0.58), transparent);
  pointer-events: none;
}
.tr-thread-card:hover {
  transform: translateY(-4px);
  border-color: rgba(236, 214, 162, 0.96);
  background-color: rgba(29, 34, 29, 0.9);
  box-shadow: 0 24px 56px rgba(0,0,0,.4);
}
.tr-thread-card--flagship {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(244, 228, 184, 0.15), transparent 40%),
    linear-gradient(180deg, rgba(236, 214, 162, 0.13), transparent 38%),
    rgba(24, 29, 24, 0.92);
}
.tr-thread-card-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.tr-thread-card-main > div {
  min-width: 0;
  flex: 1;
}
.tr-thread-card-kicker,
.tr-thread-card-label {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-cross);
}
.tr-thread-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  color: var(--gold-bright);
  letter-spacing: 0;
}
.tr-thread-card-witness-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
  margin-top: 10px;
  max-width: 620px;
  flex-wrap: wrap;
}
.tr-thread-card-witness-name {
  margin: 0;
  min-width: 0;
  font-family: var(--font-reading);
  font-style: normal;
  color: var(--ink-body);
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.35;
  text-align: left;
}
.tr-thread-badge,
.tr-thread-reference {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 27px;
  padding: 5px 12px;
  border: 1px solid rgba(236, 214, 162, 0.7);
  border-radius: 999px;
  background: rgba(7, 24, 22, 0.82);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
}
.tr-thread-card-witness-row .tr-thread-reference {
  flex: 0 0 auto;
}
.tr-thread-card-section {
  margin-bottom: var(--sp-4);
}
.tr-thread-card-text,
.tr-thread-card-small {
  margin: 0;
  font-family: var(--font-reading);
  font-style: normal;
  color: var(--ink-body);
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.58;
}
.tr-thread-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(216, 179, 106, 0.18);
}
.tr-thread-card-role-summary {
  min-width: 0;
  text-align: left;
}
.tr-thread-card-role-summary .tr-thread-card-label {
  text-align: left;
}
.tr-thread-card-action {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0 0 2px auto;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
@media (max-width: 820px) {
  .tr-thread-card-grid {
    grid-template-columns: 1fr;
  }
  .tr-thread-card {
    padding: 24px;
  }
  .tr-thread-card-title {
    font-size: 26px;
  }
  .tr-thread-card-main {
    flex-direction: column;
  }
  .tr-thread-card-witness-row,
  .tr-thread-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .tr-thread-card-action {
    margin-left: 0;
  }
}
.tr-significance-quote {
  padding: var(--sp-5) var(--sp-4);
  border: 0;
  background:
    linear-gradient(90deg, rgba(216, 179, 106, 0.0), rgba(216, 179, 106, 0.08), rgba(216, 179, 106, 0.0));
  font-size: clamp(20px, 2.2vw, 26px);
  text-wrap: balance;
}
.tr-significance-quote::before,
.tr-significance-quote::after {
  content: "";
  display: block;
  height: 1px;
  max-width: 560px;
  margin: 0 auto var(--sp-4);
  background: linear-gradient(90deg, transparent, rgba(236, 214, 162, 0.68), transparent);
}
.tr-significance-quote::after {
  margin: var(--sp-4) auto 0;
}

.tr-journey-track {
  padding-top: var(--sp-4);
}
.tr-journey-stage {
  min-height: 122px;
  border-radius: 8px;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.tr-journey-stage:hover,
.tr-journey-stage:focus-visible {
  background: rgba(216, 179, 106, 0.055);
  transform: translateY(-2px);
}
.tr-journey-stage[aria-selected="true"] .tr-journey-dot {
  border-color: var(--gold-soft);
}
.tr-journey-stage-subtitle {
  display: block;
  max-width: 92px;
  margin-top: -4px;
  color: var(--ink-cross);
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}
.tr-journey-stage[aria-selected="true"] .tr-journey-stage-subtitle {
  color: var(--ink-mute);
}
.tr-diagram,
.tr-milestone,
.tr-fulfill-card,
.tr-related-card {
  border-radius: 10px;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(236, 214, 162, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(13, 39, 34, 0.94), rgba(5, 13, 13, 0.96));
  border-color: rgba(216, 179, 106, 0.46);
}
.tr-diagram {
  /* This later rule (same specificity as .tr-journey-diagram's padding-top/
     bottom override above) wins the cascade on padding-top/bottom, so the
     smaller vertical value belongs here, not there — a plain "clamp(28,44)"
     shorthand here was silently re-inflating the container's top/bottom
     padding back up after the earlier fix. Keep horizontal spacing premium,
     keep vertical tight around the box row. */
  padding: var(--sp-2) clamp(28px, 4vw, 44px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(244, 228, 184, 0.05);
}
.tr-journey-diagram .tr-diagram-node {
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(244, 228, 184, 0.06), rgba(7, 24, 22, 0.92));
  box-shadow: inset 0 1px 0 rgba(244, 228, 184, 0.06);
}
.tr-diagram-node-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  color: inherit;
}
.tr-diagram-edge::before {
  animation: none;
}
@keyframes tr-connector-glow {
  0%, 100% { opacity: 0.44; }
  50% { opacity: 0.82; }
}
.tr-milestone {
  padding: clamp(34px, 4.5vw, 52px);
  border-left: 4px solid var(--gold);
}
.tr-milestone::before {
  left: 34px;
  width: 92px;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold), var(--gold-deep));
}
.tr-milestone-order {
  font-size: clamp(44px, 5vw, 68px);
  margin-right: 2px;
  text-shadow: 0 0 22px rgba(216, 179, 106, 0.18);
}
.tr-milestone-title {
  font-size: clamp(27px, 3.2vw, 38px);
  margin-top: var(--sp-2);
}
.tr-milestone-short {
  max-width: 980px;
  font-size: clamp(17px, 1.05vw, 18.5px);
  line-height: 1.65;
}
.tr-milestone-refs {
  margin-top: var(--sp-4);
}
.tr-ref-cap {
  border-radius: 999px;
  padding: 5px 13px;
  background:
    linear-gradient(180deg, rgba(236, 214, 162, 0.12), rgba(216, 179, 106, 0.035));
  box-shadow: inset 0 1px 0 rgba(244, 228, 184, 0.08);
}
.tr-ref-cap:hover,
.tr-ref-cap:focus-visible {
  color: var(--navy-deep);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32), 0 0 18px rgba(216, 179, 106, 0.2);
}
.tr-milestone-refs div + div .tr-ref-cap {
  font-size: 10px;
  opacity: 0.9;
}
.tr-fulfillment-wrap {
  position: relative;
  background:
    radial-gradient(ellipse 56% 35% at 50% 0%, rgba(236, 214, 162, 0.14), transparent 68%),
    linear-gradient(180deg, rgba(18, 51, 45, 0.98), rgba(5, 13, 13, 0.98));
}
.tr-fulfill-card,
.tr-related-card,
.tr-formation-outcome,
.tr-commentary-block {
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.tr-fulfill-card {
  position: relative;
  min-height: 220px;
}
.tr-fulfill-card::before,
.tr-related-card::before,
.tr-formation-outcome::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto var(--sp-2);
  border: 1px solid rgba(216, 179, 106, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(236, 214, 162, 0.75) 0 18%, transparent 20%),
    radial-gradient(circle, rgba(216, 179, 106, 0.12), transparent 72%);
  box-shadow: 0 0 22px rgba(216, 179, 106, 0.18);
}
.tr-fulfill-card:hover,
.tr-related-card:hover,
.tr-formation-outcome:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(216, 179, 106, 0.22);
}
.tr-formation-outcomes {
  gap: var(--sp-3);
}
.tr-formation-outcome {
  border: 1px solid rgba(216, 179, 106, 0.36);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(236, 214, 162, 0.08), transparent 58%),
    rgba(11, 21, 40, 0.62);
}
.tr-formation-outcome::before {
  margin: 0 0 var(--sp-2);
}
.tr-related-card {
  padding: var(--sp-4);
}
.tr-related-card::before {
  margin-left: 0;
}
.tr-related-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tr-related-card-rel::after {
  content: "  Explore";
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-style: normal;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.tr-commentary-block {
  padding: var(--sp-4);
  border: 1px solid rgba(216, 179, 106, 0.26);
  border-radius: 10px;
  background: rgba(6, 16, 31, 0.42);
}
.tr-commentary-block h3 {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--navy-line);
}
@media (prefers-reduced-motion: no-preference) {
  .tr-content > .tr-section,
  .tr-fulfillment-wrap {
    animation: tr-section-rise 520ms var(--ease) both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
}
@keyframes tr-section-rise {
  from {
    opacity: 0.72;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 720px) {
  .tr-theme-page,
  .tr-content {
    max-width: 100vw;
  }
  .tr-content > .tr-section {
    padding: var(--sp-4) 0;
  }
  .tr-content > .tr-section .tr-section-title {
    margin-bottom: var(--sp-4);
  }
  .tr-definition .tr-section-body p:first-child::first-letter {
    float: none;
    font-size: inherit;
    padding: 0;
  }
  .tr-canonical-question {
    padding: var(--sp-4) var(--sp-3);
  }
  .tr-journey-stage {
    min-height: 64px;
  }
  .tr-journey-stage-subtitle {
    max-width: 100%;
    text-align: center;
    font-size: 12px;
  }
  .tr-milestone {
    padding: var(--sp-4) var(--sp-3);
  }
  .tr-milestone-exposition {
    --milestone-node-center: 37px;
    gap: 12px;
  }
  .tr-milestone-exposition::before {
    top: calc(var(--sp-4) + 20px);
    bottom: 14px;
    left: var(--milestone-node-center);
    opacity: 0.52;
  }
  .tr-milestone-canonical-narrative,
  .tr-milestone-narrative-block {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
  }
  .tr-milestone-narrative-block {
    padding: 16px;
  }
  .tr-milestone-canonical-narrative {
    padding: 16px;
  }
  .tr-milestone-section-medallion {
    width: 40px;
    height: 40px;
    font-size: 11px;
  }
  .tr-milestone-section-medallion svg {
    width: 21px;
    height: 21px;
  }
  .tr-milestone-section-heading {
    gap: 7px 12px;
  }
  .tr-milestone-section-question {
    width: 100%;
  }
  .tr-milestone-section-body,
  .tr-milestone-section-main {
    display: contents;
  }
  .tr-milestone-section-heading {
    grid-column: 2;
    align-self: center;
    margin-bottom: 0;
  }
  .tr-milestone-long,
  .tr-milestone-insight-prose {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  .tr-milestone-narrative-text {
    font-size: clamp(18px, 5vw, 21px);
  }
  .tr-milestone-supporting-text {
    font-size: 16px;
  }
  .tr-study-further {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 13px 0 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--narrative-accent) 32%, transparent);
  }
  .tr-study-further-floating-tooltip {
    max-width: calc(100vw - 24px);
    font-size: 13px;
  }
  .tr-related-witness-head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: var(--sp-3);
  }
  .tr-related-witness-count {
    text-align: center;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--navy-line-strong);
    padding-top: var(--sp-2);
    margin-top: var(--sp-2);
    width: 100%;
  }
  .tr-related-filterbar {
    align-items: stretch;
  }
  .tr-related-filter-label {
    width: 100%;
    padding: 4px var(--sp-1);
  }
  .tr-related-filter {
    flex: 1 1 calc(50% - var(--sp-2));
    min-width: 0;
    padding-inline: 10px;
    font-size: 10px;
  }
  .tr-related-group {
    padding: 14px;
  }
  .tr-related-group-contexts {
    gap: 6px;
  }
  .tr-topic-pill {
    flex: 1 1 calc(50% - 8px);
    justify-content: space-between;
  }
  .tr-topic-intersection-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .tr-topic-intersection-actions {
    width: 100%;
  }
  .tr-topic-clear,
  .tr-topic-open-full {
    flex: 1 1 50%;
    justify-content: center;
  }
}

/* =================================================================
   Reduced motion
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =================================================================
   Print
   ================================================================= */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .tr-progress-bar,
  .tr-topbar,
  .tr-page-nav,
  .tr-sidebar,
  .tr-mode-picker,
  .tr-continue-cta,
  .tr-milestone-more,
  .tr-modal,
  .tr-theme-nav { display: none !important; }

  /* Show everything in print */
  [data-min-mode] { display: block !important; }
  [data-max-mode] { display: block !important; }

  .tr-hero,
  .tr-section,
  .tr-milestone,
  .tr-fulfill-card,
  .tr-key-verse,
  .tr-canonical-question {
    background: white !important;
    color: black !important;
    border-color: #999 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .tr-hero-title,
  .tr-section-title,
  .tr-eyebrow,
  .tr-milestone-order,
  .tr-milestone-title { color: black !important; }
}

/* =================================================================
   Responsive tightening
   ================================================================= */
@media (max-width: 720px) {
  .tr-theme-page { padding: 0 var(--sp-3) var(--sp-5); }
  .tr-hero { padding: var(--sp-5) 0 var(--sp-4); }
  .tr-milestone { padding: var(--sp-3); }
  .tr-hero-facts { gap: var(--sp-3); }
  .tr-fulfillment-wrap {
    margin-left: calc(-1 * clamp(24px, 4vw, 56px));
    margin-right: calc(-1 * clamp(24px, 4vw, 56px));
    padding: var(--sp-5) clamp(24px, 4vw, 56px);
  }
  .tr-modal { width: calc(100vw - 20px); max-height: 90vh; }
  .tr-modal-head {
    padding: 14px 16px;
    background: var(--navy-panel);
    box-shadow: 0 12px 20px rgba(2, 8, 16, 0.28);
    z-index: 3;
  }
  .tr-modal-title {
    font-size: clamp(22px, 7vw, 26px);
    line-height: 1.08;
  }
  .tr-modal-eyebrow {
    max-width: 240px;
    line-height: 1.45;
  }
  .tr-modal-body {
    padding: 16px;
  }
}

/* =================================================================
   Visual Semantic Dimensions & Rich Related Connections
   ================================================================= */
.tr-dimensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.tr-dimension-card {
  background: rgba(212, 175, 55, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 8px;
  padding: var(--sp-4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tr-dimension-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
}
.tr-dimension-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--theme-accent, #D4AF37);
  margin-bottom: var(--sp-2);
  margin-top: 0;
}
.tr-dimension-card-summary {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #a0a0a0;
  margin: 0;
}
#section-dimensions .tr-section-title::after {
  content: "Unifying the distinct theological dimensions of the theme.";
}

/* Rich Related Connections */
.tr-rich-connections {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.tr-connection-card {
  background: rgba(212, 175, 55, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 8px;
  padding: var(--sp-4);
}
.tr-connection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.tr-connection-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: #ffffff;
}
.tr-connection-type {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(212, 175, 55, 0.1);
  color: var(--theme-accent, #D4AF37);
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 600;
}
.tr-connection-body {
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.tr-connection-row {
  line-height: 1.5;
  margin: 0;
}
.tr-connection-row strong {
  color: #ffffff;
}

/* Theological Identity / Canonical Identity Styles */
.tr-section-subtitle-framework {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-mute);
  text-align: center;
  margin-top: -8px;
  margin-bottom: var(--sp-4);
  line-height: 1.4;
}
.tr-god-revealed-block {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ---------- 14. Card frame: layered borders, soft shadow, hero radius ---------- */
.tr-theological-identity-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(216, 179, 106, 0.05), transparent 55%),
    linear-gradient(135deg, rgba(216, 179, 106, 0.035), transparent 55%),
    rgba(4, 11, 20, 0.78);
  border: 1px solid rgba(216, 179, 106, 0.18);
  border-radius: 14px;
  position: relative;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.42),
    0 2px 0 rgba(255, 255, 255, 0.02) inset;
  overflow: hidden;
  animation: tr-identity-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Layer 2 — faint radial gold glow behind the name */
.tr-theological-identity-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 22%, rgba(216, 179, 106, 0.10), transparent 58%);
  pointer-events: none;
}
/* Layer 3 (parchment noise) + Layer 4 (faint cathedral/circular geometry) + inner hairline ring */
.tr-theological-identity-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 11px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, transparent 0 118px, rgba(216, 179, 106, 0.05) 119px, transparent 121px),
    radial-gradient(circle at 50% 8%, transparent 0 150px, rgba(216, 179, 106, 0.03) 151px, transparent 153px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ---------- 1. Hero treatment ---------- */
.tr-identity-card-inner {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 48px) clamp(44px, 7vw, 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 820px;
  margin: 0 auto;
}

/* ---------- 3. Eyebrow label, illuminated-manuscript style ---------- */
.tr-identity-eyebrow {
  align-self: center;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0;
  opacity: 0.9;
  text-indent: 0.42em; /* optical centering to offset trailing letter-spacing */
}
.tr-identity-ornament {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 4px;
  color: rgba(216, 179, 106, 0.55);
  font-size: 0.7rem;
  user-select: none;
}
.tr-identity-ornament::before,
.tr-identity-ornament::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 179, 106, 0.55));
}
.tr-identity-ornament::after {
  background: linear-gradient(90deg, rgba(216, 179, 106, 0.55), transparent);
}

/* ---------- 4. Divine name — dominant, with watermark ---------- */
.tr-identity-name-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  position: relative;
  width: 100%;
}
.tr-identity-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-family: var(--font-display);
  font-size: clamp(9rem, 22vw, 15rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.tr-identity-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.4vw, 5.1rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
  background: linear-gradient(180deg, #fff4d8 26%, #e2b767 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 22px rgba(216, 179, 106, 0.22);
  animation: tr-name-glow 12s ease-in-out infinite;
}
.tr-identity-translation {
  position: relative;
  z-index: 1;
  font-family: var(--font-reading);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  color: var(--gold-soft);
  opacity: 0.85;
  margin: 2px 0 6px;
  text-align: center;
}

/* ---------- 6. Description ---------- */
.tr-identity-description {
  position: relative;
  z-index: 1;
  font-family: var(--font-reading);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.9;
  color: var(--gold-bright);
  text-align: center;
  max-width: 620px;
  margin: 4px auto 14px;
}

/* ---------- 7. Supporting names — premium capsules ---------- */
.tr-identity-supporting-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.tr-supporting-names-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.tr-supporting-name-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-reading);
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(216, 179, 106, 0.22);
  padding: 10px 22px;
  border-radius: 999px;
  cursor: help;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.tr-supporting-name-tag:hover {
  border-color: rgba(216, 179, 106, 0.5);
  box-shadow: 0 0 22px rgba(216, 179, 106, 0.16);
  transform: translateY(-1px);
}
.tr-supporting-name-primary {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
}
.tr-supporting-name-secondary {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--ink-mute);
  opacity: 0.85;
}

/* ---------- 10. Ornamental section divider ---------- */
.tr-identity-attributes-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  padding: var(--sp-4) 0;
  margin-bottom: 8px;
  width: 100%;
}
.tr-identity-attributes-section::before,
.tr-identity-attributes-section::after {
  content: "✦";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: rgba(216, 179, 106, 0.45);
  background: transparent;
  width: 100%;
  text-align: center;
}
.tr-identity-attributes-section::before { top: -1px; }
.tr-identity-attributes-section::after { bottom: -1px; }
.tr-identity-attributes-section::before,
.tr-identity-attributes-section::after {
  border-top: 1px solid rgba(216, 179, 106, 0.16);
  line-height: 0;
}
.tr-identity-attributes-section::before { border-image: linear-gradient(90deg, transparent, rgba(216,179,106,0.35) 50%, transparent) 1; }
.tr-identity-attributes-section::after { border-image: linear-gradient(90deg, transparent, rgba(216,179,106,0.35) 50%, transparent) 1; }

/* ---------- 8. Primary attribute — identity strip ---------- */
.tr-identity-primary-attribute {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tr-attribute-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.9;
}
.tr-attribute-plaque {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(216, 179, 106, 0.55);
  padding: 12px 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(216, 179, 106, 0.1), rgba(216, 179, 106, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -6px 14px rgba(0, 0, 0, 0.25),
    0 0 26px rgba(216, 179, 106, 0.08);
  cursor: help;
}
.tr-attribute-name {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.tr-attribute-category {
  display: block;
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  background: none;
  color: var(--ink-mute);
  padding: 0;
  margin: 0;
}

/* ---------- 9. Supporting attributes — individual chips ---------- */
.tr-identity-supporting-attributes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tr-supporting-attributes-list {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.tr-supporting-attribute {
  font-family: var(--font-reading);
  font-size: 0.86rem;
  color: var(--ink-bright);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(216, 179, 106, 0.22);
  padding: 6px 16px;
  border-radius: 999px;
  cursor: help;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.tr-supporting-attribute:hover {
  transform: translateY(-1px);
  border-color: rgba(216, 179, 106, 0.5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.tr-attribute-divider {
  display: none; /* superseded by individual chip spacing */
}

/* ---------- Scripture witness chips (fallback layout, and shared chip look) ---------- */
.tr-identity-witnesses {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.tr-witnesses-list {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.tr-witness-chip,
.tr-scripture-capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(5, 13, 24, 0.48);
  border: 1px solid rgba(216, 179, 106, 0.32);
  padding: 4px 14px;
  border-radius: 999px;
  color: var(--gold-soft);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}
.tr-witness-chip:hover,
.tr-scripture-capsule:hover {
  border-color: var(--gold);
  background: rgba(216, 179, 106, 0.1);
  box-shadow: 0 0 16px rgba(216, 179, 106, 0.18);
}
.tr-witness-purpose {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--ink-mute);
  border-left: 1px solid rgba(216, 179, 106, 0.3);
  padding-left: 6px;
  margin-left: 2px;
}

/* ---------- 12. Canonical story timeline (decorative) ---------- */
.tr-canonical-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 4px;
  padding: 4px var(--sp-2);
}
.tr-timeline-node {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--ink-bright);
  background: color-mix(in srgb, var(--tr-era-color, var(--gold)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tr-era-color, var(--gold)) 45%, transparent);
  opacity: 0.88;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.tr-timeline-node:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.tr-timeline-arrow {
  color: rgba(216, 179, 106, 0.4);
  font-size: 0.72rem;
}

/* ---------- 11. Editorial summary — study-Bible paragraph with drop cap ---------- */
.tr-identity-editorial-summary {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(216, 179, 106, 0.16);
  border-radius: 10px;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 5vw, 44px);
  margin-top: 4px;
}
.tr-identity-editorial-summary .tr-attribute-label {
  display: block;
  text-align: center;
  margin-bottom: 16px;
}
.tr-identity-editorial-text {
  font-family: var(--font-reading);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 2;
  color: var(--gold-bright);
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  text-wrap: pretty;
}
.tr-identity-editorial-text::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  font-weight: 600;
  float: left;
  line-height: 0.82;
  padding: 0.04em 0.1em 0 0;
  color: var(--gold);
  text-shadow: 0 2px 14px rgba(216, 179, 106, 0.3);
}
.tr-identity-editorial-text .tr-scripture-capsule {
  margin: 0 1px;
}

/* ---------- 15. Micro-animations ---------- */
@keyframes tr-identity-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tr-name-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(216, 179, 106, 0)); }
  50%      { filter: drop-shadow(0 0 18px rgba(216, 179, 106, 0.28)); }
}
@media (prefers-reduced-motion: reduce) {
  .tr-theological-identity-card,
  .tr-identity-title {
    animation: none !important;
  }
}

/* ---------- Fallback layout (themes without an editorialSummary yet) ---------- */
.tr-identity-progression-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-top: 12px;
  width: 100%;
}
.tr-progression-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 154px;
}
.tr-progression-arrow {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 10;
  background: #021814;
}
.tr-progression-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
  opacity: 0.85;
}
.tr-progression-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-bright);
  margin: 0 0 6px 0;
  line-height: 1.25;
}
.tr-progression-title-badge {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(216, 179, 106, 0.16);
  color: var(--gold);
  border: 1px solid rgba(216, 179, 106, 0.3);
  padding: 2px 6px;
  border-radius: 2px;
  margin-bottom: 6px;
}
.tr-progression-summary {
  font-family: var(--font-reading);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-mute);
  margin: 0;
}

@media (max-width: 960px) {
  .tr-identity-progression-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .tr-progression-arrow {
    display: none;
  }
}
@media (max-width: 600px) {
  .tr-identity-card-inner {
    gap: var(--sp-2);
  }
  .tr-identity-watermark {
    display: none;
  }
  .tr-identity-progression-row {
    grid-template-columns: 1fr;
  }
  .tr-progression-card {
    min-height: auto;
  }
  .tr-identity-attributes-section {
    gap: var(--sp-3);
  }
  .tr-supporting-name-tag,
  .tr-supporting-attribute,
  .tr-witness-chip,
  .tr-scripture-capsule {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .tr-timeline-node {
    font-size: 0.6rem;
    padding: 4px 9px;
  }
}