/* ============================================================================
   /inevitable (sub page system v1.1, 9 Oct 2026): a plain page, no instrument. Linked from the
   PageStyles placeholder, so it loads AFTER sub.css. Tokens only; every rule under .sp.
   FIG. 01, the systems of record: an <ol> of three eras on one line of time. On a phone the
   line runs down the inline-start edge and each era is a card beside it; from 760px the line
   runs across, the eras sit on it, and time points onward (a chevron at the line's end, which
   a right to left page mirrors). The present era carries the orange square: it is the one the
   page is about.
   ============================================================================ */

/* ---- the copy ---- */
.sp .inev-st .ln { display: block; color: var(--lp-muted); }
.sp .inev-st .ln.is-own { color: var(--lp-ink); }

/* ---- FIG. 01: the eras ---- */
.sp .inev-eras { position: relative; padding-inline-start: 30px; padding-bottom: 22px; }
.sp .inev-eras::before { content: ""; position: absolute; inset-inline-start: 5px; top: 8px; bottom: 8px; border-inline-start: 2px solid var(--lp-rule-2); }
.sp .inev-eras::after { content: ""; position: absolute; inset-inline-start: 1px; bottom: 6px; width: 8px; height: 8px; border-right: 2px solid var(--lp-ink-2); border-bottom: 2px solid var(--lp-ink-2); transform: rotate(45deg); }
.sp .inev-era { position: relative; display: grid; row-gap: 2px; padding: 0 0 26px; }
.sp .inev-era::before { content: ""; position: absolute; inset-inline-start: -30px; top: 3px; width: 12px; height: 12px; background: var(--lp-ink-2); }
.sp .inev-y { color: var(--lp-muted); font-weight: 600; }
.sp .inev-t { font: 600 20px/1.25 var(--tos-font-body); letter-spacing: -.015em; color: var(--lp-ink); }
.sp .inev-d { font-size: 16px; line-height: 1.5; color: var(--lp-ink-2); }
.sp .inev-era.is-now::before { inset-inline-start: -32px; top: 1px; width: 16px; height: 16px; background: var(--lp-accent); }
.sp .inev-era.is-now .inev-y { color: var(--lp-accent-text); }

@media (min-width: 760px) {
  .sp .inev-eras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; padding: 0; padding-inline-end: 40px; }
  .sp .inev-eras::before { inset-inline-start: 0; inset-inline-end: 20px; top: 35px; bottom: auto; border-inline-start: 0; border-top: 2px solid var(--lp-rule-2); }
  .sp .inev-eras::after { inset-inline-start: auto; inset-inline-end: 20px; top: 31px; bottom: auto; width: 10px; height: 10px; transform: rotate(-45deg); }
  .sp .inev-era { padding: 0; }
  .sp .inev-era::before { inset-inline-start: 0; top: 30px; }
  .sp .inev-era.is-now::before { inset-inline-start: -2px; top: 28px; }
  .sp .inev-t { margin-top: 42px; font-size: 22px; }
}
@media (min-width: 1180px) {
  .sp .inev-t { font-size: 26px; }
  .sp .inev-d { font-size: 17px; }
}
@media (min-width: 760px) { [dir="rtl"] .sp .inev-eras::after { transform: rotate(135deg); } }