/* About (/about/; docs/content/about.md, page pack 11 with RULINGS.md, Figma Round 24's four frames). Only this page loads it: site.css is at Home's
   CSS budget. The title and its lead are the case title's; the fan and the text are Home's About body, the text held to 880 px; then the six eras, the
   five tiles and Home's contact band, each a section apart, the tiles 128 px above the band at every width as the frames draw it. Colors from the tokens:
   the two openers take the nearest-first steps 1 and 2 (Round 24's inks 3 and 4 at the default red); the era circles take the selected color's six steps, Tantum to Aurochs (--ink-1 to --ink-6, the stage-adjusted steps the fan and the cards use), and follow any pick by Night and by Day (2026-11-04, the third staging feedback). */
.about-page { padding: var(--space-section) var(--side) 0; }
.about-page .about-body { padding-top: 0; }
.about-text { display: grid; gap: 32px; align-content: start; max-width: 880px; }
.timeline { padding: var(--space-section) var(--side) 0; }
.also { padding: var(--space-section) var(--side) 128px; }
body.sub .timeline .opener .label { color: var(--near-1); }
body.sub .also .opener .label { color: var(--near-2); }
/* Home's contact band, as on Home: its opener keeps the band's own text. */
body.sub .contact .opener .label { color: inherit; }

/* The eras: a circle, the name, the title and the years in one row from 1024 px; under it the title joins the name's column (and the years too below 768). */
.eras { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.era { display: grid; grid-template-columns: 120px minmax(0, 1.55fr) minmax(0, 1fr) 170px; grid-template-areas: "dot name title years"; column-gap: 32px; row-gap: 4px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.era-dot { grid-area: dot; width: 120px; height: 120px; border-radius: 50%; background: var(--c); }
.era-name { grid-area: name; font-family: var(--display); font-weight: var(--display-weight); font-size: var(--fs-row-name); line-height: var(--lh-row-name); }
.era-title { grid-area: title; }
.era-years { grid-area: years; }
.era:nth-child(1) { --c: var(--ink-1); } .era:nth-child(2) { --c: var(--ink-2); } .era:nth-child(3) { --c: var(--ink-3); }
.era:nth-child(4) { --c: var(--ink-4); } .era:nth-child(5) { --c: var(--ink-5); } .era:nth-child(6) { --c: var(--ink-6); }

.also-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.also-tiles picture { display: block; }
.also-tiles img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

@media (max-width: 1023px) {
  .era { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "dot name years" "dot title years"; column-gap: 16px; }
  .era-dot { width: 48px; height: 48px; }
  .era-title { align-self: start; }
  .era-name { align-self: end; }
  .also-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .era { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "dot name" "dot title" "dot years"; }
  .era-dot { width: 44px; height: 44px; }
  .also-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* w2-1: About (the approved R43 frames): each era's outcome line sits under its name (14 px, 8 px below it), the render row's caption 16 px under the tiles, and the contact band's first tag is filled. */
.era-main { grid-area: name; display: grid; gap: 8px; align-self: center; }
.era-name { grid-area: auto; align-self: auto; }
.era-outcome { margin: 0; line-height: 18px; }
.tags a.tag-fill { background: var(--accent-text); color: var(--accent); }
.tags a.tag-fill:hover { background: transparent; color: var(--accent-text); }