/* History page only (proposal docs/axiom/pages/proposals/history.md, approved 2026-10-22).
   The timeline rows (.tl), section heads (.shead) and faces (.faces) are the shared components in site.css; this file
   adds the five phase blocks, the related-link rows, the tablet row layout and the 16px roles. Every font-size is a
   --t-* token; headings take Space Grotesk 700 from the shared inner-page rule in site.css (no per-page font rule). */

/* [01] five phase blocks: a hairline above each block, the label on its own row, then the block's own list.
   The list's first entry drops its own top rule (the block's rule stands in) and its last entry drops the bottom
   rule, so two blocks never meet in a double line; the closing Today entry (.tl__now) ends without a rule. */
.tl-phase { border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 40px); }
.tl-phase__label { font-size: var(--t-body); color: var(--ink-2); }
.tl-phase .tl > li:first-child { border-top: 0; padding-top: clamp(20px, 2.5vw, 32px); }
.tl-phase .tl > li:last-child, .tl__now { border-bottom: 0; }

/* entry titles are h4 now (h3 is the phase label): the H4 step of the owner's scale */
.tl__text h4 { font-size: var(--t-h4); }

/* related pages: the site's arrow links, each a 44px-tall target, wrapping as a row under the paragraph */
.tl__text .tl__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; color: var(--ink); }   /* .tl__text p greys its paragraphs; the links stay ink */
.tl__links .link { min-height: 44px; }
.tl__links .link:hover, .tl__links .link:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

/* tablet: year and text side by side, the picture full width below, so each entry is shorter than the stacked column */
@media (min-width: 768px) and (max-width: 1023px) {
  .tl-phase .tl__year { grid-column: 1 / 4; }
  .tl-phase .tl__text { grid-column: 4 / 13; }
  .tl-phase .tl__img { grid-column: 1 / -1; }
}