/* Continuous history with a photographic backdrop; all event copy remains readable. */
.home-page .home-history {
  position: relative;
  background: linear-gradient(90deg, rgba(5,26,23,.87), rgba(5,26,23,.67)), url("/assets/img/hero-karst.jpg") center 55% / cover no-repeat;
  color: var(--ink);
}
.home-history .home-eyebrow, .home-history .home-more { color: var(--gold-bright); }
.home-history .home-section-intro { color: #c4d0c9; max-width: 48em; }
[data-history] { min-width: 0; margin-top: 42px; }
.history-explorer { color: #e7eee9; }
body:not(.home-page) .history-explorer {
  background: linear-gradient(90deg, rgba(5,26,23,.88), rgba(5,26,23,.7)), url("/assets/img/hero-karst.jpg") center / cover;
  padding: 32px;
}
.history-intro-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.history-intro-line > span { font-family: var(--font-mono); font-size: 13px; color: var(--gold-bright); letter-spacing: .1em; }
.history-intro-line p { color: #c4d0c9; font-size: 12px; }
.history-track {
  --card-width: 40%;
  --card-body-height: auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-width); align-items: stretch;
  gap: 28px; list-style: none; margin: 0; padding: 6px 4px 24px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-padding-inline: 4px; scrollbar-width: thin; scrollbar-color: #bf9c45 rgba(231,238,233,.14);
  cursor: grab; touch-action: pan-x pan-y;
}
.history-track:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; }
.history-track.is-dragging,
.history-track.is-dragging * { user-select: none; cursor: grabbing !important; }
.history-track.is-dragging .history-card-body { pointer-events: none; }
.history-card { min-width: 0; display: flex; flex-direction: column; height: 100%; cursor: grab; }
.history-card-date { padding: 0 26px 20px; }
.history-card-date time { font-family: var(--font-display); font-size: clamp(58px, 6vw, 86px); line-height: 1; letter-spacing: -.035em; }
.history-card-node { position: relative; height: 30px; margin-right: -28px; border-top: 1px solid rgba(231,238,233,.35); }
.history-card-node i { position: absolute; left: 26px; top: -6px; width: 11px; height: 11px; background: var(--gold-bright); border-radius: 50%; box-shadow: 0 0 0 5px rgba(228,196,90,.12); }
.history-card:last-child .history-card-node { margin-right: 0; }
.history-card-body {
  display: flex; flex-direction: column; flex: 1;
  height: var(--card-body-height); max-height: var(--card-body-height);
  padding: 30px 28px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(9,39,33,.91); border: 1px solid rgba(231,238,233,.2); border-top: 2px solid #a98c40;
  scrollbar-width: thin; scrollbar-color: #bf9c45 rgba(231,238,233,.14);
  cursor: grab;
}
.history-card-body h3 { color: #edf1e9; font-family: var(--font-serif); font-size: clamp(23px, 2.2vw, 30px); font-weight: 500; line-height: 1.65; margin: 0 0 24px; flex-shrink: 0; }
.history-card-body ul { padding: 0; margin: 0; list-style: none; }
.history-card-body li { position: relative; padding-left: 17px; color: #c6d3cc; font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; }
.history-card-body li + li { margin-top: 17px; }
.history-card-body li::before { content: ''; position: absolute; left: 0; top: .85em; width: 4px; height: 4px; background: var(--gold-bright); }
.history-scroll-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.history-scroll-controls > span { font-family: var(--font-mono); color: #cad4ce; font-size: 12px; }
.history-scroll-controls > div { display: flex; gap: 12px; }
.history-scroll-controls button { width: 48px; height: 48px; border: 1px solid rgba(231,238,233,.4); background: rgba(9,39,33,.8); font-size: 22px; color: #edf1e9; cursor: pointer; }
.history-scroll-controls button:hover:not(:disabled) { border-color: var(--gold-bright); color: var(--gold-bright); }
.history-scroll-controls button:disabled { opacity: .35; cursor: default; }
.history-empty { padding: 28px; border: 1px solid var(--border); }
@media (min-width: 1700px) { .history-track { --card-width: 40%; } }
@media (max-width: 1024px) {
  .history-track { --card-width: 65%; gap: 22px; }
  .history-card-node { margin-right: -22px; }
  .history-card-date time { font-size: 64px; }
}
@media (max-width: 767px) {
  [data-history] { margin-top: 30px; }
  .history-intro-line { align-items: flex-start; flex-direction: column; gap: 10px; }
  .history-intro-line p { font-size: 11px; }
  .history-track { --card-width: 92%; gap: 16px; }
  .history-card-date { padding: 0 18px 20px; }
  .history-card-date time { font-size: 60px; }
  .history-card-node { margin-right: -16px; }
  .history-card-node i { left: 18px; }
  .history-card-body { padding: 24px 20px; }
  .history-card-body h3 { font-size: 23px; margin-bottom: 20px; }
  .history-card-body li { font-size: 14px; line-height: 1.95; }
  body:not(.home-page) .history-explorer { padding: 20px 16px; }
  .history-scroll-controls { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .history-track { scroll-behavior: auto; } }