/* All positions use the existing, piecewise proportional era scale. */
.lore-ribbon { overflow: auto hidden; width: 100%; padding: 12px 0; background: transparent; scrollbar-color: #bd1637 transparent; scrollbar-width: thin; touch-action: pan-x pan-y; cursor: grab; }
.lore-ribbon.is-dragging { cursor: grabbing; user-select: none; }
.lore-ribbon__track { position: relative; width: 7200px; min-width: 100%; height: calc(var(--axis-y) + 178px); }
.lore-ribbon__scale { position: relative; width: calc(100% - 440px); height: 100%; margin-left: 160px; }
.lore-ribbon__axis { position: absolute; top: var(--axis-y); left: 0; right: 0; height: 2px; background: #ddd; pointer-events: none; }
.lore-ribbon__era { position: absolute; top: 0; bottom: 16px; border-left: 1px dashed #ffffff30; pointer-events: none; }
.lore-ribbon__era:last-of-type { border-right: 1px dashed #ffffff30; }
.lore-ribbon__scale::after { content: ''; position: absolute; top: 0; right: 0; bottom: 16px; border-right: 1px dashed #ffffff30; pointer-events: none; }
.lore-ribbon__era-title { position: absolute; top: 8px; left: 10px; color: #ccc; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.lore-ribbon__era-title small { display: block; margin-top: 5px; color: #999; font-size: 11px; }
.lore-ribbon__ticks { position: absolute; top: var(--axis-y); width: 100%; height: 8px; background: linear-gradient(to right, #ffffff70 1px, transparent 1px) 0 0 / calc(100% / var(--era-years)) 8px repeat-x; }
.lore-ribbon__year, .lore-ribbon__end-year { position: absolute; top: calc(var(--axis-y) + 14px); color: #aaa; font-size: 10px; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.lore-ribbon__end-year { left: 100%; }
.lore-year-group { position: absolute; top: calc(var(--axis-y) - 22px); width: 44px; height: 44px; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.lore-year-group.is-open { top: calc(var(--axis-y) - 22px - (var(--group-size) - 1) * 40px); height: calc(44px + (var(--group-size) - 1) * 40px); z-index: 20; pointer-events: auto; }
.lore-year-group.is-open::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: #ffffff70; }
.lore-year-group__count { position: absolute; right: -5px; bottom: 29px; color: #ccc; font: 10px/1.2 Roboto, Arial, sans-serif; }
.lore-year-group.is-open .lore-year-group__count { display: none; }
.lore-entry { --event-color: #e53253; position: absolute; bottom: 0; left: 0; width: 44px; height: 44px; visibility: hidden; pointer-events: none; }
.lore-entry--level-2 { --event-color: #55c4d8; }
.lore-entry--level-3 { --event-color: #d5b75c; }
.lore-entry.is-group-base, .lore-year-group.is-open .lore-entry { visibility: visible; pointer-events: auto; }
.lore-year-group.is-open .lore-entry { bottom: calc(var(--stack-index) * 40px); }
.lore-entry.is-filtered-out, .lore-year-group[hidden] { display: none; }
.lore-entry__button { position: relative; width: 44px; height: 44px; cursor: pointer; border-radius: 8px; outline-offset: -2px; }
.lore-entry__button:focus-visible { outline: 2px solid var(--event-color); }
.lore-entry__button::before { content: ''; position: absolute; top: 15px; left: 15px; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid var(--event-color); border-radius: 50%; background: #080808; box-shadow: inset 0 0 0 2px #080808, inset 0 0 0 5px var(--event-color); }
.lore-entry:is(.is-selected, .is-previewed) { z-index: 2; }
.lore-entry:is(.is-selected, .is-previewed) .lore-entry__button::before { background: var(--event-color); box-shadow: 0 0 0 3px #080808, 0 0 0 4px var(--event-color); }
.lore-entry__flag { display: none; position: absolute; left: var(--flag-left, 44px); width: var(--flag-width, 260px); bottom: 52px; padding: 10px 12px; border-left: 2px solid var(--event-color); border-radius: 0 8px 8px 0; background: #080808ed; color: #ddd; pointer-events: none; }
.lore-entry[data-side='below'] .lore-entry__flag { top: 60px; bottom: auto; }
.lore-year-group.is-open[data-stacked="true"] .lore-entry__flag { top: calc(60px + var(--stack-index) * 40px); bottom: auto; }
.lore-entry:is(.is-selected, .is-previewed) .lore-entry__flag { display: block; }
.lore-entry__meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #ffffff30; }
.lore-entry__number { color: var(--event-color); font-size: 11px; }
.lore-entry__meta time { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.25; }
.lore-entry__flag h3 { display: -webkit-box; overflow: hidden; margin: 0 0 5px; font-size: 12px; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lore-entry__flag h3 a { color: inherit; text-decoration: none; }
.lore-entry__summary { display: -webkit-box; overflow: hidden; margin: 0; color: #aaa; font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lore-entry__sources, .lore-entry__button > details { display: none; }
.lore-timeline.is-list-view .lore-ribbon__track { width: 100%; height: auto; }
.lore-timeline.is-list-view .lore-ribbon__scale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; }
.lore-timeline.is-list-view .lore-year-group { display: contents; }
.lore-timeline.is-list-view .lore-year-group[hidden] { display: none; }
.lore-timeline.is-list-view .lore-ribbon__era, .lore-timeline.is-list-view .lore-ribbon__axis, .lore-timeline.is-list-view .lore-ribbon__end-year, .lore-timeline.is-list-view .lore-ribbon__scale::after, .lore-timeline.is-list-view .lore-year-group::before, .lore-timeline.is-list-view .lore-year-group__count, .lore-timeline.is-list-view .lore-entry__button::before { display: none; }
.lore-timeline.is-list-view .lore-entry { position: static; width: auto; height: auto; visibility: visible; pointer-events: auto; }
.lore-timeline.is-list-view .lore-entry__button { width: 100%; height: 100%; padding: 16px; border: 1px solid #333; border-left: 2px solid var(--event-color); }
.lore-timeline.is-list-view .lore-entry__flag { display: block; position: static; width: auto; padding: 0; border: 0; background: none; }
.lore-timeline.is-list-view .lore-entry__flag h3, .lore-timeline.is-list-view .lore-entry__summary { display: block; }
@media (max-width: 900px) { .lore-timeline.is-list-view .lore-ribbon__scale { grid-template-columns: 1fr; } }
/* Keep the heading and verification inside the existing content column. */
.lore-timeline-page.guide-page::before {
  background-image: url('/assets/guides-tools-preview.webp');
}
.lore-timeline-page.guide-page::after { z-index: 0; }
.lore-timeline-page .gallery-main { z-index: 1; }
.lore-timeline-page .lore-hero.section-shell {
  display: block;
  min-height: 0;
  padding: 120px 0 48px;
  background: transparent;
}
.lore-timeline-page .lore-hero > .lore-hero__grid {
  display: block;
  padding: 0;
}
.lore-timeline-page .lore-hero h1 {
  max-width: 800px;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: 0;
}
.lore-timeline-page .lore-verification-card {
  top: -54px;
  right: 0;
  padding: 8px 12px;
  border-radius: 8px;
}
.lore-timeline-page .lore-verification-card strong { font-size: 13px; }
.lore-timeline-page .lore-verification-card small { display: none; }

@media (max-width: 900px) {
  .lore-timeline-page .lore-hero.section-shell { padding: 104px 0 32px; }
  .lore-timeline-page .lore-hero h1 { font-size: 36px; }
  .lore-timeline-page .lore-verification-card { position: static; margin-top: 20px; }
  .lore-timeline.is-list-view .lore-ribbon__track { grid-template-columns: 1fr; }
}

.lore-timeline-page .gallery-main { padding-top: 0; }
.lore-timeline-page .section-shell:not(.lore-hero) {
  width: min(100% - 48px, 1180px);
  max-width: min(100% - 48px, 1180px);
  margin-inline: auto;
}
.lore-timeline-page .lore-view-toggle { display: flex; }

@media (max-width: 900px) {
  .lore-timeline-page .section-shell:not(.lore-hero) {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }
  .lore-timeline-page .lore-hero.section-shell { width: 100%; max-width: none; }
}
.lore-timeline-page .lore-detail-panel__nav {
  position: absolute;
  top: 16px;
  right: 16px;
}
.lore-timeline-page .lore-detail-panel__inner { padding-top: 64px; }
/* Centered introduction and compact timeline controls. */
.lore-timeline-page .lore-hero__grid > div:first-child { text-align: center; }
.lore-timeline-page .lore-hero h1,
.lore-timeline-page .lore-hero__lead { margin-inline: auto; }
.lore-timeline-page .lore-hero__actions { justify-content: center; }

.lore-timeline-page .lore-controls {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) minmax(96px, 0.5fr);
  gap: 16px;
  align-items: end;
  padding: 20px 0;
  border: 0;
  border-top: 1px solid #ffffff24;
  border-bottom: 1px solid #ffffff24;
  border-radius: 0;
  background: transparent;
}
.lore-timeline-page .lore-control-group { min-width: 0; grid-column: auto; }
.lore-timeline-page .lore-control-group > label {
  display: block;
  margin-bottom: 8px;
  font: 500 12px/1.3 Roboto, Arial, sans-serif;
  color: #ccc;
}
.lore-timeline-page .lore-controls input[type='search'],
.lore-timeline-page .lore-controls input[type='number'] {
  width: 100%;
  height: 44px;
  min-height: 44px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #ffffff30;
  border-radius: 8px;
  background: #00000080;
  font: 400 14px/1.4 Roboto, Arial, sans-serif;
}
.lore-timeline-page .lore-control-go,
.lore-timeline-page .lore-control-actions button {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid #ffffff30;
  border-radius: 8px;
  background: #ffffff08;
  color: #eee;
  font: 500 13px/1.3 Roboto, Arial, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.lore-timeline-page .lore-control-go { width: 100%; height: 44px; }
.lore-timeline-page .lore-control-go:hover,
.lore-timeline-page .lore-control-actions button:hover { border-color: #cf0025; background: #cf002520; }
.lore-timeline-page .lore-controls :is(button, input):focus-visible,
.lore-timeline-page .lore-era-nav button:focus-visible { outline: 2px solid #e53253; outline-offset: 3px; }
.lore-timeline-page .lore-filter-cloud {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.lore-timeline-page .lore-filter-cloud legend { margin-bottom: 8px; color: #999; font-size: 11px; }
.lore-timeline-page .lore-filter-cloud label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ccc;
  font: 400 13px/1.4 Roboto, Arial, sans-serif;
  cursor: pointer;
}
.lore-timeline-page .lore-filter-cloud input { accent-color: #cf0025; }
.lore-timeline-page .lore-control-actions { grid-column: 1 / -1; justify-content: flex-end; gap: 10px; }

.lore-timeline-page .lore-era-nav {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-block: 20px 12px;
}
.lore-timeline-page .lore-era-nav button {
  min-width: 0;
  min-height: 64px;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid #ffffff24;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #bbb;
  font: 500 12px/1.35 Roboto, Arial, sans-serif;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
.lore-timeline-page .lore-era-nav button span { display: block; min-height: 33px; }
.lore-timeline-page .lore-era-nav button small { display: block; margin-top: 4px; color: #888; font: 400 11px/1.3 Roboto, Arial, sans-serif; }
.lore-timeline-page .lore-era-nav button:hover { color: #fff; background: #ffffff05; border-bottom-color: #cf0025; }

@media (max-width: 900px) {
  .lore-timeline-page .lore-era-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .lore-timeline-page .lore-era-nav button { flex: 0 0 140px; }
}
@media (max-width: 560px) {
  .lore-timeline-page .lore-controls { grid-template-columns: minmax(0, 1fr) 96px; gap: 14px 12px; }
  .lore-timeline-page .lore-control-group--wide { grid-column: 1 / -1; }
  .lore-timeline-page .lore-filter-cloud { gap: 4px 16px; }
  .lore-timeline-page .lore-filter-cloud label { min-height: 44px; }
}
.lore-timeline-page .lore-view-toggle {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  width: fit-content;
  padding: 2px;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  background: #00000040;
}
.lore-timeline-page .lore-view-toggle button {
  min-width: 64px;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #aaa;
  font: 500 12px/1.3 Roboto, Arial, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.lore-timeline-page .lore-view-toggle button.is-active {
  border-color: #cf002550;
  background: #cf002520;
  color: #fff;
}
.lore-timeline-page .lore-view-toggle button:hover { color: #fff; }
.lore-timeline-page .lore-view-toggle button:focus-visible { outline: 2px solid #e53253; outline-offset: 2px; }
.lore-timeline-page .lore-view-toggle + .lore-era-nav { margin-top: 8px; }
@media (pointer: coarse) {
  .lore-timeline-page .lore-view-toggle button { min-height: 40px; }
}