/* ============================================================
   History of the World — an interactive timeline of history
   Editorial / archival visual identity: warm parchment ground,
   serif display type, thin lines, restrained ochre/brass accent.
   ============================================================ */

/* Self-hosted Spectral + Inter (latin & latin-ext subsets only) — downloaded from
   Google Fonts once and served locally, so no visitor request ever reaches Google's
   servers. See src/fonts/ for the .woff2 files themselves. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/spectral-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/spectral-500-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/spectral-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/spectral-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/spectral-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/spectral-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/spectral-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/spectral-500-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/spectral-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/spectral-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/spectral-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/spectral-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-bg: #f5efe1;
  --color-bg-alt: #ece3cf;
  --color-surface: #fffcf5;
  --color-ink: #241f19;
  --color-ink-soft: #5c5344;
  --color-ink-faint: #8a8070;
  --color-line: #d9cdae;
  --color-line-strong: #c2b48d;
  --color-accent: #a3702f;
  --color-accent-soft: #c9a86a;
  --shadow-panel: 0 18px 50px rgba(40, 30, 10, 0.22);
  --shadow-soft: 0 2px 10px rgba(40, 30, 10, 0.08);

  --font-serif: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --header-height: 108px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14161c;
    --color-bg-alt: #1b1e26;
    --color-surface: #1e222b;
    --color-ink: #ece6d6;
    --color-ink-soft: #b3ac9a;
    --color-ink-faint: #7c7666;
    --color-line: #363a44;
    --color-line-strong: #454a56;
    --color-accent: #d4ac6a;
    --color-accent-soft: #d4ac6a;
    --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.55);
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto; /* JS drives smooth scrolling explicitly, respecting reduced-motion */
}

body {
  margin: 0;
  /* .site-header is position:fixed (not sticky — see its own rule for why), so it no
     longer occupies space in normal document flow; this reserves that space back. */
  padding-top: var(--header-height);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

.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;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 0.6rem 1rem;
  z-index: 200;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.icon {
  display: block;
  flex-shrink: 0;
}

/* ---------------- Header ---------------- */

.site-header {
  /* Fixed, not sticky: the canvas can grow wider than the viewport once several
     columns are active, which makes the whole page scroll horizontally as well as
     vertically. A sticky element only re-pins itself along the axis it's scrolled
     on if that axis is the one its containing block actually scrolls within end to
     end — here that broke down for horizontal scroll, letting the header drift left
     with the page and expose raw timeline content down its right-hand edge. Fixed
     positioning pins it to the viewport on every axis regardless, full stop. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  /* Fully opaque — a translucent, blurred header still let busy timeline colors show
     through faintly and looked messy, especially with several columns active. */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

.site-header__row--brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 1rem;
}

.icon-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 2.25rem;
  min-height: 2.25rem;
}
.icon-btn:hover {
  background: var(--color-bg-alt);
}

.menu-toggle {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-accent-soft);
}
.brand__mark .icon {
  width: 22px;
  height: 22px;
}
.brand__name {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.brand__tagline {
  display: block;
  font-size: 0.68rem;
  color: var(--color-ink-soft);
  letter-spacing: 0.01em;
}

.now-indicator {
  margin-left: auto;
  text-align: right;
  padding-right: 0.4rem;
  min-width: 0;
}
.now-indicator__era {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.now-indicator__date {
  display: block;
  font-size: 0.7rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-link {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-link:hover,
.header-link:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
}

.search {
  position: relative;
}
.search__form {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: min(400px, 88vw);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: var(--shadow-panel);
  padding: 0.7rem;
  z-index: 55;
}
#searchInput {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  background: var(--color-bg);
  color: var(--color-ink);
}
#searchInput:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.search__results {
  margin-top: 0.5rem;
  max-height: min(50vh, 380px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.search__results[hidden] {
  display: none;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.5rem;
  border: none;
  background: none;
  text-align: left;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}
.search-result:hover,
.search-result:focus-visible {
  background: var(--color-bg-alt);
}
.search-result__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.search-result__title {
  display: block;
  font-size: 0.85rem;
}
.search-result__subtitle {
  display: block;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
}

/* ---------------- Control panel (categories + jump nav) ---------------- */

.control-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  padding: 0.6rem 1rem 0.85rem;
  border-top: 1px solid var(--color-line);
}
.control-panel__section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.control-panel__label {
  margin: 0;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--color-ink-faint);
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.categories[hidden] {
  display: none;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border-radius: 5px;
  padding: 0.38rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cat-chip .icon {
  color: var(--cat-color);
}
.cat-chip:hover {
  border-color: var(--cat-color);
}
.cat-chip--on {
  background: color-mix(in srgb, var(--cat-color) 16%, var(--color-surface));
  border-color: var(--cat-color);
  color: var(--color-ink);
}
.cat-chip--more {
  --cat-color: var(--color-ink-faint);
  border-style: dashed;
  color: var(--color-ink-faint);
}
.cat-chip--more:hover {
  border-color: var(--color-ink-soft);
  color: var(--color-ink);
}
.categories--more {
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-line);
}

.your-choice-search {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 320px;
}
#yourChoiceInput {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-line);
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  background: var(--color-bg);
  color: var(--color-ink);
}
#yourChoiceInput:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.your-choice-search__hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-ink-faint);
  line-height: 1.35;
}

.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.jump-btn {
  border: 1px solid var(--color-line);
  background: transparent;
  border-radius: 5px;
  padding: 0.32rem 0.65rem;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.jump-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

@media (max-width: 560px) {
  .brand__tagline {
    display: none;
  }
  .now-indicator {
    max-width: 34vw;
  }
  .now-indicator__era {
    font-size: 0.82rem;
  }
  .now-indicator__date {
    font-size: 0.64rem;
  }
  .site-header__row--brand {
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
  }
}

@media (max-width: 899px) {
  .menu-toggle {
    display: inline-flex;
  }
  .control-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
    z-index: 39;
  }
  .control-panel--open {
    display: flex;
  }
}

/* ---------------- Intro ---------------- */

.intro {
  max-width: 620px;
  margin: 2.75rem auto 2rem;
  padding: 0 1.25rem;
}
.intro h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.65rem, 4vw, 2.4rem);
  line-height: 1.18;
  margin: 0 0 0.85rem;
}
.intro p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-ink-soft);
  margin: 0 0 1.35rem;
}
/* The category toggles live in the sticky header, so they're genuinely "above" the
   page content on desktop — but on narrow screens they're tucked behind the menu
   button instead, so the copy needs to say something different there. */
.intro__hint--mobile {
  display: none;
}
@media (max-width: 899px) {
  .intro__hint--desktop {
    display: none;
  }
  .intro__hint--mobile {
    display: inline;
  }
}
.btn {
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.65rem 1.15rem;
  border-radius: 5px;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-bg);
  cursor: pointer;
}
.btn:hover {
  opacity: 0.86;
}

/* ---------------- Timeline stage ---------------- */

.stage {
  position: relative;
  padding-bottom: 6rem;
}

.canvas {
  position: relative;
}

/* Era rail: a minimal always-on ruler of tick marks + boundary years */
.era-rail {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.rail-tick {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
}
.rail-tick__line {
  width: 8px;
  height: 1px;
  background: var(--color-line-strong);
  flex-shrink: 0;
}
.rail-tick__label {
  margin-left: 5px;
  font-size: 0.6rem;
  color: var(--color-ink-faint);
  white-space: nowrap;
}
.rail-tick--major .rail-tick__line {
  width: 14px;
  height: 1.5px;
  background: var(--color-accent);
}
.rail-tick--major .rail-tick__label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-ink);
}

/* Era bands: full-width background wash */
.era-band {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-top: 1px solid transparent;
}
.era-band--visible {
  background: color-mix(in srgb, var(--era-color) 13%, var(--color-bg));
  border-top: 1px solid color-mix(in srgb, var(--era-color) 55%, transparent);
  cursor: pointer;
}
.era-band--visible:hover,
.era-band--visible:focus-visible {
  background: color-mix(in srgb, var(--era-color) 20%, var(--color-bg));
}
.era-band__label {
  position: absolute;
  top: 0.7rem;
  left: 0.85rem;
  /* Stay confined to the rail column so a duration bar starting right at an era's
     top edge can never sit behind — let alone obscure — the era's own name. */
  max-width: calc(var(--rail-w, 150px) - 1.5rem);
  pointer-events: none;
}
.era-band__name {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-ink);
}
.era-band__dates {
  display: block;
  font-size: 0.68rem;
  color: var(--color-ink-soft);
  margin-top: 0.1rem;
}

/* Duration-bar lanes: Empires, U.S. Presidents, British Monarchs, … */
.range-lane {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 2;
}
.range-bar {
  position: absolute;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--cat-color) 70%, transparent);
  border-left: 4px solid var(--cat-color);
  background: color-mix(in srgb, var(--cat-color) 30%, var(--color-surface));
  padding: 4px 6px;
  /* Deliberately NOT clipped: the label below is a floating, sticky chip that's
     allowed to spill past a narrow bar's own edges so its (always-horizontal) text
     stays fully readable even during the most crowded, many-lane stretches. */
  overflow: visible;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-soft);
}
.range-bar:hover,
.range-bar:focus-visible {
  background: color-mix(in srgb, var(--cat-color) 48%, var(--color-surface));
  z-index: 5;
}
/* Sticky within the bar's own box (its nearest positioned ancestor): as the page
   scrolls, the label pins at `top` for as long as the bar itself still spans that
   point on screen, then scrolls away normally once the bar's bottom edge passes it —
   so a bar taller than the viewport (a long empire, a long reign) never loses its
   name partway through. render.js gives concurrent lanes distinct sticky offsets so
   overlapping bars' labels don't collide. */
.range-bar__label {
  position: sticky;
  z-index: 4;
  display: inline-block;
  max-width: none;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
  background: color-mix(in srgb, var(--cat-color) 55%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--cat-color) 85%, transparent);
  border-radius: 3px;
  padding: 1px 6px;
  box-shadow: var(--shadow-soft);
}

/* Point-event tracks */
.track {
  position: absolute;
  top: 0;
  z-index: 3;
}
.track__empty-hint {
  position: absolute;
  top: 8px;
  left: 0;
  right: 8px;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--color-ink-faint);
  line-height: 1.35;
}
.event-connector {
  position: absolute;
  left: 8px;
  width: 1px;
  background: var(--color-line-strong);
}
.event-row {
  position: absolute;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
}
.event-row__dot {
  width: 9px;
  height: 9px;
  min-width: 9px;
  border-radius: 50%;
  background: var(--cat-color);
  box-shadow: 0 0 0 3px var(--color-bg);
  margin-top: 4px;
}
.event-row__label {
  font-size: 0.78rem;
  line-height: 1.25;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  transition: background 0.15s;
  min-width: 0;
  flex: 1 1 auto;
  /* Wrap onto multiple lines by default — a label is only ever cut off with an
     ellipsis when render.js determines a neighboring event below would otherwise be
     crowded, via the --clamp-lines custom property (1 = old single-line behavior). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp-lines, 2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
/* On hover/focus, let a clamped label unfold to its full text over neighboring rows. */
.event-row:hover,
.event-row:focus-within {
  z-index: 4;
}
.event-row:hover .event-row__label,
.event-row:focus-visible .event-row__label {
  background: color-mix(in srgb, var(--cat-color) 22%, transparent);
  -webkit-line-clamp: unset;
  overflow: visible;
  box-shadow: var(--shadow-panel);
}
.event-row--legend .event-row__label {
  font-style: italic;
  color: var(--color-ink-soft);
}
.event-row__badge {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-style: normal;
  font-weight: 700;
  color: var(--cat-color);
}

/* Sticky column headers */
.track-headers {
  position: sticky;
  top: var(--header-height);
  height: 34px;
  z-index: 6;
  pointer-events: none;
}
.track-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.7rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cat-color);
  /* Fully opaque, same reasoning as .site-header — a translucent column header let
     the track's own dots/bars show through underneath it while scrolling. */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.track-header:active {
  cursor: grabbing;
}
.track-header--dragging {
  opacity: 0.35;
}

/* Column drag-to-reorder: a floating copy of the header follows the pointer, and a
   vertical guide shows where the column will land. Both are position:fixed so they
   stay put regardless of page scroll while a drag is in progress. */
.column-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cat-color);
  background: var(--color-surface);
  border: 1px solid var(--cat-color);
  border-radius: 5px;
  box-shadow: var(--shadow-panel);
  pointer-events: none;
}
.column-drop-indicator {
  position: fixed;
  width: 3px;
  background: var(--color-accent);
  z-index: 79;
  pointer-events: none;
  border-radius: 2px;
}

/* ---------------- Minimap ---------------- */

.minimap {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: min(46vh, 360px);
  border: 1px solid var(--color-line-strong);
  border-radius: 6px;
  background: var(--color-surface);
  padding: 0;
  cursor: pointer;
  z-index: 30;
  overflow: hidden;
}
.minimap__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.minimap__viewport {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 6%;
  min-height: 10px;
  border: 2px solid var(--color-ink);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-ink) 15%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 899px) {
  .minimap {
    display: none;
  }
}

/* ---------------- Return toast ---------------- */

.return-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 45;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  border-radius: 6px;
  box-shadow: var(--shadow-panel);
  align-items: center;
  gap: 0.9rem;
  font-size: 0.82rem;
  max-width: 92vw;
}
.return-toast[hidden] {
  display: none;
}
.return-toast:not([hidden]) {
  display: flex;
}
.link-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--color-bg) 40%, transparent);
  color: var(--color-bg);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.link-btn:hover {
  background: color-mix(in srgb, var(--color-bg) 15%, transparent);
}

/* ---------------- Event panel ---------------- */

.panel-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, black 45%, transparent);
  z-index: 60;
}

.event-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 100vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  z-index: 61;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.24s ease;
  padding: 3rem 1.6rem 2.5rem;
}
.event-panel--open {
  transform: translateX(0);
}
.panel-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
}

.panel-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--cat-color);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.7rem;
}
.legend-badge {
  margin-left: 0.4rem;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--cat-color) 20%, transparent);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.panel-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 0.4rem;
}
.panel-date {
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  margin: 0 0 1.4rem;
}
.panel-figure {
  margin: 0 0 1.4rem;
}
.panel-figure img {
  display: block;
  width: 100%;
  max-height: 320px;
  /* No cropping at all, not even top-anchored: this box is roughly landscape-shaped
     (~1.5:1), but these portraits range up to ~1.8:1 the other way (tall and
     narrow), with the face positioned differently in every source photo. Any fixed
     crop position was guaranteed to cut off someone's head or chin depending on the
     image — object-fit:contain is the only option that guarantees the *whole*
     photo, face included, is always visible. It letterboxes narrow portraits
     against --color-bg-alt instead of full-bleeding them, which is a fair trade for
     "never crops a face" — see the "faces cut off" fix history in git log for why
     this replaced an earlier object-position:top attempt that wasn't enough. */
  object-fit: contain;
  border-radius: 5px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
}
.panel-figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
  font-style: italic;
}
.panel-figure__credit {
  font-style: normal;
  color: var(--color-ink-faint);
}
.panel-field {
  margin-bottom: 1.2rem;
}
.panel-field h3 {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ink-faint);
  margin: 0 0 0.35rem;
}
.panel-field p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
}
.panel-quote {
  margin: 0 0 0.7rem;
  padding: 0.6rem 0 0.6rem 0.9rem;
  border-left: 3px solid var(--cat-color);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-ink);
}
.panel-quote:last-child {
  margin-bottom: 0;
}
.panel-quote footer {
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--color-ink-faint);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip-link {
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  border-radius: 4px;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.chip-link:hover {
  border-color: var(--color-accent);
}
.panel-meta {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
}
.panel-meta__row {
  display: flex;
  gap: 0.6rem;
  font-size: 0.78rem;
  margin-bottom: 0.35rem;
  color: var(--color-ink-soft);
}
.panel-meta__k {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--color-ink-faint);
  min-width: 5.5rem;
}

@media (max-width: 640px) {
  .event-panel {
    width: 100%;
    top: auto;
    bottom: 0;
    height: min(85vh, 640px);
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
  }
  .event-panel--open {
    transform: translateY(0);
  }
}

/* ---------------- Site footer (links to About / Privacy Policy) ---------------- */

.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--color-line);
  padding: 1.1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--color-ink-faint);
  background: var(--color-bg);
}
.site-footer a {
  color: var(--color-ink-soft);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
}

/* ---------------- Simple content pages (About, Privacy Policy) ---------------- */
/* Deliberately plain static HTML, no JS — see about.html / privacy.html. */

.content-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.content-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--color-line);
}
.content-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--color-ink);
}
.content-header__brand .icon {
  color: var(--color-accent);
}
.content-header__brand-text {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
}
.content-main {
  flex: 1;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 2.6rem 1.5rem 4rem;
}
.content-main h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin: 0 0 0.4rem;
  color: var(--color-ink);
}
.content-main .content-meta {
  color: var(--color-ink-faint);
  font-size: 0.82rem;
  margin: 0 0 2.2rem;
}
.content-main h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 2.1rem 0 0.7rem;
  color: var(--color-ink);
}
.content-main p {
  color: var(--color-ink-soft);
  line-height: 1.65;
  margin: 0 0 1rem;
}
.content-main ul,
.content-main ol {
  color: var(--color-ink-soft);
  line-height: 1.65;
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}
.content-main li {
  margin-bottom: 0.4rem;
}
.content-main strong {
  color: var(--color-ink);
}
.content-main a {
  color: var(--color-accent);
}
.content-main a:hover,
.content-main a:focus-visible {
  color: var(--color-ink);
}
.content-callout {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
  box-shadow: var(--shadow-soft);
}
.content-callout p:last-child {
  margin-bottom: 0;
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}