/* HISTORY — The chronology: the long timeline, its open indexes, the era strip and the history read as one narrative.

   One of ten stylesheets split out of a single 10,361-line tree.css.
   THE ORDER MATTERS AND IS NOT ALPHABETICAL. The layout links them as
   base → tree → correspondences → reference → tarot → chrome → astrology → history → sections → editing,
   and the rules inside this file keep the order they had in the original,
   so the cascade resolves exactly as it did before the split. */

/* --- the long chronology ------------------------------------------------- */

.history,
.history-detail {
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}
.history__header { max-width: 62rem; }
.history__measure {
  margin: 1rem 0 0;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.history-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 42rem;
  margin: 1.15rem 0 0;
  padding: 1px;
  background: var(--rule);
}
.history-stats > div { padding: 0.6rem 0.7rem; background: var(--ground-lift); }
.history-stats dt {
  color: var(--ink-faint);
  font-size: var(--type-label);
  line-height: 1.35;
}
.history-stats dd {
  order: -1;
  margin: 0 0 0.12rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.history-coverage { max-width: 42rem; border: 1px solid var(--rule); border-top: 0; }
.history-coverage > summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--type-label);
  list-style: none;
}
.history-coverage > summary::-webkit-details-marker { display: none; }
.history-coverage > summary span:last-child { color: var(--ink-faint); }
.history-coverage > dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px 0 0;
  background: var(--rule);
}
.history-coverage > dl > div { padding: 0.55rem 0.7rem; background: var(--ground); }
.history-coverage dt { color: var(--ink-muted); font-size: var(--type-label); line-height: 1.4; }
.history-coverage dd { margin: 0.2rem 0 0; font-variant-numeric: tabular-nums; }
.history__section { margin: 3.5rem 0 0; }
.history__section--major { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.history__section-head {
  display: grid;
  gap: 0.7rem 2rem;
  align-items: end;
  margin: 0 0 1.2rem;
}
@media (min-width: 800px) {
  .history__section-head { grid-template-columns: minmax(18rem, 0.8fr) minmax(20rem, 1.2fr); }
}
.history__section-head p:last-child {
  margin: 0;
  max-width: 64ch;
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--ink-muted);
}
.history__heading { margin: 0.2rem 0 0; font-size: 1.45rem; }

.history-chart {
  position: relative;
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
}
.history-chart__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1.15rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.history-chart__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.2rem;
  color: var(--ink);
  cursor: pointer;
}
.history-chart__toggle input { accent-color: #9ca9d1; }
.history-chart__toggle span span { color: var(--ink-faint); }
.history-chart__live {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
}
.history-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: var(--type-label);
  line-height: 1.35;
}
.history-chart__legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.history-chart__legend i { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.history-chart__legend-event {
  border-radius: 0 !important;
  background: var(--history-event);
  transform: rotate(45deg);
}
.history-chart__legend-biblical {
  border-radius: 1px !important;
  background: var(--history-biblical);
}
.history-chart__legend-islamic { background: var(--history-islamic); }
.history-chart__legend-egyptian { background: var(--history-egyptian); }
.history-chart__zoom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.history-chart__zoom button {
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 0.25rem;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.history-chart__zoom button:disabled { color: var(--ink-faint); cursor: default; }
.history-chart__pan-hint {
  flex: 1 1 14rem;
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
  line-height: 1.35;
}
.history-chart__zoom-value {
  min-width: 3.2rem;
  color: var(--ink-muted);
  font-size: var(--type-label);
  text-align: right;
}
.history-chart__scroll {
  overflow-x: auto;
  padding: 1rem;
  scrollbar-gutter: stable;
}
/* useDragToScroll sets both. A link inside keeps its own pointer cursor. */
.history-chart__scroll[data-pannable="true"] { cursor: grab; }
.history-chart__scroll[data-dragging="true"],
.history-chart__scroll[data-dragging="true"] a { cursor: grabbing; user-select: none; }
.history-chart__scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
/* min-width is set inline from the zoom — see TimelineSvg. It is what makes a
   narrow viewport scroll the chart instead of shrinking it to illegibility. */
.history-chart__svg { display: block; width: 100%; max-width: none; height: auto; }
.history-chart__grid { stroke: var(--rule); stroke-width: 1; }
.history-chart__row-rule { stroke: var(--rule); stroke-width: 0.6; }
.history-chart__period-band { stroke-width: 24; opacity: 0.075; }
.history-chart__period-dot { stroke: none; }
.history-chart__tick-label {
  fill: var(--ink-faint);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.history-chart__name { fill: var(--ink); font-size: 15px; font-weight: 600; }
.history-chart__name--supporting { fill: var(--ink-muted); font-weight: 500; }
.history-chart__dates { fill: var(--ink-faint); font-size: 12px; }
/* The names hold the left edge while the chart scrolls under them. SVG text
   cannot be position: sticky, so TimelineSvg translates this group by the
   scroll offset and the backdrop hides whatever slides beneath it. */
/* The name column holds the left edge while the chart scrolls under it. SVG
   text cannot be position: sticky, so TimelineSvg writes the scroll offset to
   --history-label-shift and the whole group translates by it. A CSS transform
   on an SVG element is in user units, which is what the offset is converted to.
   The backdrop and its edge only appear once something is sliding underneath. */
.history-chart__labels { transform: translateX(var(--history-label-shift, 0px)); }
.history-chart__label-backdrop { fill: var(--ground-lift); }
.history-chart__label-edge { stroke: var(--rule); stroke-width: 1; }
/* The held column has to carry its row's own banding, or scrolling right would
   show a stripe breaking where the names begin. */
.history-chart__row-band { fill: var(--history-band); }
[data-banded="true"] .history-chart__label-backdrop { fill: var(--history-band); }

/* The years hold the top of the window while the page scrolls down past them —
   an eighty-row chronology is several screens tall and the axis was gone by
   the third row. TimelineSvg writes the offset to --history-axis-shift; the
   grid lines do NOT move, because they are the scale rather than its labels. */
.history-chart__axis { transform: translateY(var(--history-axis-shift, 0px)); }
.history-chart__axis-backdrop { fill: var(--ground-lift); }
.history-chart__axis-edge { stroke: var(--rule); stroke-width: 1; }
.history-chart__svg:not([data-axis-floating="true"]) .history-chart__axis-edge { display: none; }
.history-chart__svg:not([data-pinned="true"]) .history-chart__label-backdrop,
.history-chart__svg:not([data-pinned="true"]) .history-chart__label-edge { display: none; }
.history-chart__life { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.history-chart__life--approximate { stroke-dasharray: 6 4; }
.history-chart__endpoint,
.history-chart__point { fill: var(--ground); stroke: var(--ink); stroke-width: 2; }
.history-chart__point--floruit { fill: var(--ink); }
.history-chart__group-label {
  fill: var(--ink-faint);
  font-size: 9px;
  letter-spacing: 0.13em;
}
.history-chart__group-rule { stroke: var(--ink-faint); stroke-width: 1; }
.history-chart__event-name { fill: var(--history-event); font-weight: 600; }
.history-chart__event-point { fill: var(--history-event); stroke: var(--ground-lift); stroke-width: 1; }
.history-chart__event-span { stroke: var(--history-event); stroke-width: 3; stroke-linecap: round; }
.history-chart__biblical-name { fill: var(--history-biblical); }
.history-chart__islamic-name { fill: var(--history-islamic); }
.history-chart__egyptian-name { fill: var(--history-egyptian); }
.history-chart__cultural-name { font-weight: 600; }
.history-chart__cultural-point,
.history-chart__cultural-endpoint {
  stroke: var(--ground-lift);
  stroke-width: 1;
}
.history-chart__biblical-point { fill: var(--history-biblical); }
.history-chart__islamic-point { fill: var(--history-islamic); }
.history-chart__egyptian-point { fill: var(--history-egyptian); }
.history-chart__cultural-point--schematic {
  fill: var(--ground-lift);
  stroke-width: 2;
  stroke-dasharray: 2 1;
}
.history-chart__cultural-point--schematic.history-chart__biblical-point { stroke: var(--history-biblical); }
.history-chart__cultural-point--schematic.history-chart__islamic-point { stroke: var(--history-islamic); }
.history-chart__cultural-point--schematic.history-chart__egyptian-point { stroke: var(--history-egyptian); }
.history-chart__cultural-span {
  stroke-width: 3;
  stroke-linecap: round;
}
.history-chart__biblical-span { stroke: var(--history-biblical); }
.history-chart__islamic-span { stroke: var(--history-islamic); }
.history-chart__egyptian-span { stroke: var(--history-egyptian); }
.history-chart__cultural-span--scripture { stroke-dasharray: 7 3; }
.history-chart__empty { fill: var(--ink-faint); font-size: 12px; }
.history-chart__item-link { cursor: pointer; }
.history-chart a:hover .history-chart__name,
.history-chart a:focus .history-chart__name { text-decoration: underline; }
.history-chart a:focus { outline: none; }
.history-chart__tooltip {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  width: min(21rem, calc(100% - 1rem));
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--ink);
  box-shadow: 0 0.45rem 1.2rem var(--shadow-soft);
  pointer-events: none;
  font-size: 0.82rem;
  line-height: 1.42;
}
.history-chart__tooltip--event { border-top-color: #e2b76b; }
.history-chart__tooltip--biblical { border-top-color: var(--history-biblical); }
.history-chart__tooltip--islamic { border-top-color: var(--history-islamic); }
.history-chart__tooltip--egyptian { border-top-color: var(--history-egyptian); }
.history-chart__tooltip p { margin: 0.35rem 0 0; }
.history-chart__tooltip-title { margin-top: 0 !important; font-weight: 600; }
.history-chart__tooltip-meta,
.history-chart__tooltip-period,
.history-chart__tooltip-label,
.history-chart__tooltip-more,
.history-chart__tooltip-source,
.history-chart__tooltip-hint { color: var(--ink-faint); }
.history-chart__tooltip-status { font-weight: 600; }
.history-chart__tooltip-label {
  margin-top: 0.55rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.history-chart__tooltip ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.history-chart__tooltip li + li { margin-top: 0.12rem; }
.history-chart__tooltip-hint { font-style: italic; }
.history-chart figcaption {
  margin: 0;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--rule);
  max-width: 78ch;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.history__eras {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  margin: 0;
  padding: 0.75rem;
}
.history__eras a {
  flex: none;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--type-label);
  color: var(--ink-muted);
  text-decoration: none;
}
.history__eras a:hover,
.history__eras a:focus-visible { border-color: var(--ink); color: var(--ink); }
.history-period-picker {
  margin: 1.2rem 0 2rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
}
.history-period-picker > summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.82rem;
  list-style: none;
}
.history-period-picker > summary::-webkit-details-marker { display: none; }
.history-period-picker > summary::before { content: "▸"; color: var(--ink-faint); }
.history-period-picker[open] > summary::before { content: "▾"; }
.history-period-picker > summary span:last-child { margin-left: auto; color: var(--ink-faint); font-size: var(--type-label); }
.history-period-picker[open] > summary { border-bottom: 1px solid var(--rule); }

@media (max-width: 650px) {
  .history-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-coverage > dl { grid-template-columns: 1fr; }
}
.history-era__disclosure { margin-bottom: 1rem; }
.history-era__disclosure > .history-era__head {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
}
.history-era__disclosure > .history-era__head::before { display: none; }
.history-era__disclosure > .history-era__head--unnumbered { grid-template-columns: minmax(0, 1fr) auto; }
.history-era__disclosure[open] > .history-era__head { border-bottom-color: var(--rule); }
.history-era__count { color: var(--ink-faint); font-size: var(--type-label); font-variant-numeric: tabular-nums; }
.history-era__disclosure .history-era__entries { padding: 0 1rem 0.5rem; }

.history-era { scroll-margin-top: 1rem; margin: 0 0 0.8rem; }
.history-era__head {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: baseline;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--ink);
}
.history-era__number {
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.history-era__title { margin: 0; font-size: 1.25rem; }
.history-era__entries { list-style: none; margin: 0; padding: 0; }
.history-entry { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); }
.history-entry__rail { position: relative; border-right: 1px solid var(--rule); }
.history-entry__dot {
  position: absolute;
  top: 1.6rem;
  right: -5px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--ink-faint);
  border-radius: 50%;
  background: var(--ground);
}
.history-entry__dot--approximate { border-style: dashed; }
.history-entry__dot--legendary { border-radius: 0; transform: rotate(45deg); }
.history-entry__dot--corpus { border-radius: 1px; background: var(--ground-lift); }
.history-entry__body { padding: 1.25rem 0 1.8rem 1.5rem; border-bottom: 1px solid var(--rule); }
.history-entry__date {
  margin: 0;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.055em;
  color: var(--ink-faint);
}
.history-entry__name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.25rem 0 0;
  font-size: 1.15rem;
}
.history-entry__aliases { margin: 0.2rem 0 0; font-size: 0.8rem; font-style: italic; color: var(--ink-faint); }
.history-entry__summary { margin: 0.55rem 0 0; max-width: 72ch; line-height: 1.62; }
.history-entry__kind { margin: 0.45rem 0 0; font-size: var(--type-label); color: var(--ink-faint); }
.history-works { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.history-works li {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.28rem 0;
  font-size: 0.83rem;
}
.history-works__year { color: var(--ink-faint); }
.history-entry__significance { margin: 0.45rem 0 0; max-width: 72ch; line-height: 1.62; color: var(--ink-muted); }
.history-entry__links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.65rem 0 0; font-size: 0.8rem; }
/* A schematic placement orders a figure; it is not a date, and its mark must
   not look like one. Dotted, as against dashed for merely approximate. */
.history-entry__dot--schematic { border-style: dotted; }
/* --- History's open indexes: People, Works, Events --------------------------
   Every period open, one row per record, a find box above an era strip. They
   used to be eighteen folded periods with only the first open. */

/* The rows are grids and the contents links are flex, and either display
   beats the browser's own [hidden] rule. The filter works by hiding. */
.history-index [hidden] { display: none !important; }
.history-index__note { font-size: var(--type-small); color: var(--ink-muted); }
.index-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
}
.index-filter__search { display: grid; gap: 0.35rem; flex: 1 1 18rem; }
.index-filter__label { color: var(--ink-muted); font-size: 0.8rem; }
.index-filter__search input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
}
.index-filter__search input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.index-filter__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  color: var(--ink);
  cursor: pointer;
}
.index-filter__apply {
  min-height: 2.4rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.history-index__status { margin: 0 0 0.5rem; }
.history-index__empty { margin: 0.5rem 0 1.5rem; }

.history-index__period { margin: 1.75rem 0 0; }
/* A tradition on Other traditions: its periods follow as h3s. */
.history-index__group { margin: 3rem 0 0; }
.history-index__group:first-of-type { margin-top: 1rem; }
.history-index__group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: 1.45rem;
  font-weight: normal;
}
.history-index__heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ink-faint);
  background: var(--ground);
  font-size: 1.2rem;
  font-weight: normal;
}
.history-index__numeral {
  min-width: 2.2rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  letter-spacing: 0.06em;
}
.history-index__period-name { flex: 1; }
.history-index__count { color: var(--ink-faint); font-size: var(--type-label); font-variant-numeric: tabular-nums; }

.history-index__rows { list-style: none; margin: 0; padding: 0; }
.history-index__row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.history-index__date {
  margin: 0.2rem 0 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.history-index__date .history-entry__dot {
  position: static;
  display: inline-block;
  box-sizing: border-box;
  margin-right: 0.4rem;
  vertical-align: -0.05em;
}
.history-index__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.05rem;
}
.history-index__aside { margin: 0.15rem 0 0; color: var(--ink-faint); font-size: 0.8rem; font-style: italic; }
.history-index__summary { margin: 0.3rem 0 0; max-width: 72ch; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.55; }
.history-index__meta { margin: 0.3rem 0 0; color: var(--ink-faint); font-size: var(--type-label); }
/* An event's second paragraph: why it matters, a step quieter than what
   happened. */
.history-index__significance { color: var(--ink-faint); }
.history-index__held { font-size: var(--type-label); }
@media (max-width: 640px) {
  .history-index__row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* --- the era strip ---------------------------------------------------------
   The periods in order across the top of a list filed by period, held there
   while the list scrolls. Equal widths, real ranges printed: see
   history/_era_strip.html.erb for why it is not drawn to scale. */

.has-era-strip { --era-strip-height: 4.6rem; }
.era-strip {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  box-sizing: border-box;
  height: var(--era-strip-height);
  margin: 1.5rem 0 1.25rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}
.era-strip__track {
  display: flex;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* With the buttons there, the scrollbar is only in the way. Without the
   script it is the one way a mouse has to move the row, so it stays. */
.era-strip[data-era-strip-ready] .era-strip__track { scrollbar-width: none; }
.era-strip[data-era-strip-ready] .era-strip__track::-webkit-scrollbar { display: none; }
.era-strip__item { flex: 0 0 11rem; border-right: 1px solid var(--rule); }
/* Opens a tradition's run of periods on Other traditions. Not a link: the
   chips after it are the places to go. */
.era-strip__group {
  display: flex;
  flex: 0 0 7.5rem;
  align-items: center;
  box-sizing: border-box;
  padding: 0.45rem 0.7rem;
  border-right: 1px solid var(--rule);
  background: var(--ground-lift);
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  line-height: 1.25;
}
.era-strip__chip {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  height: 100%;
  padding: 0.45rem 0.7rem 0.5rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.25;
  text-decoration: none;
}
.era-strip__chip:hover { color: var(--ink); background: var(--history-band); }
.era-strip__chip:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* Never by fill alone: the band is 1.11:1 on the ground. The underline is
   the house mark for "you are here". */
.era-strip__chip[aria-current] {
  color: var(--ink);
  background: var(--history-band);
  box-shadow: inset 0 -2px 0 var(--history-event);
}
.era-strip__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.era-strip__numeral { margin-right: 0.3rem; color: var(--ink-faint); font-size: var(--type-label); letter-spacing: 0.05em; }
.era-strip__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant-numeric: tabular-nums;
}
.era-strip__step {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  padding: 0;
  border: 0;
  background: var(--ground-lift);
  color: var(--ink);
  cursor: pointer;
}
/* Heavier than the house 1.5: at this size a hairline chevron reads as
   decoration, and these are the only way a mouse moves the row. */
.era-strip__step .icon { stroke-width: 2.25; }
.era-strip__step--earlier { border-right: 1px solid var(--ink-faint); }
.era-strip__step--later { border-left: 1px solid var(--ink-faint); }
.era-strip__step:hover:not(:disabled) { color: var(--history-event); background: var(--history-band); }
.era-strip__step:disabled { color: var(--ink-faint); background: var(--ground); cursor: default; }
.era-strip__step:disabled .icon { opacity: 0.5; }
/* The fades sit over the ends of the track, inside the buttons, and let
   clicks through to the chips beneath them. */
.era-strip::before,
.era-strip::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 2.5rem;
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
}
.era-strip::before { left: 2.75rem; background: linear-gradient(to right, var(--ground), transparent); }
.era-strip::after { right: 2.75rem; background: linear-gradient(to left, var(--ground), transparent); }
.era-strip[data-more-earlier="true"]::before,
.era-strip[data-more-later="true"]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .era-strip::before, .era-strip::after { transition: none; }
}
.era-strip [hidden] { display: none !important; }
/* A chip's jump lands the heading just clear of the strip, not under it. */
.has-era-strip .history-index__period { scroll-margin-top: calc(var(--era-strip-height) + 0.75rem); }

.history-tradition { margin: 3rem 0 0; scroll-margin-top: 1rem; }
.history-tradition .history__section-head { margin-bottom: 1rem; }
.history__lists { margin: 1rem 0 0; max-width: 72ch; color: var(--ink-muted); font-size: var(--type-small); }
.history-bibliography__author { margin: 0.2rem 0 0; font-size: var(--type-small); color: var(--ink-muted); }

/* --- the history in one reading -----------------------------------------
   A continuous argument rather than another database-shaped list. The number
   and rail keep a reader's place without turning fourteen chapters into
   fourteen cards. Links are grouped after the prose so the sentences remain
   readable even when a chapter has several routes into the deeper record. */
.history-narrative__chapters {
  counter-reset: narrative-chapter;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.history-narrative__chapters > li {
  counter-increment: narrative-chapter;
  position: relative;
  padding-left: 3.25rem;
}
.history-narrative__chapters > li::before {
  content: counter(narrative-chapter, decimal-leading-zero);
  position: absolute;
  top: 2.6rem;
  left: 0;
  width: 2rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-align: center;
}
.history-narrative__chapters > li::after {
  content: "";
  position: absolute;
  inset: 0.35rem auto -0.35rem 1rem;
  width: 1px;
  background: var(--rule);
}
.history-narrative__chapters > li:last-child::after { bottom: 2.6rem; }
.history-narrative__chapter {
  padding: 2.1rem 0 2.35rem;
  border-bottom: 1px solid var(--rule);
}
.history-narrative__period {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.08em;
}
.history-narrative__chapter h2 {
  margin: 0.25rem 0 0;
  max-width: 30ch;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}
.history-narrative__chapter > p:not(.history-narrative__period, .history-narrative__links) {
  max-width: 72ch;
  margin: 0.8rem 0 0;
  color: var(--ink-muted);
  line-height: 1.72;
}
.history-narrative__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  max-width: 76ch;
  margin: 1rem 0 0;
  font-size: var(--type-label);
  line-height: 1.55;
}
.history-narrative__links span {
  color: var(--ink-faint);
  font-variant: small-caps;
  letter-spacing: 0.06em;
}
.history-narrative__links span:not(:first-child) { margin-left: 0.45rem; }
.history-narrative__links a {
  padding: 0.18rem 0.42rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
}
.history-narrative__links a:hover,
.history-narrative__links a:focus-visible { border-color: var(--ink-faint); text-decoration: underline; }
.history-narrative__links a[rel~="external"] { color: var(--ink-muted); }

@media (max-width: 520px) {
  .history-era__head,
  .history-entry { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .history-entry__body { padding-left: 1rem; }
  .history-works li { display: block; }
  .history-works__year { display: block; margin-bottom: 0.1rem; }
  .history-narrative__chapters > li { padding-left: 2rem; }
  .history-narrative__chapters > li::before { left: -0.45rem; width: 1.8rem; }
  .history-narrative__chapters > li::after { left: 0.45rem; }
  .history-narrative__links { gap: 0.45rem; }
  .history-narrative__links span { flex-basis: 100%; margin-top: 0.25rem; }
  .history-narrative__links span:not(:first-child) { margin-left: 0; }
}

.history-detail { max-width: 62rem; }
.history-detail__header { max-width: 70ch; }
.history-detail__aliases { margin: 0.2rem 0 0; color: var(--ink-faint); font-style: italic; }
.history-detail__facts { margin-top: 1.5rem; }
.history-detail__facts div { min-width: 9rem; }
.history-detail__facts dd { margin: 0; }
.history-detail__account { margin-top: 2rem; }
.history-detail__boundary {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.4rem;
  border-left: 3px solid var(--ink-faint);
  background: var(--ground-lift);
}
.history-detail__boundary > p:last-child { max-width: 76ch; margin-bottom: 0; line-height: 1.65; }
.history-detail__works,
.history-detail__contemporaries { margin: 3rem 0 0; }
.history-bibliography { list-style: none; margin: 1rem 0 0; padding: 0; }
.history-bibliography__item { padding: 1.2rem 0 1.35rem; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.history-bibliography__item:last-child { border-bottom: 1px solid var(--rule); }
.history-bibliography__date { margin: 0; font-size: var(--type-label); color: var(--ink-faint); }
.history-bibliography__title { margin: 0.2rem 0 0; font-size: 1.05rem; }
.history-bibliography__original { margin: 0.15rem 0 0; font-style: italic; color: var(--ink-faint); font-size: var(--type-small); }
.history-bibliography__summary { margin: 0.5rem 0 0; max-width: 72ch; line-height: 1.6; }
.history-bibliography__held { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.8rem 0 0; font-size: 0.8rem; }
.history-detail__contemporaries ul { list-style: none; margin: 1rem 0 0; padding: 0; columns: 2; column-gap: 2rem; }
.history-detail__contemporaries li { break-inside: avoid; padding: 0.45rem 0; border-top: 1px solid var(--rule); font-size: var(--type-small); }
.history-detail__contemporaries li span { display: block; color: var(--ink-faint); font-size: var(--type-label); }
@media (max-width: 580px) {
  .history-detail__contemporaries ul { columns: 1; }
}

/* --- the timeline's layer picker ------------------------------------------
   Seven checkboxes in a row said nothing about which ones belonged together —
   two about occult figures, three about whole other traditions, two about
   what else to draw. They are grouped behind one disclosure now, with the
   count and the tradition layers still readable when it is shut, because a
   dropdown that hides which options are on is worse than the row it replaced. */

.history-layers { position: relative; }

.history-layers__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  color: var(--ink);
  font: inherit;
  font-size: var(--type-small);
  cursor: pointer;
}
.history-layers__button:hover { border-color: var(--ink-faint); }
.history-layers__button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.history-layers__button--open {
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.history-layers__count { font-size: var(--type-label); color: var(--ink-faint); }
.history-layers__chevron { font-size: var(--type-label); color: var(--ink-faint); }
.history-layers__button--open .history-layers__chevron { transform: rotate(180deg); }

.history-layers__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 20rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--ink-faint);
  background: var(--ground);
  box-shadow: 0 12px 32px var(--shadow-strong);
}
/* Below the rail breakpoint there is nothing to overlay it onto usefully, so
   it opens in flow instead of floating over the chart. */
@media (max-width: 720px) {
  .history-layers__panel {
    position: static;
    min-width: 0;
    max-width: none;
    box-shadow: none;
    margin-top: 0.5rem;
  }
}

.history-layers__group {
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}
.history-layers__group:last-child { margin-bottom: 0; }
.history-layers__legend {
  padding: 0 0 0.3rem;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.history-layers__panel .history-chart__toggle {
  display: flex;
  min-height: 2rem;
  font-size: var(--type-small);
}

.history-layers__active {
  margin: 0;
  font-size: var(--type-label);
  color: var(--ink-muted);
}