/* =====================================================
   PRE-FLOOD TIMELINE + FAMILY TREE
   ===================================================== */

.timeline-page {
  background: #080a0d;
}

.timeline-intro {
  padding: 150px 0 65px;
  background:
    radial-gradient(circle at 78% 10%, rgba(197, 158, 83, .12), transparent 32%),
    linear-gradient(180deg, #0e1116, #080a0d);
  border-bottom: 1px solid rgba(225, 201, 141, .16);
}

.timeline-intro h1 {
  max-width: 1000px;
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(54px, 7vw, 105px);
  line-height: .94;
  letter-spacing: -.045em;
}

.timeline-lead {
  max-width: 810px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.65;
}

.timeline-notice {
  max-width: 1040px;
  margin-top: 34px;
  padding: 18px 20px;
  border-left: 2px solid var(--gold);
  background: rgba(225, 201, 141, .055);
  color: #c9c4ba;
  line-height: 1.6;
}

.timeline-notice strong {
  color: var(--gold-light);
}

.timeline-workspace {
  padding: 48px 0 88px;
}

.timeline-shell {
  width: min(calc(100% - 96px), 1460px);
  margin-inline: auto;
}

.timeline-toolbar {
  display: flex;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.toolbar-group {
  display: grid;
  gap: 9px;
}

.toolbar-group > label,
.toolbar-group legend {
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.toolbar-group select {
  min-width: 220px;
  padding: 11px 36px 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #0d1014;
  color: var(--text);
}

.filter-fieldset {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  border: 0;
  padding: 0;
  margin: 0;
}

.filter-fieldset legend {
  width: 100%;
}

.filter-fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #bdb8ae;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.filter-fieldset input {
  accent-color: var(--gold);
}

.compact-button {
  min-height: 42px;
  padding: 10px 16px;
  margin-left: auto;
}

.timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 24px;
  margin: 0 0 16px;
  color: #aaa49a;
  font-size: 12px;
}

.timeline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.legend-dot.biblical { background: #d8b86e; }
.legend-dot.tradition { background: #a77c58; transform: rotate(45deg); border-radius: 1px; }
.legend-dot.architecture { background: #7f98a9; border-radius: 1px; }
.legend-dot.inferred { border: 1px solid #8f8b84; background: transparent; }

.timeline-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-left: 190px;
  padding: 0 0 10px;
  color: #d0c8ba;
  font-size: 11px;
  text-align: center;
}

.timeline-scale span:first-child { text-align: left; }
.timeline-scale span:last-child { text-align: right; }
.timeline-scale small { color: #7f7b74; }

.timeline-board {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0e12;
}

.timeline-grid-lines {
  position: absolute;
  inset: 0 0 0 190px;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 25% 100%;
}

.timeline-lane {
  position: relative;
  display: grid;
  grid-template-columns: 190px 1fr;
  min-height: 112px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.timeline-lane:last-of-type {
  border-bottom: 0;
}

.timeline-lane > header {
  position: relative;
  z-index: 2;
  padding: 19px 18px;
  border-right: 1px solid rgba(255,255,255,.075);
  background: #0e1116;
}

.timeline-lane > header p {
  margin: 0 0 5px;
  color: var(--gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.timeline-lane > header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
}

.lane-content {
  position: relative;
  min-width: 0;
}

.genealogy-lane {
  min-height: 390px;
}

.patriarch-bar {
  position: absolute;
  height: 26px;
  border: 1px solid rgba(225, 201, 141, .42);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(203, 165, 88, .58), rgba(203, 165, 88, .17));
  color: #f0eadf;
  font-size: 11px;
  cursor: pointer;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.patriarch-bar:hover,
.patriarch-bar.is-active {
  filter: brightness(1.3);
  transform: translateY(-1px);
  z-index: 5;
}

.patriarch-bar.is-dimmed {
  opacity: .16;
}

.patriarch-label {
  position: absolute;
  left: 7px;
  top: 4px;
  white-space: nowrap;
  text-shadow: 0 1px 5px #000;
}

.event-track {
  min-height: 112px;
}

.timeline-event {
  position: absolute;
  top: 26px;
  min-width: 9px;
  height: 48px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(19, 23, 29, .92);
  color: #e6e0d5;
  font-size: 10px;
  line-height: 1.25;
  cursor: pointer;
  overflow: hidden;
  transition: opacity .2s ease, border-color .2s ease, background .2s ease;
}

.timeline-event:hover,
.timeline-event.is-active {
  z-index: 6;
  overflow: visible;
  min-width: 155px;
  height: auto;
  border-color: var(--gold);
  background: #15191f;
}

.timeline-event.tradition { border-left: 3px solid #a77c58; }
.timeline-event.architecture { border-left: 3px solid #7f98a9; }
.timeline-event.civilization { border-left: 3px solid #777d67; }
.timeline-event.inferred { border-style: dashed; }

.timeline-event strong,
.timeline-event small {
  display: block;
}

.timeline-event small {
  margin-top: 4px;
  color: #9b968d;
}

.timeline-cursor {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(232, 202, 130, .85);
  pointer-events: none;
}

.timeline-cursor span {
  position: sticky;
  top: 8px;
  display: inline-block;
  padding: 5px 8px;
  background: #d3b066;
  color: #111;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.timeline-limitations {
  margin-top: 24px;
  padding: 24px;
  border: 1px dashed rgba(225, 201, 141, .25);
  background: rgba(255,255,255,.018);
}

.timeline-limitations h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 25px;
}

.timeline-limitations p {
  max-width: 1000px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.family-tree-section {
  padding: 88px 0;
  background: #0d1014;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-heading {
  max-width: 800px;
  margin-bottom: 42px;
}

.section-heading h2 {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 72px);
}

.section-heading p:last-child {
  color: var(--muted);
  line-height: 1.65;
}

.family-tree-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 42px;
  align-items: start;
}

.family-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.family-node {
  position: relative;
  width: min(100%, 560px);
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  background: #11151a;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.family-node:hover,
.family-node.is-active {
  border-color: var(--gold);
  background: #171b20;
  transform: translateY(-2px);
}

.family-node strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--serif);
  font-size: 24px;
}

.family-node span {
  color: #9e998f;
  font-size: 12px;
}

.family-connector {
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--gold), rgba(225,201,141,.15));
}

.family-event-flag {
  width: min(100%, 560px);
  margin: 10px 0;
  padding: 12px 16px;
  border-left: 3px solid #a77c58;
  background: rgba(167, 124, 88, .09);
  color: #c8b4a1;
  font-size: 12px;
  line-height: 1.55;
}

.person-profile {
  position: sticky;
  top: 112px;
  min-height: 330px;
  padding: 26px;
  border: 1px solid var(--line-strong);
  background: #11151a;
}

.profile-kicker {
  margin: 0 0 7px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.person-profile h3 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: 38px;
}

.person-profile dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 9px 12px;
  margin: 0 0 22px;
}

.person-profile dt {
  color: #8f8a82;
  font-size: 12px;
}

.person-profile dd {
  margin: 0;
  color: #ddd7cc;
  font-size: 13px;
}

.profile-note {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: #b8b2a8;
  line-height: 1.6;
}

.source-method {
  padding: 88px 0;
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.source-grid article,
.reference-panel {
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.source-grid h2,
.reference-panel h2 {
  margin-bottom: 13px;
  font-family: var(--serif);
  font-size: 31px;
}

.source-grid p:last-child,
.reference-panel li {
  color: var(--muted);
  line-height: 1.65;
}

.reference-panel {
  margin-top: 26px;
}

.reference-panel ul {
  margin: 0;
  padding-left: 20px;
}

.reference-panel li + li {
  margin-top: 7px;
}

[hidden] {
  display: none !important;
}

@media (max-width: 1000px) {
  .timeline-scale {
    margin-left: 150px;
  }

  .timeline-grid-lines {
    left: 150px;
  }

  .timeline-lane {
    grid-template-columns: 150px 1fr;
  }

  .family-tree-layout {
    grid-template-columns: 1fr;
  }

  .person-profile {
    position: static;
  }
}

@media (max-width: 720px) {
  .timeline-intro {
    padding-top: 120px;
  }

  .timeline-shell {
    width: min(calc(100% - 20px), 1500px);
  }

  .timeline-toolbar {
    align-items: stretch;
  }

  .compact-button {
    margin-left: 0;
  }

  .timeline-scale {
    margin-left: 105px;
    font-size: 9px;
  }

  .timeline-lane {
    grid-template-columns: 105px 1fr;
  }

  .timeline-lane > header {
    padding: 14px 10px;
  }

  .timeline-lane > header h2 {
    font-size: 16px;
  }

  .timeline-grid-lines {
    left: 105px;
  }

  .source-grid {
    grid-template-columns: 1fr;
  }
}


/* World Synchronization identity */
.sync-title {
  color: var(--gold-light);
}

.timeline-page .site-header {
  position: fixed;
}

.timeline-page .site-footer {
  border-top: 1px solid var(--line);
}


/* =====================================================
   MUSEUM RESEARCH ROOM — SPACING & POLISH V2
   ===================================================== */

.timeline-page .section-shell {
  width: min(calc(100% - 96px), 1320px);
  margin-inline: auto;
}

.timeline-page .timeline-shell {
  width: min(calc(100% - 96px), 1460px);
  margin-inline: auto;
}

.timeline-intro .section-shell {
  padding-block: 18px 10px;
}

.timeline-intro .eyebrow {
  margin-bottom: 18px;
}

.timeline-intro h1 {
  max-width: 1120px;
}

.timeline-lead {
  max-width: 900px;
}

.timeline-notice {
  max-width: 1120px;
  margin-top: 38px;
  padding: 22px 26px;
}

.timeline-workspace {
  padding: 64px 0 104px;
}

.timeline-toolbar {
  padding: 24px 26px;
  margin-bottom: 28px;
  border-radius: 4px;
}

.timeline-legend {
  margin: 0 0 20px;
  padding-inline: 2px;
}

.timeline-scale {
  padding-bottom: 14px;
}

.timeline-board {
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.timeline-lane > header {
  padding: 22px 20px;
}

.timeline-limitations {
  margin-top: 30px;
  padding: 28px 30px;
}

.family-tree-section {
  padding: 104px 0;
}

.family-tree-section .section-shell,
.source-method .section-shell {
  width: min(calc(100% - 96px), 1320px);
  margin-inline: auto;
}

.section-heading {
  max-width: 860px;
  margin-bottom: 50px;
}

.family-tree-layout {
  gap: 54px;
}

.family-node {
  padding: 18px 24px;
}

.person-profile {
  padding: 30px;
}

.source-method {
  padding: 104px 0 116px;
}

.source-grid {
  gap: 32px;
}

.source-grid article,
.reference-panel {
  padding: 32px 34px;
}

.reference-panel {
  margin-top: 32px;
}

.site-footer .footer-inner {
  width: min(calc(100% - 96px), 1320px);
  margin-inline: auto;
}

/* Create a deliberate inner reading column in text-heavy areas */
.timeline-intro .section-shell > *,
.timeline-limitations > *,
.source-grid article > *,
.reference-panel > * {
  position: relative;
}

/* Tablet */
@media (max-width: 1000px) {
  .timeline-page .section-shell,
  .timeline-page .timeline-shell,
  .family-tree-section .section-shell,
  .source-method .section-shell,
  .site-footer .footer-inner {
    width: min(calc(100% - 56px), 1320px);
  }

  .timeline-toolbar {
    padding: 22px;
  }

  .family-tree-layout {
    gap: 36px;
  }
}

/* Mobile */
@media (max-width: 720px) {
  .timeline-page .section-shell,
  .timeline-page .timeline-shell,
  .family-tree-section .section-shell,
  .source-method .section-shell,
  .site-footer .footer-inner {
    width: calc(100% - 32px);
  }

  .timeline-intro {
    padding-top: 116px;
    padding-bottom: 52px;
  }

  .timeline-intro h1 {
    font-size: clamp(46px, 14vw, 68px);
  }

  .timeline-notice {
    padding: 18px 20px;
  }

  .timeline-workspace {
    padding: 42px 0 76px;
  }

  .timeline-toolbar {
    padding: 18px;
  }

  .timeline-limitations,
  .source-grid article,
  .reference-panel,
  .person-profile {
    padding: 22px;
  }

  .family-tree-section,
  .source-method {
    padding: 76px 0;
  }
}

/* Very small screens */
@media (max-width: 420px) {
  .timeline-page .section-shell,
  .timeline-page .timeline-shell,
  .family-tree-section .section-shell,
  .source-method .section-shell,
  .site-footer .footer-inner {
    width: calc(100% - 24px);
  }
}


/* =====================================================
   ILLUMINATED GENEALOGY V3
   ===================================================== */

.illuminated-genealogy-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 28%, rgba(198, 155, 77, .08), transparent 28%),
    radial-gradient(circle at 86% 72%, rgba(116, 88, 48, .08), transparent 30%),
    linear-gradient(180deg, #0c0f13, #0a0c10);
}

.illuminated-genealogy-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}

.genealogy-heading {
  position: relative;
  z-index: 2;
}

.genealogy-stage {
  position: relative;
  padding: 42px;
  border: 1px solid rgba(220, 184, 105, .22);
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 28%),
    rgba(10, 13, 17, .82);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 34px 90px rgba(0,0,0,.34);
}

.genealogy-stage::before,
.genealogy-stage::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  border-color: rgba(220, 184, 105, .48);
  pointer-events: none;
}

.genealogy-stage::before {
  top: 14px;
  left: 14px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.genealogy-stage::after {
  right: 14px;
  bottom: 14px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.genealogy-ornament {
  position: absolute;
  top: 86px;
  bottom: 86px;
  width: 1px;
  background: linear-gradient(transparent, rgba(213, 176, 92, .34), transparent);
}

.genealogy-ornament::before,
.genealogy-ornament::after {
  content: "✦";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(213, 176, 92, .52);
  font-size: 11px;
}

.genealogy-ornament::before { top: 18%; }
.genealogy-ornament::after { bottom: 18%; }

.genealogy-ornament-left { left: 22px; }
.genealogy-ornament-right { right: 22px; }

.genealogy-scroll {
  min-width: 0;
}

.genealogy-crown {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  align-items: center;
  gap: 18px;
  width: min(100%, 640px);
  margin: 0 auto 34px;
  color: #caae70;
}

.genealogy-crown span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(218, 181, 98, .6));
}

.genealogy-crown span:last-child {
  background: linear-gradient(90deg, rgba(218, 181, 98, .6), transparent);
}

.genealogy-crown i {
  font-family: var(--serif);
  font-size: 18px;
  font-style: normal;
  letter-spacing: .08em;
}

.illuminated-tree {
  position: relative;
  width: min(100%, 700px);
  margin-inline: auto;
}

.genealogy-generation {
  width: 100%;
}

.illuminated-node {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 82px;
  padding: 16px 20px;
  border: 1px solid rgba(213, 176, 92, .26);
  background:
    linear-gradient(90deg, rgba(214, 174, 84, .07), transparent 42%),
    #101318;
  overflow: hidden;
  isolation: isolate;
}

.illuminated-node::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(circle at 14% 50%, rgba(235, 194, 102, .26), transparent 30%),
    linear-gradient(90deg, rgba(225, 183, 87, .12), transparent);
  transition: opacity .35s ease;
}

.illuminated-node:hover::before,
.illuminated-node.is-active::before,
.illuminated-node.is-ancestor-path::before {
  opacity: 1;
}

.illuminated-node:hover,
.illuminated-node.is-active {
  border-color: rgba(238, 203, 124, .82);
  box-shadow:
    0 0 0 1px rgba(238, 203, 124, .13),
    0 0 34px rgba(220, 173, 70, .13);
}

.illuminated-node.is-active {
  transform: translateY(-2px) scale(1.008);
}

.illuminated-node.is-ancestor-path {
  border-color: rgba(203, 165, 85, .4);
}

.illuminated-node.is-descendant-dim {
  opacity: .32;
  filter: saturate(.55);
}

.node-halo {
  position: absolute;
  left: 26px;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  border: 1px solid rgba(226, 188, 99, .28);
  border-radius: 50%;
  box-shadow: inset 0 0 16px rgba(226, 188, 99, .07);
}

.node-number {
  position: relative;
  z-index: 2;
  color: #d7b66c;
  font-family: var(--serif);
  font-size: 17px;
  text-align: center;
}

.node-copy {
  min-width: 0;
}

.node-copy strong {
  margin: 0 0 3px;
  color: #eee7da;
  font-size: 28px;
  line-height: 1;
}

.node-copy span {
  color: #8f8a80;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.node-years {
  color: #a79d8b;
  font-size: 12px;
  white-space: nowrap;
}

.illuminated-connector {
  position: relative;
  width: 1px;
  height: 34px;
  margin-inline: auto;
  background: rgba(218, 180, 96, .18);
  transition: background .35s ease, box-shadow .35s ease;
}

.illuminated-connector span {
  position: absolute;
  inset: 0;
  background: linear-gradient(#d8b765, #8d6b2f);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s ease;
}

.illuminated-connector.is-lit {
  box-shadow: 0 0 18px rgba(218, 180, 96, .32);
}

.illuminated-connector.is-lit span {
  transform: scaleY(1);
}

.illuminated-event-flag,
.flood-boundary-flag {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: center;
  width: min(100%, 580px);
  margin: 14px auto;
  padding: 14px 18px;
  border: 1px solid rgba(161, 116, 77, .28);
  border-left: 3px solid #9e6c49;
  background: rgba(131, 83, 49, .08);
  text-align: left;
}

.illuminated-event-flag {
  cursor: pointer;
}

.illuminated-event-flag:hover,
.illuminated-event-flag.is-active {
  border-color: rgba(193, 140, 91, .68);
  background: rgba(143, 91, 53, .14);
}

.flood-boundary-flag {
  border-color: rgba(96, 128, 151, .28);
  border-left-color: #6f8ea4;
  background: rgba(71, 102, 124, .08);
}

.event-symbol {
  color: #c08a5d;
  font-size: 17px;
  text-align: center;
}

.flood-boundary-flag .event-symbol {
  color: #7f9fb6;
}

.illuminated-event-flag strong,
.flood-boundary-flag strong {
  display: block;
  color: #d9ccbb;
  font-family: var(--serif);
  font-size: 18px;
}

.illuminated-event-flag small,
.flood-boundary-flag small {
  display: block;
  margin-top: 2px;
  color: #908b82;
  line-height: 1.45;
}

.genealogy-key {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 34px;
  color: #8c877e;
  font-size: 11px;
}

.genealogy-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.key-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
}

.biblical-key {
  border-radius: 50%;
  background: #d7b568;
}

.tradition-key {
  transform: rotate(45deg);
  background: #a16f4b;
}

.flood-key {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #7795aa;
}

.illuminated-profile {
  position: sticky;
  top: 112px;
  overflow: hidden;
  min-height: 430px;
  padding: 34px;
  border-color: rgba(215, 176, 89, .3);
  background:
    radial-gradient(circle at 80% 12%, rgba(220, 176, 83, .1), transparent 28%),
    linear-gradient(180deg, #13171c, #0f1216);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}

.illuminated-profile::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(213, 176, 92, .08);
  pointer-events: none;
}

.profile-medallion {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  border: 1px solid rgba(225, 187, 96, .5);
  border-radius: 50%;
  color: #d8b76b;
  font-family: var(--serif);
  font-size: 26px;
  background: radial-gradient(circle, rgba(225, 187, 96, .12), transparent 68%);
  box-shadow:
    inset 0 0 0 6px rgba(225, 187, 96, .025),
    0 0 24px rgba(225, 187, 96, .08);
}

.illuminated-profile h3 {
  font-size: 44px;
}

.illuminated-profile dl {
  grid-template-columns: 104px 1fr;
}

.profile-sigil {
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(213, 176, 92, .08);
  border-radius: 50%;
}

.profile-sigil::before,
.profile-sigil::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(213, 176, 92, .06);
  transform: rotate(45deg);
}

.profile-sigil::after {
  inset: 36px;
  transform: rotate(0);
  border-radius: 50%;
}

@media (max-width: 1000px) {
  .genealogy-stage {
    padding: 32px;
  }

  .illuminated-profile {
    position: static;
  }
}

@media (max-width: 720px) {
  .genealogy-stage {
    padding: 24px 16px;
  }

  .genealogy-ornament {
    display: none;
  }

  .illuminated-node {
    grid-template-columns: 42px 1fr;
    gap: 12px;
    padding: 15px 14px;
  }

  .node-years {
    grid-column: 2;
  }

  .node-copy strong {
    font-size: 24px;
  }

  .illuminated-profile {
    padding: 28px 24px;
  }
}


/* =====================================================
   STICKY DESCENDANT PROFILE PANEL V4
   Keeps the museum record visible while scrolling
   through Adam-to-Noah genealogy.
   ===================================================== */

.family-tree-layout {
  align-items: flex-start;
}

.genealogy-scroll {
  min-width: 0;
}

.illuminated-profile {
  position: sticky;
  top: 92px;
  align-self: flex-start;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(213, 176, 92, .32) transparent;
}

.illuminated-profile::-webkit-scrollbar {
  width: 7px;
}

.illuminated-profile::-webkit-scrollbar-track {
  background: transparent;
}

.illuminated-profile::-webkit-scrollbar-thumb {
  background: rgba(213, 176, 92, .28);
  border-radius: 999px;
}

.illuminated-profile::-webkit-scrollbar-thumb:hover {
  background: rgba(213, 176, 92, .46);
}

/* Prevent ancestor containers from disabling sticky positioning */
.family-tree-section,
.family-tree-section .section-shell,
.genealogy-stage,
.family-tree-layout {
  overflow: visible;
}

/* Tablet: retain floating profile when space allows */
@media (max-width: 1000px) and (min-width: 821px) {
  .family-tree-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  }

  .illuminated-profile {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
  }
}

/* Stacked mobile layout should scroll naturally */
@media (max-width: 820px) {
  .illuminated-profile {
    position: static;
    max-height: none;
    overflow: visible;
  }
}


/* =====================================================
   MULTI-LENS TIMELINE ENGINE V5
   ===================================================== */

.timeline-lens-gallery {
  margin-bottom: 30px;
  padding: 34px;
  border: 1px solid rgba(214, 177, 93, .2);
  background:
    radial-gradient(circle at 8% 0%, rgba(214, 177, 93, .075), transparent 26%),
    rgba(12, 15, 19, .82);
  box-shadow: 0 22px 64px rgba(0, 0, 0, .22);
}

.lens-gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .7fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 28px;
}

.lens-gallery-heading h2 {
  margin: 5px 0 0;
  font-size: clamp(30px, 4vw, 50px);
}

.lens-gallery-heading > p {
  max-width: 580px;
  margin: 0;
  color: #99938a;
  line-height: 1.7;
}

.lens-plaque-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.lens-plaque {
  position: relative;
  min-height: 132px;
  padding: 20px 17px 18px;
  border: 1px solid rgba(213, 176, 92, .18);
  background:
    linear-gradient(145deg, rgba(255,255,255,.022), transparent 55%),
    #101318;
  text-align: left;
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.lens-plaque::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #d7b768, transparent);
  transition: transform .32s ease;
}

.lens-plaque:hover,
.lens-plaque.is-active {
  transform: translateY(-4px);
  border-color: rgba(226, 190, 104, .66);
  background:
    radial-gradient(circle at 16% 12%, rgba(223, 182, 87, .12), transparent 42%),
    #12161b;
  box-shadow: 0 15px 34px rgba(0,0,0,.25), 0 0 25px rgba(214,174,79,.06);
}

.lens-plaque.is-active::after {
  transform: scaleX(1);
}

.lens-index {
  display: block;
  margin-bottom: 18px;
  color: #7c725f;
  font-size: 10px;
  letter-spacing: .2em;
}

.lens-plaque strong {
  display: block;
  color: #e7dfd0;
  font-family: var(--serif);
  font-size: clamp(19px, 1.65vw, 26px);
  font-weight: 600;
  line-height: 1;
}

.lens-plaque small {
  display: block;
  margin-top: 8px;
  color: #878279;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lens-context {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 18px;
  padding: 22px 24px;
  border-left: 2px solid rgba(215, 181, 101, .7);
  background: rgba(215, 181, 101, .035);
  transition: opacity .18s ease, transform .18s ease;
}

.lens-context.is-changing {
  opacity: 0;
  transform: translateY(5px);
}

.lens-context-number {
  color: #c7a85e;
  font-family: var(--serif);
  font-size: 43px;
  line-height: 1;
  text-align: center;
}

.lens-context p { margin: 0; }

#lens-context-kicker {
  color: #b99e62;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lens-context h3 {
  margin: 3px 0 5px;
  color: #e8e0d2;
  font-size: 24px;
}

#lens-context-copy {
  color: #918b82;
  line-height: 1.55;
}

.timeline-board.lens-transition {
  animation: lensReveal .58s ease both;
}

@keyframes lensReveal {
  0% { opacity: .28; transform: translateY(7px); }
  100% { opacity: 1; transform: translateY(0); }
}

.timeline-lane[hidden] {
  display: none !important;
}

.migration-lane .timeline-event {
  border-color: rgba(117, 145, 134, .5);
  background: linear-gradient(90deg, rgba(91, 124, 110, .42), rgba(61, 82, 76, .24));
}

.timeline-event.migration.inferred {
  border-style: dashed;
}

.timeline-event.migration strong {
  color: #d4ddd8;
}

/* Subtle internal scrollbar: almost invisible until interaction */
.illuminated-profile {
  scrollbar-color: rgba(188, 156, 88, .12) transparent;
}

.illuminated-profile:hover {
  scrollbar-color: rgba(188, 156, 88, .3) transparent;
}

.illuminated-profile::-webkit-scrollbar {
  width: 7px;
}

.illuminated-profile::-webkit-scrollbar-thumb {
  background: rgba(188, 156, 88, .08);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.illuminated-profile:hover::-webkit-scrollbar-thumb {
  background: rgba(188, 156, 88, .28);
  background-clip: padding-box;
}

.illuminated-profile::-webkit-scrollbar-thumb:hover {
  background: rgba(188, 156, 88, .42);
  background-clip: padding-box;
}

@media (max-width: 1100px) {
  .lens-plaque-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .timeline-lens-gallery {
    padding: 25px 18px;
  }

  .lens-gallery-heading {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lens-plaque-grid {
    display: flex;
    overflow-x: auto;
    padding: 2px 2px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .lens-plaque-grid::-webkit-scrollbar {
    display: none;
  }

  .lens-plaque {
    flex: 0 0 180px;
    scroll-snap-align: start;
  }

  .lens-context {
    grid-template-columns: 48px 1fr;
    padding: 19px 17px;
  }

  .lens-context-number {
    font-size: 32px;
  }
}


/* =====================================================
   STICKY CHRONOLOGY RULER V6
   ===================================================== */

.timeline-scale-wrap {
  position: sticky;
  top: 0;
  z-index: 45;
  margin-bottom: 0;
  padding-top: 12px;
  background: rgba(9, 12, 16, .97);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

.timeline-scale-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 2px 11px;
  border-bottom: 1px solid rgba(213, 176, 92, .14);
}

.timeline-scale-label strong {
  color: #d9c38c;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .025em;
}

.timeline-scale-label span {
  color: #7f7a72;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.timeline-scale-wrap .timeline-scale {
  margin-bottom: 0;
  padding-top: 12px;
  padding-bottom: 18px;
  background: rgba(9, 12, 16, .97);
}

.timeline-scale-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(rgba(9, 12, 16, .58), transparent);
}

@media (max-width: 760px) {
  .timeline-scale-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .timeline-scale-wrap::-webkit-scrollbar {
    display: none;
  }

  .timeline-scale-label {
    min-width: 720px;
    display: block;
  }

  .timeline-scale-label span {
    display: block;
    margin-top: 4px;
  }

  .timeline-scale-wrap .timeline-scale {
    min-width: 720px;
  }
}

/* =====================================================
   GALLERY RESTORATION NO. 1 — MUSEUM LIGHTING V7
   Warmer, brighter and more readable while preserving
   the established timeline and genealogy architecture.
   ===================================================== */

.timeline-page {
  --museum-bg: #20242a;
  --museum-bg-deep: #191d22;
  --museum-surface: #2a3037;
  --museum-surface-raised: #323941;
  --museum-surface-soft: #252b31;
  --museum-ivory: #f2eadc;
  --museum-text: #ddd6ca;
  --museum-muted: #b8b1a6;
  --museum-soft: #989188;
  --museum-gold: #d6b56d;
  --museum-gold-light: #ead395;
  --museum-bronze: #aa8053;
  --museum-line: rgba(232, 211, 163, .18);
  --museum-line-strong: rgba(232, 211, 163, .32);

  background:
    radial-gradient(circle at 16% 12%, rgba(210, 174, 102, .07), transparent 28%),
    radial-gradient(circle at 84% 48%, rgba(135, 154, 166, .055), transparent 30%),
    linear-gradient(180deg, #23282e 0%, var(--museum-bg) 48%, #1d2227 100%);
  color: var(--museum-text);
}

/* Very subtle limestone/slate atmosphere */
.timeline-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .23;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.012), transparent 35%),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.012) 0,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 5px
    );
}

.timeline-page .site-header {
  background: rgba(24, 28, 33, .92);
  border-bottom-color: rgba(230, 204, 144, .2);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
}

.timeline-page .primary-nav a {
  color: #d8d2c8;
}

.timeline-page .primary-nav a:hover,
.timeline-page .primary-nav a[aria-current="page"] {
  color: var(--museum-gold-light);
}

/* Entrance / title */
.timeline-intro {
  padding-top: 154px;
  padding-bottom: 72px;
  background:
    radial-gradient(circle at 80% 10%, rgba(220, 183, 106, .19), transparent 34%),
    linear-gradient(180deg, #30363d 0%, #272d33 58%, #23282e 100%);
  border-bottom-color: rgba(229, 204, 148, .22);
}

.timeline-intro .eyebrow,
.timeline-page .eyebrow {
  color: var(--museum-gold-light);
}

.timeline-intro h1,
.timeline-page h1,
.timeline-page h2,
.timeline-page h3 {
  color: var(--museum-ivory);
}

.timeline-lead {
  color: #d1cabf;
}

.timeline-notice {
  border-left-color: var(--museum-gold);
  background:
    linear-gradient(90deg, rgba(221, 185, 104, .12), rgba(221, 185, 104, .035));
  color: #d4cdc1;
  box-shadow: inset 0 0 0 1px rgba(229, 205, 151, .055);
}

.timeline-notice strong {
  color: var(--museum-gold-light);
}

/* Horizontal museum threshold */
.museum-threshold {
  padding: 0;
  background: #23282e;
}

.museum-threshold .section-shell {
  width: min(calc(100% - 96px), 1320px);
  margin-inline: auto;
}

.threshold-frame {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 88px;
  gap: 30px;
  align-items: center;
  min-height: 164px;
  padding: 30px 38px;
  border: 1px solid var(--museum-line);
  border-top-color: rgba(235, 210, 153, .34);
  background:
    radial-gradient(circle at 86% 50%, rgba(221, 184, 99, .13), transparent 27%),
    linear-gradient(105deg, #343b43, #2b3239 58%, #303840);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 22px 54px rgba(0,0,0,.16);
}

.threshold-number {
  color: #c8a96a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.threshold-frame p {
  margin: 0 0 5px;
  color: #aaa399;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.threshold-frame h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 47px);
  line-height: 1;
}

.threshold-mark {
  justify-self: end;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(226, 190, 104, .45);
  transform: rotate(45deg);
  box-shadow:
    inset 0 0 0 10px rgba(226, 190, 104, .025),
    0 0 26px rgba(226, 190, 104, .08);
}

/* Main gallery surfaces */
.timeline-workspace {
  background:
    linear-gradient(180deg, rgba(255,255,255,.016), transparent 18%),
    var(--museum-bg);
}

.timeline-lens-gallery {
  border-color: var(--museum-line);
  background:
    radial-gradient(circle at 8% 0%, rgba(214, 177, 93, .13), transparent 28%),
    linear-gradient(145deg, #343b43, #2b3138);
  box-shadow: 0 22px 54px rgba(0,0,0,.18);
}

.lens-gallery-heading > p,
#lens-context-copy {
  color: var(--museum-muted);
}

.lens-plaque {
  border-color: var(--museum-line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 58%),
    #343b43;
}

.lens-plaque:hover,
.lens-plaque.is-active {
  border-color: rgba(234, 204, 135, .68);
  background:
    radial-gradient(circle at 16% 12%, rgba(223, 182, 87, .18), transparent 44%),
    #3a424b;
  box-shadow: 0 14px 30px rgba(0,0,0,.18), 0 0 24px rgba(214,174,79,.08);
}

.lens-plaque strong {
  color: var(--museum-ivory);
}

.lens-plaque small,
.lens-index {
  color: #b5ada1;
}

.lens-context {
  border-left-color: var(--museum-gold);
  background: rgba(220, 184, 103, .08);
}

#lens-context-kicker,
.lens-context-number {
  color: var(--museum-gold-light);
}

.timeline-toolbar {
  border-color: var(--museum-line);
  background: var(--museum-surface);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.toolbar-group > label,
.toolbar-group legend {
  color: var(--museum-gold-light);
}

.toolbar-group select {
  border-color: var(--museum-line-strong);
  background: #39414a;
  color: var(--museum-ivory);
}

.filter-fieldset label,
.timeline-legend {
  color: #c4bdb2;
}

.timeline-limitations,
.source-grid article,
.reference-panel {
  border-color: var(--museum-line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.024), transparent 55%),
    var(--museum-surface);
}

/* Sticky ruler — brighter and easier to read */
.timeline-scale-wrap {
  top: 72px;
  padding: 12px 18px 0;
  border: 1px solid rgba(231, 206, 151, .2);
  background: rgba(45, 52, 59, .97);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
}

.timeline-scale-label {
  border-bottom-color: rgba(232, 207, 150, .23);
}

.timeline-scale-label strong {
  color: var(--museum-gold-light);
  font-size: 19px;
}

.timeline-scale-label span {
  color: #bbb3a7;
}

.timeline-scale-wrap .timeline-scale {
  background: transparent;
  color: #f0e8da;
  font-size: 12px;
}

.timeline-scale small {
  color: #c7beb0;
  font-size: 10px;
}

.timeline-scale-wrap::after {
  background: linear-gradient(rgba(38, 44, 50, .55), transparent);
}

/* Timeline installation */
.timeline-board {
  border-color: rgba(230, 207, 158, .23);
  background: #293038;
  box-shadow: 0 24px 58px rgba(0,0,0,.2);
}

.timeline-grid-lines {
  background-image: linear-gradient(to right, rgba(238,224,194,.1) 1px, transparent 1px);
}

.timeline-lane {
  border-bottom-color: rgba(239,224,193,.11);
}

.timeline-lane > header {
  border-right-color: rgba(239,224,193,.12);
  background:
    linear-gradient(105deg, #39414a, #343b43);
}

.timeline-lane > header p {
  color: var(--museum-gold-light);
}

.timeline-lane > header h2 {
  color: #f1e9db;
}

.patriarch-bar {
  border-color: rgba(235, 207, 141, .62);
  background: linear-gradient(90deg, rgba(207, 165, 82, .78), rgba(181, 139, 67, .35));
  color: #fff8e9;
  box-shadow: 0 3px 12px rgba(0,0,0,.11);
}

.timeline-event {
  border-color: rgba(235,224,204,.28);
  background: rgba(55, 63, 72, .96);
  color: #f1eadf;
}

.timeline-event:hover,
.timeline-event.is-active {
  border-color: var(--museum-gold-light);
  background: #424b55;
}

.timeline-event small {
  color: #c1b9ad;
}

/* Illuminated genealogy — museum lit, not black */
.illuminated-genealogy-section {
  background:
    radial-gradient(circle at 15% 28%, rgba(206, 167, 88, .13), transparent 30%),
    radial-gradient(circle at 86% 72%, rgba(116, 142, 156, .08), transparent 32%),
    linear-gradient(180deg, #2b3239, #252b31);
}

.genealogy-stage {
  border-color: rgba(225, 194, 125, .34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 30%),
    #313840;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 28px 68px rgba(0,0,0,.18);
}

.illuminated-node {
  border-color: rgba(223, 190, 117, .35);
  background:
    linear-gradient(90deg, rgba(214, 174, 84, .12), transparent 44%),
    #39414a;
}

.illuminated-node:hover,
.illuminated-node.is-active {
  border-color: rgba(244, 214, 145, .9);
  background-color: #414a54;
}

.node-copy strong {
  color: #f3ebdd;
}

.node-copy span,
.node-years,
.genealogy-key {
  color: #bcb4a9;
}

/* Exhibit Record — brighter display-case treatment */
.illuminated-profile {
  border: 1px solid rgba(232, 200, 129, .46);
  background:
    radial-gradient(circle at 80% 12%, rgba(229, 190, 103, .18), transparent 30%),
    linear-gradient(180deg, #414a53, #343c44);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 24px 56px rgba(0,0,0,.19);
}

.illuminated-profile::before {
  border-color: rgba(236, 207, 145, .13);
}

.profile-kicker {
  color: var(--museum-gold-light);
}

.illuminated-profile h3 {
  color: #fff4e1;
}

.person-profile dt {
  color: #c2b9ab;
}

.person-profile dd,
.profile-note,
.illuminated-profile p {
  color: #e0d8cc;
}

.profile-note {
  border-top-color: rgba(234, 211, 164, .2);
}

.profile-medallion {
  border-color: rgba(238, 204, 128, .72);
  color: #f0cf82;
  background: radial-gradient(circle, rgba(225, 187, 96, .2), transparent 68%);
}

.illuminated-profile {
  scrollbar-color: rgba(213, 176, 92, .12) transparent;
}

.illuminated-profile:hover {
  scrollbar-color: rgba(213, 176, 92, .32) transparent;
}

.illuminated-profile::-webkit-scrollbar-thumb {
  background: rgba(213, 176, 92, .08);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.illuminated-profile:hover::-webkit-scrollbar-thumb {
  background: rgba(213, 176, 92, .3);
  background-clip: padding-box;
}

/* Source section and footer */
.source-method {
  background: #23292f;
}

.source-grid p:last-child,
.reference-panel li,
.timeline-limitations p,
.section-heading p:last-child {
  color: #c5bdb2;
}

.timeline-page .site-footer {
  background: #1c2126;
  border-top-color: rgba(230, 204, 145, .2);
}

/* Buttons */
.timeline-page .button-secondary {
  border-color: rgba(232, 204, 141, .48);
  background: rgba(255,255,255,.035);
  color: #eee5d7;
}

.timeline-page .button-secondary:hover {
  border-color: var(--museum-gold-light);
  background: rgba(220, 181, 94, .13);
}

/* Responsive restoration */
@media (max-width: 1000px) {
  .timeline-scale-wrap {
    top: 68px;
  }

  .threshold-frame {
    grid-template-columns: 150px 1fr 60px;
  }
}

@media (max-width: 720px) {
  .museum-threshold .section-shell {
    width: calc(100% - 32px);
  }

  .threshold-frame {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 26px 22px;
  }

  .threshold-mark {
    display: none;
  }

  .timeline-scale-wrap {
    top: 62px;
  }
}

@media (max-width: 420px) {
  .museum-threshold .section-shell {
    width: calc(100% - 24px);
  }
}

/* =====================================================
   DEDICATED EVENT LANES — VERSION 10
   Long historical spans and point events no longer
   overlap or compete for clicks.
   ===================================================== */

.timeline-interaction-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: -4px 0 18px;
  padding: 13px 16px;
  border-left: 2px solid rgba(214, 181, 101, .48);
  background: rgba(214, 181, 101, .045);
  color: #bdb5aa;
  font-size: 11px;
  line-height: 1.5;
}

.timeline-interaction-note strong {
  color: #ead395;
  font-weight: 600;
}

.span-lane {
  min-height: 126px;
}

.point-lane {
  min-height: 132px;
}

.span-lane .event-track,
.point-lane .event-track {
  min-height: inherit;
}

/* Range bands stay within their own lane */
.timeline-event.event-span {
  top: 30px;
  height: 58px;
  min-width: 52px;
  padding: 10px 14px;
  overflow: hidden;
  border-left-width: 4px;
}

.timeline-event.event-span:hover,
.timeline-event.event-span.is-active {
  min-width: 52px;
  height: 58px;
  overflow: visible;
  z-index: 8;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.2);
}

.timeline-event.event-span strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-event.event-span:hover strong,
.timeline-event.event-span.is-active strong {
  overflow: visible;
}

/* Point events use diamond markers with labels placed beside them */
.timeline-event.event-point {
  top: 24px;
  width: 1px !important;
  min-width: 1px;
  height: 74px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
}

.timeline-event.event-point:hover,
.timeline-event.event-point.is-active {
  width: 1px !important;
  min-width: 1px;
  height: 74px;
  border: 0;
  background: transparent;
}

.point-symbol {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 15px;
  height: 15px;
  border: 2px solid #ddbd73;
  background: #364049;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 0 4px rgba(221, 189, 115, .07);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.timeline-event.event-point:hover .point-symbol,
.timeline-event.event-point.is-active .point-symbol {
  background: #d7b568;
  box-shadow: 0 0 0 6px rgba(221, 189, 115, .13), 0 0 22px rgba(221, 189, 115, .25);
  transform: translateX(-50%) rotate(45deg) scale(1.08);
}

.point-label {
  position: absolute;
  top: 29px;
  left: 12px;
  width: 145px;
  padding: 7px 9px;
  border-left: 1px solid rgba(221, 189, 115, .45);
  background: rgba(47, 55, 63, .92);
  text-align: left;
  pointer-events: none;
}

.timeline-event.event-point:nth-child(even) .point-label {
  left: auto;
  right: 12px;
  text-align: right;
  border-left: 0;
  border-right: 1px solid rgba(221, 189, 115, .45);
}

.point-label strong {
  color: #f0e8da;
  font-size: 10px;
  line-height: 1.25;
}

.point-label small {
  color: #b9b0a3;
  font-size: 9px;
}

/* Details open below the timeline rather than on top of another event */
.timeline-event-detail {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px;
  margin-top: 14px;
  padding: 22px 25px;
  border: 1px solid rgba(230, 204, 145, .24);
  border-left: 3px solid #d6b56d;
  background:
    radial-gradient(circle at 90% 10%, rgba(214, 181, 109, .08), transparent 28%),
    #303840;
  box-shadow: 0 14px 32px rgba(0,0,0,.13);
}

.timeline-event-detail .event-detail-kicker {
  margin: 3px 0 0;
  color: #d4bb7e;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.timeline-event-detail h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: #f0e7d9;
  font-family: var(--serif);
  font-size: 28px;
}

.timeline-event-detail > p:last-child {
  grid-column: 2;
  margin: -10px 0 0;
  color: #c4bcb1;
  line-height: 1.65;
}

/* Reduce label collision near the right edge */
.point-lane .timeline-event.event-point:nth-last-child(-n+2) .point-label {
  left: auto;
  right: 12px;
  text-align: right;
  border-left: 0;
  border-right: 1px solid rgba(221, 189, 115, .45);
}

@media (max-width: 900px) {
  .point-label {
    width: 112px;
    font-size: 9px;
  }

  .timeline-event-detail {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .timeline-event-detail h3,
  .timeline-event-detail > p:last-child {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .timeline-interaction-note {
    display: grid;
  }

  .span-lane,
  .point-lane {
    min-height: 150px;
  }

  .point-label {
    top: 31px;
    width: 95px;
    padding: 6px;
  }

  .point-label strong {
    font-size: 9px;
  }

  .point-label small {
    font-size: 8px;
  }
}

/* =====================================================
   TIMELINE EXHIBIT POLISH — VERSION 11
   Typography, spacing, connectors, softer bands,
   evidence shapes, and gentle motion.
   ===================================================== */

/* ---------- TYPOGRAPHY ---------- */

.timeline-scale-label strong {
  font-size: 20px;
  letter-spacing: .01em;
}

.timeline-scale-label span {
  font-size: 10px;
  letter-spacing: .11em;
}

.timeline-lane > header p {
  font-size: 10px;
  letter-spacing: .17em;
}

.timeline-lane > header h2 {
  max-width: 150px;
  font-size: 25px;
  line-height: 1.08;
}

.timeline-event strong,
.point-label strong {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .01em;
}

.timeline-event.event-span strong {
  font-size: 16px;
  line-height: 1.05;
}

.timeline-event.event-span small {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .02em;
}

.point-label strong {
  font-size: 13px;
}

.point-label small {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: .05em;
}

.timeline-event-detail h3 {
  font-size: 32px;
}

.timeline-event-detail > p:last-child {
  font-size: 14px;
}

/* ---------- BETTER EVENT SPACING ---------- */

.span-lane {
  min-height: 150px;
}

.point-lane {
  min-height: 190px;
}

.timeline-event.event-span {
  top: 38px;
  height: 68px;
  padding: 13px 16px;
}

.timeline-event.event-span:hover,
.timeline-event.event-span.is-active {
  height: 68px;
}

.timeline-event.event-point {
  top: 42px;
  height: 112px;
}

/* Stagger labels above and below the event line */
.timeline-event.event-point.label-below .point-label {
  top: 39px;
  bottom: auto;
}

.timeline-event.event-point.label-above .point-label {
  top: auto;
  bottom: 76px;
}

/* Keep the alternating labels on opposite sides as well */
.timeline-event.event-point.label-below .point-label {
  left: 18px;
  right: auto;
  text-align: left;
  border-left: 1px solid rgba(221, 189, 115, .5);
  border-right: 0;
}

.timeline-event.event-point.label-above .point-label {
  left: auto;
  right: 18px;
  text-align: right;
  border-left: 0;
  border-right: 1px solid rgba(221, 189, 115, .5);
}

/* Reserve more width and increase visual separation */
.point-label {
  width: 164px;
  padding: 9px 11px;
  background: rgba(53, 62, 70, .97);
  box-shadow: 0 7px 18px rgba(0,0,0,.12);
}

/* ---------- CONNECTOR LINES ---------- */

.timeline-event.event-point::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 19px;
  width: 1px;
  height: 23px;
  transform: translateX(-50%);
  background: linear-gradient(rgba(223, 192, 119, .75), rgba(223, 192, 119, .18));
}

.timeline-event.event-point.label-above::before {
  top: auto;
  bottom: 19px;
  height: 23px;
  background: linear-gradient(rgba(223, 192, 119, .18), rgba(223, 192, 119, .75));
}

.timeline-event.event-point::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 40px;
  width: 18px;
  height: 1px;
  background: rgba(223, 192, 119, .44);
}

.timeline-event.event-point.label-below::after {
  transform: translateX(0);
}

.timeline-event.event-point.label-above::after {
  top: auto;
  bottom: 40px;
  transform: translateX(-100%);
}

/* ---------- SOFTER HISTORICAL BANDS ---------- */

.timeline-event.event-span {
  border: 1px solid rgba(214, 181, 109, .28);
  border-left: 4px solid rgba(211, 167, 103, .78);
  background:
    linear-gradient(90deg,
      rgba(202, 164, 96, .18),
      rgba(145, 159, 171, .12) 55%,
      rgba(145, 159, 171, .08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 18px rgba(0,0,0,.08);
  backdrop-filter: blur(2px);
}

.timeline-event.event-span.inferred {
  border-style: dashed;
  border-left-style: solid;
}

.timeline-event.event-span:hover,
.timeline-event.event-span.is-active {
  border-color: rgba(234, 207, 146, .54);
  border-left-color: #d7ad6d;
  background:
    linear-gradient(90deg,
      rgba(211, 171, 99, .24),
      rgba(151, 165, 177, .16) 58%,
      rgba(151, 165, 177, .1));
}

/* Distinguish two spans that share the same lane */
.span-lane .timeline-event.event-span:nth-child(2) {
  top: 54px;
  transform: translateY(23px);
  border-left-color: rgba(164, 128, 91, .78);
  background:
    linear-gradient(90deg,
      rgba(160, 124, 88, .16),
      rgba(126, 143, 156, .1) 58%,
      rgba(126, 143, 156, .07));
}

.span-lane .timeline-event.event-span:nth-child(2):hover,
.span-lane .timeline-event.event-span:nth-child(2).is-active {
  transform: translateY(21px);
}

/* ---------- EVIDENCE-TYPE MARKER SHAPES ---------- */

/* Biblical event: solid gold diamond */
.timeline-event.event-point.biblical .point-symbol {
  border-color: #e2bf6f;
  background: #d5ad59;
  box-shadow: 0 0 0 4px rgba(221, 189, 115, .08);
}

/* Ancient literary tradition: bronze square */
.timeline-event.event-point.tradition .point-symbol {
  border-radius: 2px;
  border-color: #c58b5e;
  background: #6f4c3a;
  transform: translateX(-50%) rotate(0deg);
}

/* Architecture / archaeology: slate-blue circle */
.timeline-event.event-point.architecture .point-symbol {
  border-radius: 50%;
  border-color: #93adbd;
  background: #526c7a;
  transform: translateX(-50%) rotate(0deg);
}

/* Approximate or inferred: hollow gray marker */
.timeline-event.event-point.inferred .point-symbol {
  border-color: #9c9993;
  background: #364049;
  box-shadow: 0 0 0 4px rgba(156, 153, 147, .06);
}

/* Preserve shape identity during hover */
.timeline-event.event-point.tradition:hover .point-symbol,
.timeline-event.event-point.tradition.is-active .point-symbol {
  background: #b97b50;
  transform: translateX(-50%) rotate(0deg) scale(1.08);
}

.timeline-event.event-point.architecture:hover .point-symbol,
.timeline-event.event-point.architecture.is-active .point-symbol {
  background: #7f9aaa;
  transform: translateX(-50%) rotate(0deg) scale(1.08);
}

.timeline-event.event-point.biblical:hover .point-symbol,
.timeline-event.event-point.biblical.is-active .point-symbol {
  background: #efcc79;
}

.timeline-event.event-point.inferred:hover .point-symbol,
.timeline-event.event-point.inferred.is-active .point-symbol {
  background: #686b6e;
}

/* ---------- GENTLE HOVER ANIMATIONS ---------- */

.timeline-event,
.point-symbol,
.point-label,
.timeline-event-detail {
  transition:
    transform .22s ease,
    opacity .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.timeline-event.event-span:hover {
  transform: translateY(-3px);
}

.timeline-event.event-point:hover .point-label {
  transform: translateY(-2px);
  box-shadow: 0 11px 24px rgba(0,0,0,.16);
}

.timeline-event.event-point.label-above:hover .point-label {
  transform: translateY(2px);
}

.timeline-event-detail {
  animation: eventDetailReveal .34s ease both;
}

@keyframes eventDetailReveal {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- LEGEND SUPPORT ---------- */

.timeline-interaction-note {
  gap: 12px 26px;
}

.timeline-interaction-note span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- MOBILE ---------- */

@media (max-width: 900px) {
  .point-label {
    width: 132px;
  }

  .timeline-event.event-point.label-above .point-label,
  .timeline-event.event-point.label-below .point-label {
    left: 14px;
    right: auto;
    text-align: left;
    border-left: 1px solid rgba(221, 189, 115, .5);
    border-right: 0;
  }

  .timeline-event.event-point.label-above::after,
  .timeline-event.event-point.label-below::after {
    top: 40px;
    bottom: auto;
    transform: translateX(0);
  }

  .timeline-event.event-point.label-above::before {
    top: 19px;
    bottom: auto;
    background: linear-gradient(rgba(223, 192, 119, .75), rgba(223, 192, 119, .18));
  }
}

@media (max-width: 720px) {
  .span-lane {
    min-height: 175px;
  }

  .point-lane {
    min-height: 210px;
  }

  .point-label {
    width: 108px;
    padding: 7px 8px;
  }

  .point-label strong {
    font-size: 11px;
  }

  .timeline-event.event-span strong {
    font-size: 14px;
  }
}

/* =====================================================
   TIMELINE COLOR-CODING SYSTEM — VERSION 12
   Color identifies evidence type; page backgrounds
   remain neutral and museum-like.
   ===================================================== */

.timeline-page {
  --evidence-biblical: #d7b86d;
  --evidence-tradition: #b68458;
  --evidence-architecture: #6e8da5;
  --evidence-civilization: #a36b4c;
  --evidence-migration: #708c69;
  --evidence-climate: #7a848c;
  --evidence-inferred: #92918d;
}

/* ---------- Museum evidence key ---------- */

.timeline-legend.museum-evidence-key {
  gap: 10px 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(231, 209, 163, .12);
  background: rgba(255,255,255,.022);
}

.timeline-legend.museum-evidence-key span {
  padding: 5px 8px;
  border-radius: 2px;
  background: rgba(255,255,255,.018);
}

.legend-dot.biblical {
  background: var(--evidence-biblical);
  box-shadow: 0 0 0 3px rgba(215,184,109,.08);
}

.legend-dot.tradition {
  background: var(--evidence-tradition);
}

.legend-dot.architecture {
  background: var(--evidence-architecture);
}

.legend-dot.civilization {
  border-radius: 1px;
  background: var(--evidence-civilization);
}

.legend-dot.migration {
  border-radius: 999px 2px 999px 2px;
  background: var(--evidence-migration);
  transform: rotate(-35deg);
}

.legend-dot.climate {
  border-radius: 50%;
  background: var(--evidence-climate);
}

.legend-dot.inferred {
  border-color: var(--evidence-inferred);
}

/* ---------- Genealogy / biblical narrative ---------- */

.patriarch-bar {
  border-color: rgba(215,184,109,.72);
  background:
    linear-gradient(90deg,
      rgba(215,184,109,.82),
      rgba(181,143,72,.42));
}

.patriarch-bar:hover,
.patriarch-bar.is-active {
  box-shadow:
    0 0 0 1px rgba(215,184,109,.18),
    0 7px 19px rgba(0,0,0,.18),
    0 0 22px rgba(215,184,109,.12);
}

/* ---------- Long event bands ---------- */

.timeline-event.tradition,
.timeline-event.event-span.tradition {
  border-left-color: var(--evidence-tradition);
  border-color: rgba(182,132,88,.38);
  background:
    linear-gradient(90deg,
      rgba(182,132,88,.22),
      rgba(182,132,88,.10) 46%,
      rgba(110,141,165,.08));
}

.timeline-event.architecture {
  border-left-color: var(--evidence-architecture);
  border-color: rgba(110,141,165,.42);
  background:
    linear-gradient(90deg,
      rgba(110,141,165,.24),
      rgba(110,141,165,.10));
}

.timeline-event.civilization {
  border-left-color: var(--evidence-civilization);
  border-color: rgba(163,107,76,.42);
  background:
    linear-gradient(90deg,
      rgba(163,107,76,.24),
      rgba(163,107,76,.10));
}

.timeline-event.migration {
  border-left-color: var(--evidence-migration);
  border-color: rgba(112,140,105,.44);
  background:
    linear-gradient(90deg,
      rgba(112,140,105,.25),
      rgba(112,140,105,.10));
}

.timeline-event.climate {
  border-left-color: var(--evidence-climate);
  border-color: rgba(122,132,140,.45);
  background:
    linear-gradient(90deg,
      rgba(122,132,140,.26),
      rgba(122,132,140,.11));
}

.timeline-event.inferred {
  border-style: dashed;
}

.timeline-event.inferred::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(146,145,141,.13);
  pointer-events: none;
}

.timeline-event:hover,
.timeline-event.is-active {
  filter: brightness(1.12);
}

/* ---------- Evidence marker shapes ---------- */

.timeline-event.event-point.biblical .point-symbol {
  border-color: var(--evidence-biblical);
  background: var(--evidence-biblical);
}

.timeline-event.event-point.tradition .point-symbol {
  border-color: var(--evidence-tradition);
  background: #714d38;
}

.timeline-event.event-point.architecture .point-symbol {
  border-color: var(--evidence-architecture);
  background: #526f82;
}

.timeline-event.event-point.civilization .point-symbol {
  border-color: var(--evidence-civilization);
  background: #784a35;
  border-radius: 2px 8px 2px 8px;
  transform: translateX(-50%) rotate(0deg);
}

.timeline-event.event-point.migration .point-symbol {
  border-color: var(--evidence-migration);
  background: #52694e;
  border-radius: 999px 2px 999px 2px;
  transform: translateX(-50%) rotate(-35deg);
}

.timeline-event.event-point.climate .point-symbol {
  border-color: var(--evidence-climate);
  background: #5f6970;
  border-radius: 50%;
  transform: translateX(-50%) rotate(0deg);
}

.timeline-event.event-point.inferred .point-symbol {
  border-color: var(--evidence-inferred);
  background: #364049;
}

/* Connector and label accents inherit category */
.timeline-event.event-point.biblical { --point-accent: var(--evidence-biblical); }
.timeline-event.event-point.tradition { --point-accent: var(--evidence-tradition); }
.timeline-event.event-point.architecture { --point-accent: var(--evidence-architecture); }
.timeline-event.event-point.civilization { --point-accent: var(--evidence-civilization); }
.timeline-event.event-point.migration { --point-accent: var(--evidence-migration); }
.timeline-event.event-point.climate { --point-accent: var(--evidence-climate); }
.timeline-event.event-point.inferred { --point-accent: var(--evidence-inferred); }

.timeline-event.event-point::before,
.timeline-event.event-point::after {
  background: var(--point-accent, var(--evidence-biblical));
}

.timeline-event.event-point .point-label {
  border-color: var(--point-accent, var(--evidence-biblical));
}

.timeline-event.event-point:hover .point-label,
.timeline-event.event-point.is-active .point-label {
  box-shadow:
    0 11px 24px rgba(0,0,0,.16),
    inset 3px 0 0 var(--point-accent, var(--evidence-biblical));
}

.timeline-event.event-point.label-above:hover .point-label,
.timeline-event.event-point.label-above.is-active .point-label {
  box-shadow:
    0 11px 24px rgba(0,0,0,.16),
    inset -3px 0 0 var(--point-accent, var(--evidence-biblical));
}

/* ---------- Category-aware interpretation panel ---------- */

.timeline-event-detail {
  --detail-accent: var(--evidence-inferred);
  grid-template-columns: 190px minmax(0, 1fr);
  border-left: 4px solid var(--detail-accent);
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--detail-accent) 12%, transparent), transparent 28%),
    #303840;
}

.timeline-event-detail.evidence-biblical { --detail-accent: var(--evidence-biblical); }
.timeline-event-detail.evidence-tradition { --detail-accent: var(--evidence-tradition); }
.timeline-event-detail.evidence-architecture { --detail-accent: var(--evidence-architecture); }
.timeline-event-detail.evidence-civilization { --detail-accent: var(--evidence-civilization); }
.timeline-event-detail.evidence-migration { --detail-accent: var(--evidence-migration); }
.timeline-event-detail.evidence-climate { --detail-accent: var(--evidence-climate); }
.timeline-event-detail.evidence-inferred { --detail-accent: var(--evidence-inferred); }

.event-detail-meta {
  display: grid;
  align-content: start;
  gap: 9px;
}

.event-detail-type {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: var(--detail-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.event-detail-type i {
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: var(--detail-accent);
}

.timeline-event-detail.evidence-biblical .event-detail-type i {
  transform: rotate(45deg);
}

.timeline-event-detail.evidence-architecture .event-detail-type i,
.timeline-event-detail.evidence-climate .event-detail-type i {
  border-radius: 50%;
}

.timeline-event-detail.evidence-migration .event-detail-type i {
  border-radius: 999px 2px 999px 2px;
  transform: rotate(-35deg);
}

.event-detail-caution {
  width: fit-content;
  padding: 4px 7px;
  border: 1px dashed rgba(146,145,141,.5);
  color: #bbb8b1;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.timeline-event-detail .event-detail-kicker {
  color: #bdb5aa;
}

.event-detail-copy h3 {
  margin: 0 0 8px;
}

.event-detail-copy p {
  margin: 0;
  color: #c8c0b5;
  line-height: 1.65;
}

/* ---------- Lane headers receive tiny category rules ---------- */

.timeline-lane[data-layer="biblical"] > header {
  box-shadow: inset 3px 0 0 var(--evidence-biblical);
}

.timeline-lane[data-layer="tradition"] > header {
  box-shadow: inset 3px 0 0 var(--evidence-tradition);
}

.timeline-lane[data-layer="architecture"] > header {
  box-shadow: inset 3px 0 0 var(--evidence-architecture);
}

.timeline-lane[data-layer="civilization"] > header {
  box-shadow: inset 3px 0 0 var(--evidence-civilization);
}

.migration-lane > header {
  box-shadow: inset 3px 0 0 var(--evidence-migration) !important;
}

/* ---------- Lens plaque category cues ---------- */

.lens-plaque[data-lens-button="genealogy"] { --lens-accent: var(--evidence-biblical); }
.lens-plaque[data-lens-button="architecture"] { --lens-accent: var(--evidence-architecture); }
.lens-plaque[data-lens-button="migrations"] { --lens-accent: var(--evidence-migration); }
.lens-plaque[data-lens-button="civilizations"] { --lens-accent: var(--evidence-civilization); }
.lens-plaque[data-lens-button="texts"] { --lens-accent: var(--evidence-tradition); }

.lens-plaque::after {
  background: linear-gradient(90deg, var(--lens-accent, var(--evidence-biblical)), transparent);
}

.lens-plaque.is-active {
  border-color: color-mix(in srgb, var(--lens-accent) 68%, white 10%);
}

.lens-plaque.is-active .lens-index {
  color: var(--lens-accent);
}

@media (max-width: 900px) {
  .timeline-event-detail {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   SELECTION + COLOR VISIBILITY FIX — VERSION 13
   ===================================================== */

/* Selected patriarch is spotlighted; the others remain readable and clickable. */
.patriarch-bar.is-dimmed {
  opacity: .58;
  filter: saturate(.72) brightness(.82);
}

.patriarch-bar.is-dimmed .patriarch-label {
  color: rgba(247, 239, 225, .84);
  text-shadow:
    0 1px 3px rgba(0,0,0,.88),
    0 0 8px rgba(0,0,0,.35);
}

.patriarch-bar.is-dimmed:hover,
.patriarch-bar.is-dimmed:focus-visible {
  z-index: 9;
  opacity: 1;
  filter: saturate(1) brightness(1.16);
  transform: translateY(-2px);
  border-color: rgba(238, 208, 139, .88);
  box-shadow:
    0 0 0 1px rgba(215,184,109,.18),
    0 8px 22px rgba(0,0,0,.24),
    0 0 24px rgba(215,184,109,.14);
}

.patriarch-bar.is-active {
  z-index: 8;
  opacity: 1;
  filter: saturate(1.08) brightness(1.13);
  background:
    linear-gradient(90deg,
      #e2c274 0%,
      rgba(215,184,109,.82) 42%,
      rgba(161,126,63,.54) 100%);
  border-color: #efd58f;
  box-shadow:
    0 0 0 1px rgba(239,213,143,.24),
    0 8px 24px rgba(0,0,0,.22),
    0 0 30px rgba(215,184,109,.18);
}

.patriarch-bar.is-active .patriarch-label {
  color: #fff8e9;
  font-weight: 600;
}

/* A subtle cue that clicking the active bar again clears the spotlight. */
.patriarch-bar.is-active::after {
  content: "Click again to clear";
  position: absolute;
  right: 8px;
  top: 5px;
  color: rgba(41, 35, 25, .68);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .18s ease;
}

.patriarch-bar.is-active:hover::after {
  opacity: 1;
}

/* Keep the timeline cursor readable without dominating the other bars. */
.timeline-cursor {
  background: rgba(226, 193, 112, .78);
}

.timeline-cursor span {
  background: #e0bd70;
  color: #292317;
  box-shadow: 0 5px 16px rgba(0,0,0,.18);
}

/* Stronger, clearly visible evidence coding in the default genealogy view. */
.timeline-event.event-span.tradition {
  border: 1px dashed rgba(199, 146, 96, .72);
  border-left: 5px solid var(--evidence-tradition);
  background:
    linear-gradient(90deg,
      rgba(182,132,88,.38) 0%,
      rgba(182,132,88,.23) 48%,
      rgba(110,141,165,.10) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 9px 20px rgba(0,0,0,.12);
}

.timeline-event.event-span.tradition strong {
  color: #f0d3b7;
}

.timeline-event.event-span.tradition small {
  color: #d6bda8;
}

.span-lane .timeline-event.event-span.tradition:nth-child(2) {
  border-left-color: #9f6948;
  background:
    linear-gradient(90deg,
      rgba(163,107,76,.36) 0%,
      rgba(163,107,76,.21) 52%,
      rgba(110,141,165,.09) 100%);
}

/* Biblical point events receive a brighter gold signature. */
.timeline-event.event-point.biblical .point-symbol {
  border-color: #f1d17d;
  background: #dfb95e;
  box-shadow:
    0 0 0 5px rgba(215,184,109,.11),
    0 0 20px rgba(215,184,109,.15);
}

.timeline-event.event-point.biblical .point-label {
  border-color: var(--evidence-biblical);
  background:
    linear-gradient(90deg, rgba(215,184,109,.10), transparent 52%),
    rgba(53,62,70,.98);
}

.timeline-event.event-point.biblical .point-label strong {
  color: #f4e6c2;
}

/* Make the category keys feel like an intentional color system, not gray labels. */
.timeline-legend.museum-evidence-key span {
  border: 1px solid rgba(255,255,255,.035);
}

.timeline-legend.museum-evidence-key span:nth-child(1) {
  box-shadow: inset 3px 0 0 var(--evidence-biblical);
}

.timeline-legend.museum-evidence-key span:nth-child(2) {
  box-shadow: inset 3px 0 0 var(--evidence-tradition);
}

.timeline-legend.museum-evidence-key span:nth-child(3) {
  box-shadow: inset 3px 0 0 var(--evidence-architecture);
}

.timeline-legend.museum-evidence-key span:nth-child(4) {
  box-shadow: inset 3px 0 0 var(--evidence-civilization);
}

.timeline-legend.museum-evidence-key span:nth-child(5) {
  box-shadow: inset 3px 0 0 var(--evidence-migration);
}

.timeline-legend.museum-evidence-key span:nth-child(6) {
  box-shadow: inset 3px 0 0 var(--evidence-climate);
}

.timeline-legend.museum-evidence-key span:nth-child(7) {
  box-shadow: inset 3px 0 0 var(--evidence-inferred);
}

/* Selected interpretation panel color is more apparent. */
.timeline-event-detail {
  border-top: 1px solid color-mix(in srgb, var(--detail-accent) 58%, transparent);
  box-shadow:
    inset 6px 0 0 color-mix(in srgb, var(--detail-accent) 26%, transparent),
    0 14px 32px rgba(0,0,0,.13);
}

.event-detail-type {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--detail-accent) 48%, transparent);
  background: color-mix(in srgb, var(--detail-accent) 11%, transparent);
}

/* Keyboard users receive the same clear switch affordance. */
.patriarch-bar:focus-visible,
.illuminated-node:focus-visible {
  outline: 2px solid #f0ce7b;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .patriarch-bar.is-active::after {
    display: none;
  }

  .patriarch-bar.is-dimmed {
    opacity: .68;
  }
}
/* LIGHT ARCHIVE TIMELINE V16 */
html[data-theme="archive"] .timeline-page{background:linear-gradient(180deg,#ded8cc,#d5cec1);color:#3b3c3a}html[data-theme="archive"] .timeline-intro{background:radial-gradient(circle at 80% 10%,rgba(180,137,64,.17),transparent 34%),linear-gradient(180deg,#e7e0d4,#d9d1c4)}html[data-theme="archive"] .timeline-intro h1,html[data-theme="archive"] .timeline-page h1,html[data-theme="archive"] .timeline-page h2,html[data-theme="archive"] .timeline-page h3{color:#292c2e}html[data-theme="archive"] .timeline-lead,html[data-theme="archive"] .timeline-notice,html[data-theme="archive"] .timeline-limitations p,html[data-theme="archive"] .source-grid p:last-child,html[data-theme="archive"] .reference-panel li,html[data-theme="archive"] .section-heading p:last-child{color:#56534d}
html[data-theme="archive"] .museum-threshold,html[data-theme="archive"] .timeline-workspace,html[data-theme="archive"] .illuminated-genealogy-section,html[data-theme="archive"] .source-method{background:#d8d1c5}html[data-theme="archive"] .threshold-frame,html[data-theme="archive"] .timeline-lens-gallery,html[data-theme="archive"] .timeline-toolbar,html[data-theme="archive"] .timeline-limitations,html[data-theme="archive"] .source-grid article,html[data-theme="archive"] .reference-panel,html[data-theme="archive"] .genealogy-stage,html[data-theme="archive"] .illuminated-profile{border-color:rgba(91,75,50,.2);background:linear-gradient(145deg,rgba(255,255,255,.34),transparent 58%),#ece6db;color:#3c3d3b;box-shadow:0 18px 44px rgba(65,51,31,.12)}
html[data-theme="archive"] .lens-plaque{background:#e3dccf;border-color:rgba(91,75,50,.18)}html[data-theme="archive"] .lens-plaque:hover,html[data-theme="archive"] .lens-plaque.is-active{background:#f0ebe2}html[data-theme="archive"] .lens-plaque strong,html[data-theme="archive"] .lens-context h3,html[data-theme="archive"] .threshold-frame h2{color:#2e3031}html[data-theme="archive"] .lens-gallery-heading>p,html[data-theme="archive"] #lens-context-copy,html[data-theme="archive"] .filter-fieldset label,html[data-theme="archive"] .timeline-legend,html[data-theme="archive"] .timeline-interaction-note{color:#666159}
html[data-theme="archive"] .toolbar-group select{background:#f5f0e7;color:#313331;border-color:rgba(91,75,50,.24)}html[data-theme="archive"] .timeline-scale-wrap{background:rgba(225,218,207,.97);border-color:rgba(91,75,50,.19)}html[data-theme="archive"] .timeline-scale-label strong,html[data-theme="archive"] .timeline-scale{color:#383937}html[data-theme="archive"] .timeline-scale-label span,html[data-theme="archive"] .timeline-scale small{color:#6d685f}
html[data-theme="archive"] .timeline-board{background:#e8e2d8;border-color:rgba(91,75,50,.2)}html[data-theme="archive"] .timeline-grid-lines{background-image:linear-gradient(to right,rgba(70,59,44,.1) 1px,transparent 1px)}html[data-theme="archive"] .timeline-lane>header{background:linear-gradient(105deg,#ddd5c8,#d1c8ba);border-right-color:rgba(76,63,44,.12)}html[data-theme="archive"] .timeline-lane>header h2{color:#303230}html[data-theme="archive"] .point-label{background:rgba(241,236,227,.98);color:#30312f}html[data-theme="archive"] .point-label strong{color:#30312f}html[data-theme="archive"] .point-label small{color:#6d675e}html[data-theme="archive"] .timeline-event-detail{background:#eee8de;color:#343533}html[data-theme="archive"] .timeline-event-detail h3{color:#2d2f2e}html[data-theme="archive"] .event-detail-copy p{color:#55524c}html[data-theme="archive"] .illuminated-node{background:linear-gradient(90deg,rgba(181,141,64,.1),transparent 44%),#e6dfd4}html[data-theme="archive"] .node-copy strong{color:#2d2f2e}html[data-theme="archive"] .node-copy span,html[data-theme="archive"] .node-years,html[data-theme="archive"] .genealogy-key{color:#6d675e}html[data-theme="archive"] .illuminated-profile h3,html[data-theme="archive"] .person-profile dd,html[data-theme="archive"] .profile-note,html[data-theme="archive"] .illuminated-profile p{color:#393a38}

/* =====================================================
   TIMELINE LIGHT ARCHIVE CALIBRATION — VERSION 16.1
   ===================================================== */

html[data-theme="archive"] .timeline-page {
  --archive-bronze: #8a6a2d;
  --archive-muted: #655f57;
  --archive-tertiary: #716b62;
  --archive-shadow: rgba(64, 52, 37, .085);
}

/* Tertiary labels and supporting text */
html[data-theme="archive"] .timeline-lead,
html[data-theme="archive"] .timeline-notice,
html[data-theme="archive"] .timeline-limitations p,
html[data-theme="archive"] .source-grid p:last-child,
html[data-theme="archive"] .reference-panel li,
html[data-theme="archive"] .section-heading p:last-child,
html[data-theme="archive"] .lens-gallery-heading > p,
html[data-theme="archive"] #lens-context-copy,
html[data-theme="archive"] .filter-fieldset label,
html[data-theme="archive"] .timeline-legend,
html[data-theme="archive"] .timeline-interaction-note,
html[data-theme="archive"] .timeline-scale-label span,
html[data-theme="archive"] .timeline-scale small,
html[data-theme="archive"] .point-label small,
html[data-theme="archive"] .node-copy span,
html[data-theme="archive"] .node-years,
html[data-theme="archive"] .genealogy-key,
html[data-theme="archive"] .person-profile dt {
  color: var(--archive-muted) !important;
}

/* Archive bronze for gold-coded small labels */
html[data-theme="archive"] .timeline-page .eyebrow,
html[data-theme="archive"] .toolbar-group > label,
html[data-theme="archive"] .toolbar-group legend,
html[data-theme="archive"] .timeline-lane > header p,
html[data-theme="archive"] #lens-context-kicker,
html[data-theme="archive"] .lens-context-number,
html[data-theme="archive"] .profile-kicker,
html[data-theme="archive"] .timeline-scale-label strong,
html[data-theme="archive"] .timeline-notice strong,
html[data-theme="archive"] .threshold-number,
html[data-theme="archive"] .event-detail-type,
html[data-theme="archive"] .event-detail-kicker {
  color: var(--archive-bronze) !important;
}

/* Softer light-mode shadows */
html[data-theme="archive"] .threshold-frame,
html[data-theme="archive"] .timeline-lens-gallery,
html[data-theme="archive"] .timeline-toolbar,
html[data-theme="archive"] .timeline-limitations,
html[data-theme="archive"] .source-grid article,
html[data-theme="archive"] .reference-panel,
html[data-theme="archive"] .genealogy-stage,
html[data-theme="archive"] .illuminated-profile,
html[data-theme="archive"] .timeline-board,
html[data-theme="archive"] .timeline-event-detail,
html[data-theme="archive"] .point-label {
  box-shadow: 0 13px 30px var(--archive-shadow);
}

/* Watcher bands: darker type and stronger bronze edge on parchment */
html[data-theme="archive"] .timeline-event.event-span.tradition {
  border-color: rgba(138, 106, 45, .48);
  border-left-color: var(--archive-bronze);
  background:
    linear-gradient(90deg,
      rgba(138,106,45,.18),
      rgba(182,132,88,.10) 52%,
      rgba(110,141,165,.06));
}

html[data-theme="archive"] .timeline-event.event-span.tradition strong {
  color: #5a4029 !important;
}

html[data-theme="archive"] .timeline-event.event-span.tradition small {
  color: #755d47 !important;
}

/* Slightly clearer drafting grid */
html[data-theme="archive"] .timeline-grid-lines {
  background-image: linear-gradient(to right, rgba(70, 59, 44, .13) 1px, transparent 1px);
}

/* =========================================================
   ARCHIVE MODE · MAJOR TIMELINE SECTION DIVIDERS
   Stronger museum-bronze rules for all major transitions.
   ========================================================= */
html[data-theme="archive"] .timeline-scale-label{
  border-bottom:1px solid rgba(138,106,45,.48) !important;
}

html[data-theme="archive"] .timeline-workspace{
  border-bottom:1px solid rgba(138,106,45,.42) !important;
}

html[data-theme="archive"] .family-tree-section,
html[data-theme="archive"] .illuminated-genealogy-section{
  border-top:1px solid rgba(138,106,45,.48) !important;
  border-bottom:1px solid rgba(138,106,45,.42) !important;
}

html[data-theme="archive"] .source-method{
  border-top:1px solid rgba(138,106,45,.42) !important;
  border-bottom:1px solid rgba(138,106,45,.34) !important;
}

html[data-theme="archive"] .timeline-page .site-footer{
  border-top:1px solid rgba(138,106,45,.46) !important;
}

/* Secondary structural rules should remain visible but quieter. */
html[data-theme="archive"] .timeline-lane{
  border-bottom-color:rgba(106,91,66,.28) !important;
}

html[data-theme="archive"] .timeline-limitations{
  border-color:rgba(138,106,45,.34) !important;
}

/* ARCHIVE GENEALOGY HIGH-CONTRAST OVERRIDE */
html[data-theme="archive"] .genealogy-stage{
  background:#f1ece2 !important;
  border-color:#a99b84 !important;
  box-shadow:0 16px 34px rgba(55,47,36,.12) !important;
}

html[data-theme="archive"] .genealogy-stage::before,
html[data-theme="archive"] .genealogy-stage::after{
  border-color:#8d7445 !important;
}

html[data-theme="archive"] .genealogy-ornament{
  background:linear-gradient(transparent,#ad8a49,transparent) !important;
}
html[data-theme="archive"] .genealogy-ornament::before,
html[data-theme="archive"] .genealogy-ornament::after{
  color:#9b742c !important;
}

html[data-theme="archive"] .genealogy-crown{
  color:#6f501a !important;
}
html[data-theme="archive"] .genealogy-crown span{
  background:linear-gradient(90deg,transparent,#a97b2c) !important;
}
html[data-theme="archive"] .genealogy-crown span:last-child{
  background:linear-gradient(90deg,#a97b2c,transparent) !important;
}

html[data-theme="archive"] .illuminated-node{
  background:
    linear-gradient(90deg,rgba(166,122,46,.10),transparent 42%),
    #f7f2e9 !important;
  border-color:#b9aa91 !important;
  box-shadow:0 3px 8px rgba(49,43,34,.07) !important;
}
html[data-theme="archive"] .illuminated-node:hover,
html[data-theme="archive"] .illuminated-node.is-active{
  background:
    linear-gradient(90deg,rgba(166,122,46,.16),transparent 48%),
    #fffaf1 !important;
  border-color:#8e6a25 !important;
  box-shadow:0 0 0 1px rgba(142,106,37,.16),
             0 7px 16px rgba(52,45,34,.11) !important;
}
html[data-theme="archive"] .illuminated-node.is-ancestor-path{
  border-color:#9c804e !important;
}
html[data-theme="archive"] .illuminated-node.is-descendant-dim{
  opacity:.68 !important;
  filter:none !important;
}

html[data-theme="archive"] .node-halo{
  border-color:#b28a3d !important;
  box-shadow:inset 0 0 12px rgba(178,138,61,.10) !important;
}
html[data-theme="archive"] .node-number{
  color:#7c5a18 !important;
  font-weight:700 !important;
}
html[data-theme="archive"] .node-copy strong{
  color:#232624 !important;
}
html[data-theme="archive"] .node-copy span{
  color:#59564f !important;
  font-weight:600 !important;
}
html[data-theme="archive"] .node-years{
  color:#4c4944 !important;
  font-weight:600 !important;
}

html[data-theme="archive"] .illuminated-connector{
  background:#b9a174 !important;
}
html[data-theme="archive"] .illuminated-connector span{
  background:linear-gradient(#9c7225,#6f501a) !important;
}

html[data-theme="archive"] .illuminated-event-flag{
  background:#eee1d3 !important;
  border-color:#b58d68 !important;
  border-left-color:#8a5837 !important;
  box-shadow:0 4px 10px rgba(52,43,34,.07) !important;
}
html[data-theme="archive"] .illuminated-event-flag:hover,
html[data-theme="archive"] .illuminated-event-flag.is-active{
  background:#e8d7c6 !important;
  border-color:#8f6747 !important;
}
html[data-theme="archive"] .illuminated-event-flag .event-symbol{
  color:#8a5837 !important;
}
html[data-theme="archive"] .illuminated-event-flag strong{
  color:#573b29 !important;
  font-weight:700 !important;
}
html[data-theme="archive"] .illuminated-event-flag small{
  color:#514a43 !important;
}

html[data-theme="archive"] .flood-boundary-flag{
  background:#e2e9ec !important;
  border-color:#8ca2af !important;
  border-left-color:#55788e !important;
}
html[data-theme="archive"] .flood-boundary-flag strong{
  color:#304a59 !important;
  font-weight:700 !important;
}
html[data-theme="archive"] .flood-boundary-flag small{
  color:#4d5d65 !important;
}

html[data-theme="archive"] .genealogy-key{
  color:#4d4a45 !important;
}
html[data-theme="archive"] .genealogy-key span{
  opacity:1 !important;
}

html[data-theme="archive"] .illuminated-profile{
  background:#f7f2e9 !important;
  border-color:#a99b84 !important;
  box-shadow:0 14px 30px rgba(53,45,34,.10) !important;
}
html[data-theme="archive"] .illuminated-profile::before{
  border-color:#d2c6b4 !important;
}
html[data-theme="archive"] .profile-medallion{
  border-color:#a87e2f !important;
  color:#7f5b19 !important;
  background:#f2e7d3 !important;
  box-shadow:inset 0 0 0 6px rgba(168,126,47,.05) !important;
}
html[data-theme="archive"] .profile-kicker{
  color:#6f501a !important;
}
html[data-theme="archive"] .illuminated-profile h3{
  color:#232624 !important;
}
html[data-theme="archive"] .illuminated-profile p,
html[data-theme="archive"] .person-profile dd,
html[data-theme="archive"] .profile-note{
  color:#46443f !important;
}
html[data-theme="archive"] .person-profile dt{
  color:#655f57 !important;
  font-weight:700 !important;
}

/* =====================================================
   HISTORICAL LENS HEADING COMPOSITION FIX · V24
   Keeps the desktop headline visually connected and prevents
   the final word from being stranded on its own line.
   ===================================================== */
@media (min-width: 1101px) {
  .lens-gallery-heading {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .55fr);
    gap: 46px;
    align-items: center;
  }

  .lens-gallery-heading h2 {
    font-size: clamp(38px, 2.65vw, 54px);
    line-height: 1.08;
    letter-spacing: -.025em;
    white-space: nowrap;
    max-width: none;
  }

  .lens-gallery-heading > p {
    max-width: 430px;
    justify-self: end;
    line-height: 1.55;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .lens-gallery-heading {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }

  .lens-gallery-heading h2 {
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.08;
    max-width: 860px;
  }

  .lens-gallery-heading > p {
    max-width: 720px;
  }
}


/* =====================================================
   GENEALOGY RECORD PANEL - NATURAL HEIGHT V6
   Shared by all three Timeline Hall chronology pages.
   The record is no longer constrained to viewport height
   and never uses an internal vertical scrollbar.
   ===================================================== */
.family-tree-layout{
  align-items:start !important;
}
.illuminated-profile,
.person-profile{
  position:relative !important;
  top:auto !important;
  bottom:auto !important;
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  overflow-y:visible !important;
  scrollbar-width:none !important;
}
.illuminated-profile::-webkit-scrollbar,
.person-profile::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}
#profile-content{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
@media (max-width:1000px) and (min-width:821px){
  .illuminated-profile,
  .person-profile{
    position:relative !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
}
@media (max-width:820px){
  .illuminated-profile,
  .person-profile{
    position:relative !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* =====================================================
   TIMELINE PAN VIEWPORT + FULL-SCREEN EXPLORER V1
   ===================================================== */
.timeline-page{
  --timeline-pan-width:1800px;
}
.timeline-page .timeline-board{
  overflow-x:auto;
  overflow-y:hidden;
  cursor:grab;
  scrollbar-color:#b88a37 #34302a;
  scrollbar-width:auto;
  overscroll-behavior-x:contain;
  touch-action:pan-y;
}
.timeline-page .timeline-board.is-dragging{
  cursor:grabbing;
  user-select:none;
}
.timeline-page .timeline-board::-webkit-scrollbar{height:15px}
.timeline-page .timeline-board::-webkit-scrollbar-track{background:#34302a;border-top:1px solid rgba(184,138,55,.3)}
.timeline-page .timeline-board::-webkit-scrollbar-thumb{background:#b88a37;border:4px solid #34302a;border-radius:10px}
.timeline-page .timeline-board::-webkit-scrollbar-thumb:hover{background:#d2aa58}
.timeline-page .timeline-board .timeline-lane{min-width:var(--timeline-pan-width)}
.timeline-page .timeline-board .timeline-grid-lines{
  right:auto;
  width:calc(var(--timeline-pan-width) - 190px);
}
.timeline-page .timeline-lane>header{
  position:sticky;
  left:0;
  z-index:20;
}
.timeline-page .timeline-scale-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.timeline-page .timeline-scale-wrap::-webkit-scrollbar{display:none}
.timeline-page .timeline-scale-wrap .timeline-scale{min-width:calc(var(--timeline-pan-width) - 36px)}
.timeline-page .timeline-scale-label{
  position:relative;
  z-index:3;
  will-change:transform;
}
.timeline-pan-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:8px 0 10px;
  color:#8a7550;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.timeline-pan-hint::before{content:"↔";font-size:17px;color:#b88a37}

.timeline-explorer{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  overflow:auto;
  background:#171a1d;
  color:#eee7dc;
}
.timeline-explorer.is-open{display:block}
.timeline-explorer-shell{min-height:100vh;padding:34px clamp(24px,5vw,82px) 64px}
.timeline-explorer-close{
  position:fixed;
  top:24px;
  right:28px;
  z-index:2;
  width:52px;
  height:52px;
  border:1px solid #b88a37;
  border-radius:50%;
  background:#111518;
  color:#f2dfb1;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}
.timeline-explorer-close:hover{transform:scale(1.06);box-shadow:0 0 0 4px rgba(184,138,55,.14)}
.timeline-explorer-kicker{margin:36px 0 12px;color:#c79b48;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.timeline-explorer h2{max-width:1100px;margin:0;color:#f6efe3;font-family:var(--serif);font-size:clamp(42px,6vw,86px);font-weight:500;line-height:1.02}
.timeline-explorer-dates{margin:20px 0 30px;color:#d5b66e;font-family:var(--serif);font-size:clamp(20px,2.2vw,30px)}
.timeline-explorer-ruler{position:relative;margin:0 0 42px;padding:34px 0 18px;border-top:1px solid rgba(213,182,110,.45);border-bottom:1px solid rgba(213,182,110,.22)}
.timeline-explorer-ruler-line{height:2px;background:linear-gradient(90deg,#78633a,#d5b66e,#78633a)}
.timeline-explorer-ruler-marker{position:absolute;left:50%;top:23px;transform:translateX(-50%);text-align:center;color:#f0d899;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.timeline-explorer-ruler-marker::after{content:"◆";display:block;margin-top:6px;font-size:16px}
.timeline-explorer-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:34px;max-width:1400px}
.timeline-explorer-panel{padding:28px;border:1px solid rgba(213,182,110,.2);background:#20252a}
.timeline-explorer-panel h3{margin:0 0 14px;color:#e5c982;font-family:var(--serif);font-size:27px;font-weight:500}
.timeline-explorer-panel p,.timeline-explorer-panel li{color:#d1cbc1;font-size:16px;line-height:1.72}
.timeline-explorer-panel ul{margin:12px 0 0;padding-left:20px}
.timeline-explorer-sites{display:grid;gap:14px}
.timeline-explorer-site{padding:16px 18px;border-left:3px solid #b88a37;background:#191d21}
.timeline-explorer-site strong{display:block;margin-bottom:4px;color:#f0e6d5;font-family:var(--serif);font-size:20px}
.timeline-explorer-site span{color:#bbb3a8;font-size:14px;line-height:1.55}
body.timeline-explorer-open{overflow:hidden}
@media(max-width:800px){
  .timeline-page{--timeline-pan-width:1450px}
  .timeline-explorer-grid{grid-template-columns:1fr}
  .timeline-explorer-shell{padding-top:70px}
}


/* =====================================================
   TIMELINE EXPLORER VISUAL REFINEMENT V3
   Full-browser chronology exhibit
   ===================================================== */
.timeline-explorer{
  background:radial-gradient(circle at 78% 10%,rgba(63,76,84,.18),transparent 34%),#14181b !important;
  color:#f2ede4 !important;
}
.timeline-explorer-shell{
  position:relative !important;
  width:min(1500px,calc(100% - 72px)) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:52px 0 72px !important;
}
.timeline-explorer-close{
  position:fixed !important;
  top:30px !important;
  right:34px !important;
  left:auto !important;
  margin:0 !important;
  width:44px !important;
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid #66baff !important;
  border-radius:50% !important;
  background:#12202a !important;
  color:#f6fbff !important;
  box-shadow:0 0 0 2px rgba(5,13,20,.9),0 0 16px rgba(67,169,255,.62) !important;
  font:300 25px/1 Arial,sans-serif !important;
  cursor:pointer !important;
  z-index:100005 !important;
  transition:transform .18s ease,box-shadow .18s ease !important;
}
.timeline-explorer-close:hover{
  transform:translateY(-1px) scale(1.07) !important;
  box-shadow:0 0 0 2px rgba(5,13,20,.95),0 0 24px rgba(67,169,255,.88) !important;
}
.timeline-explorer-kicker{
  margin:16px 0 12px !important;
  color:#d6a94f !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}
.timeline-explorer h2{
  max-width:1120px !important;
  margin:0 !important;
  color:#f7f0e6 !important;
  font-family:var(--serif) !important;
  font-size:clamp(46px,5.6vw,82px) !important;
  font-weight:500 !important;
  line-height:1.02 !important;
  text-shadow:0 3px 16px rgba(0,0,0,.55) !important;
}
.timeline-explorer-dates{
  margin:18px 0 30px !important;
  color:#e2bf6d !important;
  font-family:var(--serif) !important;
  font-size:clamp(20px,2vw,29px) !important;
}
.timeline-explorer-chronology{
  margin:4px 0 38px !important;
  padding:20px 0 12px !important;
}
.timeline-explorer-chronology-label{
  margin:0 0 20px !important;
  color:#d6a94f !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}
.timeline-explorer-axis{
  position:relative !important;
  height:92px !important;
  margin:0 8px !important;
}
.timeline-explorer-axis::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:37px !important;
  height:2px !important;
  background:linear-gradient(90deg,rgba(197,154,70,.42),#d4aa55,rgba(197,154,70,.42)) !important;
}
.timeline-explorer-tick{
  position:absolute !important;
  top:0 !important;
  transform:translateX(-50%) !important;
  min-width:130px !important;
  text-align:center !important;
}
.timeline-explorer-tick::after{
  content:"" !important;
  display:block !important;
  width:1px !important;
  height:18px !important;
  margin:7px auto 0 !important;
  background:#b99143 !important;
}
.timeline-explorer-tick strong{
  display:block !important;
  color:#f0e5ce !important;
  font:500 14px/1.2 var(--serif) !important;
}
.timeline-explorer-tick span{
  display:block !important;
  margin-top:4px !important;
  color:#aeb6b8 !important;
  font-size:11px !important;
}
.timeline-explorer-period{
  position:absolute !important;
  left:27% !important;
  width:43% !important;
  top:31px !important;
  height:14px !important;
  border:1px solid #e0b85f !important;
  border-radius:8px !important;
  background:#b98b35 !important;
  box-shadow:0 0 14px rgba(211,165,76,.24) !important;
}
.timeline-explorer-period-label{
  position:absolute !important;
  left:48.5% !important;
  top:57px !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  max-width:60% !important;
  color:#e5c77f !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  text-align:center !important;
}
.timeline-explorer-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr) !important;
  gap:28px !important;
  max-width:none !important;
}
.timeline-explorer-panel{
  padding:30px !important;
  border:1px solid rgba(214,169,79,.28) !important;
  background:#22282d !important;
  box-shadow:0 18px 45px rgba(0,0,0,.18) !important;
}
.timeline-explorer-panel h3{
  margin:0 0 16px !important;
  color:#f0d28e !important;
  font-family:var(--serif) !important;
  font-size:28px !important;
  font-weight:500 !important;
}
.timeline-explorer-panel p,
.timeline-explorer-panel li{
  color:#e6e1d8 !important;
  font-size:16px !important;
  line-height:1.75 !important;
}
.timeline-explorer-site{
  padding:17px 18px !important;
  border-left:3px solid #d2a343 !important;
  background:#181d21 !important;
}
.timeline-explorer-site strong{
  display:block !important;
  margin-bottom:6px !important;
  color:#f7ecd9 !important;
  font-family:var(--serif) !important;
  font-size:20px !important;
}
.timeline-explorer-site span{
  color:#d8d2c8 !important;
  font-size:14px !important;
  line-height:1.62 !important;
}
@media(max-width:800px){
  .timeline-explorer-shell{width:calc(100% - 36px) !important;padding-top:68px !important}
  .timeline-explorer-close{right:18px !important;left:auto !important;top:18px !important}
  .timeline-explorer-grid{grid-template-columns:1fr !important}
  .timeline-explorer-tick{min-width:92px !important}
  .timeline-explorer-tick strong{font-size:12px !important}
  .timeline-explorer-tick span{font-size:10px !important}
  .timeline-explorer-period-label{max-width:75% !important}
}

/* =====================================================
   TIMELINE EXPLORER VISUAL REFINEMENT V4
   Right-side close control + inset gold exhibit frame
   ===================================================== */
.timeline-explorer::after{
  content:"" !important;
  position:fixed !important;
  inset:10px !important;
  z-index:10001 !important;
  border:1px solid rgba(196,148,55,.92) !important;
  box-shadow:inset 0 0 0 1px rgba(224,185,101,.08) !important;
  pointer-events:none !important;
}
.timeline-explorer .timeline-explorer-close{
  position:fixed !important;
  top:32px !important;
  right:32px !important;
  bottom:auto !important;
  left:auto !important;
  inset-inline-start:auto !important;
  inset-inline-end:32px !important;
  transform:none !important;
  z-index:10020 !important;
}
.timeline-explorer .timeline-explorer-close:hover{
  transform:scale(1.06) !important;
}
@media(max-width:800px){
  .timeline-explorer::after{inset:7px !important}
  .timeline-explorer .timeline-explorer-close{
    top:20px !important;
    right:20px !important;
    left:auto !important;
    inset-inline-start:auto !important;
    inset-inline-end:20px !important;
  }
}

/* =====================================================
   TIMELINE PAN CONTROL V2
   Cross-browser custom horizontal navigator
   ===================================================== */
.timeline-page .timeline-board{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.timeline-page .timeline-board::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}
.timeline-pan-control{
  position:relative;
  height:34px;
  margin:0;
  padding:7px 18px;
  box-sizing:border-box;
  background:rgba(31,29,25,.78);
  border-top:1px solid rgba(184,138,55,.30);
  border-bottom:1px solid rgba(184,138,55,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  user-select:none;
  touch-action:none;
}
.timeline-pan-track{
  position:relative;
  width:100%;
  height:18px;
  border:1px solid rgba(205,166,88,.32);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 12px rgba(0,0,0,.20);
  cursor:pointer;
}
.timeline-pan-thumb{
  position:absolute;
  left:0;
  top:2px;
  height:12px;
  min-width:72px;
  box-sizing:border-box;
  border:1px solid rgba(218,178,91,.72);
  background:rgba(184,138,55,.20);
  box-shadow:0 0 12px rgba(184,138,55,.10),inset 0 0 8px rgba(255,224,151,.06);
  cursor:grab;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.timeline-pan-thumb::after{
  content:"↔";
  position:absolute;
  left:50%;
  top:50%;
  width:28px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%);
  border:1px solid rgba(224,186,101,.92);
  background:rgba(24,25,24,.88);
  color:#d7ad55;
  font-size:14px;
  line-height:1;
  box-shadow:0 0 9px rgba(184,138,55,.18);
}
.timeline-pan-thumb:hover,
.timeline-pan-thumb:focus-visible{
  outline:none;
  background:rgba(184,138,55,.31);
  border-color:#d7ad55;
  box-shadow:0 0 16px rgba(184,138,55,.24),inset 0 0 9px rgba(255,224,151,.08);
}
.timeline-pan-thumb.is-dragging{cursor:grabbing;background:rgba(184,138,55,.38);border-color:#e2bd6c}
.timeline-pan-control.is-disabled{display:none}
@media(max-width:700px){
  .timeline-pan-control{height:38px;padding:8px 10px}
  .timeline-pan-track{height:20px}
  .timeline-pan-thumb{top:2px;height:14px;min-width:58px}
}

/* =====================================================
   TIMELINE PAN CONTROL V3 — stable geometry + wide viewport
   ===================================================== */
.timeline-page{
  --timeline-pan-width:max(2200px, 125vw);
}

/* Keep timeline bars/markers perfectly still on rollover. Earlier timeline
   rules enlarged/repositioned entries on hover, which causes visible jiggle. */
.timeline-page .timeline-board .timeline-event:hover,
.timeline-page .timeline-board .timeline-event.is-active{
  min-width:0 !important;
  height:48px !important;
  overflow:hidden !important;
  transform:none !important;
}
.timeline-page .timeline-board .timeline-event.event-span:hover{
  transform:none !important;
}
.timeline-page .timeline-board .timeline-event.event-point:hover .point-label,
.timeline-page .timeline-board .timeline-event.event-point.label-above:hover .point-label{
  transform:none !important;
}
.timeline-page .timeline-board .timeline-event.event-point:hover .point-symbol{
  transform:none !important;
}

/* Navigator remains visible whenever the timeline is wider than its viewport. */
.timeline-pan-control{
  display:block;
  min-height:38px;
  padding:8px 20px;
  background:rgba(31,29,25,.58);
}
.timeline-pan-track{
  height:20px;
  border-color:rgba(205,166,88,.42);
  background:rgba(255,255,255,.045);
}
.timeline-pan-thumb{
  top:2px;
  height:14px;
  min-width:86px;
}
.timeline-pan-control.is-disabled{display:none !important}

/* =====================================================
   TIMELINE PAN CONTROL V4 — placement directly below timeline
   The timeline workspace is a flex column. Dynamically inserted controls
   need explicit order values or they default ahead of the authored sections.
   ===================================================== */
.timeline-workspace .timeline-pan-hint{
  order:7;
  margin:12px 0 8px;
}
.timeline-workspace .timeline-pan-control{
  order:8;
  margin:0 0 18px;
}

/* =====================================================
   TIMELINE PAN CONTROL V5 — instruction below slider
   ===================================================== */
.timeline-workspace .timeline-pan-control{
  order:7;
  margin:12px 0 0;
}
.timeline-workspace .timeline-pan-hint{
  order:8;
  margin:7px 0 18px;
}

/* =====================================================
   TIMELINE STABILITY V6 — genealogy click targets, stacked
   source bands, and scrolling exhibit frame
   ===================================================== */

/* Preserve each event type's authored geometry. The earlier global 48px
   stability rule flattened spans/points and caused range bands to collide. */
.timeline-page .timeline-board .timeline-event.event-span,
.timeline-page .timeline-board .timeline-event.event-span:hover,
.timeline-page .timeline-board .timeline-event.event-span.is-active{
  height:46px !important;
  min-width:52px !important;
  overflow:hidden !important;
  transform:none !important;
}
.timeline-page .timeline-board .span-lane{
  min-height:142px !important;
}
.timeline-page .timeline-board .span-lane .timeline-event.event-span:first-child{
  top:22px !important;
}
.timeline-page .timeline-board .span-lane .timeline-event.event-span:nth-child(2){
  top:76px !important;
  transform:none !important;
}
.timeline-page .timeline-board .span-lane .timeline-event.event-span:nth-child(2):hover,
.timeline-page .timeline-board .span-lane .timeline-event.event-span:nth-child(2).is-active{
  top:76px !important;
  transform:none !important;
}
.timeline-page .timeline-board .timeline-event.event-point,
.timeline-page .timeline-board .timeline-event.event-point:hover,
.timeline-page .timeline-board .timeline-event.event-point.is-active{
  width:1px !important;
  min-width:1px !important;
  height:74px !important;
  overflow:visible !important;
  transform:translateX(-50%) !important;
}

/* Genealogy life bars remain stable while still receiving their selected
   green state from the timeline script. */
.timeline-page .timeline-board .patriarch-bar,
.timeline-page .timeline-board .patriarch-bar:hover,
.timeline-page .timeline-board .patriarch-bar.is-active,
.timeline-page .timeline-board .patriarch-bar.is-dimmed:hover{
  height:26px !important;
  transform:none !important;
}

/* The gold exhibit frame belongs to the scrolling modal content rather than
   the browser viewport, so no fixed horizontal rule cuts through content. */
.timeline-explorer::after{
  position:absolute !important;
  inset:10px !important;
  min-height:calc(100% - 20px) !important;
}
@media(max-width:800px){
  .timeline-explorer::after{inset:7px !important;min-height:calc(100% - 14px) !important}
}


/* =====================================================
   TIMELINE STABILITY V7 — cursor alignment + complete modal frame
   ===================================================== */
.timeline-explorer::after{
  top:10px !important;
  right:10px !important;
  bottom:auto !important;
  left:10px !important;
  height:calc(var(--timeline-explorer-scroll-height, 100vh) - 20px) !important;
  min-height:0 !important;
  box-sizing:border-box !important;
}
.timeline-explorer .timeline-explorer-close{
  right:48px !important;
  inset-inline-end:48px !important;
}
@media(max-width:800px){
  .timeline-explorer::after{
    top:7px !important;right:7px !important;bottom:auto !important;left:7px !important;
    height:calc(var(--timeline-explorer-scroll-height, 100vh) - 14px) !important;
    min-height:0 !important;
  }
  .timeline-explorer .timeline-explorer-close{right:38px !important;inset-inline-end:38px !important;}
}

/* =====================================================
   TIMELINE STABILITY V8 — Adam-to-Noah cursor + Watcher bands
   ===================================================== */
/* Restore the intended two-line historical-band height. Keep both Watcher
   bands on fixed, separate rows so hover/selection cannot collapse them. */
.timeline-page .timeline-board .span-lane{
  min-height:166px !important;
}
.timeline-page .timeline-board .timeline-event.event-span,
.timeline-page .timeline-board .timeline-event.event-span:hover,
.timeline-page .timeline-board .timeline-event.event-span.is-active{
  height:58px !important;
  min-height:58px !important;
  overflow:hidden !important;
  transform:none !important;
  box-sizing:border-box !important;
}
.timeline-page .timeline-board .span-lane .timeline-event.event-span:first-child,
.timeline-page .timeline-board .span-lane .timeline-event.event-span:first-child:hover,
.timeline-page .timeline-board .span-lane .timeline-event.event-span:first-child.is-active{
  top:20px !important;
}
.timeline-page .timeline-board .span-lane .timeline-event.event-span:nth-child(2),
.timeline-page .timeline-board .span-lane .timeline-event.event-span:nth-child(2):hover,
.timeline-page .timeline-board .span-lane .timeline-event.event-span:nth-child(2).is-active{
  top:88px !important;
  transform:none !important;
}


/* =====================================================
   TIMELINE STABILITY V9 — definite drag release + readable dense bars
   ===================================================== */
.timeline-page .timeline-board .timeline-event:not(.event-point):not(.event-span):not(.patriarch-bar),
.timeline-page .timeline-board .timeline-event:not(.event-point):not(.event-span):not(.patriarch-bar):hover,
.timeline-page .timeline-board .timeline-event:not(.event-point):not(.event-span):not(.patriarch-bar).is-active{
  min-height:52px !important;
  height:52px !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  transform:none !important;
}
.timeline-page .timeline-board .timeline-event:not(.event-point):not(.event-span):not(.patriarch-bar) strong,
.timeline-page .timeline-board .timeline-event:not(.event-point):not(.event-span):not(.patriarch-bar) small{
  display:block !important;
  line-height:1.18 !important;
  white-space:normal !important;
}
.timeline-page .timeline-board.is-dragging{cursor:grabbing !important;}

/* =====================================================
   TIMELINE EXPLORER V9 — frameless modal + subtle museum grid
   Removes the unstable outer gold frame and replaces the flat modal field
   with a very light square-grid texture. Interior gold accents remain.
   ===================================================== */
.timeline-explorer::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.timeline-explorer{
  background-color:#14181b !important;
  background-image:
    linear-gradient(rgba(231,224,208,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,224,208,.026) 1px, transparent 1px),
    radial-gradient(circle at 78% 10%,rgba(63,76,84,.14),transparent 34%) !important;
  background-size:44px 44px,44px 44px,auto !important;
  background-position:0 0,0 0,0 0 !important;
}
.timeline-explorer .timeline-explorer-close{
  right:32px !important;
  inset-inline-end:32px !important;
}
@media(max-width:800px){
  .timeline-explorer .timeline-explorer-close{
    right:20px !important;
    inset-inline-end:20px !important;
  }
}

/* =====================================================
   GENEALOGY SYNCHRONIZED GREEN SELECTION — VERSION 14
   Keep the thin life bar and its larger genealogy record visibly linked.
   ===================================================== */
.timeline-page .patriarch-bar.is-active,
html[data-theme="archive"] .timeline-page .patriarch-bar.is-active{
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  background:linear-gradient(90deg,#bfd8b2 0%,#dcebd4 58%,#f3f6ed 100%) !important;
  border-color:#63845a !important;
  color:#36553a !important;
  box-shadow:0 0 0 1px rgba(99,132,90,.18),0 6px 16px rgba(49,72,45,.14) !important;
}
.timeline-page .patriarch-bar.is-active .patriarch-label,
html[data-theme="archive"] .timeline-page .patriarch-bar.is-active .patriarch-label{
  color:#36553a !important;
  font-weight:700 !important;
  text-shadow:none !important;
}
.timeline-page .illuminated-node.is-active,
html[data-theme="archive"] .timeline-page .illuminated-node.is-active{
  opacity:1 !important;
  background:linear-gradient(90deg,rgba(177,207,163,.55),rgba(232,241,226,.94)) !important;
  border-color:#63845a !important;
  box-shadow:0 0 0 1px rgba(99,132,90,.18),0 7px 16px rgba(49,72,45,.12) !important;
}
.timeline-page .illuminated-node.is-active .node-copy strong,
.timeline-page .illuminated-node.is-active .node-copy span,
.timeline-page .illuminated-node.is-active .node-years,
html[data-theme="archive"] .timeline-page .illuminated-node.is-active .node-copy strong,
html[data-theme="archive"] .timeline-page .illuminated-node.is-active .node-copy span,
html[data-theme="archive"] .timeline-page .illuminated-node.is-active .node-years{
  color:#36553a !important;
}

/* Timeline exhibit chronology cleanup — 23 Sep 2026 */
.timeline-explorer-chronology{
  margin:8px 0 42px !important;
  padding:22px 0 10px !important;
}
.timeline-explorer-chronology-label{
  margin-bottom:24px !important;
}
.timeline-explorer-axis{
  height:126px !important;
  margin:0 12px !important;
}
.timeline-explorer-axis::before{
  top:60px !important;
  height:1px !important;
  background:rgba(201,158,73,.72) !important;
}
.timeline-explorer-tick{
  top:0 !important;
  min-width:112px !important;
}
.timeline-explorer-tick:first-child{
  transform:none !important;
  text-align:left !important;
}
.timeline-explorer-tick:last-child{
  transform:translateX(-100%) !important;
  text-align:right !important;
}
.timeline-explorer-tick::after{
  width:1px !important;
  height:18px !important;
  margin:12px auto 0 !important;
  background:rgba(201,158,73,.82) !important;
}
.timeline-explorer-tick:first-child::after{margin-left:0 !important;margin-right:auto !important}
.timeline-explorer-tick:last-child::after{margin-left:auto !important;margin-right:0 !important}
.timeline-explorer-tick strong{
  font-size:14px !important;
  line-height:1.15 !important;
}
.timeline-explorer-tick span{
  margin-top:6px !important;
  font-size:11px !important;
  line-height:1.15 !important;
}
.timeline-explorer-period{
  top:53px !important;
  height:14px !important;
  z-index:2 !important;
}
.timeline-explorer-period-label{
  top:84px !important;
  max-width:72% !important;
  line-height:1.35 !important;
}


/* TIMELINE MODAL · MUSEUM EXHIBIT CROSS-LINK STANDARD · V2 */
.timeline-explorer-site{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:0;
  padding:0!important;
  overflow:hidden;
}
.timeline-explorer-site-copy{padding:16px 18px;min-width:0}
.timeline-explorer-site-copy strong{display:block;margin-bottom:4px;color:#f0e6d5;font-family:var(--serif);font-size:20px}
.timeline-explorer-site-copy span{display:block;color:#bbb3a8;font-size:14px;line-height:1.55}
.timeline-explorer-exhibit-link{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:196px;
  max-width:250px;
  padding:16px 22px;
  background:rgba(190,139,48,.13);
  color:#e4b652!important;
  font:800 12px/1.35 var(--sans);
  letter-spacing:.10em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none!important;
  border-left:3px solid #c89538;
  box-shadow:inset 0 0 0 1px rgba(207,158,68,.34);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.timeline-explorer-exhibit-link b{color:#efc66f;font-size:17px;line-height:1;font-weight:700}
.timeline-explorer-exhibit-link:hover,
.timeline-explorer-exhibit-link:focus-visible{
  background:rgba(200,149,56,.24);
  color:#f3cd78!important;
  box-shadow:inset 0 0 0 1px rgba(236,190,94,.70),0 0 18px rgba(194,142,47,.12);
  outline:none;
}
.timeline-explorer-exhibit-link:focus-visible{box-shadow:inset 0 0 0 2px #e8bc62,0 0 18px rgba(194,142,47,.16)}
@media(max-width:720px){
  .timeline-explorer-site{grid-template-columns:1fr}
  .timeline-explorer-exhibit-link{min-width:0;max-width:none;border-left:0;border-top:2px solid #c89538;justify-content:flex-start;text-align:left}
}

/* =====================================================
   TIMELINE MODAL CLOSE BUTTON POSITION — VERSION 16
   Keep the approved blue-ring close control comfortably inside the viewport.
   ===================================================== */
.timeline-explorer .timeline-explorer-close{
  top:28px !important;
  right:32px !important;
  inset-block-start:28px !important;
  inset-inline-end:32px !important;
  bottom:auto !important;
  left:auto !important;
}
@media(max-width:800px){
  .timeline-explorer .timeline-explorer-close{
    top:22px !important;
    right:20px !important;
    inset-block-start:22px !important;
    inset-inline-end:20px !important;
  }
}
\n\n/* TIMELINE FINAL POLISH · EXHIBIT LINK VISIBILITY + ADAM/NOAH BAR ROOM · V18 */
.timeline-explorer-sites a,
.timeline-explorer-site a,
.timeline-explorer-site-copy a,
.timeline-explorer-site .timeline-explorer-exhibit-link,
.timeline-explorer-exhibit-link{
  color:#f0bf55 !important;
  font-weight:700 !important;
  text-decoration:none !important;
  text-shadow:0 0 12px rgba(220,165,62,.16) !important;
}
.timeline-explorer-sites a:hover,
.timeline-explorer-site a:hover,
.timeline-explorer-site-copy a:hover,
.timeline-explorer-exhibit-link:hover{
  color:#ffd77d !important;
  text-shadow:0 0 16px rgba(235,184,78,.30) !important;
}
/* Generic Adam-to-Noah archaeological bars are positioned inline by timeline.js.
   Give multiline title/date combinations enough internal breathing room. */
.timeline-page:not(.post-flood-timeline-page) .timeline-event:not(.event-point):not(.event-span){
  min-height:68px !important;
  padding:10px 12px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.timeline-page:not(.post-flood-timeline-page) .timeline-event:not(.event-point):not(.event-span) strong{
  line-height:1.18 !important;
  margin:0 0 4px !important;
}
.timeline-page:not(.post-flood-timeline-page) .timeline-event:not(.event-point):not(.event-span) small{
  line-height:1.16 !important;
  margin:0 !important;
}