/* The chapter "The Fullness of Time" (js/timeline.js draws it from js/timeline-data.js).

   A scroll of the years, set like a genealogy roll: one thread runs down the page — gold ink by night,
   the red thread by day — and the events hang on it as roundels. Scripture keeps the left margin, the
   nations the right, and where the two records name one moment the card sits on the thread itself.
   A banner divides the eras; the bar at the head of the page stays while you scroll, carries the row
   of eras, and reads out the year you have come to. Colors and type come from styles.css. */

:root { --tl-thread: var(--gilt); --tl-thread-soft: color-mix(in srgb, var(--gilt) 34%, transparent); }
:root[data-theme="light"] { --tl-thread: var(--rubric); --tl-thread-soft: color-mix(in srgb, var(--rubric) 30%, transparent); }

/* ---- the nations, each keeping one color through the scroll ---- */
#panel-timeline {
  --tlr-egypt: var(--genB);        --tlr-egypt-ink: var(--genB-ink);
  --tlr-mesopotamia: var(--earth); --tlr-mesopotamia-ink: var(--earth-ink);
  --tlr-persia: var(--cov);        --tlr-persia-ink: var(--cov-ink);
  --tlr-greece: var(--heaven);     --tlr-greece-ink: var(--heaven-ink);
  --tlr-rome: var(--beat);         --tlr-rome-ink: var(--beat-ink);
  --tlr-east: var(--genA);         --tlr-east-ink: var(--genA-ink);
  --tlr-levant: var(--bronze);     --tlr-levant-ink: var(--bronze);
}
:root[data-theme="light"] #panel-timeline {
  --tlr-egypt-ink: var(--genB-ink); --tlr-mesopotamia-ink: var(--earth-ink); --tlr-persia-ink: var(--cov-ink);
  --tlr-greece-ink: var(--heaven-ink); --tlr-rome-ink: var(--beat-ink); --tlr-east-ink: var(--genA-ink); --tlr-levant-ink: #8a5429;
}

/* ---- the marks for how a date is known (the calendar chapter's colors) ---- */
.tl-src { display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; font-family: var(--caps); font-size: 0.88rem; letter-spacing: 0.05em; }
.tl-src .vi { font-family: var(--sym); font-size: 0.95em; }
.tl-src.s-text { color: var(--ok); }
.tl-src.s-count { color: var(--warn); }
.tl-src.s-records { color: var(--heaven-ink); }
.tl-src.s-trad { color: var(--beat-ink); }
.tl-legend { max-width: 46rem; margin: 8px 0 4px; }
.tl-legend li { grid-template-columns: 7.6rem 1fr; }

/* the nations' legend, in the drop at the head */
.tl-rlegend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 4px; padding: 0; list-style: none; }
.tl-rlegend li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--caps); font-size: 0.92rem; letter-spacing: 0.05em; color: var(--muted); }
.tl-rlegend .sw { width: 0.72em; height: 0.72em; border: 1px solid var(--line); background: var(--rc, var(--muted)); }

/* ================================================================ the bar that stays: eras and the year */
.tl-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: stretch; gap: 14px;
  margin: 26px calc(-1 * var(--gutter, 16px)) 0; padding: 8px var(--gutter, 16px) 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--rule);
}
.tl-eranav { display: flex; align-items: center; gap: 2px 14px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tl-eranav::-webkit-scrollbar { display: none; }
.tl-eranav button {
  flex: 0 0 auto; padding: 8px 4px 9px; border: 0; border-bottom: 2px solid transparent; background: none; box-shadow: none; border-radius: 0;
  font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--muted); cursor: pointer;
}
.tl-eranav button .n { color: var(--rubric); margin-right: 0.45em; }
.tl-eranav button:hover { color: var(--ink); }
.tl-eranav button[aria-current="true"] { color: var(--rubric); border-bottom-color: var(--rubric); }
.tl-eranav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-eranav button .en { display: inline; }
/* the year read out at the right edge of the bar, like a folio number */
.tl-now { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 4px 0 6px; min-width: 7.5ch; text-align: right; }
.tl-now-y { font-family: var(--display); font-size: 1.5rem; line-height: 1.05; color: var(--ink); letter-spacing: 0.04em; white-space: nowrap; }
.tl-now-e { font-family: var(--caps); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--rubric); white-space: nowrap; }
/* how far along the whole scroll is, as a hairline of gold filling the bar's rule */
.tl-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--tl-thread); transition: width 80ms linear; }

/* ================================================================ the prologue: counted from Adam */
.tl-prologue { position: relative; padding: 4px 0 0; }
.tl-prologue .tl-pro-h { margin: 10px 0 2px; text-align: center; font-family: var(--caps); font-size: 1.18rem; letter-spacing: 0.14em; color: var(--rubric); }
.tl-prologue .tl-pro-l { max-width: 46rem; margin: 6px auto 18px; text-align: center; font-style: italic; color: var(--muted); font-size: 1.02rem; }
.tl-pro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 14px; }
.tl-pro-card { border: 1px dashed color-mix(in srgb, var(--press) 55%, transparent); padding: 14px 16px 12px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tl-pro-card .am { font-family: var(--caps); font-size: 0.88rem; letter-spacing: 0.12em; color: var(--gilt); }
.tl-pro-card h4 { margin: 2px 0 6px; font-family: var(--display); font-weight: 400; font-size: 1.22rem; letter-spacing: 0.03em; color: var(--ink); }
.tl-pro-card p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--muted); }
/* the thread begins: dotted while the years are uncounted */
.tl-pro-tail { width: 0; height: 52px; margin: 14px auto 0; border-left: 2px dotted var(--tl-thread-soft); }

/* ================================================================ the scroll itself */
.tl-stream { position: relative; list-style: none; margin: 0; padding: 6px 0 10px; }
/* the thread */
.tl-stream::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  background: linear-gradient(var(--tl-thread-soft), var(--tl-thread) 120px, var(--tl-thread) calc(100% - 120px), var(--tl-thread-soft));
}
.tl-stream > li { position: relative; }

/* ---- an era's banner, ruled thick-and-thin like the title page ---- */
.tl-erahead { margin: 34px 0 10px; padding: 22px 12px 18px; text-align: center; background: var(--bg); position: relative; scroll-margin-top: 86px; }
.tl-erahead::before, .tl-erahead::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: min(34rem, 86%); height: 5px;
  background: linear-gradient(var(--press), var(--press)) top / 100% 2px no-repeat, linear-gradient(var(--press), var(--press)) bottom / 100% 1px no-repeat;
}
.tl-erahead::before { top: 0; }
.tl-erahead::after { bottom: 0; transform: translateX(-50%) scaleY(-1); }
.tl-erahead .n { display: block; font-family: var(--caps); font-size: 1.05rem; letter-spacing: 0.3em; color: var(--rubric); }
.tl-erahead h3 { margin: 2px 0 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.09em; font-size: clamp(1.45rem, 3vw, 2.1rem); color: var(--ink); }
.tl-erahead .sp { display: block; margin-top: 2px; font-family: var(--caps); font-size: 0.98rem; letter-spacing: 0.12em; color: var(--gilt); }
.tl-erahead .wd { max-width: 44rem; margin: 10px auto 0; font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--muted); }

/* ---- the passing of empty years ---- */
.tl-gap { display: grid; justify-items: center; padding: 20px 0 22px; }
.tl-gap .t { position: relative; z-index: 1; padding: 2px 14px; background: var(--bg); font-family: var(--caps); font-size: 0.9rem; letter-spacing: 0.18em; color: var(--muted); }

/* ---- one event on the thread ---- */
.tl-item { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); padding: 7px 0; }
.tl-item .tl-card { grid-row: 1; max-width: 36rem; }
.tl-bible .tl-card { grid-column: 1; justify-self: end; }
.tl-world .tl-card { grid-column: 3; justify-self: start; }

/* the roundel on the thread */
.tl-dot { grid-column: 2; grid-row: 1; align-self: start; justify-self: center; margin-top: 1.1rem; width: 13px; height: 13px; border-radius: 999px !important; background: var(--bg); border: 2px solid var(--tl-thread); position: relative; z-index: 1; }
.tl-big > .tl-dot { width: 19px; height: 19px; margin-top: 0.95rem; background: var(--tl-thread); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--tl-thread-soft); }
.tl-meet > .tl-dot { width: 23px; height: 23px; margin-top: -2px; background: var(--bg); border-width: 2px; }
.tl-meet > .tl-dot::after { content: "❦"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; line-height: 1; color: var(--tl-thread); }

/* a short cross-stroke tying card to thread */
.tl-bible .tl-card::after, .tl-world .tl-card::before {
  content: ""; position: absolute; top: 1.45rem; width: 30px; height: 1px; background: var(--tl-thread-soft);
}
.tl-bible .tl-card::after { right: -31px; }
.tl-world .tl-card::before { left: -31px; }

/* ---- the card ---- */
.tl-card { position: relative; border: 1px solid var(--line); background: var(--surface); padding: 12px 16px 11px; }
.tl-card:hover { border-color: color-mix(in srgb, var(--line) 40%, var(--tl-thread)); }
.tl-bible .tl-card { border-left: 3px solid var(--rubric); }
.tl-world .tl-card { border-right: 3px solid var(--rc, var(--muted)); }
.tl-meet .tl-card { grid-column: 1 / -1; justify-self: center; margin-top: 26px; max-width: 44rem; width: min(44rem, 100%); border: 1px solid var(--tl-thread); outline: 1px solid var(--tl-thread-soft); outline-offset: 3px; background: color-mix(in srgb, var(--surface) 88%, var(--tl-thread)); }
.tl-meet { padding-bottom: 16px; }

.tl-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.tl-date { font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.1em; color: var(--gilt); white-space: nowrap; }
:root[data-theme="light"] .tl-date { color: var(--rubric); }
.tl-who { margin-left: auto; display: inline-flex; align-items: baseline; gap: 10px; }
.tl-reg { font-family: var(--caps); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--rc-ink, var(--muted)); }
.tl-meet .tl-reg { color: var(--tl-thread); }
.tl-card h4 { margin: 1px 0 5px; font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.22; letter-spacing: 0.02em; color: var(--ink); }
.tl-big .tl-card h4 { font-size: 1.52rem; }
.tl-card .wt { margin: 0; font-size: 1.02rem; line-height: 1.52; }
.tl-meet .tl-card h4 { text-align: center; }
.tl-meet .tl-hd { justify-content: center; }
.tl-meet .tl-who { margin-left: 0; }

/* the dating note folds under the card's text */
.tl-note { margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
.tl-note summary { cursor: pointer; list-style: none; padding: 6px 0 2px; font-family: var(--caps); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--muted); }
.tl-note summary::-webkit-details-marker { display: none; }
.tl-note summary::before { content: "☙ "; color: var(--gilt); }
.tl-note summary:hover { color: var(--ink); }
.tl-note[open] summary { color: var(--rubric); }
.tl-note p { margin: 4px 0 2px; font-size: 0.98rem; line-height: 1.5; color: var(--muted); }

/* ================================================================ the roll of the generations
   Adam to Joseph, each life a bar from its year of the world; the flood a red rule through the roll.
   The names keep the left edge while the years scroll; a chosen life dims all who never knew him. */
.tl-gen { margin: 34px 0 10px; }
.tl-gen-h { margin: 0 0 2px; text-align: center; font-family: var(--caps); font-weight: 400; font-size: 1.18rem; letter-spacing: 0.14em; color: var(--rubric); }
.tl-gen-l { max-width: 48rem; margin: 6px auto 14px; text-align: center; font-style: italic; color: var(--muted); font-size: 1.02rem; }
.tl-gen-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 0 0 12px; }
.tl-gen-tools .seg button { font-family: var(--caps); letter-spacing: 0.04em; }
.tl-gen-crux { margin: 0; border-top: 0; max-width: 46rem; }
.tl-gen-crux p { max-width: 46rem; }

.tl-gen-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
.tl-gen-chart { position: relative; min-width: 58rem; padding: 30px 3.5rem 26px 0; }
/* the marks behind the lives: ticks each 200 years, the flood, and Peleg's days */
.tl-gen-marks { position: absolute; inset: 0 3.5rem 0 7.5rem; pointer-events: none; }
.tl-gen-marks i { position: absolute; top: 26px; bottom: 22px; left: calc(var(--x) / var(--w) * 100%); border-left: 1px solid color-mix(in srgb, var(--rule) 38%, transparent); }
.tl-gen-marks i.maj { border-left-color: color-mix(in srgb, var(--rule) 70%, transparent); }
.tl-gen-marks i b { position: absolute; bottom: -20px; left: 0; transform: translateX(-50%); font-weight: 400; font-family: var(--caps); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }
.tl-gen-marks i.fl { top: 8px; border-left: 2px solid var(--rubric); }
.tl-gen-marks i.fl b { top: -8px; bottom: auto; color: var(--rubric); font-size: 0.82rem; }
.tl-gen-marks i.pg { border-left: 1px dotted var(--press); }
.tl-gen-marks i.pg b { bottom: -20px; color: var(--press); }
/* the seven years of famine, a shaded band through the roll */
.tl-gen-marks i.fam {
  left: calc(var(--x1) / var(--w) * 100%); width: calc((var(--x2) - var(--x1)) / var(--w) * 100%);
  border-left: 1px dotted var(--warn); border-right: 1px dotted var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, transparent); transition: left 0.45s ease, width 0.45s ease;
}
.tl-gen-marks i.fam b { bottom: -20px; left: 50%; color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .tl-gen-marks i.fam { transition: none; } }

.tl-gen-row { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; height: 25px; margin-right: 3.5rem; transition: opacity 0.25s ease; }
.tl-gen-row.dim { opacity: 0.22; }
.tl-gen-row .nm { position: sticky; left: 0; z-index: 2; height: 100%; display: flex; align-items: center; padding-left: 12px; font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.05em; color: var(--gc-ink); background: linear-gradient(90deg, var(--panel) 78%, transparent); }
.tl-gen-row .tr { position: relative; height: 100%; }
.tl-gen-row .bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--b) / var(--w) * 100%); width: calc(var(--l) / var(--w) * 100%);
  height: 13px; padding: 0; border: 1px solid var(--gc-edge); background: var(--gc-mid);
  border-radius: 0; box-shadow: none; cursor: pointer; transition: left 0.45s ease, width 0.45s ease;
}
@media (prefers-reduced-motion: reduce) { .tl-gen-row .bar { transition: none; } .tl-gen-row { transition: none; } }
.tl-gen-row .bar:hover { border-color: var(--ink); }
.tl-gen-row .bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-gen-row.chosen .bar { background: var(--gc-edge); outline: 1px solid var(--gilt); outline-offset: 2px; }
.tl-gen-row .bar.taken { border-right: 0; background: linear-gradient(90deg, var(--gc-mid) 55%, transparent); }
.tl-gen-row .yrs { position: absolute; top: 50%; transform: translateY(-50%); left: calc((var(--b) + var(--l)) / var(--w) * 100% + 7px); font-family: var(--caps); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--gc-ink); white-space: nowrap; pointer-events: none; transition: left 0.45s ease; }
/* a gilt pin: an event in a life's year — the flood on Noah's bar, the call on Abraham's */
.tl-gen-row .pin {
  position: absolute; top: 50%; left: calc(var(--px) / var(--w) * 100%);
  width: 11px; height: 11px; margin: 0; padding: 0; z-index: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--tl-thread); border: 1.5px solid var(--bg); border-radius: 0; box-shadow: none;
  cursor: pointer; transition: left 0.45s ease;
}
.tl-gen-row .pin:hover { background: var(--ink); }
.tl-gen-row .pin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-gen-row .pin[aria-pressed="true"] { background: var(--tl-thread); outline: 1px solid var(--tl-thread); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tl-gen-row .pin { transition: none; } }

/* the nations' strip under the lives: hollow pins, their records laid on by the seam at Abraham */
.tl-gen-nrow { height: 32px; margin-top: 8px; padding-top: 5px; border-top: 1px dashed color-mix(in srgb, var(--rule) 60%, transparent); }
.tl-gen-nrow .nm { color: var(--muted); }
.tl-gen-nrow .npin {
  position: absolute; top: 50%; left: calc(var(--px) / var(--w) * 100%);
  width: 11px; height: 11px; margin: 0; padding: 0; z-index: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--panel); border: 1.5px solid var(--rc, var(--muted)); border-radius: 0; box-shadow: none;
  cursor: pointer; transition: left 0.45s ease, opacity 0.25s ease;
}
.tl-gen-nrow .npin.q { border-style: dashed; }                   /* laid before the roll's flood-year: held loosely */
.tl-gen-nrow .npin:hover { background: var(--rc, var(--muted)); }
.tl-gen-nrow .npin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-gen-nrow .npin[aria-pressed="true"] { background: var(--rc, var(--muted)); outline: 1px solid var(--rc, var(--muted)); outline-offset: 3px; }
.tl-gen-nrow .npin.dim { opacity: 0.22; }
@media (prefers-reduced-motion: reduce) { .tl-gen-nrow .npin { transition: none; } }
.tl-gen-detail .dq { font-style: italic; }

/* ---- the roll of the kings & prophets: reigns laid end to end, ministries beneath ---- */
.tl-kgs { margin-top: 44px; }
.tl-kgs-chart { padding-top: 44px; padding-bottom: 42px; }
.tl-kgs-line { height: 34px; }
.tl-kgs-line .nm { font-size: 1rem; line-height: 1.05; }
.kseg {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--b) / var(--w) * 100%); width: calc(var(--l) / var(--w) * 100%);
  height: 19px; margin: 0; padding: 0; border: 1px solid var(--gc-edge); background: var(--gc-mid);
  border-radius: 0; box-shadow: none; cursor: pointer; overflow: hidden;
}
.kseg.odd { background: color-mix(in srgb, var(--gc-mid) 55%, var(--panel)); }
.kseg.sliver { min-width: 3px; }
.kseg .kn { display: block; overflow: hidden; padding: 1px 2px 0; font-family: var(--caps); font-size: 0.72rem; letter-spacing: 0.03em; line-height: 17px; text-align: center; text-overflow: ellipsis; color: var(--gc-ink); white-space: nowrap; pointer-events: none; }
.kseg:hover { border-color: var(--ink); z-index: 2; }
.kseg:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; z-index: 2; }
.kseg.chosen { background: var(--gc-edge); outline: 1px solid var(--gilt); outline-offset: 2px; z-index: 2; }
.kseg.chosen .kn { color: var(--glyph-dark); }
.kseg.dim { opacity: 0.22; }
.kcut { position: absolute; top: 50%; left: calc(var(--x) * 1%); transform: translate(2px, -50%); font-size: 0.8rem; color: var(--bad); }
.tl-kgs-pr { height: 20px; }
.tl-kgs-pr .nm { font-size: 0.85rem; }
.kbar { height: 10px !important; min-width: 4px; background: color-mix(in srgb, var(--gc-edge) 40%, var(--panel)) !important; }
.kbar.c { border-style: dashed; }
.kbar.chosen { background: var(--gc-edge) !important; }
/* the rules through the roll: the tearing, the two falls, the return */
.tl-kgs-chart .tl-gen-marks { inset: 0 3.5rem 0 7.5rem; }
.tl-kgs-chart .tl-gen-marks i { top: 40px; bottom: 38px; }
.tl-kgs-chart .tl-gen-marks i.kr { top: 38px; }
.kr-pg { border-left: 1px dotted var(--press); }
.kr-north { border-left: 2px solid var(--genA-edge); }
.kr-fl { border-left: 2px solid var(--rubric); }
.kr-ret { border-left: 1px dotted var(--gilt); }
.tl-kgs-chart .kr b { position: absolute; left: 0; transform: translateX(-50%); bottom: auto; font-weight: 400; font-family: var(--caps); font-size: 0.78rem; letter-spacing: 0.08em; white-space: nowrap; color: var(--muted); }
.tl-kgs-chart .kr b.t0 { top: -36px; }
.tl-kgs-chart .kr b.t1 { top: -21px; }
.kr-fl b { color: var(--rubric) !important; }
.kr-north b { color: var(--genA-ink) !important; }
.kr-ret b { color: var(--gilt) !important; }
.tl-kgs-chart .kband b { bottom: -34px !important; }
@media (max-width: 760px) {
  .tl-kgs-chart .tl-gen-marks { inset: 0 3rem 0 5.6rem; }
  .kseg .kn { font-size: 0.68rem; }
  .tl-kgs-line .nm { font-size: 0.86rem; }
}

/* what a chosen life tells, under the roll */
.tl-gen-detail { max-width: 52rem; margin: 12px auto 0; padding: 10px 14px; border: 1px solid transparent; font-size: 1rem; line-height: 1.5; color: var(--muted); font-style: italic; text-align: center; }
.tl-gen-detail.open { border-color: var(--line); border-left: 3px solid var(--gilt); background: var(--surface); font-style: normal; text-align: left; color: var(--ink); }
.tl-gen-detail .dn { font-family: var(--display); font-weight: 400; font-size: 1.2rem; margin-right: 8px; }
.tl-gen-detail .dy { font-family: var(--caps); font-size: 0.88rem; letter-spacing: 0.06em; color: var(--gilt); }
:root[data-theme="light"] .tl-gen-detail .dy { color: var(--rubric); }
.tl-gen-detail .dw { display: block; margin-top: 6px; }
.tl-gen-detail .dm { display: block; margin-top: 6px; font-size: 0.95rem; color: var(--muted); }
.tl-gen-detail .dm b { font-family: var(--caps); font-weight: 400; letter-spacing: 0.06em; }
.tl-gen-detail .dm i { color: var(--gilt); font-style: normal; font-size: 0.88em; }
:root[data-theme="light"] .tl-gen-detail .dm i { color: var(--rubric); }

@media (max-width: 760px) {
  .tl-gen-chart { min-width: 46rem; padding-right: 3rem; }
  .tl-gen-marks { inset: 0 3rem 0 5.6rem; }
  .tl-gen-row { grid-template-columns: 5.6rem 1fr; margin-right: 3rem; }
  .tl-gen-row .nm { padding-left: 8px; font-size: 0.85rem; }
  .tl-gen-tools { justify-content: flex-start; }
}

/* the colophon at the foot of the scroll */
.tl-end { padding: 26px 0 8px; text-align: center; }
.tl-end .fl { position: relative; z-index: 1; display: inline-block; padding: 0 14px; background: var(--bg); color: var(--tl-thread); font-size: 1.5rem; }
.tl-end p { max-width: 34rem; margin: 10px auto 0; font-style: italic; color: var(--muted); font-size: 1.02rem; }

/* ---- the cards step in as the scroll reaches them ---- */
@media (prefers-reduced-motion: no-preference) {
  .tl-anim .tl-card, .tl-anim .tl-erahead, .tl-anim .tl-pro-card { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease, border-color 0.2s ease; }
  .tl-anim .seen > .tl-card, .tl-anim .tl-erahead.seen, .tl-anim .tl-pro-card.seen { opacity: 1; transform: none; }
}

/* ================================================================ one column on a narrow page */
@media (max-width: 760px) {
  .tl-stream::before { left: 13px; }
  .tl-item { grid-template-columns: 34px minmax(0, 1fr); }
  .tl-item .tl-card, .tl-bible .tl-card, .tl-world .tl-card, .tl-meet .tl-card { grid-column: 2; justify-self: stretch; max-width: none; }
  .tl-dot { grid-column: 1; justify-self: start; margin-left: 7px; }
  .tl-big > .tl-dot { margin-left: 4px; }
  .tl-meet > .tl-dot { margin-left: 2px; margin-top: 1rem; }
  .tl-meet .tl-card { margin-top: 0; outline-offset: 2px; }
  .tl-bible .tl-card::after { display: none; }
  .tl-world .tl-card::before { right: auto; left: -21px; width: 20px; }
  .tl-world .tl-card { border-left: 3px solid var(--rc, var(--muted)); border-right: 1px solid var(--line); }
  .tl-erahead { text-align: left; padding-left: 0; }
  .tl-erahead::before, .tl-erahead::after { left: 0; transform: none; width: min(34rem, 100%); }
  .tl-erahead .wd { margin-left: 0; }
  .tl-gap .t { justify-self: start; margin-left: 34px; padding-left: 0; }
  .tl-gap { justify-items: start; }
  .tl-end .fl { margin-left: 0; }
  .tl-eranav button .en { display: none; }                      /* numerals only; the name shows in the readout */
  .tl-eranav button[aria-current="true"] .en { display: inline; }
  .tl-now-y { font-size: 1.22rem; }
  .tl-bar { gap: 8px; }
}
@media (max-width: 420px) {
  .tl-card { padding: 10px 12px 9px; }
  .tl-legend li { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 10px 0; }   /* each kind of date above what it means */
  .tl-who { margin-left: 0; }
}