/* Colour, type and spacing tokens live in design-tokens.css (light, dark, auto). */
  :root {
    --max: 840px;
    --max-wide: 1080px;
  }
  * { box-sizing: border-box; }
  /* `hidden` wins over component display rules (.btn is inline-block). */
  [hidden] { display: none !important; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.55;
    min-height: 100vh;
  }
  /* Text links are underlined everywhere; tobacco is 7.4:1 on paper. */
  a {
    color: var(--tobacco);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
  a:hover { text-decoration-thickness: 2px; }
  a:visited { color: var(--ink-mute); }

  /* Keyboard focus: a thick ink ring, never removed. */
  :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  main:focus { outline: none; }

  .skip {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 10;
    background: var(--ink);
    color: var(--paper);
    padding: 0.5rem 0.85rem;
    font-weight: 600;
  }
  .skip:focus, .skip:visited { color: var(--paper); }
  .skip:focus { top: 0.5rem; outline-color: var(--tobacco); }
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  code { font-family: var(--font-mono); overflow-wrap: anywhere; }

  .banner {
    background: var(--paper-deep);
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-mute);
    text-align: center;
    padding: 0.45rem 1rem;
  }
  .banner strong { color: var(--ink); font-weight: 600; }

  .wrap { width: min(100% - 2rem, var(--max-wide)); margin: 0 auto; }

  header.site {
    border-bottom: 1px solid var(--rule);
    padding: 1rem 0 0.85rem;
  }
  .header-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
  }
  .brand {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--ink);
  }
  .brand:hover { text-decoration: none; }
  /* Logo lockup (text as paths); the img alt carries the name. Compact lockup under 600px. */
  .brand picture, .brand img { display: block; height: 36px; width: auto; }
  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
    font-size: 0.92rem;
    flex: 1;
  }
  nav a, nav a:visited { color: var(--ink); }
  nav a[aria-current="page"] {
    color: var(--tobacco);
    font-weight: 600;
    text-decoration-thickness: 2px;
  }
  .search {
    display: flex;
    margin-left: auto;
    border: 1px solid var(--control);
    background: var(--white);
    border-radius: 2px;
    position: relative;
  }
  .search input {
    border: 0;
    background: transparent;
    padding: 0.4rem 0.65rem;
    font: inherit;
    font-size: 0.9rem;
    min-width: 14rem;
    color: var(--ink);
  }
  .search input::placeholder { color: var(--ink-mute); }
  .search button {
    border: 0;
    border-left: 1px solid var(--control);
    background: var(--paper-deep);
    color: var(--ink);
    padding: 0.4rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .search button:hover { background: var(--rule); }
  .search input:focus-visible, .search button:focus-visible { outline: none; }
  .search:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }

  main { padding: 2.5rem 0 3.5rem; }
  .narrow { width: min(100%, var(--max)); margin: 0 auto; }

  .claim {
    font-family: var(--font-serif);
    font-size: clamp(1.85rem, 4vw, 2.55rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
  }
  .claim-sub {
    color: var(--ink-mute);
    font-size: 1.05rem;
    margin: 0 0 1.75rem;
    max-width: 36em;
  }

  .cites {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 2.75rem;
  }
  @media (max-width: 640px) {
    .cites { grid-template-columns: 1fr; }
    .search { margin-left: 0; width: 100%; }
    .search input { min-width: 0; flex: 1; }
  }
  .cite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--white);
    border: 1px solid var(--rule);
    padding: 0.85rem 1rem;
    border-radius: 2px;
  }
  .cite code {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.92rem;
    color: var(--tobacco);
    overflow-wrap: anywhere;
  }
  .cite .meta {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--ink-mute);
    margin-top: 0.25rem;
    letter-spacing: 0.02em;
  }
  button.copy {
    flex-shrink: 0;
    border: 1px solid var(--tobacco);
    background: var(--tobacco);
    color: var(--paper);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.65rem;
    border-radius: 2px;
    cursor: pointer;
  }
  button.copy:not(.quiet):not(.mini):not(.done):not(:disabled):not(:active):hover { background: var(--tobacco-hover); border-color: var(--tobacco-hover); }
  button.copy.done {
    background: var(--paper-deep);
    color: var(--ink);
    border-color: var(--rule);
  }

  section.proof { margin: 2.75rem 0; }

  /* Home hero: real card fronts. Six across on desktop (two rows); on phones one row that scrolls inside
     itself (the page never scrolls sideways), about three cards in view with the next one peeking in.
     Flat: a hairline, no shadow, nothing moves on hover (the name underlines, as links do). */
  .gallery { margin: 0 0 2.5rem; }
  .gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .gallery-swipe { display: none; margin: 0 0 0.35rem; font-size: 0.72rem; color: var(--ink-mute); }
  .gallery-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem 0.85rem;
  }
  .gallery-row li { min-width: 0; }
  .gallery-row a { display: block; color: inherit; text-decoration: none; }
  .gallery-row a:visited { color: inherit; }
  .gallery-row img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-radius: 2px;
  }
  .gallery-row a:hover .g-who { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  .g-cap { display: block; padding-top: 0.45rem; line-height: 1.25; }
  .g-who {
    display: block;
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .g-set { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute); }
  .gallery-note { margin: 0.9rem 0 0; font-size: var(--fs-meta); color: var(--ink-mute); }
  @media (max-width: 900px) and (min-width: 641px) { .gallery-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .gallery { margin-bottom: 2rem; }
    .gallery-swipe { display: block; }
    .gallery-row {
      display: flex;
      gap: 0.75rem;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      /* Room for the focus ring inside the scroller; the end padding keeps a focused card clear of the
         right edge when the browser scrolls it in (acn.js also scrolls it into view on focus). */
      scroll-padding-inline: 0.4rem 30%;
      padding: 0.4rem 0.4rem 0.6rem;
      margin: -0.4rem -0.4rem 0;
    }
    .gallery-row li { flex: 0 0 29%; scroll-snap-align: start; }
    /* Names wrap at ~113px: two lines for all, so the set codes line up across the row. */
    .g-who { min-height: 2.5em; min-height: 2lh; }
  }
  /* Everyone gets the cue on narrow screens (overlay scrollbars hide the row's scrollbar); touch says "Swipe". */
  .gallery-swipe .cue-swipe { display: none; }
  @media (any-pointer: coarse) {
    .gallery-swipe .cue-scroll { display: none; }
    .gallery-swipe .cue-swipe { display: inline; }
  }
  .section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    margin: 0 0 0.35rem;
  }
  .section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
  }
  .section-note {
    color: var(--ink-mute);
    font-size: 0.95rem;
    margin: 0 0 1.1rem;
    max-width: 40em;
  }

  .tiles {
    display: grid;
    gap: 0.75rem;
  }
  .tiles.proof-scans { grid-template-columns: repeat(4, minmax(0, 190px)); }
  .tiles.proof-pairs { grid-template-columns: repeat(2, minmax(0, 330px)); }
  @media (max-width: 760px) {
    .tiles.proof-scans { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .tiles.proof-pairs { grid-template-columns: 1fr; }
  }
  .proof-credit { font-size: 0.78rem; color: var(--ink-mute); margin: 0.6rem 0 0.9rem; }
  .spec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); max-width: 40em; }
  .spec-list li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem;
    padding: 0.55rem 0; border-bottom: 1px solid var(--rule);
  }
  .spec-list code { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; color: var(--tobacco); overflow-wrap: normal; }
  .spec-list .spec-what { flex: 1 1 10em; font-size: 0.9rem; color: var(--ink); }

  .tile {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .tile:hover { border-color: var(--tobacco); }
  /* .tile clips (overflow:hidden), so the link's focus ring is drawn inset, or on the tile where :has() works. */
  .tile-main:focus-visible { outline-offset: -3px; }
  @supports selector(:has(a)) {
    .tile:has(.tile-main:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
    .tile-main:focus-visible { outline: none; }
  }
  .tile-main { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
  .tile-main:visited { color: inherit; }
  .tile-main:hover .cap code { text-decoration: underline; }
  .tile-copy { padding: 0 0.75rem 0.75rem; }
  .tile .face {
    aspect-ratio: 3 / 4;
    background: var(--paper-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--rule);
    position: relative;
  }
  .tile .face.scan { aspect-ratio: auto; padding: 0.75rem; }
  .tile .face.scan img { display: block; width: 100%; height: auto; aspect-ratio: 11 / 20; object-fit: contain; }
  .tile-pair .face.scan { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .tile .cap {
    padding: 0.65rem 0.75rem 0.8rem;
  }
  .tile .cap code {
    overflow-wrap: normal;     /* break only at the <wbr> after each dot, never inside a segment */
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.72rem;
    color: var(--tobacco);
    display: block;
    margin-bottom: 0.2rem;
  }
  .tile .cap .who {
    font-size: 0.82rem;
    color: var(--ink-mute);
  }
  .tile .cap .what { font-size: 0.82rem; color: var(--ink); margin-top: 0.15rem; }

  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2.75rem 0 2rem;
    padding: 1.35rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  @media (max-width: 640px) { .split { grid-template-columns: 1fr; } }
  .split h2 {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    font-weight: 600;
  }
  .split ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .split li {
    padding: 0.2rem 0;
    padding-left: 1rem;
    position: relative;
  }
  .split li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--tobacco);
    font-weight: 700;
  }
  .split.is-not li::before { color: var(--rule); }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.75rem;
  }
  .btn {
    display: inline-block;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
    padding: 0.55rem 0.95rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
  }
  .btn:hover { background: var(--paper-deep); text-decoration: none; color: var(--ink); }
  .btn:visited { color: var(--ink); }
  .btn.primary {
    background: var(--tobacco);
    border-color: var(--tobacco);
    color: var(--paper);
  }
  .btn.primary:hover { filter: brightness(1.06); color: var(--paper); }
  .btn.primary:visited { color: var(--paper); }

  /* Home: corpus figures. Typographic only, between the cites and Proof A. */
  .corpus-band { margin: 0 0 2.75rem; }
  .corpus-band ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .corpus-band li {
    padding: 1.1rem 1.25rem 1.2rem;
    min-width: 0;
  }
  .corpus-band li + li { border-left: 1px solid var(--rule); }
  .corpus-band li:first-child { padding-left: 0; }
  .corpus-band .fig {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 2.3vw, 1.55rem);
    line-height: 1.2;
    color: var(--ink-mute);
  }
  .corpus-band .fig strong {
    font-size: 1.55em;
    font-weight: 600;
    color: var(--tobacco);
    letter-spacing: -0.015em;
    font-variant-numeric: lining-nums;
  }
  .corpus-band .fig-note {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
  }
  @media (max-width: 640px) {
    .corpus-band ul { grid-template-columns: 1fr; }
    .corpus-band li { padding: 0.8rem 0; }
    .corpus-band li + li { border-left: 0; border-top: 1px solid var(--rule); }
  }

  .stats {
    margin-top: 2.5rem;
    font-size: 0.88rem;
    color: var(--ink-mute);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
  }
  .stats strong { color: var(--ink); font-weight: 600; }

  footer.site {
    border-top: 1px solid var(--rule);
    padding: 1.25rem 0 2rem;
    font-size: 0.85rem;
    color: var(--ink-mute);
  }
  footer.site .scope {
    border-left: 3px solid var(--gold);
    padding-left: 0.75rem;
    margin-bottom: 0.85rem;
    color: var(--ink);
  }
  footer.site nav.links { display: grid; grid-template-columns: repeat(3, minmax(0, 12rem)); gap: 1rem 2rem; order: 0; margin: 0.5rem 0 1.5rem; }
  footer.site .links h2 { font-size: var(--fs-micro, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); margin: 0 0 0.5rem; }
  footer.site .links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
  footer.site .links a { display: inline-block; padding: 0.2rem 0; font-size: 0.9375rem; }
  footer.site .snapshot { margin: 0; }
  @media (max-width: 560px) { footer.site nav.links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Shared page additions (registry / set / record / cite) ---- */
.banner.sample { background: var(--white); }
.banner.staging { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); }
.banner.staging strong { color: var(--paper); }
.page-title { font-size: 1.75rem; font-weight: 600; line-height: 1.25; margin: 0 0 0.35rem; }
.page-title code, code.acn, .acn {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: -0.01em;
}
.page-title code { color: var(--tobacco); font-weight: 500; }
.lede { color: var(--ink-mute); margin: 0 0 1.5rem; max-width: 40em; }
h2.section { font-size: 1.25rem; font-weight: 600; margin: 2.25rem 0 0.6rem; }
.muted { color: var(--ink-mute); }
.small { font-size: 0.85rem; }

.counts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: 0.92rem; color: var(--ink-mute); margin: 0 0 1.5rem; }
.counts strong { color: var(--ink); font-weight: 600; }

.decades { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.decades a, .years a {
  display: inline-block; border: 1px solid var(--control); text-decoration: none; border-radius: 2px;
  padding: 0.25rem 0.6rem; font-size: 0.9rem; background: var(--white);
}
.decades a, .decades a:visited { color: var(--ink); }
.years { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 1.25rem; }
.years a { font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; }
.years a .n { color: var(--ink-mute); font-family: var(--font-sans); font-size: 0.75rem; margin-left: 0.1rem; }
.years a.empty { background: transparent; color: var(--ink-mute); }
.decade { margin-bottom: 0.5rem; }
.decade h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); margin: 0.9rem 0 0; font-weight: 600; }

.year-jump { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; }
.year-jump input {
  font: inherit; font-family: "IBM Plex Mono", monospace; width: 5.5rem;
  border: 1px solid var(--control); background: var(--white); padding: 0.3rem 0.5rem; border-radius: 2px;
}
.year-jump input.set-q { width: 12rem; max-width: 100%; font-family: inherit; }
.btn.small, button.btn.small { padding: 0.3rem 0.7rem; font-size: 0.85rem; cursor: pointer; }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--white); margin: 0 0 0.75rem; }
table.data { border-collapse: collapse; width: 100%; font-size: 14px; }
table.data caption { text-align: left; }
table.data abbr { text-decoration: none; }
table.data th, table.data td { text-align: left; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 600; background: var(--paper-deep); white-space: nowrap; }
table.data tbody tr:nth-child(even) td { background: var(--zebra); }
table.data tbody tr:nth-child(even) th { background: var(--zebra); }
table.data td.acn, table.data th.acn { background: var(--white); white-space: nowrap; }
/* Only a first-column ACN can stick: a sticky cell further right would slide over the columns before it. */
table.data .acn:first-child { position: sticky; left: 0; z-index: 1; }
table.data thead th.acn { background: var(--paper-deep); }
table.data tbody tr:nth-child(even) .acn { background: var(--zebra); }
table.data tbody th { font-weight: 400; }
table.data .acn a, table.data td code, table.data th code { font-family: "IBM Plex Mono", monospace; font-size: 13px; }
table.data .acn a { color: var(--ink); }
table.data .acn a:hover { color: var(--tobacco); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.zero { color: var(--ink-mute); }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1.25rem; }
/* A <select> sizes to its longest option (publisher names run 60+ characters); never wider than the row. */
.toolbar > *, .toolbar select { max-width: 100%; min-width: 0; }
.toolbar select, .toolbar input[type=search] {
  font: inherit; font-size: 0.9rem; border: 1px solid var(--control); background: var(--white);
  padding: 0.3rem 0.5rem; border-radius: 2px; color: var(--ink);
}
.pager { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 0.9rem; margin: 0.75rem 0 0; }
.pager a { text-decoration: none; }
.pager .range, .pager .gap { border: 0 !important; }
.pager a, .pager span { border: 1px solid var(--rule); padding: 0.15rem 0.55rem; border-radius: 2px; font-variant-numeric: tabular-nums; }
.pager span.current { background: var(--tobacco); border-color: var(--tobacco); color: var(--paper); }

.callout { border-left: 3px solid var(--gold); background: var(--paper-deep); padding: 0.8rem 1rem; margin: 1.25rem 0; }
.callout p { margin: 0; }

.prevnext { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; font-size: 0.9rem; margin: 0 0 1.75rem; }
.prevnext a code { font-family: "IBM Plex Mono", monospace; font-size: 0.82rem; }
.record-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--rule); padding: 1rem 1.1rem; border-radius: 2px; margin: 0 0 1.5rem; }
.record-head h1 { margin: 0; font-size: inherit; font-weight: 500; }
.record-head code { font-family: "IBM Plex Mono", monospace; font-size: clamp(1rem, 2.6vw, 1.3rem); color: var(--tobacco); word-break: break-all; }
dl.fields { display: grid; grid-template-columns: 10rem 1fr; gap: 0; margin: 0; border-top: 1px solid var(--rule); }
dl.fields dt, dl.fields dd { margin: 0; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
dl.fields dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 600; padding-top: 0.7rem; }
dl.fields dd .desc { font-size: 1.05rem; }
.var-tag { display: inline-block; vertical-align: 0.1em; margin-right: 0.45rem; padding: 0.05rem 0.4rem; border: 1px solid var(--rule); border-radius: 2px;
  font: 600 0.7rem/1.5 var(--font-sans, sans-serif); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); }
@media (max-width: 560px) {
  dl.fields { grid-template-columns: 1fr; }
  dl.fields dt { border-bottom: 0; padding-bottom: 0; }
}

.citebox { display: grid; gap: 0.6rem; margin: 0.5rem 0 0; }
.citeline { display: flex; align-items: center; gap: 0.75rem; background: var(--white); border: 1px solid var(--rule); padding: 0.65rem 0.85rem; border-radius: 2px; }
.citeline .label { flex: 0 0 6.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 600; }
.citeline code { flex: 1; min-width: 0; font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 560px) { .citeline { flex-wrap: wrap; } .citeline .label { flex-basis: 100%; } }
button.copy.quiet { background: transparent; color: var(--tobacco); }
button.copy.quiet:not(:disabled):hover { background: var(--tobacco-wash); filter: none; }
button.copy:not(:disabled):active { transform: translateY(1px); background: var(--tobacco-wash); color: var(--tobacco); }
button.copy.quiet.done { background: var(--paper-deep); color: var(--ink); }

.builder { display: grid; gap: 0.85rem; margin: 0 0 1.5rem; }
.builder label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 600; display: block; margin-bottom: 0.25rem; }
.builder input {
  font-family: "IBM Plex Mono", monospace; font-size: 0.95rem; color: var(--ink);
  border: 1px solid var(--control); background: var(--white); padding: 0.45rem 0.6rem; border-radius: 2px; width: 100%;
}
.builder input::placeholder { color: var(--ink-mute); opacity: 1; font-style: italic; }
.builder label abbr { text-decoration: none; border: 0; cursor: inherit; }
@media (max-width: 560px) { .builder input, .search input { font-size: max(16px, 0.95rem); } }
html:not(.js) .cite-tool { display: none; }
.doc .cite-nojs { margin: 0 0 2rem; padding: 0.8rem 1rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--white); }
fieldset.segments { border: 0; margin: 0; padding: 0; min-width: 0; }
.segments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 560px) { .segments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.status { font-size: 0.9rem; color: var(--ink-mute); min-height: 1.4em; margin: 0; }
.status.bad { color: var(--tobacco); }
.results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.results li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.results li code { font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; }

button.copy:disabled { opacity: 0.55; cursor: not-allowed; }
/* Compact Copy beside an ACN in tables, lists and tiles. */
button.copy.mini {
  background: transparent; color: var(--tobacco); border-color: var(--control);
  font-size: 0.75rem; padding: 0.25rem 0.5rem; letter-spacing: 0.05em;
  min-height: 24px; min-width: 24px;
}
button.copy.mini.done { background: var(--paper-deep); color: var(--ink); }
button.copy.mini:not(:disabled):not(.done):hover { background: var(--tobacco-wash); }
.acn-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.45rem; max-width: 100%; }
.acn-cell > a { min-width: 0; max-width: 100%; }
/* In tables the Copy buttons line up at the cell's right edge, whatever the ACN's length. */
table.data .acn-cell { display: flex; flex-wrap: nowrap; justify-content: space-between; }
@media (min-width: 561px) { table.data td.team { white-space: nowrap; } }

/* Mobile menu button: shown only when JS is running (.js on <html>, set in <head>) and the screen is narrow. */
.menu-toggle {
  display: none;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink);
  background: var(--white); border: 1px solid var(--control); border-radius: 2px;
  padding: 0.35rem 0.8rem; cursor: pointer;
}
.menu-toggle::after { content: " ▾"; }
.menu-toggle[aria-expanded="true"]::after { content: " ▴"; }

/* ---- Narrow screens (down to 320px): nothing scrolls sideways ---- */
@media (max-width: 640px) {
  .js .menu-toggle { display: inline-block; margin-left: auto; }
  .search { order: 2; }
  .js #site-nav:not(.open) { display: none; }
  .js #site-nav.open { flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
  .js #site-nav.open a { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
  nav { order: 3; flex-basis: 100%; gap: 0.35rem 0.9rem; }
  nav a { padding: 0.15rem 0; }
  .header-row { gap: 0.75rem 1.25rem; }
  /* Copy stays at the right edge of each hero card; the ACN and its note wrap beside it. */
  .cite { flex-wrap: nowrap; align-items: center; }
  .cite > div { flex: 1; min-width: 0; }
  .cite > button.copy { flex: none; align-self: center; }
}
@media (max-width: 560px) {
  /* Data tables become one labelled block per row. */
  .table-wrap { overflow: visible; border: 0; background: transparent; }
  table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack td, table.data.stack tbody th { display: block; width: 100%; }
  table.data.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data.stack tr { background: var(--white); border: 1px solid var(--rule); margin: 0 0 0.6rem; padding: 0.35rem 0; }
  table.data.stack td, table.data.stack tbody th { border: 0; padding: 0.15rem 0.75rem; position: static; white-space: normal; background: transparent !important; }
  table.data.stack td:empty { display: none; }
  table.data.stack td::before, table.data.stack tbody th::before {
    content: attr(data-label);
    display: inline-block; min-width: 6.5rem;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 600;
  }
  table.data.stack td.num { text-align: left; }
  table.data.stack .acn, table.data.stack .acn-cell, table.data.stack .acn a { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  table.data.stack tbody th.acn { display: flex; align-items: center; }
  table.data.stack tbody th.acn::before { flex: none; }
  table.data.stack .acn-cell { flex: 1; flex-wrap: wrap; }
  .record-head > *, .prevnext > * { min-width: 0; overflow-wrap: anywhere; }
  .prevnext a code, .lede code, .page-title code { overflow-wrap: anywhere; }
  .page-title { overflow-wrap: anywhere; }
}

/* ---- Breadcrumbs ---- */
.crumbs { font-size: 0.85rem; margin: 0 0 1rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0; }
.crumbs li { min-width: 0; overflow-wrap: anywhere; color: var(--ink-mute); }
.crumbs li + li::before { content: "›"; content: "›" / ""; margin: 0 0.45rem; color: var(--ink-mute); }
/* 24 px minimum tap targets (WCAG 2.5.8) for small links. */
.crumbs a { display: inline-block; min-height: 24px; padding: 0.2rem 0; }
a.tap { display: inline-block; min-width: 24px; min-height: 24px; padding: 0.15rem 0.1rem; text-align: center; }
.credit a, .lb-cap a, table.data th a, .era-side a, .era-overview a, .prevnext a {
  display: inline-block; min-height: 24px; padding: 0.15rem 0; }
table.data th a { min-width: 24px; }
.crumbs code { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; }
.record-lede { margin: -0.75rem 0 1.25rem; font-size: 1.05rem; }

/* ---- Card record: the ACN as hero, with its PUB · YEAR · SET · NUM anatomy ---- */
.record-head.hero { align-items: flex-start; }
.hero-id { min-width: 0; flex: 1 1 16rem; }
.eyebrow { margin: 0 0 0.2rem; font-size: var(--fs-micro, 0.75rem); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 600; }
.record-head.hero h1 code { font-size: var(--fs-acn-xl, clamp(1.375rem, 1rem + 1.6vw, 2rem)); font-weight: 500; line-height: 1.2; word-break: normal; overflow-wrap: anywhere; }
.anatomy { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0; }
.anatomy > div { display: flex; flex-direction: column; min-width: 0; max-width: 100%; border: 1px solid var(--rule); background: var(--paper); border-radius: 2px; padding: 0.2rem 0.5rem; }
.anatomy dd { margin: 0; order: -1; }
.anatomy dd code { font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.9rem; color: var(--ink); overflow-wrap: anywhere; }
.anatomy dt { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 600; }
/* Very long modern IDs: one line, full ID on hover and in the Copy button. */
.ellipsis { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---- Search box suggestions (combobox) ---- */
.combo { position: relative; display: flex; flex: 1; min-width: 0; }
.combo input { flex: 1; }
.suggest {
  position: absolute; z-index: 20; top: calc(100% + 1px); left: -1px; right: -1px; min-width: 18rem;
  list-style: none; margin: 0; padding: 0.25rem 0;
  background: var(--white); border: 1px solid var(--control); border-radius: 2px;
  box-shadow: var(--shadow-menu); max-height: 22rem; overflow-y: auto;
}
.suggest li { padding: 0.45rem 0.7rem; cursor: pointer; display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; }
.suggest li .kind { color: var(--ink-mute); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.suggest li .lbl { min-width: 0; overflow-wrap: anywhere; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--paper-deep); }
.suggest li[aria-selected="true"] { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (max-width: 640px) { .suggest { min-width: 0; } }

/* ---- Search: refine form, players ---- */
.refine { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.75rem; margin: 0 0 1.25rem; }
.refine .field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.refine .field.grow { flex: 1 1 14rem; }
.refine label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 600; }
.refine input {
  font: inherit; font-size: 0.95rem; color: var(--ink); width: 100%;
  border: 1px solid var(--control); background: var(--white); padding: 0.4rem 0.55rem; border-radius: 2px;
}
.refine .field:not(.grow) input { width: 6.5rem; font-variant-numeric: tabular-nums; }
.chips { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips a { display: inline-block; border: 1px solid var(--control); background: var(--white); border-radius: 2px; padding: 0.25rem 0.6rem; text-decoration: none; }
.chips a:hover { background: var(--paper-deep); }
.results.compact li { padding: 0.35rem 0; font-size: 0.92rem; }

/* ---- Printable checklist: static/print.css ---- */
.checklist-table tbody { content-visibility: auto; }
.checklist-table code .seg { display: inline-block; }
.print-only { display: none; }
@media print {
  .print-only { display: inline; }
  table.data { line-height: 1.2; }
  .prevnext, .refine { display: none !important; }
  .table-wrap { overflow: visible; border: 0; }
  table.data { font-size: 9pt; }
  table.data th, table.data td { padding: 1.5pt 4pt; position: static !important; }
  table.data .acn a, table.data td code, table.data th code { font-size: 8pt; }
  table.data tr { break-inside: avoid; }
  table.data thead { display: table-header-group; }
  a { color: var(--ink); text-decoration: none; }
}

/* ---- Card art column: public-domain scan (pre-1931 sets) or placeholder art ---- */
.card-page { width: min(100%, var(--max-wide)); margin: 0 auto; }
.card-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.card-main { min-width: 0; max-width: 46rem; }
.art { position: sticky; top: 1rem; min-width: 0; }
.art figure { margin: 0; }
.ph-frame svg, .ph-thumb svg { display: block; width: 100%; height: auto; }
.ph-frame { box-shadow: 0 0 0 1px var(--rule); }
.ph-note { font-size: var(--fs-meta, 0.8125rem); color: var(--ink-mute); margin-top: 0.75rem; }
.photo-frame { position: relative; }
.art .photo img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px var(--rule); cursor: zoom-in; }
/* Enlarge sits under the scan, never over the card's printed name. */
.art .photo .zoom { display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 32px; margin-top: 0.4rem;
  border: 1px solid var(--control); background: var(--white); color: var(--ink); font: 600 13px var(--font-sans, sans-serif);
  padding: 0.3rem 0.6rem; border-radius: 2px; text-decoration: none; }
.art .photo .zoom:visited { color: var(--ink); }
.art .photo .zoom:hover { border-color: var(--tobacco); color: var(--tobacco); }
.credit { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--fs-meta, 0.8125rem); color: var(--ink-mute); margin-top: 0.75rem; border-top: 1px solid var(--rule); padding-top: 0.5rem; overflow-wrap: anywhere; }
.credit .k { font-size: var(--fs-micro, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }
.credit .fine { font-size: 0.75rem; }
dialog.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--lb-bg); color: var(--lb-ink); }
dialog.lightbox[open] { display: flex; flex-direction: column; }
dialog.lightbox::backdrop { background: var(--lb-backdrop); }
.lb-open body { overflow: hidden; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--lb-rule); }
.lb-t { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 40rem) {
  .lb-t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
.lb-x { font: 600 14px var(--font-sans, sans-serif); min-width: 44px; min-height: 44px; background: transparent; color: var(--lb-focus); border: 1px solid var(--lb-control); border-radius: 2px; cursor: pointer; }
.lb-x:focus-visible { outline: 3px solid var(--lb-focus); }
.lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem; min-height: 0; }
.lb-stage img { max-width: min(800px, 100%); max-height: 100%; width: auto; height: auto; cursor: zoom-out; }
.lb-cap { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; justify-content: center; padding: 0.8rem 1.25rem 1.1rem; font-size: 13px; }
.lb-cap a { color: var(--lb-link); }
img.thumb, .ph-thumb { display: block; width: 44px; height: auto; }
.ph-missing { display: block; aspect-ratio: 5 / 7; background: repeating-linear-gradient(135deg, var(--paper-deep) 0 6px, var(--white) 6px 12px); border: 1px solid var(--rule); }
.art .ph-missing { width: 100%; }
table.data .img-col { width: 60px; }
@media (max-width: 760px) {
  .card-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .art { position: static; }
  .art .ph { display: flex; gap: 1rem; align-items: flex-start; }
  .art .ph-frame { flex: 0 0 96px; }
  .art .ph-note { margin-top: 0; }
  .art .photo-frame { max-width: 220px; margin: 0 auto; }
  .lb-stage { padding: 0.6rem; }
  table.data.stack.with-images td.img-col::before { content: none; }
}

/* ---- List / grid toggles, player card grid ---- */
nav.view-toggle { display: inline-flex; flex: 0 0 auto; order: 0; flex-basis: auto; gap: 0; border: 1px solid var(--control); border-radius: 2px; margin-left: auto; }
.view-toggle > * { padding: 0.35rem 0.8rem; min-height: 32px; display: inline-flex; align-items: center; font-size: var(--fs-small, 0.9375rem); color: var(--ink); }
.view-toggle a { text-decoration: none; }
.view-toggle a:hover { background: var(--paper-deep); }
.view-toggle a:visited { color: var(--ink); }
.view-toggle [aria-current] { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.card-grid { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.card-grid a { display: flex; flex-direction: column; gap: 0.15rem; color: var(--ink); font-size: var(--fs-meta, 0.8125rem); line-height: 1.3; }
.card-grid a:visited { color: var(--ink); }
.card-grid a:hover .tile-art { box-shadow: 0 0 0 2px var(--tobacco); }
.card-grid .tile-art { display: block; aspect-ratio: 5 / 7; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--rule); margin-bottom: 0.35rem; }
.card-grid .tile-art img.thumb, .card-grid .tile-art .ph-thumb { width: 100%; height: 100%; object-fit: contain; }
.card-grid .g-year { font-weight: 700; }
.card-grid .g-acn { font-size: 0.75rem; color: var(--ink-mute); overflow-wrap: anywhere; }
.card-grid .g-acn .seg { display: inline-block; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } }
@media print {
  .lightbox, .photo .zoom, .view-toggle { display: none !important; }
  .card-layout { display: block; }
  .art { display: none; }
}
/* Shared thumbnail placeholder: one cached background instead of an SVG per row. */
.ph-thumb.ph-css {
  aspect-ratio: 5 / 7;
  background: var(--white) no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Crect width='100' height='140' fill='%23FBF8F0'/%3E%3Crect x='8' y='8' width='84' height='100' fill='%23C9C1B2'/%3E%3Ccircle cx='50' cy='42' r='15' fill='%23F3E9D2'/%3E%3Cpath d='M50 70 L80 92 L50 108 L20 92 Z' fill='%233B2F27' opacity='.15'/%3E%3Crect x='14' y='116' width='44' height='4.5' fill='%233B2F27' opacity='.7'/%3E%3Crect x='14' y='124.5' width='28' height='3.5' fill='%233B2F27' opacity='.4'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px var(--rule);
}

/* ---- Era pages ---- */
.era-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: center; background: var(--paper-deep); border: 1px solid var(--rule); padding: 1.5rem 1.75rem; margin: 0 0 1.75rem; }
.era-title { font-family: var(--font-serif, Georgia, serif); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 600; line-height: 1.05; margin: 0.15rem 0 0.25rem; }
.era-years { font-family: var(--font-serif, Georgia, serif); font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; }
.era-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; }
.era-stats dt { font-size: var(--fs-micro, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); }
.era-stats dd { margin: 0; font-family: var(--font-mono, monospace); font-size: 1.25rem; font-weight: 600; }
.era-motif svg { display: block; width: 100%; height: auto; max-height: 180px; }
.era-intro-row { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; align-items: start; margin-bottom: 1.5rem; }
.era-intro { font-family: var(--font-serif, Georgia, serif); font-size: var(--fs-lede, 1.1875rem); }
.era-intro .eyebrow, .era-side .eyebrow { font-family: var(--font-sans, sans-serif); }
.era-side { border-top: 3px solid var(--tobacco); background: var(--white); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1rem 1.1rem; }
.era-side h2, .era-side h3 { margin: 0 0 0.5rem; }
.era-side h3 { margin-top: 1rem; }
.era-side form { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
.era-side input[type=search] { flex: 1 1 auto; min-width: 0; font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--control); background: var(--white); color: var(--ink); }
.era-pubs { list-style: none; padding: 0; margin: 0; font-size: var(--fs-small, 0.9375rem); }
.era-pubs li { padding: 0.15rem 0; }
.ystrip { list-style: none; padding: 0 0 0.5rem; margin: 0 0 1.75rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(7.5rem, 1fr); gap: 0.5rem; overflow-x: auto; }
.ystrip a { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.7rem; background: var(--white); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; height: 100%; }
.ystrip a:hover { border-color: var(--tobacco); }
.ystrip .y { font-family: var(--font-serif, Georgia, serif); font-size: 1.35rem; font-weight: 600; color: var(--tobacco); }
.ystrip .n { font-size: 0.75rem; color: var(--ink-mute); }
.ystrip .bar { display: block; height: 4px; background: var(--paper-deep); margin-top: auto; }
.ystrip .bar > span { display: block; height: 100%; background: var(--tobacco); }
.ystrip-empty { margin: -1rem 0 1.75rem; }
.key-sets { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.key-sets a { display: flex; flex-direction: column; gap: 0.2rem; background: var(--white); border: 1px solid var(--rule); padding: 0 0 0.75rem; color: var(--ink); text-decoration: none; height: 100%; }
.key-sets a > :not(.tile-art) { padding: 0 0.75rem; overflow-wrap: anywhere; }
.key-sets a:hover { border-color: var(--tobacco); }
.key-sets .tile-art { display: block; background: var(--paper-deep); padding: 0.75rem 22%; margin-bottom: 0.5rem; }
.key-sets .tile-art svg { display: block; width: 100%; height: auto; }
.key-sets code { color: var(--tobacco); font-size: 0.8125rem; }
.era-nav { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1rem; }
nav.era-nav { display: block; }
.era-prevnext { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.era-prevnext a { display: flex; flex-direction: column; text-decoration: none; }
.era-prevnext a.next { text-align: right; }
.era-prevnext strong { font-family: var(--font-serif, Georgia, serif); font-size: 1.15rem; color: var(--tobacco); }
.era-nav .chips a[aria-current] { background: var(--tobacco); color: var(--on-tobacco, var(--paper)); border-color: var(--tobacco); }
.era-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; }
.era-list a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem; background: var(--white); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.era-list a:hover { border-color: var(--tobacco); }
.era-list strong { font-family: var(--font-serif, Georgia, serif); font-size: 1.2rem; }
.era-list .era-years { font-size: 1rem; margin: 0; color: var(--tobacco); }
@media (max-width: 760px) {
  .era-hero { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; }
  .era-motif { order: -1; }
  .era-motif svg { max-height: 90px; }
  .era-intro-row { grid-template-columns: minmax(0, 1fr); }
  .key-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ystrip { grid-auto-columns: 7rem; }
}

/* ---- Publisher pages ---- */
.pub-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; margin: 0 0 1.5rem; }
.pub-badge { margin: 0; min-width: 4.5rem; min-height: 4.5rem; padding: 0 0.6rem; display: flex; align-items: center; justify-content: center; background: var(--tobacco); color: var(--on-tobacco, var(--paper)); font: 600 1.35rem var(--font-mono, monospace); border-radius: 2px; }
.pub-title .page-title { font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); margin: 0; }
.pub-title p { margin: 0.25rem 0 0; }
.pub-stats { border: 1px solid var(--rule); background: var(--white); padding: 0.6rem 1rem; }
.pub-overview { margin: 0 0 1.5rem; background: var(--white); border: 1px solid var(--rule); padding: 0.75rem 1rem 0.5rem; }
.pub-overview .eyebrow { margin: 0 0 0.4rem; }
/* One cell per year, every year labelled; rows start on a decade (10 a row on phones, 20 wider). */
.pub-chart { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 0.35rem 2px; }
.pub-chart li { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.pub-chart .b { display: flex; align-items: flex-end; height: 2.25rem; border-bottom: 1px solid var(--rule); }
.pub-chart .b > span { display: block; width: 100%; min-height: 4px; background: var(--tobacco); }
.pub-chart .y { font-size: 0.6875rem; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; overflow: hidden; }
.pub-chart .none .y { color: var(--ink-mute); }
@media (max-width: 760px) {
  .pub-chart { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.2rem 2px; }
  .pub-chart .b { height: 1.75rem; }
}
.pub-decade { border-top: 2px solid var(--ink); margin: 0 0 0.5rem; }
.pub-decade summary { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0; cursor: pointer; list-style-position: outside; }
.pub-decade summary h2 { display: inline; font-family: var(--font-serif, Georgia, serif); font-size: 1.35rem; margin: 0; }
.pub-years { list-style: none; padding: 0; margin: 0 0 1rem; }
.pub-year { display: grid; grid-template-columns: 4rem 11rem minmax(0, 1fr); gap: 0.25rem 1rem; align-items: start; padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.pub-year h3 { margin: 0; font-family: var(--font-serif, Georgia, serif); font-size: 1.15rem; }
.pub-year p { margin: 0.15rem 0 0; }
.pub-year .bar { display: block; height: 3px; background: var(--paper-deep); margin-top: 0.3rem; }
.pub-year .bar > span { display: block; height: 100%; background: var(--tobacco); }
.pub-sets { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pub-sets a { display: inline-block; padding: 0.2rem 0.5rem; border: 1px solid var(--rule); background: var(--white); font-size: var(--fs-meta, 0.8125rem); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pub-sets a:hover { border-color: var(--tobacco); }
.pub-sets code { color: var(--tobacco); font-size: 0.75rem; }
.pub-sets a.more { border-style: dashed; color: var(--tobacco); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .pub-head { grid-template-columns: auto minmax(0, 1fr); }
  .pub-stats { grid-column: 1 / -1; }
  .pub-year { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .pub-year .pub-sets { grid-column: 1 / -1; }
}
@media print { .pub-decade:not([open]) > :not(summary) { display: block; } }

/* ---- Theme: light by default; dark or auto only when the reader picks it (tokens in design-tokens.css) ---- */
.theme-btn { display: none; }
.js .theme-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 37px; height: 37px; padding: 0; cursor: pointer;
  border: 1px solid var(--control); border-radius: 2px; background: transparent; color: var(--ink);
}
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn:hover { background: var(--paper-deep); }
.theme-btn .moon { display: none; }
.theme-btn.phone, .theme-row { display: none !important; }
.brand .dk { display: none; }
:root[data-theme="dark"] .theme-btn .sun, :root[data-theme="dark"] .brand .lt { display: none; }
:root[data-theme="dark"] .theme-btn .moon, :root[data-theme="dark"] .brand .dk { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .theme-btn .sun, :root[data-theme="auto"] .brand .lt { display: none; }
  :root[data-theme="auto"] .theme-btn .moon, :root[data-theme="auto"] .brand .dk { display: block; }
}
@media (forced-colors: active) and (prefers-color-scheme: dark){:root[data-theme] .brand .lt{display:none}:root[data-theme] .brand .dk{display:block}}
@media (forced-colors: active) and (prefers-color-scheme: light){:root[data-theme] .brand .dk{display:none}:root[data-theme] .brand .lt{display:block}}
@media (max-width: 640px) {
  .theme-btn.desk { display: none !important; }
  .js .theme-btn.phone { display: inline-flex !important; width: 36px; height: 36px; margin-left: auto; }
  .js .theme-btn.phone ~ .menu-toggle { margin-left: 0; }
  .js #site-nav.open .theme-row:not([hidden]) {
    display: flex !important; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0 0.35rem;
  }
}
.theme-row > span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.theme-seg { display: inline-flex; border: 1px solid var(--control); border-radius: 2px; overflow: hidden; }
.theme-seg button {
  font: inherit; font-size: 0.85rem; font-weight: 600; min-height: 36px; padding: 0.4rem 0.85rem; cursor: pointer;
  background: transparent; color: var(--ink); border: 0; border-left: 1px solid var(--rule);
}
.theme-seg button:first-child { border-left: 0; }
.theme-seg button[aria-pressed="true"] { background: var(--tobacco); color: var(--on-tobacco); }
:root[data-theme="dark"] .ph-art, :root[data-theme="dark"] .ph-thumb { filter: brightness(0.85); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .ph-art, :root[data-theme="auto"] .ph-thumb { filter: brightness(0.85); } }

/* ---- Spec and Essay (/spec/, /essay/: content/*.html via editorial.doc_page). Tokens only, so light and dark both follow. */
.doc { max-width: 42em; }
/* Reading measure: about 70 characters a line for running text (66ch measures about 65–70 at 1440px; WCAG 1.4.8). */
.doc p, .doc ul, .doc ol, .doc .callout { max-width: 66ch; }
.doc-toc ol { max-width: none; }
.doc .page-title { font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem); margin-bottom: 0.6rem; }
.doc .lede { font-size: var(--fs-lede); line-height: 1.5; margin-bottom: 0.75rem; }
.doc .doc-meta { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 1.75rem; }
.doc h2:not(.doc-toc-h) { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; margin: 2.5rem 0 0.7rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.doc p, .doc li { line-height: 1.65; }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li { margin: 0.35rem 0; }
.doc li::marker { color: var(--ink-mute); }
.doc code { font-size: 0.88em; background: var(--paper-deep); padding: 0.05em 0.3em; border-radius: 2px; }
.doc a code { color: inherit; }
.doc pre.grammar { margin: 1rem 0 1.25rem; padding: 1rem 1.15rem; background: var(--paper-deep); border-left: 3px solid var(--tobacco); border-radius: 2px; overflow-x: auto; }
.doc pre.grammar code { background: none; padding: 0; font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.4rem); font-weight: 500; color: var(--tobacco); letter-spacing: 0.02em; }
.doc pre.example { margin: 0.75rem 0 1rem; padding: 0.8rem 1rem; background: var(--paper-deep); border-left: 3px solid var(--rule); border-radius: 2px; max-width: 66ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc pre.example code { background: none; padding: 0; font-size: var(--fs-small); line-height: 1.55; }
.doc .cite-tool { margin: 0 0 2rem; padding: 1.1rem 1.15rem 0.4rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--white); }
.doc h2.cite-tool-h { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; margin: 0 0 0.5rem; padding: 0; border: 0; }
.corrections-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.corrections-list li { margin: 0 0 0.4rem; line-height: 1.5; }
.corrections-list time { font-weight: 600; }
.doc .callout p { font-size: var(--fs-lede); line-height: 1.45; }
nav.doc-toc { display: block; font-size: inherit; margin: 0 0 2rem; padding: 1rem 1.15rem 0.9rem; border: 1px solid var(--rule); background: var(--white); border-radius: 2px; }
.doc-toc-h { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 0.5rem; }
.doc-toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; font-size: var(--fs-small); }
.doc-toc li { margin: 0 0 0.3rem; break-inside: avoid; line-height: 1.4; }
.doc-toc a, .doc-toc a:visited { color: var(--tobacco); text-decoration: none; }
.doc-toc a:hover { text-decoration: underline; }
/* Essay: serif reading body; the closing line is a pull quote. */
.doc-essay p, .doc-essay li { font-family: var(--font-serif, Georgia, serif); font-size: 1.125rem; line-height: 1.7; }
.doc-essay .lede { font-size: 1.3rem; color: var(--ink); }
.doc-essay code { font-family: var(--font-mono); font-size: 0.82em; }
.doc p.pull { margin: 2.25rem 0; padding: 1.1rem 0; border-top: 2px solid var(--tobacco); border-bottom: 1px solid var(--rule); }
.doc-essay p.pull { font-family: var(--font-mono); font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.35rem); font-weight: 500; line-height: 1.45; color: var(--tobacco); }
@media (max-width: 560px) { .doc-toc ol { columns: 1; } }
@media print { nav.doc-toc { display: none; } .doc .cite-tool, .doc .cite-nojs { display: none; } .doc h2:not(.doc-toc-h) { break-after: avoid; } }