/* ═══════════════════════════════════════════
   GRAND DUCHY OF LITHUANIA — HISTORY TIMELINE
═══════════════════════════════════════════ */

/* Standard a11y "visually hidden" pattern — present for screen readers and
   crawlers, invisible on screen. Never display:none (that removes it from
   both). Used for the server-rendered ruler/timeline link index. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Custom Properties ── */
:root {
  --gold:        #c9a844;
  --gold-dim:    rgba(201,168,68,0.75);
  --gold-glow:   rgba(201,168,68,0.18);
  --white:       rgba(255,255,255,0.85);
  --white-mid:   rgba(255,255,255,0.70);
  --white-dim:   rgba(255,255,255,0.5);
  --dark:        #050308;

  /* Layout */
  --nav-h:       77px;
  --panel-w:     670px;    /* total left panel width */
  --tl-x:        465px;    /* left edge of timeline track */
  --tl-line-x:   calc(var(--tl-x) + 14px);  /* actual visual line (= dot centre) */
  --tl-item-h:   78px;     /* default item height */

  /* Transitions */
  --t-bg:        1.1s cubic-bezier(0.4,0,0.2,1);
  --t-ui:        0.42s cubic-bezier(0.4,0,0.2,1);

  /* Fonts */
  /* Heading font A/B test — only the LAST uncommented line wins (CSS
     cascade), so to try a different candidate just reorder which line is
     last, or comment out all but the one you want active. */
  --f-heading:   'Cinzel', Georgia, serif;
  --f-heading:   'Cinzel Decorative', Georgia, serif;
  --f-heading:   'Cormorant SC', Georgia, serif;
  --f-heading:   'Libre Caslon Display', Georgia, serif;
  --f-heading:   'Sedan SC', Georgia, serif;
  --f-heading:   'Unna', Georgia, serif;
  --f-heading:   'Inria Serif', Georgia, serif;
  --f-body:      'Source Sans 3', 'Crimson Text', Georgia, serif;
  --f-ui:        'Source Sans 3', system-ui, sans-serif;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--dark); color:var(--white); 
  font-family:var(--f-body);
       overflow:hidden; line-height:1.5; }
button { cursor:pointer; background:none; border:none; color:inherit; font-family:inherit; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { display:block; max-width:100%; }

/* ════════════════════════════════════════
   BACKGROUNDS
════════════════════════════════════════ */
#bg-container {
  position:fixed; inset:0; z-index:0; overflow:hidden;
}
.bg-layer {
  position:absolute; inset:0;
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  transition:opacity var(--t-bg);
  opacity:0;
}
.bg-layer.active  { opacity:1; }
.bg-layer.fadeout { opacity:0; }

/* Intro background video — sits over #bg-a/#bg-b (which still show the
   intro poster image as an instant-visible fallback) and is only faded in
   while body.intro-mode is active; visibility is CSS-only, no JS toggle. */
#bg-intro-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-bg);
}
body.intro-mode #bg-intro-video { opacity:1; }

#bg-grain {
  position:absolute; inset:0; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Overlay: layered gradients for text readability across the full viewport */
#bg-overlay {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    /* Base dark wash across the whole screen */
    linear-gradient(
      to bottom,
      rgba(3,2,7,0.42) 0%,
      rgba(3,2,7,0.68) 100%
    ),
    /* Left panel + content area overlay */
    linear-gradient(to right,
      rgba(3,2,7,0.92) 0%,
      rgba(3,2,7,0.80) calc(var(--tl-x) - 20px),
      rgba(3,2,7,0.65) var(--panel-w),
      rgba(3,2,7,0.58) calc(var(--panel-w) + 180px),
      rgba(3,2,7,0.52) 100%
    ),
    /* Bottom vignette — anchors the composition */
    linear-gradient(to top,
      rgba(3,2,7,0.88) 0%,
      rgba(3,2,7,0.35) 28%,
      rgba(3,2,7,0)    48%
    ),
    /* Top vignette */
    linear-gradient(to bottom,
      rgba(3,2,7,0.72) 0%,
      rgba(3,2,7,0)    18%
    );
  transition: opacity 0.5s ease;
}

/* Intro-specific overlay — lighter, more open; crossfades with #bg-overlay */
#bg-overlay-intro {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      rgba(3,2,7,0.32) 0%,
      rgba(3,2,7,0.48) 100%
    ),
    radial-gradient(
      rgba(3,2,7,0.72),
      rgba(3,2,7,0.15)
    ),
    linear-gradient(to top,
      rgba(3,2,7,0.58) 0%,
      rgba(3,2,7,0.35) 28%,
      rgba(3,2,7,0)    48%
    ),
    linear-gradient(to bottom,
      rgba(3,2,7,0.52) 0%,
      rgba(3,2,7,0)    18%
    );
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ════════════════════════════════════════
   APP SHELL (fixed)
════════════════════════════════════════ */
#app {
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:2;
  display:grid;
  grid-template-rows: 1fr;
  grid-template-columns: var(--panel-w) 1fr;
  grid-template-areas: "timeline content";
  pointer-events:none;
}
#app > * { pointer-events:auto; }

/* ════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════ */
/* Symmetric left/right padding — the logo lines up with the Rulers &
   Dynasties panel's left edge, and the language switcher sits the same
   distance from the right edge. */
#main-nav {
  position:fixed; top:0; left:35px; right:35px; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  z-index:101;
}
.nav-left { display:flex; align-items:center; }
.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-brand {
  font-family:var(--f-heading); font-size:12px; font-weight:600;
  letter-spacing:4px; color:var(--gold); white-space:nowrap;
}

#app-logo-btn {
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  display:block;
  transition:opacity 0.2s;
}
#app-logo-btn:hover { opacity:0.85; }

#app-logo {
  width:180px;
  height:auto;
  display:block;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.55));
}
.nav-links { display:flex; gap:42px; margin-left:auto; margin-right:100px; }
.nav-link {
  font-family: var(--f-ui);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0px;
    color: var(--white-mid);
    transition: color 0.2s;
    padding: 4px 0;
    position: relative;
}
.nav-link::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1px; background:var(--gold); transform:scaleX(0); transition:transform 0.25s;
}
.nav-link:hover { color:var(--white); }
.nav-link.active { color:var(--white); }
.nav-link.active::after { transform:scaleX(1); }
.nav-right { display:flex; align-items:center; }
.lang-wrap { position:relative; }
.lang-toggle {
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-ui); font-size:11px; font-weight:600;
  letter-spacing:3px; color:var(--white-mid); transition:color 0.2s;
}
.lang-toggle:hover,
.lang-toggle.is-open { color:var(--gold); }
.lang-chevron { transition:transform 0.2s; }
.lang-toggle.is-open .lang-chevron { transform:rotate(180deg); }
.lang-menu {
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:96px;
  background:rgba(10,8,20,0.97);
  border:1px solid rgba(201,168,68,0.22);
  border-radius:3px;
  padding:5px 0;
  z-index:20;
}
.lang-option {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px;
  font-family:var(--f-ui); font-size:11px; font-weight:600;
  letter-spacing:2px; color:var(--gold);
}
.lang-check { margin-left:auto; opacity:0; color:var(--gold); }
.lang-option.active .lang-check { opacity:1; }

.nav-burger {
  display:none;
  align-items:center; justify-content:center;
  width:50px; height:50px;
  margin-left:14px;
  color:var(--white-mid);
  background:none; border:none;
  transition:color 0.2s;
}
.nav-burger:hover { color:var(--gold); }

/* ════════════════════════════════════════
   LEFT PANEL
════════════════════════════════════════ */
#timeline-panel {
  grid-area:timeline;
  position:relative;
}

/* ── Map (viewport bottom-right corner) ── */
#map-container {
  position:fixed;
  bottom:58px; right:16px;
  width:26.4vw;
  aspect-ratio:705 / 574; /* matches the *-lithuania.jpg crop dimensions */
  pointer-events:none;
  z-index:3;
  transition:opacity var(--t-ui);
}
#map-container::after {
  content:'';
  position:absolute;
  inset:-28px;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(
    ellipse at center,
    rgba(3,2,7,0.0) 0%,
    rgba(3,2,7,0.0) 44%,
    rgba(3,2,7,0) 99%
  );
}
/* Two stacked layers crossfade between per-year map images as the active
   timeline year changes (see updateCornerMap in main.js) — same technique,
   same filter treatment, as the Map modal's stage layers. */
.corner-map-layer {
  position:absolute; inset:0;
  z-index:1;
  width:100%; height:100%;
  background-size:contain; background-position:center; background-repeat:no-repeat;

  /* ── OPTION A (previous): soft rectangular gradient fade ──
     Fades the whole top-left / bottom-right corner uniformly, regardless
     of what's actually drawn there (land or sea).
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 45%),
    linear-gradient(to right, transparent 0%, #000 42%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 45%),
    linear-gradient(to right, transparent 0%, #000 42%);
  mask-composite:intersect;
  */

  /* ── OPTION B (previous): hard-edged polygon following the coastline ──
     Traces the Baltic Sea shore (top-left) and the Black Sea / Sea of
     Azov shore (bottom-right) on the *-lithuania.jpg crops, so open water
     is clipped away instead of just fading a rectangular corner. Tuned
     against the 950–2005 map set; since the coastline sits at roughly the
     same place in every crop, one polygon works for all of them.
  clip-path: polygon(
    53% 0%, 100% 0%, 100% 82%,
    94% 88%, 90% 84%, 85% 90%, 80% 86%, 75% 92%, 70% 96%, 68% 100%,
    0% 100%, 0% 38%,
    8% 34%, 14% 40%, 20% 30%, 26% 33%, 32% 22%, 38% 26%, 44% 16%, 50% 20%, 53% 0%
  );*/

  /* ── OPTION C (current): SVG cutout mask ──
     Traces the actual coastline/border shapes to hide, drawn against the
     705×574 map crops used across the *-lithuania.jpg set. mask-size:cover
     mirrors the background-size:cover below so both scale/crop the same
     way regardless of the container's aspect ratio — otherwise the mask
     (stretched to 100% 100%) drifts out of alignment with the image.
     Two extra layers reprise OPTION A's top/left rectangular fade — same
     shape as before — so the SVG's hard cutout edge along the top and left
     margins doesn't read as a visible seam at this small size; all layers
     are composited together so only their overlap stays visible. */
  filter:grayscale(1) invert(1) contrast(.95) brightness(2.5) drop-shadow(0 4px 24px rgba(0,0,0,0.6));
  transition:opacity 1s cubic-bezier(0.4,0,0.2,1);
  opacity:0;
}
.corner-map-layer.active  { opacity:1; }
.corner-map-layer.fadeout { opacity:0; }


/* ── Timeline arrows — both at the very top, centred on the line ──
   ↑ = earlier dates  |  ↓ = later dates
   They communicate the direction time runs along the timeline.        */
.timeline-arrows {
  position:absolute;
  left:calc(var(--tl-line-x) - 32px);
  top:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
  padding-top:14px;
  z-index:5;
}
.tl-arrow {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border:0px solid rgba(255,255,255,0.14);
  border-radius:2px;
  color:rgba(255,255,255,0.38);
  transition:all 0.25s;
}
.tl-arrow:hover { border-color:var(--gold-dim); color:var(--white-mid); }
.tl-arrow.order-active {
  color:var(--gold);
  border-color:rgba(201,168,68,0.50);
  box-shadow:0 0 12px rgba(201,168,68,0.12);
}

/* ── Filter dropdown ── */
.filter-wrap { position:relative; margin-left:8px; }
.filter-btn {
  display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-ui);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--white-dim);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 3px;
    padding: 5px 12px;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.filter-btn:hover,
.filter-btn.is-open { color:var(--gold); border-color:var(--gold-dim); }
.filter-chevron { transition:transform 0.2s; flex-shrink:0; }
.filter-btn.is-open .filter-chevron { transform:rotate(180deg); }
.filter-menu {
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:186px;
  background:rgba(10,8,20,0.97);
  border:1px solid rgba(201,168,68,0.22);
  border-radius:3px;
  padding:5px 0;
  z-index:20;
}
.filter-option {
  display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 13px;
    font-family: var(--f-ui);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.8px;
    color: var(--white-mid);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.filter-option:hover { color:var(--white); background:rgba(255,255,255,0.04); }
.filter-option.active { color:var(--gold); }
.filter-check { margin-left:auto; opacity:0; color:var(--gold); transition:opacity 0.15s; }
.filter-option.active .filter-check { opacity:1; }

/* ── Search field — styling matches .filter-btn (border, padding, font) ── */
.search-wrap {
  display:flex; align-items:center; gap:5px;
  margin-left:8px;
  border:1px solid rgba(255,255,255,0.34); border-radius:3px;
  padding:5px 12px;
  width:115px;
  overflow:hidden;
  transition:border-color 0.2s, width 0.25s ease;
}
.search-wrap:focus-within { border-color:var(--gold-dim); width:140px; }
.search-icon { color:var(--white-dim); flex-shrink:0; transition:color 0.2s; }
.search-wrap:focus-within .search-icon { color:var(--gold); }
.search-input {
  background:none; border:none; outline:none;
  color:var(--white-dim);
  font-family:var(--f-ui); font-size:10.5px; font-weight:500; letter-spacing:0.5px;
  width:100%; min-width:0;
}
.search-input::placeholder { color:rgba(255,255,255,0.32); }
.search-input::-webkit-search-cancel-button { display:none; }
.search-clear {
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.35); flex-shrink:0;
  transition:color 0.15s;
}
.search-clear[hidden] { display:none; }
.search-clear:hover { color:var(--white-mid); }
.search-wrap.has-query { border-color:rgba(201,168,68,0.35); }

/* ── Order toggle — hidden; direction is controlled by top arrows ── */
.order-toggle { display:none; }
.order-toggle {
  position:absolute;
  left:var(--tl-line-x);
  bottom:22px;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:7px;
  font-family:var(--f-ui); font-size:8.5px; font-weight:600; letter-spacing:2px;
  color:var(--white-dim);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:2px; padding:5px 10px;
  transition:all 0.2s; white-space:nowrap;
  z-index:5;
}
.order-toggle:hover { color:var(--gold-dim); border-color:var(--gold-dim); }

/* ── Timeline track ── */
#timeline-track {
  position:absolute;
  left:var(--tl-x);
  top:0; bottom:0;
  width:calc(var(--panel-w) - var(--tl-x));
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}
#timeline-line {
  position:absolute;
  left:13px; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.28) 28%,
    rgba(255,255,255,0.28) 52%,
    rgba(255,255,255,0) 100%
  );
}
#timeline-items {
  position:absolute; left:0; right:0; top:0;
  transition:transform 0.72s cubic-bezier(0.4,0,0.2,1);
}

/* ── Era indicator — static gold marker naming the active era ──
   Sits in the gap between the ruler card and the timeline track; `left` is
   an inset off --tl-x so it stays clear of the ruler card at every
   breakpoint without its own media-query overrides. Deliberately static:
   the viewport/element fill a fixed box (no top/height driven by scroll
   position — see updateEraIndicator in main.js, which only toggles
   visibility and swaps the label text). justify-content:center clusters
   the two short gradient lines right against the label, vertically
   centered in the track, instead of spanning its full height. */
.era-indicator-viewport {
  position:absolute;
  left:calc(var(--tl-x) - 35px);
  width:14px; top:0; bottom:0;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}
.era-indicator {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity 0.3s ease;
}
.era-indicator.is-visible { opacity:1; }
.era-indicator-line {
  flex:0 0 auto;
  width:1px; height:22px;
}
.era-indicator-line--top    { background: linear-gradient(to top, var(--white-dim), transparent);
    opacity: .8;);
    opacity: .8; }
.era-indicator-line--bottom { background: linear-gradient(to bottom, var(--white-dim), transparent);
    opacity: .8;}
.era-indicator-label {
      flex: 0 0 auto;
    padding: 14px 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--f-heading);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 5.5px;
    text-transform: uppercase;
    color: var(--white-dim);
    white-space: nowrap;
    opacity: .6;
}
/* Brief fade+scale pulse when the label text itself changes (era-to-era
   while the indicator stays visible) — see updateEraIndicator in main.js,
   which toggles .is-swapping just before/after the textContent swap. */
#era-indicator-label-text {
  display:inline-block;
  transition:opacity 0.16s ease, transform 0.16s ease;
}
#era-indicator-label-text.is-swapping {
  opacity:0;
  transform:scale(0.85);
}

/* ── Timeline item ── */
.tl-item {
  display:flex; align-items:flex-start;
  height:var(--tl-item-h);
  cursor:pointer;
  position:relative;
}
.tl-item:hover .tl-year { color:var(--white-mid); }

/* Dot on the timeline line */
.tl-dot {
  position:relative;
  width:28px; flex-shrink:0;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:10px;
  z-index:2;
}
.tl-dot::before {
  content:'';
  display:block;
  width:7px; height:7px;
  border-radius:50%;
  border: 0px solid rgba(255, 255, 255, 0.22);
  background: rgb(78 77 82);
  transition:all 0.15s;
}

/* Year + era name */
.tl-label {
  padding-left:14px;
  padding-top:7px;
}
.tl-year-row {
  display:flex; align-items:flex-start; gap:5px;
}
/* Wraps just the year — gives it a box that's unaffected by the badge/icon
   cluster next to it (see .tl-year-badges), so mobile can center the year
   alone regardless of how many badges/icons sit beside it. */
.tl-year-wrap {
  display:inline-flex;
  position:relative;
}
/* Event-count badge + category icons, grouped so they can be repositioned
   as one unit on mobile (see the @media max-width:760px override) without
   touching .tl-year-wrap's own box. */
.tl-year-badges {
  display:inline-flex; align-items:center; gap:5px;
}
.tl-year {
  font-family:var(--f-heading);
  font-size:13px; font-weight:400;
  letter-spacing:2px; color:var(--white-dim);
  line-height:1; transition:font-size 0.2s ease, color 0.2s ease, letter-spacing 0.2s ease, text-shadow 0.2s ease;
}
.tl-event-count {
  background:rgba(255,255,255,0.60);
  color:var(--dark);
  font-family:var(--f-ui); font-size:14px; font-weight:600;
  min-width:15px; height:15px;
  border-radius:8px; padding:1px 1px;
  display:flex; align-items:center; justify-content:center;
  line-height:1; flex-shrink:0;
  margin-top:-8px; letter-spacing:0;
  transform:scale(0.8); transform-origin:left center;
  transition:transform 0.35s, background 0.35s;
}
.tl-item.active .tl-event-count {
  background:var(--gold);
  transform:scale(1);
}
.tl-cat-icon {
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.4);
  margin-top:-7px; flex-shrink:0;
  transition:color 0.3s;
}
.tl-cat-icon svg { display:block; width:15px; height:15px; }
.tl-item.active .tl-cat-icon { color:var(--gold); }
.tl-era {
  display:block;
  font-family:var(--f-ui); 
  font-size:11.5px;
  letter-spacing:0px; color:rgba(255,255,255,0.15);
  margin-top:5px; text-transform:capitalize;
  transition:all 0.35s;
}

/* ── Intro item — Welcome label, no year ──
   The height/margin-top offset below is scoped to *only* the active state
   (i.e. while still on the intro screen). When the intro item isn't active
   it's just rendered like a normal 78px .tl-item (matching --tl-item-h /
   the JS positioning math's `defH` constant) — it used to apply
   unconditionally, which shifted every subsequent era's active-item
   centering off by ~188px for as long as the intro item stayed inside the
   ±10 rendered window (i.e. until the 11th era scrolled it out of view). */
.tl-item.is-intro .tl-dot::before { border-color:rgba(201,168,68,0.35); }
.tl-item.is-intro .tl-era { font-family:var(--f-heading); font-size:11px; letter-spacing:2px; color:rgba(255,255,255,0.55); padding-top:6px; }
.tl-item.active.is-intro {
  /* -100px (rather than the previous -160px) lines "Welcome" up with the
     "Explore the History of Lithuania" heading; the extra height (rather
     than the previous 50px) pushes the next item (853) further down
     without moving "Welcome" itself, opening up the gap between them. */
  height: 90px;
  margin-top: -154px;
}
.tl-item.active.is-intro .tl-era { font-size: 30px;
    color: var(--gold);
    letter-spacing: 2px;
    font-weight: 600;

  }
/* Nudges "Welcome" up so its vertical center lines up with the gold "+"
   circle to its left (it was sitting a bit low against it). */
.tl-item.active.is-intro .tl-label { padding-top:4px; margin-top:-12px; }

/* ── Far items — year only, era label hidden ── */
.tl-item.far .tl-era { opacity:0; }

/* ── Near items (±1 from active) ── */
.tl-item.near .tl-dot::before { border-color:rgba(255,255,255,0.50); width:10px; height:10px; }
.tl-item.near .tl-year { color:rgba(255,255,255,0.60); font-size:15px; }
.tl-item.near .tl-era  { color:rgba(255,255,255,0.45); opacity:1; }

/* ── Active item ── */
.tl-item.active {
  height:110px;
  align-items:flex-start;
}

/* Gold "+" circle replaces the normal dot */
.tl-item.active .tl-dot {
  padding-top:8px;
}
.tl-item.active .tl-dot::before {
  content:'+';
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  font-size:16px; font-weight:300; line-height:1;
  color: var(--dark);
  border:1.5px solid var(--gold);
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 5px rgba(201,168,68,0.08), 0 0 20px rgba(201,168,68,0.18);
  transition:all 0.35s;
  position:absolute;
  left:50%; top:8px;
  transform:translateX(-50%);
}

.tl-item.active .tl-year {
  font-size:36px; font-weight:600;
  color:var(--gold);
  letter-spacing:2px; line-height:1;
  text-shadow:0 0 40px rgba(201,168,68,0.2);
}
.tl-item.active .tl-era {
 
    font-size: 12px;
    font-weight: 400;
    color: rgba(201, 168, 68, 1);
    letter-spacing: 0px;
    margin-top: 5px;
    text-transform: capitalize;
    opacity: 1;
    line-height: 1.4;
}
.tl-item.active .tl-label { padding-top:4px; }

/* ── Tragic events — red accent instead of gold ── */
body.tragic .tl-item.active .tl-year {
  color:#c0392b;
  text-shadow:0 0 40px rgba(192,57,43,0.25);
}
body.tragic .tl-item.active .tl-era {
  color:#c0392b;
}
body.tragic .tl-item.active .tl-dot::before {
  border-color:#c0392b;
  background:#c0392b;
  box-shadow:0 0 0 5px rgba(192,57,43,0.10), 0 0 20px rgba(192,57,43,0.25);
}
body.tragic .tl-item.active .tl-event-count {
  background:#c0392b;
}
body.tragic #event-subtitle {
  color:#c0392b;
}
body.tragic .modal-year-tag {
  color:#c0392b;
}
body.tragic .read-more {
  color:#fff;
  border-color:#c0392b;
}
body.tragic .read-more::before {
  background:#c0392b;
}
body.tragic .ev-arrow {
  color:#c0392b;
  border-color:rgba(192,57,43,0.55);
}
body.tragic #bg-overlay::after {
  content:'';
  position:absolute; inset:0;
  background:rgba(100,10,10,0.18);
  pointer-events:none;
}

/* ════════════════════════════════════════
   CONTENT PANEL
════════════════════════════════════════ */
#content-panel {
  grid-area:content;
  position:relative;
  display:flex; align-items:center;
  padding:0 64px 0 68px;
  overflow:hidden;
  z-index:4;
}
/* Shifted up ~50px (visual-only, doesn't affect the flex-centering layout
   math) to leave more breathing room below for the corner map. */
#content-inner { max-width:600px; transform:translateY(-50px); }

/* Pagination — sits above the title. Shared by the main content panel
   (#event-nav) and the event modal (its own unscoped .event-nav instance,
   built fresh per open since the modal has no fixed id to hang state off). */
.event-nav {
  display:flex; align-items:center; gap:12px;
  margin-bottom:20px;
  visibility:visible;
}

/* Disclaimer shown above the title whenever the timeline is narrowed by a
   search phrase and/or category filter — otherwise it's easy to forget a
   filter is active and wonder why so few events show up. */
.filter-banner {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
  margin-bottom:16px;
  padding:8px 14px;
  border:1px solid rgba(201,168,68,0.3);
  background:rgba(201,168,68,0.07);
  border-radius:3px;
}
.filter-banner[hidden] { display:none; }
#filter-banner-text {
  font-family:var(--f-ui); font-size:13px; letter-spacing:0.2px;
  color:rgba(255,255,255,0.75);
}
.filter-banner-clear {
  font-family:var(--f-ui); font-size:13px; font-weight:600;
  letter-spacing:0.3px; color:var(--gold);
  text-decoration:underline; text-underline-offset:2px;
  transition:color 0.2s;
}
.filter-banner-clear:hover, .filter-banner-clear:focus-visible { color:var(--white); }

/* Main heading — now dynamic event title */
#content-heading, #intro-heading {
  font-family: var(--f-heading);
    font-size: clamp(22px, 2.8vw, 31px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--white);
    margin-bottom: 22px;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.ev-arrow {
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  border:0px solid var(--gold-dim);
  border-radius:50%; color:var(--gold);
  transition:all 0.2s;
}
.ev-arrow:hover { background:var(--gold-glow); }
.ev-arrow:disabled { opacity:0.18; cursor:default; }
.pagination-display {
  font-family: var(--f-ui);
    font-size: 17px;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 1px;
    color: var(--white);
}

/* Event block */
#event-block, #intro-block {
  transition:opacity 0.3s ease, transform 0.3s ease;
  will-change:opacity, transform;
}
/* #intro-block: background shown via full-page bg-layer (see applyBgStyle in main.js) */
#event-block[hidden], #intro-block[hidden] { display:none; }

/* Portrait thumbnail + succession list — mobile-only (see @media max-width:760px) */
.event-card-media { display:none; }
#succession-block { display:none; }
.mobile-swipe-hint { display:none; }

.intro-text {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.3vw, 18.5px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 20px;
  max-width: 540px;
}

.intro-scroll-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
  color: rgba(255,255,255,0.9);
  animation: introScrollPulse 2.2s ease-in-out infinite;
}
.intro-scroll-cta svg {
  width: 25px;
  height: 25px;
}
.intro-scroll-cta span {
  font-family: var(--f-ui);
  font-size: 13.65px;
  letter-spacing: 3.5px;
}
@keyframes introScrollPulse {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%       { opacity: 0.35; transform: translateY(5px); }
}
.content-fade-out {
  opacity:0 !important;
  transform:translateY(10px) !important;
  pointer-events:none;
}

#event-subtitle {
  font-family: var(--f-ui);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 18px;
    line-height: 1.55;
}
#event-text {
  font-family: var(--f-body);
    font-size: clamp(15px, 1.35vw, 20px);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 32px;
    max-width: 540px;
}

/* Read More button */
.read-more {
  display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--f-ui);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 11px 23px;
    position: relative;
    overflow: hidden;
    transition: color 0.3s;
}
.read-more::before {
  content:''; position:absolute; inset:0;
  background:var(--gold); transform:scaleX(0);
  transform-origin:left; transition:transform 0.32s;
  z-index:-1;
}
.read-more span { position:relative; z-index:1; }
.read-more:hover { color:var(--dark); }
.read-more:hover::before { transform:scaleX(1); }

/* ════════════════════════════════════════
   MODAL
════════════════════════════════════════ */
/* Scrolls with the browser viewport, like the Rulers & Dynasties and At a
   Glance full pages, instead of capping at 85vh with its own internal
   scrollbar — long content (a full bio, a long article) reads more like a
   page than a cramped popup. The backdrop, nav arrows, and close button are
   all pinned to the viewport with position:fixed so none of them scroll
   away with the panel; .modal-title sticks to the top of the scrollport
   instead for the modal types that render one in-flow (see the
   author/bibliography/legacy/map override below) — em-modal and
   rp-profile-modal render their own title inside .modal-body instead, so
   they don't get a sticky title, just the fixed close/nav/backdrop. */
.modal {
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:100;
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto;
  padding:20px;
  padding-top:24px;
  padding-bottom:40px;
}
.modal[hidden] { display:none; }

.modal-backdrop {
  position:fixed; inset:0;
  background:rgba(3,2,7,0.1);
  backdrop-filter:blur(2px);
  cursor:pointer;
}

.modal-panel {
  position:relative; z-index:1;
  width:100%; max-width:850px;
  background:rgba(8,6,16,0.97);
  border:1px solid rgb(192 192 192 / 40%);
  box-shadow:0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,68,0.06);
  display:flex; flex-direction:column;

  /* entrance animation handled by JS class */
  transform:translateY(24px);
  opacity:0;
  transition:transform 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.38s ease;
}
.modal-panel.is-open {
  transform:translateY(0);
  opacity:1;
}

.modal-nav {
  position:fixed; top:50%; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:72px;
  border:1px solid rgba(201,168,68,0.28);
  background:rgba(8,6,16,0.82); color:var(--white-mid);
  transform:translateY(-50%);
  transition:color 0.2s, border-color 0.2s, background 0.2s, opacity 0.2s;
}
.modal-nav--previous { left:max(10px, calc(50% - 493px)); }
.modal-nav--next { right:max(10px, calc(50% - 493px)); }
.modal-nav:hover:not(:disabled),
.modal-nav:focus-visible {
  color:var(--gold); border-color:var(--gold);
  background:rgba(15,11,25,0.96); outline:none;
}
.modal-nav:disabled { opacity:0.22; cursor:not-allowed; }
.modal-nav[hidden] { display:none; }

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    flex-shrink: 0;
    background: var(--gold);
    height: 50px;
    border: 1px solid var(--gold);
    color: black;
    transition: all 0.2s;
}
.modal-close:hover { background:var(--gold-dim);border-color:var(--gold-dim);}
#contact-modal .modal-close { position:absolute; top:0; right:0; z-index:6; }
/* Wraps .share-wrap + .modal-close together so both sit flush at the
   panel's own top-right corner, ignoring the panel's own padding
   (position:absolute resolves top/right against the padding edge) — not
   sticky, so it scrolls away with the rest of the panel rather than
   tracking scroll position. That trade-off is deliberate: pinning it to
   the scrollport (like .modal-title below) would mean it only sits flush
   with zero gap once scrolled far enough to fully stick — resting at the
   bar's own padded position everywhere in between. Simple and always
   flush beats sticky-but-sometimes-gapped. Shared by #modal, .rp-panel and
   .ag-panel — #contact-modal has no share button, so it keeps its own
   plain .modal-close positioning above instead of this wrapper. */
.modal-actions { position:absolute; top:0; right:0; z-index:6; display:flex; align-items:stretch; gap:8px; }

/* ── Share button + dropdown — sits to the left of the close button in
   every .modal-actions instance. The link/title are read fresh from the
   address bar and getCurrentPageLabel() only when the menu is opened
   (see bindShareMenu in main.js), since every modal/page already keeps
   the address bar in sync via setLocationPath() by the time it's open. ── */
.share-wrap { position:relative; }
.share-btn {
  display: flex;
    align-items: center;
    gap: 7px;
    height: 50px;
    padding: 0 20px;
    background: transparent;
    color: var(--gold);
    border: 0px solid rgba(201, 168, 68, 0.4);
    font-family: var(--f-ui);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.4px;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.share-btn:hover,
.share-btn.is-open { border-color:var(--gold); background:rgba(201,168,68,0.1); }
.share-chevron { transition:transform 0.2s; flex-shrink:0; }
.share-btn.is-open .share-chevron { transform:rotate(180deg); }
.share-menu {
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:212px;
  background:rgba(10,8,20,0.97);
  border:1px solid rgba(201,168,68,0.22);
  border-radius:3px;
  padding:5px 0;
  z-index:20;
}
.share-menu-item {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 14px;
  font-family:var(--f-ui); font-size:13.5px; font-weight:500; letter-spacing:0.3px;
  color:var(--white-mid); text-align:left;
  cursor:pointer;
  transition:color 0.15s, background 0.15s;
}
.share-menu-item:hover { color:var(--white); background:rgba(255,255,255,0.04); }
.share-menu-icon { display:flex; flex-shrink:0; }
.share-copied-tag {
  margin-left:auto; padding:2px 7px;
  font-family:var(--f-ui); font-size:10px; font-weight:600; letter-spacing:0.3px;
  color:#0c0a06; background:var(--gold); border-radius:3px;
  white-space:nowrap;
}
/* Below 900px the label/chevron are hidden (see the media query further
   down) so .share-btn shrinks to the same 56px square as .modal-close —
   matches the breakpoint where .rp-panel/.ag-panel switch to their
   narrower mobile layout, so the two icon buttons read as one pair. */
@media (max-width:900px) {
  .share-btn { width:56px; padding:0; justify-content:center; gap:0; }
  .share-btn-label, .share-btn .share-chevron { display:none; }
}

/* Sticks to the top of #modal's scrollport once it would otherwise scroll
   past it. top is negative — pulls the stuck position up by #modal's own
   padding-top (24px) so the bar's opaque background also covers that gap,
   instead of leaving it transparent for scrolled content to bleed through.
   Bleeds edge-to-edge (negative margin cancelling .modal-content's own
   48px side padding, immediately reapplied as padding — the right side
   stays wide enough to clear .modal-actions above it) so the background
   spans the panel's full width. em-modal/rp-profile-modal hide the whole
   bar (see the display:none rule below), since .modal-actions no longer
   lives inside it and .modal-title is all that's left. */
.modal-sticky-bar {
  position:sticky; top:-24px; z-index:5;
  min-height:56px;
  margin:0 -48px 10px; padding:0 200px 0 48px;
  background:rgba(8,6,16,0.97);
  border-bottom:1px solid transparent;
  box-shadow:0 8px 14px -8px rgba(0,0,0,0);
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Once actually scrolled, a dim border + soft shadow appear below the bar
   — otherwise it's hard to tell the panel has scrolled at all, since the
   bar's own background already matches the page behind it. Toggled on the
   scroll container (see bindTitleShrink in main.js), same pattern as the
   title's scale-down. */
.modal.is-scrolled .modal-sticky-bar {
  border-bottom-color:rgba(255,255,255,0.14);
  box-shadow:0 8px 14px -8px rgba(0,0,0,0.5);
}

.modal-content {
  padding: 50px 54px 48px;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: rgb(171 171 171 / 30%) transparent;
    transition: opacity 0.08s ease;
}
/* Momentary cross-fade used when swapping the shared modal's content in
   place — e.g. clicking the prev/next nav arrows, or an event opened from a
   ruler profile's "Events During Reign" list — without closing/reopening
   the modal itself. Fading in (the base .modal-content rule above) runs
   slightly quicker than fading out, so the new content feels snappy. */
.modal-content.is-swapping { opacity:0; transition:opacity 0.1s ease; }
.modal-content::-webkit-scrollbar { width:4px; }
.modal-content::-webkit-scrollbar-track { background:transparent; }
.modal-content::-webkit-scrollbar-thumb { background:rgba(201,168,68,0.3); border-radius:2px; }

.modal-year-tag {
  display: block;
    font-family: var(--f-heading);
    font-size: 16.5px;
    line-height:1;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 1px;
}
#modal.author-modal .modal-content > .modal-year-tag,
#modal.bibliography-modal .modal-content > .modal-year-tag,
#modal.legacy-modal .modal-content > .modal-year-tag,
#modal.map-modal .modal-content > .modal-year-tag {
  display:none;
}
.modal-title {
  font-family:var(--f-heading);
  font-size:clamp(20px, 2.5vw, 30px);
  font-weight:600; line-height:1.2;
  color:var(--white); margin-bottom:22px;
  letter-spacing:0px;
}
#modal.author-modal .modal-title,
#modal.bibliography-modal .modal-title,
#modal.legacy-modal .modal-title,
#modal.map-modal .modal-title,
#modal.em-modal .modal-title,
#modal.rp-profile-modal .modal-title {
  font-size:clamp(28px, 3.4vw, 42px);
  margin:0;
  transform-origin:left center;
  transition:transform 0.25s ease;
}
/* .is-scrolled is toggled by bindTitleShrink in main.js — see .rp-title's
   identical rule for the rationale. */
.modal.is-scrolled .modal-title { transform:scale(0.75); }
.modal-divider {
  width:48px; height:1px;
  background:var(--gold); opacity:0.55;
  margin-bottom:11px;
}
.modal-body {
  font-family:var(--f-body);
  font-size:clamp(16px, 1.2vw, 17px);
  line-height:1.4; color:rgba(255,255,255,0.70);
}
.modal-body p { margin-bottom:.75em; }
.modal-body p:last-child { margin-bottom:0; }

.modal-main {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 0.95fr);
  align-items:start; gap:38px;
}
.modal-main--text-only { grid-template-columns:minmax(0, 1fr); }

.modal-gallery {
  display:grid;
  grid-template-columns:repeat(1, minmax(0, 1fr));
  gap:4px;
  margin-top:0;
}
.modal-gallery-item {
  position:relative;
  display:block; min-width:0; text-align:left;
  border:1px solid rgba(201,168,68,0.2);
  background:rgba(255,255,255,0.025);
  overflow:hidden; cursor:zoom-in;
  transition:border-color 0.2s, transform 0.2s;
}
.modal-gallery-item:hover { border-color:rgba(201,168,68,0.65); transform:translateY(-2px); }
.modal-gallery-item img { display:block; width:100%; height:425px; object-fit:cover; }
.modal-gallery-caption {
  display:block; margin-top:10px;
  font-family:var(--f-body); font-style:italic; font-size:13px; line-height:1.5;
  color:rgba(255,255,255,0.5); text-align:center;
}
.modal-gallery-zoom {
  position:absolute; top:14px; right:14px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--gold);
  background:rgba(8,6,16,0.72); color:var(--gold);
  opacity:0; transform:scale(0.85);
  transition:opacity 0.2s, transform 0.2s;
  pointer-events:none;
}
.modal-gallery-item:hover .modal-gallery-zoom,
.modal-gallery-item:focus-visible .modal-gallery-zoom {
  opacity:1; transform:scale(1);
}

/* ── Event modal — wider 3-column layout: copy / photo+ruler / world events ──
   Same 1500px max-width as every other modal (see MODAL section overrides
   below) — nav arrow offset matches #modal.map-modal's, the other modal at
   this same width that also has prev/next arrows. */
#modal.em-modal .modal-panel { max-width:1500px; }
#modal.em-modal .modal-nav--previous { left:max(10px, calc(50% - 768px)); }
#modal.em-modal .modal-nav--next { right:max(10px, calc(50% - 768px)); }
/* .modal-sticky-bar (the shared title) is NOT in this hidden list — unlike
   author/bibliography/legacy/map, this modal has its own year+pagination
   row and its own divider already inside .modal-body, so only those two
   duplicates get hidden; the sticky title itself is shared and shown. */
#modal.em-modal .modal-content > .modal-year-tag,
#modal.em-modal .modal-content > .modal-divider { display:none; }
#modal.em-modal .modal-close { width:56px; height:56px; }
#modal.em-modal .em-year-row > .modal-year-tag { font-size:30.5px; }

/* Year + in-year event pagination sit on one line, with the pagination
   nudged slightly below the year's baseline since it's visually smaller. */
.em-year-row {
  display:flex; align-items:center; gap:18px;
  margin-bottom:5px;
}
.em-year-row .event-nav { margin-bottom:0; }

/* Battle/ruler-change/main-event glyphs for this specific event (see
   .tl-cat-icon for the same icons used per-era in the timeline list) —
   an inline badge right after the title text, raised into superscript
   position rather than a separate row. */
.em-event-cats {
  display:inline-flex; align-items:center; gap:6px;
  margin-left:9px;
  vertical-align:super;
}
.em-event-cat-icon {
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.em-event-cat-icon svg { display:block; width:13px; height:13px; }

.em-grid {
  display:grid;
  grid-template-columns:1.05fr 0.85fr 0.95fr;
  align-items:start;
  gap:60px;
}
.em-col { min-width:0; }
.em-why {
  margin-top:22px;
  padding:17px 18px 16px;
  border-left:2px solid var(--gold);
  background:rgba(201,168,68,0.07);
}
.em-why h3 {
  margin:0 0 9px;
  font-family:var(--f-heading);
  font-size:16px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--gold);
}
.modal-copy .em-why p { margin:0; }
/* The world-events column sits further apart than the copy/media gutter —
   25% wider than the grid's base 60px gap — so it reads as a distinct,
   supplementary sidebar rather than a third equal column. */
.em-col-world { margin-left:15px; }

.em-power { margin-top:22px; }
/* Shared with the At a Glance page's "Overview" and "Key Events of the
   Era" headings (.ag-overview-label, .ag-events-heading) — same font and
   horizontal-rule treatment as this "Events During Reign" heading, just
   with their own margins for their own layout context (see below). */
.em-power-heading, .em-world-heading,
.ag-overview-label, .ag-events-heading,
.ag-facts-label {
  display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 13px;
    margin-top: 21px;
}
.em-power-heading::after,
.em-world-heading::after,
.ag-overview-label::after,
.ag-events-heading::after,
.ag-facts-label::after {
  content:''; flex:1 1 auto; height:1px; background:rgba(201,168,68,0.3);
}
.em-power-heading span, .em-world-heading span,
.ag-overview-label span, .ag-events-heading span,
.ag-facts-label span {
  flex-shrink:0;
  font-family: var(--f-heading);
    font-size: 19.5px;
    font-weight: 600;
  letter-spacing:1.8px; text-transform:uppercase; color:var(--gold);
}

.em-power-card {
  display:flex; align-items:center; gap:16px;
  
  cursor:pointer; transition:border-color 0.2s, background-color 0.2s;
}
.em-power-card:hover, .em-power-card:focus-visible { border-color:var(--gold); background:rgba(201,168,68,0.06); outline:none; }
.em-power-portrait {
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:56px; height:64px; overflow:hidden;
  border:1px solid rgba(201,168,68,0.32); background:rgba(255,255,255,0.04);
}
.em-power-portrait img { width:100%; height:100%; object-fit:cover; }
.em-power-info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.em-power-name { display:block; font-family:var(--f-heading); font-weight:600; font-size:18px; color:var(--white); line-height:1.25; }
.em-power-title { display:block; font-family:var(--f-ui); font-size:12px; font-weight:600; letter-spacing:0.4px; color:var(--gold-dim); margin-top:4px; }
.em-power-reign { display:block; font-family:var(--f-ui); font-size:12.5px; color:rgba(255,255,255,0.55); margin-top:4px; }

.em-world-list { position:relative; display:flex; flex-direction:column; gap:22px; }
.em-world-item {
  position:relative;
  display:grid; grid-template-columns:44px 1fr; gap:14px;
}
.em-world-item::before {
  content: '';
    position: absolute;
    left: 15px;
    top: 22px;
    bottom: -22px;
    width: 1px;
    border-left: 1px dashed rgb(143 143 143 / 45%);
}
.em-world-item:last-child::before { display:none; }
.em-world-year {
  font-family:var(--f-ui); 
  font-size:17px; font-weight:400; color:var(--white-dim);
}
.em-world-title { display:block; font-family:
  var(--f-ui); font-weight:400; font-size:17px; color:var(--white); margin-bottom:4px; }
.em-world-desc { display:block; font-family:var(--f-body); 
  font-size:17px; line-height:1.4; color:rgba(255,255,255,0.55); }

.em-source-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-right:8px; color:var(--white-dim); vertical-align:-3px;
}

/* ── Map modal — interactive territory timeline ── */
#modal.map-modal .modal-panel { max-width:1500px; }
#modal.map-modal .modal-nav--previous { left:max(10px, calc(50% - 768px)); }
#modal.map-modal .modal-nav--next { right:max(10px, calc(50% - 768px)); }

.map-modal-layout {
  display:grid; grid-template-columns:1.3fr 1fr;
  align-items:start;
  gap:50px;
}
.map-main-col { min-width:0; }
.map-side-col { min-width:0; display:flex; flex-direction:column; gap:36px; }

.map-stage {
  position:relative;
  width:100%; height:min(52vh, 520px);
  border:1px solid rgba(201,168,68,0.32);
  background:rgba(255,255,255,0.03);
  overflow:hidden;
}
.map-stage-layer {
  position:absolute; inset:0;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  transition:opacity 1s cubic-bezier(0.4,0,0.2,1);
  opacity:0;
      filter: grayscale(1) invert(1) contrast(.95) brightness(1.9);

  /* ── SVG cutout mask ──
     Same coastline/border cutout as the corner map (see .corner-map-layer)
     applied here to the larger Map-modal stage image. mask-size:cover
     mirrors background-size:cover above so the mask scales/crops exactly
     like the image regardless of the stage's aspect ratio — otherwise the
     mask (stretched to 100% 100%) drifts out of alignment with the coastline. */
}
.map-stage-layer.active  { opacity:1; }
.map-stage-layer.fadeout { opacity:0; }
/* Dark corner wash so the gold year badge stays legible over light-colored
   map regions, regardless of which map image is showing.
.map-stage::before {
  content:'';
  position:absolute; left:0; bottom:0; z-index:1;
  width:55%; height:65%;
  background:radial-gradient(ellipse at bottom left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0) 75%);
  pointer-events:none;
}*/
.map-year-badge {
  position:absolute; left:20px; bottom:18px; z-index:2;
  font-family:var(--f-heading); font-weight:600; font-size:34px;
  color:var(--gold); letter-spacing:1px;
  text-shadow:0 2px 20px rgba(0,0,0,0.85), 0 0 40px rgba(0,0,0,0.6);
}

/* Draws attention to the year timeline below the map on first open — fades
   out permanently (per open) the moment a visitor clicks a tick or arrow. */
.map-hint {
  position:absolute; left:50%; top:50%; z-index:3;
  transform:translate(-50%, -50%);
  display:flex; align-items:center; gap:9px;
  padding:15px 25px;
  font-family:var(--f-ui); font-size:14px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--white);
  background:rgba(6,4,14,0.8);
  border:1px solid rgba(201,168,68,0.45);
  border-radius:30px;
  white-space:nowrap;
  pointer-events:none;
  backdrop-filter:blur(2px);
  animation:mapHintPulse 2s ease-in-out infinite;
  transition:opacity 0.35s ease;
}
.map-hint svg { flex-shrink:0; animation:mapHintBounce 2s ease-in-out infinite; }
.map-hint.is-hidden,
.map-hint.is-hidden svg { animation:none; }
.map-hint.is-hidden { opacity:0; }
@keyframes mapHintPulse {
  0%, 100% { opacity:0.65; }
  50%      { opacity:1; }
}
@keyframes mapHintBounce {
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(3px); }
}
@media (max-width:520px) {
  .map-hint span { white-space:normal; text-align:center; }
  .map-hint { max-width:80%; }
}

.map-timeline {
  display:flex; align-items:center; gap:12px;
  margin-top:18px;
}
.map-tl-arrow {
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border:1px solid var(--gold-dim);
  border-radius:50%; color:var(--gold);
  transition:all 0.2s;
}
.map-tl-arrow:hover { background:var(--gold-glow); }
.map-tl-track {
  flex:1 1 auto; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
.map-tl-inner {
  display:flex; align-items:center;
  transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.map-tl-tick {
  flex-shrink:0;
  padding:8px 14px;
  font-family:var(--f-ui); font-size:12.5px; font-weight:600; letter-spacing:0.5px;
  color:rgba(255,255,255,0.4);
  border-bottom:2px solid transparent;
  transition:color 0.2s, border-color 0.2s;
  white-space:nowrap;
}
.map-tl-tick:hover { color:rgba(255,255,255,0.75); }
.map-tl-tick.active { color:var(--gold); border-bottom-color:var(--gold); }

.map-info-col { min-width:0; }
.map-info-heading {
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.map-info-heading::after { content:''; flex:1 1 auto; height:1px; background:rgba(201,168,68,0.3); }
.map-info-heading span {
  flex-shrink:0;
  font-family:var(--f-heading); font-size:17px; font-weight:600;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--gold);
}

@media (max-width:900px) {
  .map-modal-layout { grid-template-columns:1fr; gap:28px; }
  .map-side-col { gap:28px; }
  .map-stage { height:320px; }
}

/* ── Ruler profile modal — wider panel, 2- or 3-column layout ──
   Same 1500px max-width as every other modal (see MODAL section overrides
   below). */
#modal.rp-profile-modal .modal-panel { max-width:1500px; }
/* .modal-sticky-bar (the shared title, now the ruler's name) is NOT in
   this hidden list — see #modal.em-modal's identical rationale above. The
   in-flow reign tag/role line stay put; only the year-tag (unused here)
   and the outer divider (this modal has its own, further down inside
   .rp-modal-left) get hidden. */
#modal.rp-profile-modal .modal-content > .modal-year-tag,
#modal.rp-profile-modal .modal-content > .modal-divider { display:none; }

/* Nav arrows sit just outside the modal panel's edge — the shared 493px
   offset (calibrated for the narrower 850px event modal) would overlap the
   wider ruler-profile panel, so widen it to clear the panel's 1500px
   max-width, same offset as .em-modal's own nav override below. */
#modal.rp-profile-modal .modal-nav--previous { left:max(10px, calc(50% - 768px)); }
#modal.rp-profile-modal .modal-nav--next { right:max(10px, calc(50% - 768px)); }

/* Always 3 columns now — text, portrait/media, and the events-during-reign
   column (which shows a "none recorded" note rather than disappearing when
   empty). align-items:start (not stretch) so each column keeps its own
   natural height — the media column's fixed-height portrait no longer needs
   to be stretched to match whichever of the other two columns is tallest. */
.rp-modal-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:start;
  gap:60px;
}
.rp-modal-left { min-width:0; }

.rp-modal-tag {
  display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 4px;
}
.rp-modal-tag-sep { font-size:10px; opacity:0.6; }
.rp-modal-tag-label {  }
.rp-modal-title-line {
  font-family: var(--f-ui);
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: 0;
}
.rp-modal-bio {
  font-family:var(--f-body);  line-height:1.4;
  color:rgba(255,255,255,0.72);
}

.rp-accomplishments { display:flex; flex-direction:column; gap:1px; }
.rp-accomplishments li {
  position:relative; padding-left:20px;
  font-family:var(--f-body);  line-height:1.4;
  color:rgba(255,255,255,0.75);
}
.rp-accomplishments li::before {
  content:''; position:absolute; left:0; top:9px;
  width:5px; height:5px; background:var(--gold);
  transform:rotate(45deg);
}

.rp-predsucc { display:flex; align-items:flex-start; gap:20px; }
.rp-predsucc-col {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
}
.rp-predsucc-col.is-clickable { cursor:pointer; border-radius:3px; transition:background-color 0.2s; }
.rp-predsucc-col.is-clickable:hover,
.rp-predsucc-col.is-clickable:focus-visible { background:rgba(201,168,68,0.07); outline:none; }
.rp-predsucc-col.is-clickable:hover .rp-predsucc-name,
.rp-predsucc-col.is-clickable:focus-visible .rp-predsucc-name { color:var(--gold); }
.rp-predsucc-label {
  font-family:var(--f-ui); font-size:11.5px; font-weight:400;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--white-dim);
}
.rp-predsucc-name {
  font-family:var(--f-heading); font-weight:600; font-size:17px;
  color:var(--white); letter-spacing:0.3px; transition:color 0.2s;
}
.rp-predsucc-years { font-family:var(--f-ui); font-size:12px; color:var(--white-dim); }
.rp-predsucc-divider { flex-shrink:0; width:1px; align-self:stretch; background:rgba(201,168,68,0.25); }

/* The media column no longer caps its own height or scrolls internally —
   with the portrait now a fixed height (not flex-grow filling whatever the
   tallest column happens to be), the column's natural content height is
   just portrait + predecessor/successor + family summary, so the whole
   modal grows to fit it and .modal-content's own scroll takes over for
   anything taller than the viewport, same as the other columns. */
.rp-modal-media { min-width:0; display:flex; flex-direction:column; }
.rp-modal-right { min-width:0; }
.rp-modal-portrait {
  position:relative;
  width:100%; flex:0 0 auto; height:430px;
  border:1px solid rgba(201,168,68,0.32);
  box-shadow:inset 0 0 32px rgba(0,0,0,0.5), 0 12px 40px rgba(0,0,0,0.45);
  background:rgba(255,255,255,0.04);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.rp-modal-portrait-attribution {
  display: block;
    margin-top: 4px;
    font-family: var(--f-ui);
    font-size: 11px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
    transition: color 0.2s;
}
.rp-modal-portrait-attribution:hover { color:rgba(255,255,255,0.55); }
/* Predecessor/successor now sits in the left (text) column, below Main
   Accomplishments, rather than under the portrait — heading styled the same
   as "Main Accomplishments" above it (.em-power-heading), so the two read
   as matching sections. */
.rp-modal-left .rp-predsucc {
  padding: 0px 16px 0 0;
}
/* Family summary card, when researched, follows the portrait/attribution
   directly in the media column — the full tree lives in its own lightbox. */
.rp-modal-media .rp-family-summary {
  flex: 0 0 auto;
    margin-top: 23px;
    transition: background-color 0.2s, border-color 0.2s;
}
.rp-modal-media .rp-family-summary:hover {
  
  
}
.rp-modal-portrait img { width:100%; height:100%; object-fit:cover; }
.rp-modal-portrait .rp-portrait-placeholder { width:28%; height:28%; opacity:0.4; color:var(--white-mid); }
.rp-modal-portrait::before,
.rp-modal-portrait::after {
  content:''; position:absolute; width:20px; height:20px;
  border-color:var(--gold); border-style:solid; z-index:1; opacity:0.7;
}
.rp-modal-portrait::before { top:8px; left:8px; border-width:1px 0 0 1px; }
.rp-modal-portrait::after  { bottom:8px; right:8px; border-width:0 1px 1px 0; }

.rp-modal-portrait-caption {
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  display:flex; flex-direction: column; align-items:center; justify-content:center; gap:0px;
  padding:11px 16px;
  border:0px solid var(--gold);
  background:rgba(8,6,16,0.82);
  backdrop-filter:blur(2px);
}
.rp-modal-portrait-name {
  font-family:var(--f-heading); font-weight:600; font-size:15px;
  color:var(--white); letter-spacing:0.4px;
}
.rp-modal-portrait-years { font-family:var(--f-ui); font-size:12px; color:var(--gold); }

.rp-modal-portrait.is-zoomable { cursor:zoom-in; }
.rp-modal-portrait-zoom {
  position:absolute; top:14px; right:14px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--gold);
  background:rgba(8,6,16,0.72); color:var(--gold);
  opacity:0; transform:scale(0.85);
  transition:opacity 0.2s, transform 0.2s;
  pointer-events:none;
}
.rp-modal-portrait.is-zoomable:hover .rp-modal-portrait-zoom,
.rp-modal-portrait.is-zoomable:focus-visible .rp-modal-portrait-zoom {
  opacity:1; transform:scale(1);
}

.rp-modal-right { display:flex; flex-direction:column; height:100%; }

/* ── Family tree ── */
.rp-family-heading { text-align:center; margin-bottom:32px; }
.rp-family-main-title {
  font-family: var(--f-heading);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}
.rp-family-fancy-divider {
  display:flex; align-items:center; gap:8px;
  width:100%; max-width:220px; margin:0 auto;
}
.rp-family-fancy-divider::before,
.rp-family-fancy-divider::after {
  content:''; flex:1; height:1px; background:rgba(201,168,68,0.4);
}
.rp-family-fancy-divider-dot {
  flex-shrink:0; width:5px; height:5px; background:var(--gold);
  transform:rotate(45deg);
}
.rp-family-group-label {
  display: block;
    text-align: center;
    font-family: var(--f-ui);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--white-dim);
    margin-bottom: 12px;
}
.rp-family-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; }
.rp-family-node {
  display:flex; align-items:center; gap:9px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.09);
  padding:8px 13px;
}
.rp-family-node-icon {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,0.06); color:var(--white-dim);
  display:flex; align-items:center; justify-content:center;
}
.rp-family-node-text { display:flex; flex-direction:column; gap:2px; }
.rp-family-node-label {
  font-family:var(--f-ui); font-size:12px; font-weight:400;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--white-dim);
}
.rp-family-node-name { font-family:var(--f-body); font-size:13px; text-align:center;color:var(--white); }
.rp-family-node-years { font-family:var(--f-ui); font-size:11.5px; color:var(--white-dim); }

.rp-family-bar {
  width:fit-content; max-width:100%; margin:0 auto;
  height:14px;
  border-top:1px solid rgba(201,168,68,0.4);
}
.rp-family-bar--bottom { border-top:none; border-bottom:1px solid rgba(201,168,68,0.4); height:14px; }
.rp-family-stem {
  width:1px; height:14px; margin:0 auto;
  background:rgba(201,168,68,0.4);
}
.rp-family-self { display:flex; justify-content:center; }
.rp-family-self-box {
  display:flex; align-items:center; gap:9px;
  border:1px solid var(--gold);
  background:rgba(201,168,68,0.08);
  padding:11px 22px;
}
.rp-family-self-box svg { color:var(--gold); flex-shrink:0; }
.rp-family-self-name {
  font-family:var(--f-heading); font-weight:600; font-size:15px;
  color:var(--white); letter-spacing:0.4px;
}
.rp-family-self-years { font-family:var(--f-ui); font-size:12px; color:var(--gold); }
.rp-family-note {
  margin-top:14px; text-align:center;
  font-family:var(--f-ui); font-size:11px; font-style:italic; color:var(--white-dim);
}

/* ── Compact family-tree summary card (media column) ── */
.rp-family-summary-heading { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.rp-family-summary-line { flex:1 1 auto; height:1px; background:rgba(201,168,68,0.35); }
.rp-family-summary-title {
  flex-shrink:0;
  font-family:var(--f-heading); font-size:19.5px; font-weight:600;
  letter-spacing:1.8px; text-transform:uppercase; color:var(--gold);
}
.rp-family-summary-groups {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:8px; margin-bottom:16px;
}
.rp-family-summary-group { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.rp-family-summary-label {
  font-family:var(--f-ui); font-size:13px; font-weight:400;
  letter-spacing:1.3px; text-transform:uppercase; color:var(--white-dim);
}
.rp-family-summary-people { display:flex; align-items:flex-start; gap:10px; }
.rp-family-summary-person { display:flex; flex-direction:column; align-items:center; gap:6px; max-width:72px; }
.rp-family-summary-person--count { flex-direction:row; align-items:center; gap:8px; max-width:none; }
.rp-family-summary-avatar {
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.06); color:var(--white-dim);
}
.rp-family-summary-name {
  font-family:var(--f-body); font-size:10.5px; line-height:1.3;
  color:rgba(255,255,255,0.65); text-align:center;
}
.rp-family-summary-count { font-family:var(--f-heading); font-weight:700; font-size:16px; color:var(--white); }
.rp-family-summary-divider { flex-shrink:0; align-self:stretch; width:1px; margin-top:2px; background:rgba(255,255,255,0.12); }
.rp-family-summary-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:13px 16px;
  border:1px solid var(--gold);
  background:rgba(201,168,68,0.06);
  cursor:pointer; transition:background-color 0.2s;
}
.rp-family-summary-btn:hover, .rp-family-summary-btn:focus-visible { background:rgba(201,168,68,0.14); outline:none; }
.rp-family-summary-btn-main {
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-heading); font-weight:600; font-size:14.5px;
  color:var(--white); letter-spacing:0.2px;
}
.rp-family-summary-btn-icon { flex-shrink:0; display:flex; color:var(--gold); }
.rp-family-summary-btn-arrow { flex-shrink:0; color:var(--gold-dim); transition:transform 0.2s; }
.rp-family-summary-btn:hover .rp-family-summary-btn-arrow { transform:translateX(3px); }
.rp-family-summary-hint {
  margin-top:9px; text-align:center;
  font-family:var(--f-ui); font-size:11px; color:var(--white-dim);
}

/* ── Events-during-reign column ──
   Shown instead of the family tree for rulers without genealogy data
   (elective monarchs onward); reuses the event modal's "Meanwhile in
   Europe" heading (.em-world-heading) and dashed-timeline item look
   (.em-world-item) so the two read as the same component. */
.rp-events .em-world-heading { margin-top:0; }
.rp-events-empty {
  font-family:var(--f-ui); font-size:13px; font-style:italic; color:var(--white-dim);
}
/* Capped and independently scrollable — a long reign can rack up dozens of
   events, and letting the column grow unbounded pushed the "Sources &
   further reading" footer far down the page, past .modal-content's own
   scroll. Capping it here instead keeps the modal's overall height (and the
   footer) in check regardless of how many events a reign has. */
.rp-events-list {
  position:relative; display:flex; flex-direction:column; gap:18px;
  max-height:640px;
  overflow-y:auto; overflow-x:hidden;
  padding-right:6px; margin-right:-6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(201,168,68,0.3) transparent;
}
.rp-events-list::-webkit-scrollbar { width:4px; }
.rp-events-list::-webkit-scrollbar-track { background:transparent; }
.rp-events-list::-webkit-scrollbar-thumb { background:rgba(201,168,68,0.3); border-radius:2px; }
.rp-events-item {
  position:relative;
  display:grid; grid-template-columns:50px 1fr; gap:14px;
  cursor:pointer; border-radius:3px; padding:0px 6px; margin:-4px -6px;
  transition:background-color 0.2s;
}
/* bottom:-10px (not -18px, the flex `gap`) because this item's own
   padding/margin trick (adds hover-highlight breathing room without
   affecting layout) already eats 8px of that gap — the real visual space
   to the next item is 10px. Overshooting into the next item's box used to
   get painted over by that item's own hover background, reading as a
   broken line whenever it was hovered. */
.rp-events-item::before {
  content:'';
  position:absolute; left:20px; top:22px; bottom:-10px;
  width:1px; border-left:1px dashed rgb(143 143 143 / 45%);
}
/* Events sharing a year with the one above sit noticeably closer together
   than distinct years — the connector to a grouped item is shortened to
   match, so it still lands exactly on the next dot instead of overshooting. */
.rp-events-item--grouped { margin-top:-8px; }
.rp-events-item:has(+ .rp-events-item--grouped)::before { bottom:-6px; }
.rp-events-item:last-child::before { display:none; }
.rp-events-item:hover, .rp-events-item:focus-visible { background:rgba(201,168,68,0.06); outline:none; }
.rp-events-item:hover .rp-events-title, .rp-events-item:focus-visible .rp-events-title { color:var(--gold); }
.rp-events-year { font-family:var(--f-ui); font-size:17px; font-weight:400; color:var(--white-dim); }
.rp-events-title { display:block; font-family:var(--f-ui); font-weight:400; font-size:17px; color:var(--white); transition:color 0.2s; }

/* Hover/focus tooltip showing an event's description — a single floating
   instance reused across the "Events During Reign" list, positioned in JS. */
.rp-event-tooltip {
  position:fixed; z-index:200;
  width:300px; max-width:calc(100vw - 24px);
  padding:12px 16px;
  font-family:var(--f-body); font-size:13px; line-height:1.5;
  color:rgba(255,255,255,0.82);
  background:rgba(8,6,16,0.98);
  border:1px solid rgba(201,168,68,0.3);
  box-shadow:0 18px 46px rgba(0,0,0,0.6);
  opacity:0;
  transition:opacity 0.15s ease;
  pointer-events:none;
}
.rp-event-tooltip.is-visible { opacity:1; }

.modal-source {
  margin-top:30px; padding-top:18px;
  border-top:1px solid rgba(201,168,68,0.18);
  font-family:var(--f-ui); font-size:11px; letter-spacing:1px;
  text-transform:uppercase;
}
.modal-source-label {
    margin-bottom: 6px;
    color: var(--white-dim);
    font-size: 14px;
    letter-spacing: 0px;
    text-transform: capitalize;
}
.modal-source-list { display: flex;
    flex-direction: column;
    gap: 1px;
    list-style: inside;
    font-size: 14px;
  text-transform: none;
  letter-spacing:0;
    color: var(--white-mid);
    line-height: 1.4;}
.modal-source-list a { color:var(--gold); transition:color 0.2s; }
.modal-source-list a:hover { color:var(--white); }
.modal-source-list a span { margin-left:3px; }

/* Event modal, Ruler profile modal & the Rulers/Dynasties full page —
   full-bleed dark bar, links run in a single row separated by bullets,
   instead of the stacked list used elsewhere. The "Noticed a mistake?"
   button sits at the far right of the same bar. The two modal types share
   one margin/padding rule (same base .modal-content padding, 44px 48px
   48px); the Rulers page has its own .rp-panel padding (48px 56px 60px)
   so it gets a separate rule with matching negative margins below. */
#modal.em-modal .modal-source,
#modal.rp-profile-modal .modal-source,
#modal.map-modal .modal-source,
#modal.legacy-modal .modal-source,
#modal.bibliography-modal .modal-source,
#modal.author-modal .modal-source,
.rp-panel .modal-source,
.ag-panel .modal-source {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:16px;
  border-top: 0px solid rgb(82 82 82 / 51%);
  background:rgb(82 82 82 / 20%);
}
#modal.em-modal .modal-source,
#modal.rp-profile-modal .modal-source,
#modal.map-modal .modal-source,
#modal.legacy-modal .modal-source,
#modal.bibliography-modal .modal-source,
#modal.author-modal .modal-source {
  margin:30px -48px -48px;
  padding:10px 48px;
}
.rp-panel .modal-source,
.ag-panel .modal-source {
  margin:40px -56px -60px;
  padding:10px 56px;
}
#modal.em-modal .modal-source-links,
#modal.rp-profile-modal .modal-source-links,
.rp-panel .modal-source-links,
.ag-panel .modal-source-links {
  display:flex; align-items:center; flex-wrap:wrap; gap:18px;
}
#modal.em-modal .modal-source-list,
#modal.rp-profile-modal .modal-source-list,
.rp-panel .modal-source-list,
.ag-panel .modal-source-list {
  display:inline-flex; flex-direction:row; flex-wrap:wrap; align-items:center;
  gap:18px;margin-left:20px;
}
#modal.em-modal .modal-source-list a,
#modal.rp-profile-modal .modal-source-list a,
.rp-panel .modal-source-list a,
.ag-panel .modal-source-list a { display:inline-flex; align-items:center; }
#modal.em-modal .modal-source-sep,
#modal.rp-profile-modal .modal-source-sep,
.rp-panel .modal-source-sep,
.ag-panel .modal-source-sep { color:var(--white-dim); font-size:10px; }

/* Event source links stay on one line and progressively reveal through the
   arrow when the footer cannot fit them all. */
#modal.em-modal .modal-source { flex-wrap:nowrap; }
#modal.em-modal .modal-source-links {
  flex:1 1 auto; min-width:0; flex-wrap:nowrap;
}
#modal.em-modal .modal-source-label { flex:0 0 auto; margin-bottom:0; }
#modal.em-modal .modal-source-slider {
  flex:1 1 auto; min-width:0; overflow-x:hidden; scroll-behavior:smooth;
  scrollbar-width:none;
}
#modal.em-modal .modal-source-slider::-webkit-scrollbar { display:none; }
#modal.em-modal .modal-source-slider .modal-source-list {
  width:max-content; margin-left:0; flex-wrap:nowrap; white-space:nowrap;
}
.modal-source-prev,
.modal-source-next {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; color:var(--gold);
  background:rgba(201,168,68,0.06); border:1px solid rgba(201,168,68,0.28);
  border-radius:50%; cursor:pointer; transition:background .2s, border-color .2s, opacity .2s;
}
.modal-source-prev:hover:not(:disabled),
.modal-source-next:hover:not(:disabled) { background:rgba(201,168,68,0.14); border-color:var(--gold); }
.modal-source-prev:disabled,
.modal-source-next:disabled { opacity:.28; cursor:default; }
.modal-source-prev[hidden],
.modal-source-next[hidden] { display:none; }
/* Outlined pill, right-aligned by the bar's own justify-content:space-between
   (see .modal-source above) — no edge-bleed/full-height treatment needed. */
.modal-mistake-btn {
  flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Right-aligns it even when there's no sibling .modal-source-links to
       balance against via the parent's justify-content:space-between (e.g.
       the Map/Legacy/Bibliography/About modals, which have no source
       links of their own) — harmless where a sibling already exists. */
    margin-left: auto;
    padding: 8px 14px 8px 14px;
    font-family: var(--f-ui);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--gold);
    text-transform: uppercase;
    background: transparent;
    border: 1px solid rgba(201, 168, 68, 0); 
    border-radius: 2px;
    transition: background 0.2s, border-color 0.2s;
}
.modal-mistake-btn:hover { background:rgba(201,168,68,0.1); border-color:var(--gold); }
.modal-mistake-icon { flex-shrink:0; }

/* Contact modal — a short form, not a "lots of content" browsing modal, so
   it keeps the original centered/absolute behavior rather than the
   external-scroll + fixed-close-button pattern the other #modal types now
   use (whose fixed offsets are calibrated for their shared 1500px width
   anyway, not this modal's much narrower 540px). */
#contact-modal { align-items:center; overflow-y:visible; padding-top:20px; }
#contact-modal .modal-backdrop { position:absolute; }
#contact-modal .modal-close { position:absolute; top:0; right:0; }
#contact-modal .modal-panel { max-width:540px; }
.contact-form {
  display:flex; flex-direction:column; gap:18px;
  margin-top:24px;
}
.contact-field {
  display:flex; flex-direction:column; gap:7px;
}
.contact-field label {
  font-family:var(--f-ui); font-size:11px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--white-mid);
}
.contact-field .optional {
  color:var(--white-dim); font-weight:400;
  letter-spacing:0.5px; text-transform:none;
}
.contact-field input,
.contact-field textarea {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,168,68,0.2);
  color:var(--white);
  font-family:var(--f-body); font-size:16px;
  padding:10px 14px;
  transition:border-color 0.2s;
  resize:vertical; outline:none;
}
.contact-field input:focus,
.contact-field textarea:focus { border-color:var(--gold-dim); }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color:rgba(255,255,255,0.22); }
.contact-submit {
  align-self:flex-start;
  font-family:var(--f-ui); font-size:13px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--dark); background:var(--gold);
  padding:11px 24px; transition:background 0.2s;
}
.contact-submit:hover { background:#d4b355; }
.contact-submit:disabled { opacity:0.6; cursor:default; }
.contact-feedback {
  font-family:var(--f-ui); font-size:16px; letter-spacing:0.4px;
  min-height:1.4em;
}
.contact-feedback--success { color:#7ecb7e; }
.contact-feedback--error   { color:#e07070; }
.recaptcha-notice {
  font-family:var(--f-ui); font-size:11px; line-height:1.5; letter-spacing:0.2px;
  color:rgba(255,255,255,0.45); margin-top:10px;
}
.recaptcha-notice a { color:rgba(255,255,255,0.6); }
.grecaptcha-badge { visibility:hidden; }

/* About modal — two-column layout: project intro on the left,
   author bio/text on the left and portrait on the right within the second column. */
#modal.author-modal .modal-panel { max-width:1500px; }
.author-layout {
  display:grid;
  grid-template-columns:.7fr 1fr;
  gap:48px;
  align-items:start;
}
.author-col-intro { max-width:520px; }
.author-col p { margin-bottom:1.2em; }
.author-col p:last-child { margin-bottom:0; }
.author-profile-grid {
  display:grid;
  grid-template-columns:1fr .5fr;
  gap:20px 28px;
  align-items:start;
}
.author-profile-copy { min-width:0; max-width:620px; }
.author-profile-media {
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}
.author-photo {
  width:100%; max-width:300px; height:auto;
  display:block;
  border:0px solid rgba(201,168,68,0.28);
  box-shadow:0 16px 50px rgba(0,0,0,0.5);
}
@media (max-width:760px) {
  .author-layout,
  .author-profile-grid { grid-template-columns:1fr; gap:32px; }
  .author-profile-media { justify-content:flex-start; }
  .author-photo { max-width:240px; }
}

.image-lightbox {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px, 5vw, 70px);
  opacity:0; transition:opacity 0.22s ease;
}
.image-lightbox[hidden] { display:none; }
.image-lightbox.is-open { opacity:1; }
.image-lightbox.is-open .image-lightbox-figure { transform:scale(1); }
.image-lightbox-backdrop {
  position:absolute; inset:0; width:100%; height:100%;
  border:0; background:rgba(2,2,5,.65); cursor:zoom-out;
}
/* Zooms in with a fade from whatever opened it (portrait or gallery
   thumbnail) — JS sets transform-origin to that trigger's position, same
   zoom-from-trigger effect as the family tree lightbox. */
.image-lightbox-figure {
  position:relative; z-index:1; max-width:100%; max-height:100%; margin:0;
  transform:scale(0.2);
  transition:transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
}
.image-lightbox-figure img {
  display:block; max-width:100%; max-height:calc(100vh - 190px);
  object-fit:contain; box-shadow:0 20px 80px rgba(0,0,0,0.38);
}
.image-lightbox-figure figcaption {
  margin-top:14px; display:flex; flex-direction:column; align-items:center; 
  gap:0px;
  font-family:var(--f-ui); letter-spacing:.5px;
  color:rgba(255,255,255,0.62);
}
.image-lightbox-caption-name {
  font-family:var(--f-heading); font-weight:600; font-size:17px;
  letter-spacing:0.4px; color:var(--white);
}
.image-lightbox-caption-title {
  font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--gold);
}
.image-lightbox-caption-dates { margin-top:4px; font-size: 14px;
    color: var(--white-dim); }
.image-lightbox-caption-reign { font-size: 14px;
    color: var(--white-dim); }
.image-lightbox-close {
  position:fixed; top:22px; right:22px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:var(--gold); border:1px solid var(--gold);
  color:black;
  transition:all 0.2s;
}
.image-lightbox-close:hover { background:var(--gold-dim); border-color:var(--gold-dim); }

/* ── Full family tree lightbox — a contained, "zoomed-out" popup (not a
   full-screen takeover) layered above the ruler profile modal, showing the
   full tree the compact summary card links to. Zooms in with a fade,
   growing from the "View family tree" button that opened it — JS sets
   transform-origin on the panel to that button's position. ── */
.family-tree-lightbox {
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px, 5vw, 70px);
  opacity:0; transition:opacity 0.22s ease;
}
.family-tree-lightbox[hidden] { display:none; }
.family-tree-lightbox.is-open { opacity:1; }
.family-tree-lightbox.is-open .family-tree-lightbox-panel { transform:scale(1); }
.family-tree-lightbox-backdrop {
  position:absolute; inset:0; width:100%; height:100%;
  border:0; background:rgba(2,2,5,0.28); cursor:zoom-out;
}
/* The panel itself doesn't scroll — same split as the shared modal's own
   .modal-panel/.modal-content, so the close button stays pinned to the
   panel's corner instead of scrolling away with the tree below it. */
.family-tree-lightbox-panel {
  position:relative; z-index:1;
  width:100%; max-width:640px; max-height:min(85vh, 720px);
  display:flex; flex-direction:column;
  background:rgba(8,6,16,0.98);
  border:1px solid rgba(201,168,68,0.32);
  box-shadow:0 24px 80px rgba(0,0,0,0.7);
  overflow:hidden;
  transform:scale(0.2);
  transition:transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
}
.family-tree-lightbox-scroll {
  overflow-y:auto;
  padding:40px 44px;
  scrollbar-width:thin;
  scrollbar-color:rgba(201,168,68,0.3) transparent;
}
.family-tree-lightbox-close {
  position:absolute; top:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:var(--gold); border:1px solid var(--gold);
  color:black;
  transition:all 0.2s;
}
.family-tree-lightbox-close:hover { background:var(--gold-dim); border-color:var(--gold-dim); }

/* ── Nav modal: hide year tag ── */
.modal-year-tag:empty { display:none; }

/* ── Bibliography modal — wider panel, sources run in 2 columns ── */
#modal.bibliography-modal .modal-panel { max-width:1500px; }
.sources-section { margin-bottom:36px; }
.sources-section:last-child { margin-bottom:0; }
.sources-section-title {
  font-family:var(--f-ui); font-size:14px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(201,168,68,0.18);
}
.sources-list {
  list-style:none;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:8px 48px;
}
.source-item {
  font-family:var(--f-body); font-size:clamp(14px,1.05vw,16px);
  line-height:1.62; color:rgba(255,255,255,0.65);
  padding-left:20px; position:relative;
}
.source-item::before {
  content:''; position:absolute; left:0; top:11px;
  width:6px; height:1px; background:var(--gold); opacity:0.5;
}
.source-author { color:rgba(255,255,255,0.85); }
.source-title  { font-style:italic; }
.source-meta   { color:rgba(255,255,255,0.42); font-size:0.92em; }

@media (max-width:760px) {
  .sources-list { grid-template-columns:1fr; }
}

/* ── Legacy modal — wider panel, grouped 2x2 icon-card grid ── */
#modal.legacy-modal .modal-panel { max-width:1500px; }
.legacy-intro {
  font-family:var(--f-body); font-size:clamp(15px,1.1vw,17px);
  line-height:1.7; color:rgba(255,255,255,0.72);
  margin-bottom:32px; max-width:840px;
}
.legacy-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:24px;
}
@media (max-width:1200px) and (min-width:761px) {
  .legacy-grid { grid-template-columns:1fr 1fr; }
}
.legacy-group {
  display:flex; gap:20px;
  border:1px solid rgba(201,168,68,0.2);
  padding:26px 28px;
  flex-direction: column;
}
.legacy-group-icon {
  flex:0 0 auto;
  width:44px; height:44px;
  color:var(--gold);
}
.legacy-group-icon svg { width:100%; height:100%; display:block; }
.legacy-group-title {
  font-family:var(--f-heading); font-size:21px;
  color:var(--gold); margin-bottom:10px; letter-spacing:.2px;
}
.legacy-group-body p {
  font-family:var(--f-body); font-size:clamp(14px,1.05vw,17px);
  line-height:1.65; color:rgba(255,255,255,0.68);
  margin-bottom:0;
}
@media (max-width:760px) {
  .legacy-grid { grid-template-columns:1fr; }
  .legacy-group { padding:20px; gap:16px; }
}

/* ════════════════════════════════════════
   INTRO MODE — hide navigation UI until first scroll
════════════════════════════════════════ */
#era-nav,
.timeline-arrows,
#mistake-link,
#map-container {
  transition: opacity 0.5s ease;
}
body.intro-mode #era-nav,
body.intro-mode .timeline-arrows,
body.intro-mode #mistake-link,
body.intro-mode #map-container {
  opacity: 0;
  pointer-events: none;
}

/* Swap overlays in intro mode */
body.intro-mode #bg-overlay        { opacity: 0; }
body.intro-mode #bg-overlay-intro  { opacity: 1; }

/* Rulers & Dynasties page hides the main app underneath */
body.rulers-page-open #app,
body.rulers-page-open #scroll-hint { display:none; }

/* ════════════════════════════════════════
   ERA NAVIGATION PANEL
════════════════════════════════════════ */
#era-nav {
  position: absolute;
  top: max(16px, calc(50% - 340px));
  left: 68px; right: 64px;
  overflow: hidden;
  z-index: 4;
  pointer-events: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
#era-nav-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.era-nav-item {
  cursor: pointer;
    background: transparent;
    padding: 7px 19px;
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    transition: color 0.25s;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.20);
    border-bottom: 2px solid transparent;
}
.era-nav-item:last-child {
  border-right: none;
}
.era-nav-item:hover {
  color: rgba(255, 255, 255, 0.88);
}
.era-nav-item.active {
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
}

/* ════════════════════════════════════════
   RULER CARD (left column)
════════════════════════════════════════ */

/* ── Ruler card — anchored below the logo (its height now varies with how
   many neighbouring rulers are shown, so it can't be safely mid-centred
   without risking overlap with the logo above it). ── */
#ruler-card {
  position:absolute;
  left:calc(var(--tl-x) / 2);
  top: 230px;
  margin-top:40px;
  transform:translateX(-50%);
  width:340px;
  text-align:left;
  z-index:3;
  pointer-events:none;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
#ruler-card.ruler-fade { opacity:0; }

/* Directional slide when the active ruler changes on scroll — forward
   (later years) rises up, backward settles down, so the whole succession
   block reads like it's advancing/rewinding through the timeline. */
#ruler-card.rs-slide-out-up   { transform:translate(-50%, -16px); opacity:0; }
#ruler-card.rs-slide-out-down { transform:translate(-50%, 16px);  opacity:0; }
#ruler-card.rs-slide-in-up    { transform:translate(-50%, 16px);  opacity:0; transition:none; }
#ruler-card.rs-slide-in-down  { transform:translate(-50%, -16px); opacity:0; transition:none; }

.rs-header {
  display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--f-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold-dim);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
    margin-bottom: 20px;
}
.rs-header-dot {
  width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: var(--gold-dim);
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(201, 168, 68, 0.6);
}

.rs-adjacent:empty { display:none; }
.rs-previous { margin-bottom:26px; }
.rs-next { margin-top:26px; }
.rs-succession { position:relative; }
.rs-succession::before {
  content:'';
  position:absolute;
  top:0; bottom:0; left:4px;
  width:1px;
  background:rgba(255,255,255,0.25);
}
.rs-adjacent-item {
  position:relative;
  display:flex; align-items:flex-start; gap:14px;
  padding-bottom:12px;
}
.rs-adjacent-item:last-child { padding-bottom:0; }
.rs-adjacent-dot {
  width:9px; height:9px; margin-top:5px; border-radius:50%; flex-shrink:0;
      border: 2px solid rgb(71 70 72);
    background: #0a070a;
}
.rs-adjacent-text { display:flex; flex-direction:column; gap:3px; }
.rs-adjacent-name {
  font-family: var(--f-body);
    font-size: 15px;
    color: var(--white-dim);
    line-height: 1.2;
}
.rs-adjacent-years {
  font-family:var(--f-ui); font-size:13px; color:var(--white-dim);
  letter-spacing:0.3px;
}

.rs-active { display:flex; align-items:center; gap:14px; margin:4px 0; }
.rs-active-dot {
  width:9px; height:9px; margin-top:0; border-radius:50%; flex-shrink:0;
  border:2px solid #4f4b48;
  background:#0a070a;
  z-index:1;
  
}
.rs-active-body { display:flex; align-items:center; gap:18px; flex:1; min-width:0; }

.ruler-portrait-frame {
  width:79px; height:100px; flex-shrink:0;
  border:0px solid rgba(201,168,68,0.32);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.55),
    0 0 0 4px rgba(201,168,68,0.05),
    0 8px 32px rgba(0,0,0,0.5);
  position:relative; overflow:hidden;
  background:rgba(5,3,8,0.72);
  pointer-events:auto;
  cursor:pointer;
  transition:box-shadow 0.25s ease, transform 0.25s ease;
}
.ruler-portrait-frame:hover {
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.55),
    0 0 0 4px rgba(201,168,68,0.16),
    0 8px 32px rgba(0,0,0,0.5);
  transform:scale(1.02);
}
/* corner embellishments */
.ruler-portrait-frame::before,
.ruler-portrait-frame::after {
  content:'';
  position:absolute;
  width:14px; height:14px;
  border-color:rgba(201,168,68,0.5);
  border-style:solid;
  z-index:1;
}
.ruler-portrait-frame::before {
  top:6px; left:6px;
  border-width:1px 0 0 1px;
}
.ruler-portrait-frame::after {
  bottom:6px; right:6px;
  border-width:0 1px 1px 0;
}

.ruler-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}
.ruler-portrait-ph {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.ruler-portrait-ph img { opacity:0.18; filter:sepia(1) saturate(2); }
.ruler-silhouette { display:none; }

/* Russian Empire entries without portraits use a restrained human silhouette. */
.ruler-portrait-ph.is-imperial {
  background:
    radial-gradient(circle at 50% 35%, rgba(79,72,82,0.22), transparent 42%),
    linear-gradient(155deg, #17141b 0%, #0b090e 58%, #040306 100%);
}
.ruler-portrait-ph.is-imperial::after {
  content:'';
  position:absolute; inset:0;
  box-shadow:inset 0 0 42px 14px rgba(0,0,0,0.72);
}
.ruler-portrait-ph.is-imperial img { display:none; }
.ruler-portrait-ph.is-imperial .ruler-silhouette {
  display:block;
  position:relative;
  width:85px; height:119px;
  opacity:0.82;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,0.72));
}
.ruler-portrait-ph.is-imperial .ruler-silhouette::before {
  content:'';
  position:absolute;
  top:10px; left:24px;
  width:37px; height:46px;
  border-radius:48% 48% 45% 45%;
  background:linear-gradient(135deg, #211e25, #0d0b10 72%);
  box-shadow:inset 4px 2px 7px rgba(255,255,255,0.025);
}
.ruler-portrait-ph.is-imperial .ruler-silhouette::after {
  content:'';
  position:absolute;
  left:0; bottom:-5px;
  width:85px; height:69px;
  border-radius:55% 55% 12% 12% / 40% 40% 10% 10%;
  background:linear-gradient(145deg, #211e25, #09080c 70%);
  box-shadow:inset 6px 3px 10px rgba(255,255,255,0.02);
}

.ruler-meta { flex:1; min-width:0; pointer-events:auto; cursor:pointer; }
.rs-name-row { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:6px; }
.rs-crown-icon { color:var(--gold); flex-shrink:0; }
.rs-crown-icon[hidden] { display:none; }
.ruler-name {
  display:block;
  font-family:var(--f-heading); font-size:17px; font-weight:600;
  color:var(--white); letter-spacing:.5px;
  line-height:1.2;
  text-shadow:0 0 20px rgba(201,168,68,0.25);
}
.ruler-title-el {
  display:block;
  font-family:var(--f-body); font-size:13.5px;
  color:var(--white-mid); margin-bottom:7px; line-height:1.3;
}
.rs-active-hr { width:40px; height:1px; background:var(--gold-dim); margin-bottom:10px; }
.ruler-reign {
  display: block;
    font-family: var(--f-ui);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--white-dim);
    text-transform: uppercase;;
}

.rs-view-dynasty {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:30px;
  font-family:var(--f-ui); font-size:11px; font-weight:600; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--white-dim);
  border:1px solid var(--white-dim);
  padding:11px 14px;
  pointer-events:auto; cursor:pointer;
  transition:background-color 0.2s, color 0.2s;
}
.rs-view-dynasty:hover { background:var(--gold); color:var(--dark); }

/* ════════════════════════════════════════
   UTILITIES / MISC
════════════════════════════════════════ */

/* Scroll driver */
#scroll-driver { position:relative; z-index:0; }

/* Bottom-right links (mistake report + author) */
#bottom-links {
  position:fixed; bottom:18px; right:36px; z-index:20;
  display:flex; flex-direction:row; align-items:center; gap:20px;
  pointer-events:auto;
}
#mistake-link {
  font-family:var(--f-ui); font-size:10px; font-weight:600; letter-spacing:1.5px;
  color:var(--dark); text-transform:uppercase;
  background:var(--gold);
  padding:7px 14px;
  transition:background 0.2s;
  z-index:21;
}
#mistake-link:hover { background:#d4b355; }
#author-credit {
  display:flex; align-items:baseline; gap:6px;
}
.author-label {
  font-family: var(--f-ui);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    color: rgb(255 255 255 / 74%);
}
#author-link {
  font-family:var(--f-ui); font-size:12px; font-weight:600;
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--gold-dim); padding-bottom:1px;
  transition:color 0.2s, border-color 0.2s;
}
#author-link:hover { color:var(--white); border-color:var(--white-mid); }

/* Per-event background attribution */
#image-credit {
  position:fixed; left:calc(var(--panel-w) + 36px); bottom:17px; z-index:2;
  max-width:calc(100vw - var(--panel-w) - 260px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--f-ui); font-size:9px; letter-spacing:.35px;
  color:rgba(255,255,255,.55); text-shadow:0 1px 4px rgba(0,0,0,.9);
}
#image-credit[hidden] { display:none; }
.image-credit-label { margin-right:8px; color:rgba(255,255,255,.34); letter-spacing:1.3px; }
#image-credit a { color:rgba(255,255,255,.7); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2); }
#image-credit a:hover { color:var(--gold); border-color:var(--gold-dim); }
#image-credit-provider { color:rgba(255,255,255,.5); }
#image-credit-license { margin-left:7px; }

/* Progress bar */
#scroll-progress {
  position:fixed; bottom:0; left:var(--panel-w); right:0;
  height:2px; background:rgba(255,255,255,0.05); z-index:10;
}
#scroll-progress-bar {
  height:100%; background:var(--gold); width:0%;
  transition:width 0.1s linear; opacity:0.5;
}

/* Scroll hint */
#scroll-hint {
  position:fixed;
  left:calc(var(--tl-x) - 22px);
  top:calc(var(--nav-h) + 90px);
  transform:translateX(-50%);
  z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:1; transition:opacity 0.5s; pointer-events:none;
}
#scroll-hint.hidden { opacity:0; }
.scroll-hint-text {
  font-family:var(--f-ui); font-size:12px; letter-spacing:4px; color:var(--white-dim);
  writing-mode:vertical-lr;
}
.scroll-mouse {
  color:rgba(255,255,255,0.42);
  flex-shrink:0;
}
.scroll-mouse-dot {
  animation:mouseScroll 1.8s ease-in-out infinite;
}
@keyframes mouseScroll {
  0%   { transform:translateY(0);   opacity:1; }
  70%  { transform:translateY(6px); opacity:0; }
  100% { transform:translateY(0);   opacity:0; }
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width:1200px) {
  :root { --panel-w:500px; --tl-x:355px; }
  .tl-item.active .tl-year { font-size:33px; }
  .em-grid { grid-template-columns:1fr 1fr 1fr; gap:34px; }
  .em-col-world {margin-left:0; margin-top:10px; }

  /* Tablet landscape (e.g. iPad Air) — the ruler card was anchored far
     enough down the panel that its bottom (dynasty successor + "View Full
     Dynasty" button) fell below the fold once Safari's chrome ate into the
     viewport height. Pull it up so the whole card clears the fold. */
  #ruler-card { top:140px; margin-top:0; width:300px; }

  #app-logo { width:142.5px; }

  #content-heading { font-size:clamp(17.6px, 2.24vw, 24.8px); }

  #content-panel { padding:0 54px 0 58px; }

  /* Bring the "N of M" pagination row down closer to the title beneath it. */
  .event-nav { margin-bottom:6px; }

  .rp-modal-grid { gap:25px; }
}

/* Tablet landscape only (e.g. iPad Air) — width alone can't distinguish this
   from an iPad in portrait (also <1200px), so these are orientation-gated
   rather than folded into the plain max-width:1200px block above. */
@media (max-width:1200px) and (orientation:landscape) {
  /* Every modal shares .modal-panel — nudge them all down so the top no
     longer sits under the fixed header/logo. position:relative (already set
     on .modal-panel) makes `top` a pure visual offset, independent of the
     flex centering math on .modal — a margin here would only move it half
     as far since the centering absorbs half of any added margin. */
  .modal-panel { top:45px; }

  #modal.em-modal .em-year-row > .modal-year-tag { font-size:15.25px; }
  .modal-title { font-size:clamp(15px, 1.875vw, 22.5px); }
}

@media (max-width:960px) {
  :root { --panel-w:520px; --tl-x:360px; }
  #content-panel { padding:0 32px 0 44px; }
  .tl-item.active .tl-year { font-size:40px; }
  #app-logo { width:170px; }
  #ruler-card { width:280px; }
  .ruler-portrait-frame { width:79px; height:117px; }
  .ruler-name { font-size:19px; }
  .rs-adjacent-name { font-size:14.5px; }
}
@media (max-width:760px) {
  :root { --panel-w:100vw; --mobile-search-h:102px; --tl-item-h:58px; }
  #bottom-links {bottom: 1px;background: #000000;right: 12px; }
  #app {
    top:calc(var(--nav-h) + var(--mobile-search-h));
    grid-template-columns:92px 1fr;
    grid-template-rows:1fr;
    grid-template-areas:"timeline content";
  }
  #timeline-panel { width:92px; }
  #map-container, .order-toggle, #ruler-card, #scroll-hint { display:none; }
  /* No room for the era gutter once the ruler card is gone and the track
     takes the full 92px column. */
  .era-indicator-viewport { display:none; }

  /* ── Burger nav ── */
  #main-nav { padding:0 16px;left: 0; right: 0; }
  .nav-links {
    display:none;
    position:fixed;
    top:var(--nav-h); left:0; right:0;
    flex-direction:column; gap:15px; margin:0;
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
    background:rgba(8,6,16,0.98);
    border-bottom:1px solid rgba(201,168,68,0.18);
    z-index:100;
  }
  .nav-links.is-open { display:flex; }
  .nav-link { width:100%; padding:15px 20px; }
  .nav-link::after { display:none; }
  .nav-burger { display:flex; }

  /* ── Search + filter row, fixed below the nav ── */
  #search-wrap {
    display:flex;
    position:fixed;
    top:calc(var(--nav-h) + 10px);
    left:16px;
    width:56%;
    z-index:90;
    margin:0;
    padding:9px 12px;
    border-radius:3px;
    background:rgba(255,255,255,0.03);
  }
  #search-wrap.search-wrap:focus-within { width:56%; }
  .search-input { flex:1; width:auto; font-size:12px; }
  .filter-wrap {
    display:block;
    position:fixed;
    top:calc(var(--nav-h) + 10px);
    right:16px;
    z-index:90;
    margin:0;
  }
  .filter-btn { padding:9px 10px; }
  .filter-menu { left:auto; right:0; }

  /* The logo now lives in the fixed header (#main-nav), which stays on
     screen at every breakpoint, so it needs no special mobile handling
     here — just a smaller size (see #app-logo rule below). */

  /* ── Order arrows — vertical timeline, so the default (unrotated) up/down
     icons already point the right way; pinned near the top of the dot
     column. (No `transform` here — it would make this element a containing
     block for its fixed-position children, #search-wrap/.filter-wrap.) ── */
  .timeline-arrows {
    left:24px; right:auto; width:auto; margin:0; top:4px; padding-top:0;
    flex-direction:row;
    gap:4px;
    z-index:6;
  }
  .tl-arrow { width:20px; height:20px; }

  /* ── Era chips — fixed under the search row, above the timeline.
     #era-nav is a DOM child of #content-panel (used as a desktop hero
     overlay there), so on mobile it's switched to position:fixed rather
     than absolute — anchoring it to #timeline-panel would require moving
     it in the DOM and would break the desktop layout. ── */
  #era-nav {
    display:block;
    position:fixed;
    left:16px; right:16px;
    top:calc(var(--nav-h) + 38px);
    height:32px;
    margin-top:22px;
    overflow:hidden;
    z-index:90;
    pointer-events:auto;
  }
  #era-nav-inner { gap:8px; }
  .era-nav-item {
    border:1px solid rgba(255,255,255,0.16);
    border-radius:6px;
    background:rgba(255,255,255,0.02);
    padding:7px 14px;
    font-size:10.5px;
    letter-spacing:0.8px;
  }
  .era-nav-item.active {
    border:1px solid var(--gold);
    background:rgba(201,168,68,0.08);
  }

  /* Narrow column has no room for the "swipe timeline" hint text — the
     vertical timeline is self-explanatory (dots + years), so just hide it. */
  .mobile-swipe-hint { display:none; }

  /* ── Vertical timeline, scaled down for the narrow mobile column (same
     translateY approach as desktop, driven by positionTimeline() in
     main.js — item heights below must stay in sync with its defH/actH). ── */
  #timeline-track {
    left:0; right:0; width:auto;
    top:0; bottom:60px; /* clears the fixed "Noticed a mistake?" pill at the bottom */
  }
  #timeline-items { padding-right:0; }
  /* Numbers are centered across the full 92px column (46px = the column's
     own midpoint), rather than left-aligned in a fixed gutter — the dot and
     the connector line (below) share that same 46px axis. */
  .tl-label {
    padding-left:0; padding-top:6px;
    width:100%;
    display:flex; flex-direction:column; align-items:center;
  }
  .tl-year-row { position:relative; display:inline-flex; align-items:flex-end; }
  .tl-dot { display:none; }
  /* Badge + category icons form one vertical stack, positioned absolutely
     just to the right of the year (relative to .tl-year-row, whose own
     shrink-to-fit width becomes exactly the year's width once this stack is
     taken out of flow) — so however many of them there are, they never
     affect the year number's own centering. */
  .tl-year-badges {
    position:absolute; left:100%; top:50%;
    transform:translateY(-50%);
    margin-left:4px;
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .tl-event-count { margin-top:0; }
  .tl-cat-icon { margin-top:0; }
  .tl-cat-icon svg { width:10px; height:10px; }
  /* Era names don't fit the narrow column — the active era already reads in
     full in the content card, so ticks show only the year (bar the intro
     item, which has no year of its own — and even that's hidden below,
     "Welcome" being too wide a word for this column). */
  .tl-item:not(.is-intro) .tl-era { display:none; }
  .tl-item.is-intro .tl-era { display:none; }
  .tl-item.active.is-intro { height:82px; margin-top:0; }
  .tl-year { font-size:15px; letter-spacing:1px; }
  .tl-item.near .tl-year { font-size:16px; }
  .tl-item.active { height:82px; }
  /* Sits near the top of its (taller) row instead of centered in it, so the
     active number lines up with the event title in the content column
     (see positionTimeline()'s mobile branch in main.js, which anchors the
     active item's top near the track's top instead of centering it). */
  .tl-item.active .tl-label { padding-top:2px; }
  .tl-item.active .tl-year { font-size:18px; }
  /* Continuous line replaced with a per-item connector that stops short of
     each number (gap above) and resumes right after it — same threading
     technique as the ruler modal's "Events During Reign" list — instead of
     running straight through the digits. */
  #timeline-line { display:none; }
  .tl-item::before {
    content:'';
    position:absolute;
    left:46px; top:26px; bottom:0; width:1px;
    background:rgba(255,255,255,0.28);
  }
  .tl-item.active::before { top:32px; }
  #app-logo { width:150px; }
  #content-panel {
    align-items:flex-start;
    padding:22px 20px 90px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    min-height:0;
  }
  /* Desktop's -50px hero-centering offset (see the unscoped #content-inner
     rule) has no reason to apply to mobile's top-down scrolling layout — it
     was quietly shoving #event-nav's pagination up behind the fixed era-nav
     chip bar, making it look invisible. */
  #content-inner { max-width:none; width:100%; transform:none; }
  .event-nav { margin-bottom:5px; }
  .pagination-display { font-size:14px; }
  #scroll-progress { left:0; }
  #image-credit { left:20px; bottom:13px; max-width:calc(100vw - 180px); }
  .modal-main { grid-template-columns:1fr; gap:26px; }
  .modal-gallery { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .em-grid { grid-template-columns:1fr; gap:32px; }
  .em-col-world { margin-left:0; }
  .em-world-item::before { display:none; }
  .em-power-heading span, .em-world-heading span,
  .ag-overview-label span, .ag-events-heading span,
  .ag-facts-label span { font-size:17px; }
  .em-power-name { font-size:16.5px; }
  .rp-modal-grid { grid-template-columns:1fr; gap:28px; }

  /* ── Event card — bordered box with a portrait thumbnail ── */
  #event-block {
    position:relative;
    display:grid;
    grid-template-columns:60px 1fr;
    grid-template-areas:
      "banner banner"
      "media heading"
      "sub   sub"
      "text  text"
      "btn   btn";
    column-gap:7px;
    row-gap:7px;
    align-items:start;
    padding:15px;
    padding-bottom:40px;
    border:1px solid rgb(255 255 255 / 22%);
    border-radius:4px;
    background:rgb(6 6 6);
  }
  .event-card-media {
    display:block;
    grid-area:media;
    width:60px; height:50px;
    border-radius:3px;
    overflow:hidden;
    border:1px solid rgba(201,168,68,0.3);
    background:rgba(255,255,255,0.04);
  }
  .event-card-media img { width:100%; height:100%; object-fit:cover; display:block; }
  .event-card-media.is-empty { display:none; }
  #event-block .filter-banner { grid-area:banner; margin-bottom:0; }
  #event-block #content-heading {
    grid-area:heading;
    align-self:center;
    font-size:17px;
    margin-bottom:0;
  }
  #event-block #event-subtitle { grid-area:sub; font-size:12px; margin-bottom:0; }
  #event-block #event-text { grid-area:text; font-size:14.5px; max-width:none; margin-bottom:0; }
  /* Taken out of the grid flow entirely and floated into the card's own
     bottom-right corner — the grid-area is kept only so it still reserves
     no extra row now that "btn" is empty. */
  #event-block .read-more {
    position:absolute; left:14px; bottom:10px;
    padding:7px 14px;
    font-size:11.5px;
    letter-spacing:1.2px;
  }

  /* ── Succession / Administration list ── */
  #succession-block {
    display:block;
    margin-top:1px;
    padding-top:20px;
  }
  #succession-block[hidden] { display:none; }
  .succession-header { display:flex; align-items:flex-start; gap:10px; margin-bottom:3px; }
  .succession-crown { color:var(--gold); flex-shrink:0; margin-top:2px; }
  .succession-title {
    font-family:var(--f-heading); font-weight:600; font-size:14.5px;
    letter-spacing:0.6px; text-transform:uppercase; color:var(--white);
    margin-bottom:4px;
  }
  .succession-list { position:relative; }
  .succession-item { position:relative; display:flex; padding-bottom:14px; }
  .succession-item:last-child { padding-bottom:0; }
  .succession-card {
    flex:1; min-width:0; display:flex; align-items:center; gap:12px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,0.1); border-radius:4px;
    background:rgba(255,255,255,0.02);
    transition:border-color 0.2s, background-color 0.2s;
  }
  .succession-item.is-active .succession-card {
    border-color:rgb(255 255 255 / 22%); background:rgb(6 6 6);
  }
  .succession-portrait {
    flex-shrink:0; width:42px; height:54px; border-radius:2px; overflow:hidden;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center;
  }
  .succession-portrait img { width:100%; height:100%; object-fit:cover; display:block; }
  .succession-portrait img.succession-portrait-ph { width:50%; height:50%; object-fit:contain; opacity:0.35; }
  .succession-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .succession-name {
    font-family:var(--f-heading); font-size:13px; color:var(--white-mid);
    text-transform:uppercase; letter-spacing:0.3px;
  }
  .succession-item.is-active .succession-name { color:var(--gold); font-weight:600; }
  .succession-role { font-family:var(--f-ui); font-size:11px; color:rgba(255,255,255,0.5); }
  .succession-period {
    font-family:var(--f-ui); font-size:10px; letter-spacing:0.4px;
    color:rgba(255,255,255,0.4); text-transform:uppercase;
  }
  .succession-chevron { flex-shrink:0; color:rgba(255,255,255,0.3); }

  /* Event/ruler-profile/contact modals reuse the shared .modal, which
     normally centers its panel vertically over the full viewport — on a
     tall mobile card that centering can push the panel's top edge up far
     enough to mask the fixed header/logo. Anchor it just below the header
     instead, matching how the Rulers & Dynasties page and other internal
     pages sit under the nav. */
  .modal { align-items:flex-start; padding-top:calc(var(--nav-h) + 14px); }
  /* Paired with .modal's own padding-top above (same pattern as the desktop
     24px/-24px pair) — must cancel the whole padding-top, nav-h included,
     or the stuck title is left floating nav-h too low below the header. */
  .modal-sticky-bar { top:calc(-1 * (var(--nav-h) + 14px)); }

  /* #contact-modal's own rule (align-items:center, overflow-y:visible) has
     higher specificity than the .modal reset above, so it still wins here —
     on a short mobile viewport that centers the panel with visible overflow,
     letting its top edge (and the close button pinned to it) ride up
     through the fixed header, out of reach. #main-nav's z-index is higher
     than .modal's, so the burger stays clickable, but the close button
     doesn't. Anchor + scroll it like every other modal so it never crosses
     the header line. */
  #contact-modal { align-items:flex-start; padding-top:calc(var(--nav-h) + 14px); overflow-y:auto; }
}
@media (max-width:520px) {
  .modal-mistake-btn { padding:8px 2px; font-size:13px; }
  #app-logo { width:130px; }
  #content-heading { font-size:24px; }
  #event-text { font-size:15px; }
  .modal-content { padding:32px 24px 36px; }
  .modal-sticky-bar { margin:0 -24px 10px; padding:0 130px 0 24px; }
  #modal.em-modal .modal-source,
  #modal.rp-profile-modal .modal-source,
  #modal.map-modal .modal-source,
  #modal.legacy-modal .modal-source,
  #modal.bibliography-modal .modal-source,
  #modal.author-modal .modal-source { margin:24px -24px -36px; padding:14px 24px; }
  #modal.em-modal .modal-source {
    display:grid; grid-template-columns:minmax(0, 1fr) 34px 34px; gap:10px 8px;
  }
  #modal.em-modal .modal-source-links { display:grid; gap:4px; }
  #modal.em-modal .modal-mistake-btn { grid-column:1 / -1; justify-self:start; white-space:normal; }
  .modal-nav { width:40px; height:58px; }
  .modal-nav--previous { left:0; }
  .modal-nav--next { right:0; }
  .modal-gallery { grid-template-columns:1fr; }
  .modal-gallery-item img { height:263px; }
}

/* ════════════════════════════════════════
   RULERS & DYNASTIES (full page)
════════════════════════════════════════ */
.rulers-page {
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:20;
  overflow-y:auto;
  padding:44px 20px 80px;
}
.rulers-page[hidden] { display:none; }

.rp-panel {
  position:relative;
  max-width:1420px; margin:0 auto;
  background:rgba(8,6,16,0.97);
  border:1px solid rgba(201,168,68,0.22);
  box-shadow:0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,68,0.06);
  padding:48px 56px 60px;

  transform:translateY(24px);
  opacity:0;
  transition:transform 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.38s ease;
}
.rp-panel.is-open {
  transform:translateY(0);
  opacity:1;
}

/* .rp-close sits inside a .modal-actions wrapper (see that class's
   rationale) alongside the share button, flush at .rp-panel's own
   top-right corner. */

/* Sticks to the top of .rulers-page's scrollport once it would otherwise
   scroll past it. top is negative — pulls the stuck position up by
   .rulers-page's own padding-top (44px) so the bar's opaque background
   also covers that gap, instead of leaving it transparent for scrolled
   content to bleed through. Bleeds edge-to-edge (negative margin
   cancelling .rp-panel's own side padding, immediately reapplied as
   padding — the right side stays wide enough to clear .rp-close above it)
   so the background spans the panel's full width. .rp-subtitle stays in
   normal flow below, so only the title pins in place, not the descriptive
   text. */
.rp-sticky-bar {
  position:sticky; top:-44px; z-index:5;
  min-height:56px;
  margin:0 -56px 10px; padding:0 200px 0 56px;
  background:rgba(8,6,16,0.97);
  border-bottom:1px solid transparent;
  box-shadow:0 8px 14px -8px rgba(0,0,0,0);
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
/* See .modal-sticky-bar's identical rule for the rationale. */
.rulers-page.is-scrolled .rp-sticky-bar {
  border-bottom-color:rgba(255,255,255,0.14);
  box-shadow:0 8px 14px -8px rgba(0,0,0,0.5);
}
.rp-header { margin-bottom:32px; }
.rp-title {
  font-family:var(--f-heading); font-weight:600;
  font-size:clamp(28px, 3.4vw, 42px);
  letter-spacing:0.5px; color:var(--white);
  margin:0;
  transform-origin:left center;
  transition:transform 0.25s ease;
}
/* .is-scrolled is toggled by bindTitleShrink in main.js as soon as
   .rulers-page has scrolled at all — the transition above is what makes
   this read as a smooth scale-down rather than an instant jump. */
.rulers-page.is-scrolled .rp-title { transform:scale(0.75); }
.rp-subtitle { color:var(--white-mid); font-size:17px; max-width:640px; line-height:1.6; }

.rp-search-wrap {
  display:flex; align-items:center; gap:8px;
  width:280px; max-width:100%;
  margin-left:auto;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.03);
  color:var(--white-mid);
}
.rp-search-wrap:focus-within { border-color:rgba(201,168,68,0.5); }
.rp-search-icon { flex-shrink:0; opacity:0.7; }
.rp-search-input {
  flex:1; min-width:0; background:none; border:none; outline:none;
  font-family:var(--f-ui); font-size:13.5px; color:var(--white);
}
.rp-search-input::placeholder { color:var(--white-dim); }
.rp-search-clear { flex-shrink:0; color:var(--white-dim); transition:color 0.2s; }
.rp-search-clear:hover { color:var(--gold); }
.rp-search-clear[hidden] { display:none; }

.rp-tabs {
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-bottom:40px;
}
.rp-tabs-group { display:flex; flex-wrap:wrap; gap:10px; }
.rp-tab {
  display:flex; align-items:center; gap:7px;
  padding:10px 18px;
  font-family:var(--f-ui); font-size:12.5px; font-weight:600; letter-spacing:0.8px;
  color:var(--white-mid);
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.02);
  transition:color 0.2s, border-color 0.2s, background 0.2s;
}
.rp-tab:hover { color:var(--white); border-color:rgba(255,255,255,0.3); }
.rp-tab.active {
  color:var(--dark); background:var(--gold); border-color:var(--gold);
}
.rp-tab-icon { flex-shrink:0; }

.rp-timeline { margin-bottom:40px; }
.rp-timeline-body { transition:transform 0.22s ease, opacity 0.22s ease; }
.rp-timeline-body.rp-anim-in-right { transform:translateX(24px);  opacity:0; transition:none; }
.rp-timeline-body.rp-anim-in-left  { transform:translateX(-24px); opacity:0; transition:none; }
.rp-section-desc { color:var(--whitGe-dim); font-size:13.5px; margin-bottom:20px; }

.rp-dynasty-info { margin:-30px 0 30px; max-width:820px; }
.rp-dynasty-info[hidden] { display:none; }
.rp-dynasty-info-heading {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:12px;
  margin-bottom:3px;
}
.rp-dynasty-info-name {
  font-family:var(--f-heading); font-weight:600;
  font-size:clamp(20px, 2.6vw, 28px);
  letter-spacing:0.4px;
}
.rp-dynasty-info-years {
  font-family:var(--f-ui); font-size:14px; color:var(--white-mid);
}
.rp-dynasty-info-desc {
  font-family:var(--f-body); font-size:17.5px; line-height:1.4;
  color:var(--white-mid);
}

.rp-legend {
  display:flex; flex-wrap:wrap; align-items:center; gap:3px;
  margin-bottom:50px;
}
.rp-legend-item {
  display:flex; align-items:center; gap:7px;
  font-family:var(--f-ui); font-size:13px; font-weight:400; color:var(--white-mid);
  padding:6px 14px 6px 10px;
  border-radius:999px;
}
.rp-legend-item.is-clickable {
  cursor:pointer;
  transition:color 0.2s, background-color 0.2s, opacity 0.2s;
}
.rp-legend-item.is-clickable:hover { color:var(--white); background:rgba(255,255,255,0.07); }
.rp-legend-item.is-clickable.is-active {
  color:#fff;
  background:var(--legend-color, var(--gold));
}
.rp-legend-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

.rp-axis {
  position:relative; height:20px;
  font-family:var(--f-ui); font-size:11.5px; color:var(--white-dim);
  margin-bottom:2px;
}
.rp-axis-ticks { position:absolute; inset:0; }
.rp-axis-tick { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.rp-axis-tick::after {
  content:'';
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  width:1px; height:56px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}

.rp-hover-year {
  position:absolute; top:29px;
  font-family:var(--f-ui); font-size:11.5px; font-weight:700; color:var(--gold);
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity 0.15s ease;
}
.rp-hover-year.is-visible { opacity:1; }
/* Align outward from the segment's edges (not centered) so short reigns
   don't collide: the start year sits to the left of its point, the end
   year to the right, diverging instead of overlapping in the middle. */
.rp-hover-year--start { transform:translate(calc(-100% - 4px), -100%); }
.rp-hover-year--end   { transform:translate(4px, -100%); }

.rp-track-wrap {
  position:relative;
  height:72px;
  margin-bottom:36px;
}

.rp-dynasty-labels {
  position:absolute; inset:0;
  font-family:var(--f-ui); font-size:10px; font-weight:600; letter-spacing:0.6px;
}
.rp-dynasty-label {
  position:absolute; transform:translateX(-50%); white-space:nowrap; text-transform:uppercase;
  background:none; border:none; padding:2px 5px; font:inherit; letter-spacing:inherit;
}
.rp-dynasty-label--top { top:0; }
.rp-dynasty-label--bottom { top:50px; }
.rp-dynasty-label.is-clickable { cursor:pointer; transition:opacity 0.2s; }
.rp-dynasty-label.is-clickable:hover { opacity:0.72; }
.rp-dynasty-label.is-active { text-decoration:underline; text-underline-offset:4px; }

.rp-axis-bar {
  position:absolute; top:34px; left:0; right:0;
  height:3px;
  border-radius:2px; overflow:visible;
  background:rgba(255,255,255,0.08);
}
.rp-segment { position:absolute; top:0; bottom:0; }
.rp-transition-dot {
  position:absolute; top:50%; width:6px; height:6px;
  background:var(--dark); border:1px solid rgba(255,255,255,0.55);
  transform:translate(-50%, -50%) rotate(45deg);
}

.rp-ruler-ticks {
  position:absolute; top:34px; left:0; right:0; height:3px;
}
.rp-ruler-tick {
  position:absolute; top:50%; height:3px; min-width:2px;
  transform:translateY(-50%);
  border-radius:2px;
  background:transparent;
  transition:height 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.rp-ruler-tick.is-highlighted {
  height:11px;
  background:var(--rp-tick-color, var(--gold));
  box-shadow:0 0 10px var(--rp-tick-color, var(--gold-glow));
}

.rp-avatar-row {
  position:relative;
  display:flex; align-items:center; gap:16px;
  margin-bottom:8px;
}

.rp-page-arrow {
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(201,168,68,0.28);
  background:rgba(8,6,16,0.82); color:var(--white-mid);
  transition:color 0.2s, border-color 0.2s, opacity 0.2s;
}
.rp-page-arrow:hover:not(:disabled) { color:var(--gold); border-color:var(--gold); }
.rp-page-arrow:disabled { opacity:0.25; cursor:not-allowed; }
.rp-page-arrow[hidden] { display:none; }

.rp-avatars {
  flex:1; min-width:0;
  display:flex; justify-content:center; gap:15px;
  padding:4px 4px 18px;
  transition:transform 0.22s ease, opacity 0.22s ease;
}

.rp-avatars.rp-anim-out-left  { transform:translateX(-24px); opacity:0; }
.rp-avatars.rp-anim-out-right { transform:translateX(24px);  opacity:0; }
.rp-avatars.rp-anim-in-right  { transform:translateX(24px);  opacity:0; transition:none; }
.rp-avatars.rp-anim-in-left   { transform:translateX(-24px); opacity:0; transition:none; }

.rp-avatar-more {
  flex-shrink:0;
  align-self:center;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(201,168,68,0.35);
  background:rgba(8,6,16,0.6); color:var(--gold);
  transition:color 0.2s, border-color 0.2s, background 0.2s;
}
.rp-avatar-more:hover {
  color:var(--dark); background:var(--gold); border-color:var(--gold);
}

.rp-avatar {
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  /* Fluid width — computeRpPageSize() in main.js measures the rendered
     result and adjusts how many avatars it asks for accordingly, so a
     narrower row (tablet, small window) shows fewer avatars instead of
     the row overflowing a fixed count. */
  width:clamp(56px, 6.5vw, 84px);
  color:var(--white-mid);
  transition:color 0.2s, opacity 0.25s, filter 0.25s;
}
.rp-avatar:hover { color:var(--white); }
.rp-avatar.is-dimmed { opacity:0.3; filter:grayscale(1); }
.rp-avatar.is-dimmed:hover { opacity:0.8; }
.rp-avatar-portrait {
  position:relative;
  width:100%; aspect-ratio:3 / 4; border-radius:2px;
  overflow:hidden;
  border:1px solid var(--rp-ring, rgba(255,255,255,0.18));
  background:rgba(255,255,255,0.04);
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.rp-avatar-portrait img { width:100%; height:100%; object-fit:cover; }
.rp-portrait-placeholder { width:34%; height:34%; opacity:0.4; color:var(--white-mid); }
.rp-avatar.active .rp-avatar-portrait,
.rp-avatar:hover .rp-avatar-portrait {
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,168,68,0.16);
}
.rp-avatar-name {
  font-family:var(--f-ui); font-size:13px; font-weight:400;
  text-align:center; line-height:1.3;
}
.rp-avatar-duration {
  min-height:18px;
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  line-height:1.2;
  text-align:center;
}
.rp-avatar.active .rp-avatar-name { color:var(--gold); }
.rp-avatar-years { font-size:11px; color:var(--white-dim); text-align:center; }

.rp-tooltip {
  position:absolute; top:0; left:0;
  width:320px; max-width:90vw;
  display:flex; gap:16px;
  padding:20px;
  background:rgba(8,6,16,0.98);
  border:1px solid rgba(201,168,68,0.3);
  box-shadow:0 18px 46px rgba(0,0,0,0.6);
  z-index:6;
  opacity:0; transform:translateX(-6px);
  transition:opacity 0.16s ease, transform 0.16s ease;
  pointer-events:none;
}
.rp-tooltip.is-flipped { transform:translateX(6px); }
.rp-tooltip.is-visible { opacity:1; transform:translateX(0); pointer-events:auto; }
.rp-tooltip[hidden] { display:none; }
.rp-tooltip::before {
  content:''; position:absolute; top:var(--rp-arrow-top, 30px); left:-7px;
  width:12px; height:12px;
  background:rgba(8,6,16,0.98);
  border-left:1px solid rgba(201,168,68,0.3);
  border-bottom:1px solid rgba(201,168,68,0.3);
  transform:rotate(45deg);
}
.rp-tooltip.is-flipped::before {
  left:auto; right:-7px;
  border-left:none; border-bottom:none;
  border-right:1px solid rgba(201,168,68,0.3);
  border-top:1px solid rgba(201,168,68,0.3);
}
.rp-detail-body { flex:1; min-width:0; }
.rp-detail-name {
  font-family:var(--f-heading); font-weight:600;
  font-size:18px;
  color:var(--gold); letter-spacing:0.3px; margin-bottom:4px;
}
.rp-detail-meta {
  font-family:var(--f-ui); font-size:11.5px; letter-spacing:0.4px;
  color:var(--white-mid); margin-bottom:8px;
}
.rp-detail-bio {
  font-family:var(--f-body); font-size:13.5px; line-height:1.55;
  color:rgba(255,255,255,0.72); margin-bottom:10px;
}
.rp-detail-profile-link {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-ui); font-size:13.5px; font-weight:600; letter-spacing:0.6px;
  color:var(--gold); transition:gap 0.2s;
}
.rp-detail-profile-link:hover { gap:10px; }

@media (max-width:900px) {
  .rp-search-wrap { width:100%; max-width:none; margin-left:0; }
  .rp-panel, .ag-panel { padding:36px 22px 44px; }
  .rp-panel .modal-source, .ag-panel .modal-source { margin:32px -22px -44px; padding:14px 22px; }
  /* padding-right isn't reduced to match the panel's 22px side padding
     like padding-left is — .modal-actions (share button + .modal-close,
     both a fixed 56px square at this width) needs that gutter wide enough
     to fit without overlapping the title text. */
  .rp-sticky-bar, .ag-sticky-bar { margin-left:-22px; margin-right:-22px; padding-left:22px; padding-right:130px; }
  .rp-tooltip { flex-direction:column; width:300px; }
  .rp-modal-grid { grid-template-columns:1fr; gap:28px; }
}

/* ════════════════════════════════════════
   AT A GLANCE (full page)
   Fast, skimmable alternative to the year-by-year timeline — click an era
   in the left list, its detail panel (facts/overview/image/key events)
   swaps in on the right (see the ag-era-list click handler in main.js).
════════════════════════════════════════ */
.ag-page {
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:20;
  overflow-y:auto;
  padding:44px 20px 80px;
}
.ag-page[hidden] { display:none; }

.ag-panel {
  position:relative;
  max-width:1420px; margin:0 auto;
  background:rgba(8,6,16,0.97);
  border:1px solid rgba(201,168,68,0.22);
  box-shadow:0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,68,0.06);
  padding:48px 56px 60px;

  transform:translateY(24px);
  opacity:0;
  transition:transform 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.38s ease;
}
.ag-panel.is-open { transform:translateY(0); opacity:1; }
/* Re-asserts the shared @media(max-width:900px) block's .ag-panel padding
   above — that block is defined earlier in the file (alongside .rp-panel,
   which it correctly overrides since .rp-panel's own base rule comes
   first), but .ag-panel's base rule here comes later, so without this it
   would win the cascade at any width and the mobile padding would never
   actually apply. */
@media (max-width:900px) {
  .ag-panel { padding:36px 22px 44px; }
}

/* .ag-close sits inside a .modal-actions wrapper — see .rp-close's
   identical rationale. */

/* Sticks to the top of .ag-page's scrollport once it would otherwise
   scroll past it — see .rp-sticky-bar's identical rationale (same 1420px
   panel width, same .ag-page/.rulers-page 44px top padding).
   kicker/divider/subtitle stay in normal flow below, so only the title
   pins in place. */
.ag-sticky-bar {
  position:sticky; top:-44px; z-index:5;
  min-height:56px;
  margin:0 -56px 6px; padding:0 100px 0 56px;
  background:rgba(8,6,16,0.97);
  border-bottom:1px solid transparent;
  box-shadow:0 8px 14px -8px rgba(0,0,0,0);
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
/* See .modal-sticky-bar's identical rule for the rationale. */
.ag-page.is-scrolled .ag-sticky-bar {
  border-bottom-color:rgba(255,255,255,0.14);
  box-shadow:0 8px 14px -8px rgba(0,0,0,0.5);
}
.ag-header { margin-bottom:32px; }
.ag-title {
  font-family:var(--f-heading); font-weight:600;
  font-size:clamp(28px, 3.4vw, 42px);
  letter-spacing:0.5px; color:var(--white);
  margin:0;
  transform-origin:left center;
  transition:transform 0.25s ease;
}
/* .is-scrolled is toggled by bindTitleShrink in main.js — see .rp-title's
   identical rule for the rationale. */
.ag-page.is-scrolled .ag-title { transform:scale(0.75); }
.ag-kicker {
  font-family: var(--f-ui);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--white-dim);
    margin-bottom: 14px;
}
.ag-subtitle { color:var(--white-mid); font-size:17px; max-width:640px; line-height:1.6; margin-top:11px; }
/* Intro copy above the subtitle tagline: a 2-column text block (its own
   internal newspaper-style flow, not a grid, since the four paragraphs are
   unequal lengths and should balance/reflow naturally rather than pair up
   1:1) plus a third column for the map. */
.ag-intro {
  display:grid; grid-template-columns:2fr 1fr;
  align-items:start; gap:48px;
  margin-top:16px;
}
.ag-intro-text {
  columns:2; column-gap:52px;
  color:var(--white-mid); font-size:17px; line-height:1.6;
}
.ag-intro-country { color:#ffffff; }
/* break-inside:avoid stops a column break from landing mid-paragraph. */
.ag-intro-text p { margin-bottom:1em; break-inside:avoid; }
.ag-intro-text p:last-child { margin-bottom:0; }
/* Forces the 1569/Commonwealth paragraph to open the 2nd column outright,
   rather than wherever the browser's own height-balancing would otherwise
   land it. Mobile collapses .ag-intro-text to a single column (see the
   900px breakpoint below), where "column" is meaningless — reset there so
   it doesn't force a stray page-break in that single-column flow. */
.ag-intro-col2 { break-before:column; }
.ag-intro-map {
  border:1px solid rgba(255,255,255,0.14);
}
.ag-intro-map img {
  display:block; width:100%; height:auto;
  filter:none;
}
.ag-intro-map .ag-collage-caption { margin:8px 12px; text-align:left; }

/* ── Body: era list (left) + active era's detail panel (right) ── */
.ag-body {
  display:grid;
  grid-template-columns:290px 1fr;
  gap:44px;
  align-items:start;
}

.ag-era-list { display:flex; flex-direction:column; position:relative; }
.ag-era-item {
  position:relative;
  display:flex; align-items:flex-start; gap:14px;
  width:100%; text-align:left;
  background:none; border:1px solid transparent;
  padding:11px 0;
  cursor:pointer;
  transition:border-color 0.2s, background 0.2s;
}
.ag-era-item:hover { background:rgba(255,255,255,0.03); }
.ag-era-item.active {
  border-color:rgba(201,168,68,0.45);
  background:rgba(201,168,68,0.06);
  /* Compensates for the dot being hidden (see .ag-era-item.active
     .ag-era-dot below) — without it the text would shift left onto where
     the dot used to sit, misaligning it against every inactive item's
     text, which is still pushed over by a real dot + 14px gap (9+14=23). */
  padding-left:23px;
}
/* Per-item connector down to the next dot, same threading technique as the
   mobile timeline's .tl-item::before (see #timeline-line's mobile override
   in style.css) — simpler than measuring the list's total height for one
   continuous line. left is half the dot's own width (9px), lining the
   connector up through the dots' centers now that .ag-era-item has no
   inline padding of its own to offset it by. Skipped for the active item —
   its border box already reads as a visual break in the list, so the line
   continuing through it looked redundant. */
.ag-era-item:not(:last-child):not(.active)::after {
}
.ag-era-dot {
  flex-shrink:0; margin-top:5px;
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.3);
  background:var(--dark);
  position:relative; z-index:1;
  transition:all 0.2s;
}
/* No dot at all for the active item — its bordered box is already the
   marker; a lone hollow circle inside it read as clutter. */
.ag-era-item.active .ag-era-dot { display:none; }
.ag-era-item-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ag-era-item-title {
  font-family:var(--f-heading); font-weight:600; font-size:18px;
  color:var(--white); line-height:1.3;
}
.ag-era-item.active .ag-era-item-title { }
.ag-era-item-range {
  font-family: var(--f-ui);
    font-size: 15px;
    letter-spacing: 0.4px;
    color: var(--gold);
    margin-top: 1px;
}
.ag-era-item-teaser {
  font-family:var(--f-body); font-size:16.5px; color:var(--white-mid);
  line-height:1.4; margin-top:3px;
}
/* Mobile only — the full 8-item list is too tall to skim on a phone, so
   only the active era plus its immediate neighbors (.ag-era-item--near,
   set by setAgActiveEra in main.js) stay visible; every other era is
   hidden entirely, and the two neighbors drop their teaser to stay
   compact. Desktop/tablet keep the full list (see .ag-era-item.active's
   own padding-left compensation above, which applies at every width). */
@media (max-width:760px) {
  .ag-era-item:not(.active):not(.ag-era-item--near) { display:none; }
  .ag-era-item--near .ag-era-item-teaser { display:none; }
}

/* ── Detail panel ── */
/* Fades in/out on era switch (see setAgActiveEra in main.js) — starts
   already-visible for the server-rendered initial era (.active is present
   in the HTML from the start), so there's no flash on first paint. */
.ag-detail { opacity:0; transition:opacity 0.2s ease; }
.ag-detail.active { opacity:1; }
.ag-detail[hidden] { display:none; }
/* .ag-panel .modal-source's own display:flex (see MODAL section) outranks
   the browser's default [hidden] rule on specificity alone, so the 7
   inactive footers would otherwise keep rendering (and taking up height)
   despite the hidden attribute — this restores it explicitly. */
.ag-detail-footer[hidden] { display:none; }
.ag-detail-grid {
  display:grid;
  grid-template-columns:1.5fr 0.61fr 320px;
  grid-template-areas:
    "era images events"
    "facts images events"
    "overview images events";
  column-gap:65px;
  row-gap:0px;
  align-items:start;
}
.ag-detail-col--era { grid-area:era; }
.ag-detail-col--facts { grid-area:facts; }
.ag-detail-col--overview { grid-area:overview; }
.ag-collage { grid-area:images; }
.ag-events-col { grid-area:events; }
/* Font + horizontal rule come from the shared heading rule above — this
   just overrides its margins since these sit first in their column. */
.ag-facts-label { margin-top:0; margin-bottom:14px; }
.ag-detail-range {
  font-family: var(--f-ui);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 0px;
}
.ag-detail-title {
  font-family:var(--f-heading); font-weight:600;
  font-size:clamp(24px, 2.8vw, 34px);
  color:var(--white); margin-bottom:14px;
}
.ag-detail-lede {
  color:var(--white-mid); font-size:17px; line-height:1.5;
  max-width:680px; margin-bottom:-32px;
}

.ag-facts {
  display:grid; grid-template-columns:repeat(4, 1fr);
  border:1px solid rgba(255,255,255,0.12);
  margin-bottom:30px;

}
.ag-fact { padding:20px 16px; border-right:1px solid rgba(255,255,255,0.12); text-align:center; }
.ag-fact:last-child { border-right:none; }
.ag-fact-icon { color:var(--gold); display:flex; justify-content:center; margin-bottom:10px; }
.ag-fact-label {
  font-family: var(--f-ui);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--white-dim);
    margin-bottom: 6px;
}
.ag-fact-value { font-family:var(--f-body); font-size:14.5px; color:var(--white); line-height:1.4; }
/* At a Glance's own facts grid: individually bordered 2x2 cards rather
   than the flush bordered strip .ag-facts/.ag-fact default to elsewhere
   (the family page's .fp-stats reuses that default as-is) — scoped to
   .ag-detail-col--facts so the shared base rules stay untouched. */
.ag-detail-grid .ag-detail-col--facts .ag-facts {
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  border:none;
  margin-bottom:-15px;
}
.ag-detail-grid .ag-detail-col--facts .ag-fact,
.ag-detail-grid .ag-detail-col--facts .ag-fact:last-child {
  border:1px solid rgba(255,255,255,0.12);
  border-right:1px solid rgba(255,255,255,0.12);
}

.ag-overview { margin-bottom:2px; }
/* Font + horizontal rule come from the shared .em-world-heading rule
   above — this just overrides its margins for this context. */
.ag-overview-label { margin-top:0; margin-bottom:10px; }
.ag-overview p { color:var(--white-mid); font-size:17px; line-height:1.4; }

/* 4 photos stacked one under the other — .ag-collage-photo reuses
   .modal-gallery-item (the event modal's own photo tiles) for identical
   hover/zoom-in styling and behavior, just at a landscape height suited
   to a single narrow column instead of the event modal's 2-column
   gallery (see .ag-collage-photo img override below, and the click
   handler in main.js's bindEvents, which opens the same lightbox). */
.ag-collage { display:flex; flex-direction:column; gap:16px; margin-top:0; }
.ag-collage-item { min-width:0; }
.ag-collage-photo { width:100%; }
.ag-collage-photo img { height:140px; }
.ag-collage-caption {
  display:block; margin-top:8px;
  font-family:var(--f-ui); font-size:12px; color:var(--white-dim);
  font-style:italic; line-height:1.4; text-align:center;
}

/* ── Key events sidebar ── */
/* Font + horizontal rule come from the shared .em-world-heading rule
   above — this just overrides its margins for this context. */
.ag-events-heading { margin-top:0; margin-bottom:18px; }
.ag-events { display:flex; flex-direction:column; gap:18px; margin-bottom:26px; }
/* Same grid layout, dashed connector, and hover treatment as the ruler
   modal's "Events During Reign" list (.rp-events-item) — see .ag-event--linked
   below for the one difference: only linked entries get the hover/cursor
   treatment, since unlinked curated entries aren't clickable. */
.ag-event {
  position:relative;
  display:grid; grid-template-columns:50px 1fr; gap:14px;
  border-radius:3px; padding:0px 6px; margin:-4px -6px;
  transition:background-color 0.2s;
}
.ag-event::before {
  content:'';
  position:absolute; left:20px; top:22px; bottom:-10px;
  width:1px; border-left:1px dashed rgb(143 143 143 / 45%);
}
.ag-event:last-child::before { display:none; }
.ag-event-year { font-family:var(--f-ui); font-size:17px; font-weight:400; color:var(--white-dim); }
.ag-event-text { font-family:var(--f-ui); font-weight:400; font-size:17px; color:var(--white); line-height:1.5; }
/* Entries the curated content links to a real system event (see
   .ag-event--linked in main.js's bindEvents) — hover/focus behavior
   matches the ruler modal's "Events During Reign" list. */
.ag-event--linked { cursor:pointer; }
.ag-event--linked:hover, .ag-event--linked:focus-visible { background:rgba(201,168,68,0.06); outline:none; }
.ag-event--linked:hover .ag-event-text,
.ag-event--linked:focus-visible .ag-event-text { color:var(--gold); }

.ag-explore-rulers {
  display: flex;
    gap: 7px;
    padding: 11px 16px;
    font-family: var(--f-ui);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.8px;
    color: var(--gold);
    text-transform: uppercase;
    border: 1px solid rgba(201, 168, 68, 0.4);
    transition: all 0.2s;
    align-items: center;
}
.ag-explore-rulers:hover { background:var(--gold); color:var(--dark); border-color:var(--gold); }
.ag-explore-rulers span { margin-left:auto; font-size:16px; line-height:1; }

body.at-glance-open #app,
body.at-glance-open #scroll-hint { display:none; }

@media (max-width:900px) {
  .ag-intro { grid-template-columns:1fr; gap:24px; }
  .ag-intro-text { columns:1; }
  .ag-intro-col2 { break-before:auto; }
  .ag-intro-map img { height:auto; }
  .ag-body { grid-template-columns:1fr; gap:32px; }
  .ag-detail-grid {
    grid-template-columns:1fr;
    grid-template-areas:"era" "facts" "overview" "images" "events";
    gap:28px;
  }
  /* Desktop's -32px pull (used to tuck facts up against the era column in
     that 3-row single-column layout) would otherwise eat straight through
     the grid's 28px row-gap here, leaving Era Highlights flush against the
     lede text instead of a gap above it. */
  .ag-detail-lede { margin-bottom:0; }
  /* Covers the family page's .fp-stats (plain .ag-facts, no
     .ag-detail-grid wrapper). At a Glance's own facts grid needs the extra
     scoping below too — its desktop rule (.ag-detail-grid .ag-detail-col--facts
     .ag-facts, 3 classes) otherwise outranks this bare 1-class selector and
     the mobile 2-column layout never actually applies. */
  .ag-facts { grid-template-columns:repeat(2, 1fr); }
  .ag-detail-grid .ag-detail-col--facts .ag-facts { grid-template-columns:repeat(2, 1fr); }
  .ag-fact:nth-child(2) { border-right:none; }
  .ag-fact:nth-child(1), .ag-fact:nth-child(2) { border-bottom:1px solid rgba(255,255,255,0.12); }
}


/*Cookie disclaimer*/

.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    background-color: var(--gold)!important;
}

button.cky-btn.cky-btn-accept {
    background-color: var(--gold)!important;
    border-color: var(--gold)!important;
}

/* At a Glance: horizontal era timeline and constrained reading width. */
.ag-panel { max-width:1420px; }
.ag-header { margin-bottom:36px; }
.ag-body { display:block; }
/* Sticks just below the title bar once scrolled — same edge-to-edge bleed
   and border/shadow-on-scroll treatment as .ag-sticky-bar (see that rule's
   rationale), offset by 18px so it lands flush against the title bar's own
   56px stuck height instead of overlapping it: .ag-page's 44px padding-top
   cancels out of the "flush at scrollport top" math (see .ag-sticky-bar),
   so 44px + 18px = 62px = the title bar's ~56px height plus its own 6px
   margin-bottom. Desktop/tablet only — mobile resets position to static
   below, since the chip-strip layout there isn't meant to pin in place. */
.ag-era-list {
  /* +12px over the "bare" 84px value — compensates for the 12px
     padding-top added to .ag-era-item below (the track line's own
     position:absolute top offset is measured from the item's padding
     box, i.e. unaffected by the item's own padding, so without this the
     added padding would eat back into the title/dot clearance tuned
     earlier). */
  --ag-track-y:96px;
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  position:sticky;
  top:18px; z-index:4;
  background:rgba(8,6,16,0.97);
  border-bottom:1px solid transparent;
  box-shadow:0 8px 14px -8px rgba(0,0,0,0);
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
  margin:0 -56px 52px;
  padding:0 56px;
  isolation:isolate;
}
.ag-era-list.is-stuck {
  border-bottom-color:rgba(255,255,255,0.14);
  box-shadow:0 8px 14px -8px rgba(0,0,0,0.5);
}
.ag-era-list::before {
  content:none;
}
.ag-era-item,
.ag-era-item.active {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  width:100%; min-width:0;
  padding:12px;
  text-align:center;
  background:none;
  border:1px solid transparent;
  border-radius:8px;
  transition:border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.ag-era-item:hover:not(.active) { background:none; }
.ag-era-item:hover .ag-era-item-title,
.ag-era-item:focus-visible .ag-era-item-title { color:var(--white); }
.ag-era-item:focus-visible { outline:1px solid rgba(201,168,68,0.7); outline-offset:4px; }
/* Border + tint + soft glow so the active era reads clearly as selected,
   not just via the (fairly subtle) gold title/dot/track-line color shift. */
.ag-era-item.active {
  border-color:var(--gold-dim);
  background:rgba(201,168,68,0.07);
  box-shadow:0 0 22px rgba(201,168,68,0.12);
}
.ag-era-item::before,
.ag-era-item.active::before {
  content:'';
  position:absolute;
  left:0; top:var(--ag-track-y);
  width:100%; height:0;
  border-top:1.5px solid  rgb(255 255 255 / 28%);
  z-index:0;
}
.ag-era-item.active::before { border-top-style:solid; border-top-color:var(--gold); }
/* Column separator between adjacent eras — spans the full item height
   (from the title down), independent of which era is active, so the grid
   keeps a consistent divider between every pair of columns including the
   last one. */
.ag-era-item:not(:last-child)::after {
  content:'';
  position:absolute;
  top:0; right:0; bottom:0;
  width:1px;
  background:linear-gradient(to bottom, transparent 20%, rgba(255,255,255,0.24),transparent 80%);
  z-index:0;
}
.ag-era-dot,
.ag-era-item.active .ag-era-dot {
  display: block;
    position: absolute;
    left: 50%;
    top: calc(var(--ag-track-y) - 0px);
    z-index: 2;
    width: 5px;
    height: 5px;
    border: none;
    margin: 0;
    rotate: 45deg;
    border-radius: 0;
    background: rgb(79 76 83);
    transform: translateX(-50%);
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.ag-era-item.active .ag-era-dot {
  border-color: var(--gold);
    background: var(--gold);
    
}
.ag-era-item-title {
  min-height: 2.44em;
    font-size: 19px;
    line-height: 1.32;
    margin-bottom: 3px;
    color: var(--white);
    transition: color 0.2s;
}
.ag-era-item-text { width:100%; align-items:center; text-align:center; }
.ag-era-item-range { min-height:16px; color:var(--gold); }
.ag-era-item-teaser {
  display:block;
  margin-top:30px;
  font-size:14px;
  line-height:1.4;
  color:var(--white-dim);
  text-align:center;
}
.ag-era-item.active .ag-era-item-title,
.ag-era-item.active .ag-era-item-range,
.ag-era-item.active .ag-era-item-teaser {  }
.ag-era-list.is-stuck .ag-era-item-teaser { display:none; }
.ag-detail { max-width:1280px; margin-left:auto; margin-right:auto; }
.ag-detail-lede { max-width:820px; }

/* Mobile: a compact horizontally-scrolling chip strip rather than the
   desktop's 8-column grid — the track line + dot (tuned for aligning a
   fixed --ag-track-y across a wide grid) are dropped entirely, and a
   plain divider between chips (.ag-era-item::after, already shared with
   desktop) marks the boundaries instead. */
@media (max-width:900px) {
  /* Desktop's sticky/bleed treatment (position, background, border,
     box-shadow) is dropped entirely — this chip-strip layout scrolls away
     with the rest of the page like everything else on mobile. */
  .ag-era-list {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    position:static; z-index:auto;
    background:none;
    border-bottom-color:transparent;
    box-shadow:none;
    gap:10px;
    margin:0 0 8px;
    padding:0;
  }
  .ag-era-item,
  .ag-era-item.active {
    padding:10px 12px;
    transition:background-color 0.2s;
  }
  .ag-era-item.active { background:rgba(201,168,68,0.08); }
  .ag-era-item::before,
  .ag-era-item.active::before,
  .ag-era-dot,
  .ag-era-item.active .ag-era-dot { content:none; display:none; }
  .ag-era-item-title {
    min-height:0;
    font-size:14.5px;
    margin-bottom:2px;
  }
  .ag-era-item-range { font-size:11.5px; }
  .ag-era-item-teaser { display:none; }
}

@media (max-width:760px) {
  .ag-era-item:not(.active):not(.ag-era-item--near) { display:flex; }
}

@media (max-width:560px) {
  .ag-page { padding:24px 12px 56px; }
  .ag-panel { padding:30px 18px 40px; }
  .ag-sticky-bar { margin-left:-18px; margin-right:-18px; padding-left:18px; }
  .ag-header { margin-bottom:28px; }
  .ag-era-item,
  .ag-era-item.active { padding:9px 10px; }
  .ag-era-item-title { font-size:13.5px; }
  .ag-detail-lede, .ag-overview p { font-size:16px; }
}

.cky-btn-preferences {
    color: white!important;
    background: var(--gold)!important;
    border: 2px solid var(--gold)!important;
}

.cky-btn-reject {
    color: var(--gold)!important;
    background: #fff0 !important;
    border: 2px solid var(--gold) !important;
}

/* ═══════════════════════════════════════════
   NOBLE FAMILY PROFILE PAGE (/families, /families/{slug})
   Reuses .rulers-page (fixed overlay shell), .rp-panel, .rp-sticky-bar,
   .rp-title/.rp-subtitle, .rp-tabs/.rp-tab, .rp-avatar-row/.rp-page-arrow/
   .rp-avatars/.rp-avatar*, .ag-facts/.ag-fact, .rp-events-item,
   .modal-divider/.modal-source/.modal-mistake-btn as-is. Only genuinely new
   components get rules below.
═══════════════════════════════════════════ */

.fp-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 22px;
  font-family: var(--f-ui); font-size: 12.5px; letter-spacing: 0.3px;
  color: var(--white-dim);
}
.fp-breadcrumb a { color: var(--gold-dim); transition: color 0.2s; }
.fp-breadcrumb a:hover { color: var(--gold); }
.fp-breadcrumb-sep { opacity: 0.5; }
.fp-breadcrumb [aria-current="page"] { color: var(--white-mid); }

/* ── Family-switcher carousel (built on .rp-avatar-row/.rp-avatar) ── */
.fp-switcher { margin-bottom: 34px; }
.fp-shield-icon { padding: 14px; color: var(--gold-dim); background: rgba(201,168,68,0.06); overflow: hidden; }
.fp-shield-icon img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fp-avatar-disabled { cursor: default; position: relative; }
.fp-avatar-soon {
  display: block; margin-top: 2px;
  font-family: var(--f-ui); font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--white-dim);
}

/* ── Hero ── */
.fp-hero {
  display: flex; align-items: center; gap: 28px;
  padding: 28px 0 34px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 34px;
}
.fp-hero-crest {
  flex-shrink: 0; width: 96px; height: 112px;
  color: var(--gold);
  background: rgba(201,168,68,0.06);
  border: 1px solid rgba(201,168,68,0.3);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  overflow: hidden;
}
.fp-hero-crest-img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.fp-hero-body { min-width: 0; flex: 1; }
.fp-hero-title { margin-bottom: 6px; }
.fp-hero-subtitle { margin-bottom: 18px; color: var(--gold-dim); font-family: var(--f-ui); font-size: 13.5px; letter-spacing: 0.4px; }
.fp-hero-facts { display: flex; flex-wrap: wrap; gap: 22px 30px; }
.fp-hero-fact { display: flex; align-items: flex-start; gap: 8px; }
.fp-hero-fact-icon { color: var(--gold); margin-top: 2px; flex-shrink: 0; }
.fp-hero-fact-label { display: block; font-family: var(--f-ui); font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--white-dim); }
.fp-hero-fact-value { display: block; font-family: var(--f-body); font-size: 13.5px; color: var(--white); margin-top: 2px; }

/* ── Card grid (Overview / Origins / History tabs) ── */
.fp-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
.fp-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fp-card {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
  padding: 20px;
}
.fp-card--tall { grid-row: span 2; }
.fp-card-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.fp-card-icon { color: var(--gold); flex-shrink: 0; }
.fp-card-title {
  font-family: var(--f-heading); font-weight: 600; font-size: 15px;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--white);
}
.fp-card-body { font-family: var(--f-body); font-size: 14px; line-height: 1.6; color: var(--white-mid); }
.fp-card-body p + p { margin-top: 10px; }
.fp-card-body strong { color: var(--white); font-weight: 600; }
.fp-see-all {
  display: inline-block; margin-top: 12px;
  font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--gold); transition: color 0.2s;
}
.fp-see-all:hover { color: var(--white); }
.fp-empty { font-family: var(--f-ui); font-size: 13px; font-style: italic; color: var(--white-dim); }

.fp-plain-list { display: flex; flex-direction: column; gap: 9px; }
.fp-plain-list li { position: relative; padding-left: 14px; }
.fp-plain-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: var(--gold); }

/* ── Mini timeline (Overview tab) ── */
.fp-mini-timeline { display: flex; flex-direction: column; gap: 10px; }
.fp-mini-timeline-item { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.fp-mini-timeline-year { font-family: var(--f-ui); font-weight: 600; color: var(--gold-dim); font-size: 12.5px; }
.fp-mini-timeline-text { font-family: var(--f-body); font-size: 13px; color: var(--white-mid); }

/* ── Coat of arms card ── */
.fp-coat { display: flex; gap: 16px; align-items: flex-start; }
.fp-coat-icon { flex-shrink: 0; width: 56px; height: 64px; color: var(--gold); padding: 10px; background: rgba(201,168,68,0.06); border: 1px solid rgba(201,168,68,0.25); overflow: hidden; }
.fp-coat-icon img { width: 100%; height: 100%; object-fit: contain; }
.fp-coat-name { font-family: var(--f-heading); font-weight: 600; color: var(--gold); letter-spacing: 0.4px; margin-bottom: 6px; }

/* ── Image attribution captions (portraits, estates, coat of arms) ── */
.fp-image-credit { font-family: var(--f-ui); font-size: 10.5px; color: var(--white-dim); margin-top: 8px; line-height: 1.4; }
.fp-image-credit a { color: var(--gold-dim); transition: color 0.2s; }
.fp-image-credit a:hover { color: var(--gold); }
.fp-image-note { font-family: var(--f-ui); font-size: 10.5px; font-style: italic; color: var(--white-dim); margin-top: 4px; line-height: 1.4; }

/* ── Member chips (Overview preview) ── */
.fp-member-chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fp-member-chip { padding: 8px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.fp-member-chip-name { display: block; font-family: var(--f-body); font-size: 12.5px; color: var(--white); }
.fp-member-chip-life { display: block; font-family: var(--f-ui); font-size: 11px; color: var(--white-dim); margin-top: 2px; }

/* ── Family tree (nested list) ── */
.fp-tree, .fp-tree-children { list-style: none; }
.fp-tree { padding-left: 0; }
.fp-tree-children { padding-left: 26px; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; border-left: 1px dashed rgba(255,255,255,0.18); }
.fp-tree li { margin-bottom: 4px; }
.fp-tree-name { font-family: var(--f-body); font-weight: 600; color: var(--white); margin-right: 8px; }
.fp-tree-life { font-family: var(--f-ui); font-size: 12px; color: var(--white-dim); }
.fp-tree-note { display: block; font-family: var(--f-ui); font-size: 11px; font-style: italic; color: var(--white-dim); margin-top: 2px; }
.fp-tree-branch-note { opacity: 0.85; }
.fp-tree-hint { margin-top: 16px; font-family: var(--f-ui); font-size: 12px; font-style: italic; color: var(--white-dim); }

/* ── Members tab ── */
.fp-member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fp-member-card { padding: 18px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); text-align: center; }
.fp-member-card-avatar { width: 64px; height: 64px; margin: 0 auto 12px; color: var(--gold-dim); padding: 8px; background: rgba(201,168,68,0.06); border-radius: 50%; overflow: hidden; }
.fp-member-card-avatar--photo { padding: 0; border: 1px solid rgba(201,168,68,0.3); }
.fp-member-card-avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fp-member-card-name { font-family: var(--f-heading); font-weight: 600; font-size: 14.5px; color: var(--white); margin-bottom: 4px; }
.fp-member-card-life { font-family: var(--f-ui); font-size: 11.5px; color: var(--white-dim); margin-bottom: 8px; }
.fp-member-card-roles { font-family: var(--f-ui); font-size: 11.5px; color: var(--gold-dim); margin-bottom: 6px; }
.fp-member-card-branch { font-family: var(--f-ui); font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--white-dim); margin-bottom: 8px; }
.fp-member-card-importance { font-family: var(--f-body); font-size: 12px; color: var(--white-mid); line-height: 1.5; text-align: left; }

/* ── Estates tab ── */
.fp-estate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.fp-estate-card { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); overflow: hidden; }
.fp-estate-card:not(.fp-estate-card--photo) { padding: 18px; }
.fp-estate-card-media { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(255,255,255,0.04); }
.fp-estate-card-media img { width: 100%; height: 100%; object-fit: cover; }
.fp-estate-card--photo .fp-estate-card-body { padding: 16px 18px 18px; }
.fp-estate-card-icon { color: var(--gold); margin-bottom: 10px; padding: 18px 18px 0; }
.fp-estate-card h4 { font-family: var(--f-heading); font-weight: 600; font-size: 15px; color: var(--white); margin-bottom: 4px; }
.fp-estate-card-type { font-family: var(--f-ui); font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; }
.fp-estate-card p:not(.fp-estate-card-type):not(.fp-estate-card-branch) { font-family: var(--f-body); font-size: 13px; color: var(--white-mid); line-height: 1.5; }
.fp-estate-card-branch { font-family: var(--f-ui); font-size: 10.5px; color: var(--white-dim); margin-top: 8px; }
.fp-residences { font-family: var(--f-body); font-size: 13px; color: var(--white-mid); line-height: 1.6; }

/* ── History / Religion tabs ── */
.fp-events-list { max-height: none; }

/* ── Sources tab ── */
.fp-source-meta { font-family: var(--f-ui); font-size: 12px; color: var(--white-dim); margin-bottom: 16px; }
.fp-source-list { display: flex; flex-direction: column; gap: 1px; }
.fp-source-row {
  display: grid; grid-template-columns: 1fr 220px 120px; gap: 14px; align-items: center;
  padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fp-source-title { font-family: var(--f-body); font-size: 13.5px; color: var(--white); }
.fp-source-publisher { font-family: var(--f-ui); font-size: 12px; color: var(--white-dim); }
.fp-source-reliability { font-family: var(--f-ui); font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; text-align: right; color: var(--gold-dim); }
.fp-source-reliability--high { color: var(--gold); }

/* ── Bottom stat strip (built on .ag-facts/.ag-fact) ── */
.fp-stats { margin-top: 30px; }
.fp-stat-value { display: block; font-family: var(--f-heading); font-weight: 600; font-size: 15px; color: var(--gold); margin-bottom: 4px; }

/* ── /families index ── */
.fp-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fp-index-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 20px; text-align: center;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.02);
  transition: border-color 0.2s, background 0.2s;
}
.fp-index-card:not(.fp-index-card--disabled):hover { border-color: var(--gold); background: rgba(201,168,68,0.06); }
.fp-index-card-icon { width: 52px; height: 60px; color: var(--gold); padding: 10px; background: rgba(201,168,68,0.06); overflow: hidden; }
.fp-index-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.fp-index-card h3 { font-family: var(--f-heading); font-weight: 600; font-size: 17px; color: var(--white); }
.fp-index-card--disabled { opacity: 0.45; cursor: default; }

@media (max-width: 900px) {
  .fp-card-grid, .fp-card-grid--3 { grid-template-columns: 1fr; }
  .fp-card--tall { grid-row: auto; }
  .fp-member-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-estate-grid { grid-template-columns: 1fr; }
  .fp-index-grid { grid-template-columns: 1fr; }
  .fp-hero { flex-direction: column; align-items: flex-start; }
  .fp-source-row { grid-template-columns: 1fr; gap: 4px; }
  .fp-source-reliability { text-align: left; }
}