:root {
    --bg: #f4efe2;
    --ink: #2e2718;
    --ink2: #5b5238;
    --label: #6f6240; /* >=4.5:1 on --bg AND --card (was #8a7c56 at ~3.6:1) */
    --link: #4a5f8c;
    --rule: #d8caa2;
    --card: #fffaf0;
    --nav: #efe7d4;
    /* Route-map cartography (light-only pages). Sea = soft blue, land = warm
       cream, coast = blue-grey. Kept separate from the paper tokens above so
       the maps read as maps; retune here and every route map updates. */
    --map-sea: #d3e3ef;
    --map-land: #f7f1e1;
    --map-coast: #9db8c9;
    --map-muni: #cdbf9b;   /* light municipality borders (urban maps) */
    --map-pref: #8aa0b4;   /* heavier prefecture borders */
    --map-label: #33414f;  /* place-name labels + scale bar */
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: calc(17px * var(--text-scale))/1.6 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    padding: 0 0 64px;
  }
  a { color: var(--link); }

  /* Site masthead — large logo (back to the live map) + section menu beneath.
     Non-sticky, so the in-article sticky ToC never has to clear it. */
  .site-header {
    background: var(--nav); border-bottom: 1px solid var(--rule);
    padding: 22px 20px 0;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .hdr-logo { display: inline-block; line-height: 0; }
  .hdr-logo img { height: 52px; width: auto; display: block; }
  @media (max-width: 560px) { .hdr-logo img { height: 38px; } }
  .site-menu {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
    padding: 14px 0 12px;
  }
  /* Single-row masthead at desktop widths — hand-synced with the live
     map's SiteMasthead (Nationwide_AllRail.jsx), same 1024px breakpoint,
     per the cross-site-consistency note there (design review 2026-07-10:
     the stacked column spent ~100px of viewport on brand chrome). */
  @media (min-width: 1024px) {
    .site-header {
      flex-direction: row; justify-content: space-between; align-items: center;
      text-align: left; padding: 10px 20px;
    }
    .hdr-logo img { height: 34px; }
    .site-menu { padding: 0; }
  }
  .hdr-link {
    font: 600 calc(13px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-transform: uppercase; letter-spacing: 0.07em;
    text-decoration: none; color: var(--ink2);
    padding: 9px 15px; border-radius: 8px;
  }
  .hdr-link:hover { background: var(--card); color: var(--link); }
  /* Active section — darker ink + an accent underline, echoing the live map's
     mobile tab strip so the masthead reads as a Live map <-> Articles toggle. */
  .hdr-link.active { color: var(--ink); box-shadow: inset 0 -3px 0 #5ab2ff; border-radius: 8px 8px 0 0; }
  .hdr-link.active:hover { background: transparent; color: var(--ink); }
  /* Masthead search — a plain GET to /articles/?q=…, which the hub already
     reads on load, so it works with scripting disabled. A live suggestion
     dropdown (HEADER_SEARCH_SCRIPT) is layered on top as enhancement. */
  .hdr-search { display: inline-flex; align-items: center; margin-left: 6px; position: relative; }
  .hdr-search input {
    font: calc(13px * var(--text-scale))/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink); background: var(--card);
    border: 1px solid var(--rule); border-radius: 999px;
    padding: 7px 14px; width: 170px; transition: width 0.15s ease;
  }
  .hdr-search input:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: var(--link); width: 230px; }
  @media (max-width: 560px) { .hdr-search input { width: 128px; } .hdr-search input:focus { width: 160px; } }
  /* Autocomplete dropdown under the masthead search box */
  .hdr-suggest {
    position: absolute; top: calc(100% + 5px); right: 0; left: auto; z-index: 60;
    min-width: 250px; max-width: 360px; max-height: min(60vh, 420px); overflow: auto;
    margin: 0; padding: 4px; list-style: none;
    background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(46, 39, 24, 0.20);
  }
  .hdr-suggest[hidden] { display: none; }
  .hdr-sg a { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
  .hdr-sg.on a, .hdr-sg a:hover { background: rgba(74, 95, 140, 0.10); }
  .hdr-sg-t { font: 600 calc(14px * var(--text-scale))/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; }
  .hdr-sg-j { color: var(--label); font-size: calc(12px * var(--text-scale)); }
  .hdr-sg-ty { margin-left: auto; font: 600 calc(9px * var(--text-scale))/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; color: var(--label); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 7px; white-space: nowrap; }
  @media (max-width: 560px) { .hdr-suggest { position: fixed; left: 8px; right: 8px; top: 64px; min-width: 0; max-width: none; } }
  /* Language toggle (EN · 日本語) in the masthead */
  .lang-toggle { margin-top: 8px; font: 600 calc(12px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.04em; }
  .lang-toggle .lang-cur { color: var(--ink); }
  .lang-toggle .lang-alt { color: var(--label); text-decoration: none; }
  .lang-toggle .lang-alt:hover { color: var(--link); text-decoration: underline; }
  .lang-toggle .lang-sep { color: var(--rule); margin: 0 7px; }

  main { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
  header.page { padding: 36px 0 4px; } /* index + static pages; articles use .a-head */
  .eyebrow {
    font: 600 calc(12px * var(--text-scale))/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--label);
    margin: 0 0 10px;
  }
  .ey-sep { margin: 0 7px; color: var(--rule); }
  h1 { font-size: clamp(33px, 4.2vw, 42px); line-height: 1.1; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.01em; }
  .name-ja { font-size: calc(20px * var(--text-scale)); color: var(--ink2); margin: 0 0 4px; }
  .lead { font-size: calc(18px * var(--text-scale)); margin: 14px 0 8px; max-width: 70ch; }
  p { margin: 0 0 16px; }

  /* ===== Article shell v2 =====
     One grid for the whole article. Title, standfirst, hero, prose, timeline,
     and CTAs all live in column 1 (one shared left AND right edge — this is
     what fixes the old three-competing-right-edges misalignment); the rail
     (quick-facts infobox + ToC) occupies a named area spanning both rows, so
     its cell is full page height and the inner wrapper can stay sticky for the
     entire scroll (the old layout's sticky died after ~one viewport because
     its cell was only as tall as the infobox itself). On small screens the
     areas restack: head → rail (compact facts + chip ToC) → body. */
  .article-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rail" "body"; column-gap: 48px; }
  .a-head { grid-area: head; padding: 34px 0 0; }
  .a-rail { grid-area: rail; min-width: 0; margin-top: 24px; }
  .a-body { grid-area: body; min-width: 0; }
  @media (min-width: 880px) {
    .article-grid { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "head rail" "body rail"; }
    .a-rail { margin-top: 0; }
    .a-rail-in {
      position: sticky; top: 18px; padding-top: 34px;
      /* Short viewports: the rail (infobox + mini-map + ToC) can total
         ~800px; without a bound the stuck rail's tail (Sources/Gallery
         ToC entries) was clipped below the fold for the whole scroll
         (design review 2026-07-10). It now scrolls internally. */
      max-height: calc(100vh - 18px); overflow-y: auto; overscroll-behavior: contain;
    }
  }
  .a-head .lead {
    font-size: calc(19px * var(--text-scale)); line-height: 1.7; color: var(--ink);
    margin: 18px 0 0; padding-bottom: 28px; border-bottom: 1px solid var(--rule);
  }
  .toc {
    border: 1px solid var(--rule); border-radius: 10px; background: var(--card);
    padding: 12px 14px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .toc-h {
    font: 600 calc(11px * var(--text-scale))/1.4 system-ui, sans-serif; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--label); margin: 0 0 8px;
  }
  .toc ul { list-style: none; margin: 0; padding: 0; }
  .toc li { margin: 0 0 4px; }
  .toc a {
    display: block; padding: 5px 8px; border-radius: 6px;
    font-size: calc(14px * var(--text-scale)); text-decoration: none; color: var(--ink2);
  }
  .toc a:hover { background: rgba(74,95,140,0.08); color: var(--link); }
  .toc a.active { background: rgba(74,95,140,0.1); color: var(--link); font-weight: 600; }
  /* Small screens: the ToC becomes a horizontal "on this page" chip row */
  @media (max-width: 879px) {
    .toc ul { display: flex; flex-wrap: wrap; gap: 7px; }
    .toc li { margin: 0; }
    .toc a { border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; font-size: calc(13px * var(--text-scale)); background: var(--bg); }
  }

  .sections { min-width: 0; }
  /* Collapsible sections, mobile-Wikipedia style: each section is a native
     <details> whose <summary> carries the encyclopedia h2 (serif, hairline
     rule). The lead, hero, and quick facts stay always-visible above; the
     named sections (History/Timeline/Sources/Gallery) start collapsed and
     expand on tap/click — no JS required to operate, content stays in the
     served HTML (Cmd 6/8), and the ToC/print scripts auto-expand as needed. */
  .section { margin: 0; }
  details.section > summary { list-style: none; cursor: pointer; }
  details.section > summary::-webkit-details-marker { display: none; }
  details.section > summary:hover h2.sec-title { color: var(--link); }
  details.section > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
  h2.sec-title {
    font: 700 calc(24px * var(--text-scale))/1.3 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    color: var(--ink); margin: 42px 0 0; padding-bottom: 8px;
    border-bottom: 1px solid var(--rule); scroll-margin-top: 24px;
    position: relative; padding-right: 36px;
  }
  h2.sec-title::after {
    content: "▸"; position: absolute; right: 8px; top: 4px;
    font-size: calc(17px * var(--text-scale)); color: var(--label);
  }
  details.section[open] > summary h2.sec-title::after { content: "▾"; color: var(--ink2); }
  .section:first-child > summary h2.sec-title { margin-top: 30px; }
  .sec-body { padding-top: 14px; }
  .sections p { max-width: 70ch; line-height: 1.7; }
  .sec-body > p, .sec-body > ul { margin-top: 0; }
  .sec-body > :last-child { margin-bottom: 26px; }

  /* Timeline — year pill + a continuous vertical rail along the event text */
  ul.events { list-style: none; margin: 10px 0 0; padding: 0; }
  ul.events li { display: grid; grid-template-columns: 66px minmax(0, 1fr); }
  ul.events li .yr {
    font: 700 calc(14px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums; color: var(--ink2);
    background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
    padding: 7px 0 6px; text-align: center; height: fit-content;
  }
  ul.events li .ev {
    font-size: calc(16px * var(--text-scale)); line-height: 1.65; color: var(--ink);
    border-left: 2px solid var(--rule); margin-left: 16px;
    padding: 5px 0 26px 18px;
  }
  ul.events li:last-child .ev { padding-bottom: 8px; }
  .sources ul { list-style: none; margin: 0; padding: 0; }
  .sources a { color: var(--link); }
  .sources li { margin-bottom: 6px; }
  .ja-history p { color: var(--ink2); }
  .src-note { font: calc(13px * var(--text-scale))/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--label); margin-top: 6px; }

  /* Lines index page */
  .index-jump { margin: 18px 0 8px; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
  .index-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .index-jump a {
    display: inline-block; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
    background: var(--card); text-decoration: none; color: var(--ink2); font-size: calc(13px * var(--text-scale));
  }
  .index-jump a:hover { border-color: var(--link); color: var(--link); }
  .grp-count { font-variant-numeric: tabular-nums; color: var(--label); font-size: 0.82em; font-weight: 600; }
  .line-group { margin: 28px 0 0; scroll-margin-top: 70px; }
  .line-group h2 {
    font: 600 calc(13px * var(--text-scale))/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--label);
    margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
  }
  .line-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
  @media (min-width: 620px) { .line-list { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
  .line-list a {
    display: flex; align-items: baseline; gap: 8px; padding: 9px 8px; border-radius: 7px;
    text-decoration: none; color: var(--ink); border-bottom: 1px solid rgba(216,202,162,0.45);
  }
  .line-list a:hover { background: rgba(74,95,140,0.07); }
  .li-en { font-weight: 600; }
  .li-ja { color: var(--label); font-size: calc(13px * var(--text-scale)); }

  .backlink {
    display: inline-block; margin-top: 28px; padding: 10px 16px;
    background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
    color: var(--link); text-decoration: none; font-weight: 600;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: calc(15px * var(--text-scale));
  }
  .backlink:hover { border-color: var(--link); }

  /* Mini route map under the quick facts (line articles) */
  .mini-map { margin: 0 0 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); overflow: hidden; }
  .mini-map svg { display: block; width: 100%; height: auto; background: #fdf9ee; }
  .mini-map figcaption {
    font: 600 calc(10.5px * var(--text-scale))/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-transform: uppercase; letter-spacing: 0.07em; color: var(--label);
    padding: 7px 12px; border-top: 1px solid var(--rule);
  }

  /* Related-articles pill row (nav between articles, outside the sections) */
  .related { margin-top: 34px; }
  .rel-h {
    font: 700 calc(11px * var(--text-scale))/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--label); margin: 0 0 10px;
  }
  .related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .related a {
    display: inline-flex; align-items: baseline; gap: 8px;
    border: 1px solid var(--rule); background: var(--card); border-radius: 999px;
    padding: 8px 14px; text-decoration: none;
  }
  .related a:hover { border-color: var(--link); }
  .rel-name { font: 600 calc(14px * var(--text-scale))/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); }
  .rel-type { font: 600 calc(10px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; color: var(--label); }

  /* Article-end call-to-action row (primary = live map / hub, ghost = index) */
  .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
  .btn-primary, .btn-ghost {
    display: inline-block; padding: 11px 18px; border-radius: 9px;
    text-decoration: none; font-weight: 600; font-size: calc(15px * var(--text-scale));
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .btn-primary { background: var(--link); border: 1px solid var(--link); color: #fffaf0; }
  .btn-primary:hover { background: #3e5179; }
  .btn-ghost { background: var(--card); border: 1px solid var(--rule); color: var(--link); }
  .btn-ghost:hover { border-color: var(--link); }
  footer.page {
    margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule);
    font: calc(13px * var(--text-scale))/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--label);
  }

  /* Multiple nav links group on the right */
  .nav-links { display: flex; align-items: center; gap: 8px; }

  /* Quick-facts infobox (sidebar; every value from verified fields) */
  .infobox {
    border: 1px solid var(--rule); border-top: 3px solid var(--link);
    border-radius: 10px; background: var(--card);
    padding: 13px 16px 5px; margin-bottom: 16px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .infobox .ib-h {
    font: 700 calc(11px * var(--text-scale))/1.4 system-ui, sans-serif; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--label); margin: 0 0 2px;
  }
  /* No column gap: the dt's right padding carries the spacing instead, so the
     per-row hairline (border on both cells) reads as one continuous line. */
  .infobox dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .infobox dt {
    color: var(--label); font-size: calc(11px * var(--text-scale)); text-transform: uppercase;
    letter-spacing: 0.04em; white-space: nowrap; align-self: baseline;
    padding: 9px 14px 9px 0; border-bottom: 1px solid rgba(216,202,162,0.45);
  }
  .infobox dd {
    margin: 0; font-size: calc(14px * var(--text-scale)); line-height: 1.5; color: var(--ink);
    padding: 8px 0 9px; border-bottom: 1px solid rgba(216,202,162,0.45);
  }
  .infobox dt:last-of-type, .infobox dd:last-of-type { border-bottom: none; }

  /* Rolling-stock index entries (name + ja + a meta sub-line) */
  .rs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
  @media (min-width: 620px) { .rs-list { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
  .rs-list a {
    display: block; padding: 10px 8px; border-radius: 7px; text-decoration: none;
    color: var(--ink); border-bottom: 1px solid rgba(216,202,162,0.45);
  }
  .rs-list a:hover { background: rgba(74,95,140,0.07); }
  .rs-list .li-en { font-weight: 600; }
  .rs-list .li-ja { color: var(--label); font-size: calc(13px * var(--text-scale)); margin-left: 6px; }
  .rs-meta {
    display: block; margin-top: 2px; color: var(--label); font-size: calc(12.5px * var(--text-scale));
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  /* Articles hub (/articles/) — category overview cards + full per-category lists */
  .cat-cards { display: grid; grid-template-columns: 1fr; gap: 13px; margin: 22px 0 8px; }
  @media (min-width: 560px) { .cat-cards { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .cat-cards { grid-template-columns: repeat(3, 1fr); } }
  .cat-card {
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid var(--rule); border-left: 4px solid var(--cc-accent, var(--link));
    border-radius: 12px; background: var(--card); padding: 14px 16px 15px;
    text-decoration: none; color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .cat-card:hover { border-color: var(--cc-accent, var(--link)); box-shadow: 0 6px 18px rgba(20,30,55,0.08); transform: translateY(-1px); }
  .cc-title { display: flex; align-items: baseline; gap: 8px; font: 700 calc(17.5px * var(--text-scale))/1.2 "Iowan Old Style", "Palatino Linotype", Georgia, serif; margin: 0; }
  .cc-count { margin-left: auto; font: 700 calc(12px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; color: var(--cc-accent, var(--link)); }
  .cc-desc { font: calc(13px * var(--text-scale))/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink2); margin: 1px 0 0; }
  /* Lines group jump-nav (hub) + sub-group headers */
  .grp-jump { margin: 12px 0 4px; }
  .grp-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
  .grp-jump a { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border: 1px solid var(--rule); border-radius: 20px; background: var(--card); font: 600 calc(12.5px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); text-decoration: none; }
  .grp-jump a:hover { border-color: var(--link); color: var(--link); }
  .grp-jump .grp-count { color: var(--label); }
  .line-subgroup { margin: 22px 0 0; scroll-margin-top: 70px; }
  .line-subgroup h3 { font: 700 calc(15px * var(--text-scale))/1.2 "Iowan Old Style", "Palatino Linotype", Georgia, serif; margin: 0 0 5px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); }
  .see-all {
    font: 600 calc(11px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
    color: var(--link); margin-left: 10px; white-space: nowrap;
  }
  .see-all:hover { text-decoration: underline; }
  /* "+N more" list rows + the prominent per-section CTA (hub curation,
     design review 2026-07-10). */
  .li-more a { color: var(--link); font-weight: 600; }
  .see-all-cta-row { margin: 14px 0 0; }
  .see-all-cta {
    display: inline-block; padding: 9px 18px; border: 1px solid var(--rule);
    border-radius: 999px; background: var(--card);
    font: 600 calc(13.5px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--link); text-decoration: none;
  }
  .see-all-cta:hover { border-color: var(--link); }

  /* Articles-hub layout with a right-hand "discover" rail (Station of the
     Day + random station + quiz). DOM order is content-first (owner decision
     2026-07-11), so mobile's single column reads title -> search -> categories
     -> widgets, and >=1000px plain row puts the rail on the RIGHT — the same
     desktop visual the old rail-first + row-reverse markup produced.
     The rail is deliberately NOT sticky: sticky shipped 2026-06-16 and was
     removed 2026-06-17 (owner feedback) because the ~950px rail clipped the
     quiz options below the fold; a future sticky needs max-height +
     overflow-y, not a bare position:sticky. */
  .hub-layout { display: flex; flex-direction: column; gap: 22px; }
  .hub-col { min-width: 0; }
  .hub-rail { display: flex; flex-direction: column; gap: 13px; }
  @media (min-width: 1000px) {
    .hub-layout { flex-direction: row; align-items: flex-start; gap: 34px; }
    .hub-col { flex: 1 1 0; }
    .hub-rail { flex: 0 0 286px; }
  }
  .rail-card { border: 1px solid var(--rule); border-left: 4px solid var(--link); border-radius: 12px; background: var(--card); padding: 14px 16px 16px; }
  .rail-eyebrow { margin: 0 0 9px; font: 700 calc(11px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: 0.09em; color: var(--link); }
  .sotd a { display: block; text-decoration: none; color: var(--ink); }
  .sotd a:hover .sotd-name { text-decoration: underline; }
  .sotd-name { display: block; font: 700 calc(19px * var(--text-scale))/1.22 "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
  .sotd-sub { display: block; margin-top: 2px; font: calc(13px * var(--text-scale))/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--label); }
  .sotd-teaser { display: block; margin-top: 9px; font: calc(14px * var(--text-scale))/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink2); }
  .sotd-cta { display: inline-block; margin-top: 11px; font: 600 calc(12.5px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--link); }
  .sotd-loading { margin: 0; color: var(--label); font: calc(14px * var(--text-scale))/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
  .sotd-map { margin: 13px 0 0; border: 1px solid var(--rule); border-radius: 9px; overflow: hidden; background: var(--map-sea); }
  .sotd-map[hidden] { display: none; }
  .sotd-map svg { display: block; width: 100%; height: 184px; }
  .rail-sub { margin: 0 0 11px; font: calc(13.5px * var(--text-scale))/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink2); }
  .rail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px 14px; cursor: pointer; font: 700 calc(14px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; background: var(--link); border: 1px solid var(--link); border-radius: 10px; transition: filter .15s ease, transform .1s ease; }
  .rail-btn:hover { filter: brightness(1.08); }
  .rail-btn:active { transform: translateY(1px); }
  .rail-btn[disabled] { opacity: 0.6; cursor: progress; }

  /* Daily line quiz — compact quiz card in the right rail (matches the rail cards) */
  .rail-card.game { padding-bottom: 16px; }
  #ntl-card { margin-top: 2px; }
  .ntl-loading { margin: 0; color: var(--label); font: calc(13.5px * var(--text-scale))/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
  .ntl-meta { margin: 0 0 8px; font: 600 calc(11px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; color: var(--label); }
  .ntl-diff { display: inline-block; font: 700 calc(10px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 5px; margin-bottom: 10px; }
  .ntl-diff.easy { background: #e2efdc; color: #3b6d11; }
  .ntl-diff.hard { background: #f6e6cf; color: #8a4f1f; }
  .ntl-clue { font: calc(14.5px * var(--text-scale))/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); margin: 0 0 9px; }
  .ntl-reveal { display: inline-block; margin: 0 0 12px; background: transparent; border: 0; padding: 0; font: 600 calc(12.5px * var(--text-scale))/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--link); cursor: pointer; text-align: left; }
  .ntl-reveal:hover { text-decoration: underline; }
  .ntl-opts { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .ntl-opt { text-align: left; padding: 10px 12px; font: calc(13.5px * var(--text-scale))/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer; }
  .ntl-opt:hover:not(:disabled) { border-color: var(--link); }
  .ntl-opt:disabled { cursor: default; }
  .ntl-opt.correct { background: #e2efdc; border-color: #3b6d11; color: #2a5310; font-weight: 700; }
  .ntl-opt.wrong { background: #f7e0de; border-color: #a32d2d; color: #7e1f1f; }
  .ntl-why { margin-top: 11px; padding: 10px 12px; background: var(--bg); border-radius: 8px; font: calc(13px * var(--text-scale))/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink2); }
  .ntl-why strong { color: var(--ink); }
  .ntl-why a { color: var(--link); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .ntl-why a:hover { text-decoration: underline; }
  .ntl-next { margin-top: 11px; width: 100%; box-sizing: border-box; background: var(--link); color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font: 700 calc(13px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; }
  .ntl-next:hover { filter: brightness(1.08); }
  .ntl-results-h { font: 700 calc(17px * var(--text-scale))/1.2 "Iowan Old Style", "Palatino Linotype", Georgia, serif; color: var(--ink); margin: 0 0 3px; }
  .ntl-results-s { font: calc(13.5px * var(--text-scale))/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink2); margin: 0 0 11px; }

  /* Article photos — self-hosted Wikimedia Commons images (lead hero, figures
     interleaved with the prose, and the end gallery). All imgs carry explicit
     width/height attrs from the verified data so the box is reserved before
     the lazy load lands (no blank-box layout shift). */
  figure { margin: 0; }
  .lead-hero { margin: 28px 0 10px; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--card); }
  .lead-hero img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; }
  .lead-hero figcaption { padding: 7px 12px; }
  .prose-fig { margin: 28px 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--card); }
  .prose-fig img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: cover; }
  .prose-fig figcaption { padding: 8px 12px; }
  .gallery .ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 6px; }
  .ph { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--card); }
  .ph img { display: block; width: 100%; height: 180px; object-fit: cover; background: var(--bg); }
  .ph figcaption { padding: 8px 11px; }
  .ph-cap { display: block; font: 400 calc(12.5px * var(--text-scale))/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); margin-bottom: 3px; }
  .ph-credit { font: 400 calc(11.5px * var(--text-scale))/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink2); }
  .ph-credit a, .lead-hero figcaption a { color: var(--link); text-decoration: none; }
  .ph-credit a:hover, .lead-hero figcaption a:hover { text-decoration: underline; }
  /* Gallery: tap-to-enlarge thumbnails + photo count + intro note */
  .sec-count { font: 600 calc(13px * var(--text-scale))/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--label); letter-spacing: 0.02em; }
  .gallery-note { font: calc(13.5px * var(--text-scale))/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink2); margin: 0 0 14px; }
  .ph-link { display: block; line-height: 0; cursor: zoom-in; }
  .ph-link img { transition: opacity 0.15s ease, transform 0.15s ease; }
  .ph-link:hover img { opacity: 0.92; }
  .ph-link:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

  /* Static prose page (About). */
  .prose { max-width: 760px; }
  .prose h2 {
    font: 700 calc(21px * var(--text-scale))/1.3 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    color: var(--ink); margin: 30px 0 8px;
  }
  .prose p { color: var(--ink); margin: 0 0 12px; }
  .prose ul { margin: 0 0 14px; padding-left: 22px; }
  .prose li { color: var(--ink); margin: 5px 0; }
  .prose a { color: var(--link); }
  .badge-sch { color: #2f7d54; font-weight: 600; white-space: nowrap; }
  .badge-est { color: #9a6a16; font-weight: 600; white-space: nowrap; }
  /* ============================================================
     "Carded Railboard" — the About + Contact page redesign. EVERY rule
     is scoped under .about-page so it never touches the ~1,800 other
     pages that share .prose/.page/.eyebrow/.lead/etc. New design tokens
     live on .about-page (not :root) for the same reason. Light-only, to
     match the rest of the site (no dark mode on just these two pages).
     ============================================================ */
  .about-page {
    --bg2:#efe8d6; --card2:#fbf4e6; --rule2:#e6dcc0;
    --accent:#5ab2ff; --accent-ink:#1f5f9c; --green:#3f8f5f; --amber:#c9871f; --stub:#efe6cf;
    --board-bg1:#14110b; --board-bg2:#1c1811; --board-ink:#f0e7d2;
    --board-flip:#ffd88a; --board-dim:#a89a72; --board-live:#8be0a5;
    --shadow:0 1px 0 rgba(0,0,0,.02), 0 10px 30px -18px rgba(46,39,24,.45);
    --shadow-lg:0 2px 4px rgba(60,48,20,.07), 0 22px 48px -22px rgba(60,48,20,.32);
    --mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
    --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --radius:16px; --radius-sm:12px;
    background:var(--bg);
  }
  .about-page .container { max-width:1000px; margin:0 auto; padding:24px 22px 22px; }
  /* Hero */
  .about-page .hero { background:var(--card); border:1px solid var(--rule); border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow-lg); padding:clamp(24px,4vw,42px); position:relative; overflow:hidden; }
  .about-page .hero::after { content:""; position:absolute; right:-70px; top:-70px; width:280px; height:280px; pointer-events:none; opacity:.5; background:radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 60%); filter:blur(8px); }
  .about-page .eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size: calc(11.5px * var(--text-scale)); letter-spacing:.22em; text-transform:uppercase; color:var(--label); margin:0 0 16px; position:relative; }
  .about-page .eyebrow::before { content:""; width:26px; height:9px; border-radius:2px; background:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
  .about-page h1 { font-family:var(--serif); font-weight:600; font-size:clamp(2.05rem, 6.2vw, 3.05rem); line-height:1.08; letter-spacing:-.012em; margin:0 0 22px; color:var(--ink); position:relative; }
  .about-page .lead { font-size:clamp(1.08rem, 2.6vw, 1.28rem); line-height:1.55; color:var(--ink2); max-width:64ch; margin:0; font-weight:420; position:relative; }
  .about-page .lead strong { color:var(--ink); font-weight:600 }
  /* Departure-board strip (railboard signature; decorative) */
  .about-page .board-strip { margin:22px 0 0; padding:11px 16px; border-radius:12px; background:linear-gradient(180deg,var(--board-bg1),var(--board-bg2)); color:var(--board-ink); display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-family:var(--mono); font-size: calc(12px * var(--text-scale)); letter-spacing:.05em; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.35); }
  .about-page .board-strip .flip { color:var(--board-flip); letter-spacing:.14em; }
  .about-page .board-strip .dim { color:var(--board-dim) }
  .about-page .board-strip .grow { flex:1 1 auto }
  .about-page .board-strip .live { display:inline-flex; align-items:center; gap:7px; color:var(--board-live); }
  .about-page .board-strip .live::before { content:""; width:8px; height:8px; border-radius:50%; background:#57d888; animation:jtl-pulse 2.4s ease-out infinite; }
  @keyframes jtl-pulse { 0%{box-shadow:0 0 0 0 rgba(87,216,136,.55)} 70%{box-shadow:0 0 0 7px rgba(87,216,136,0)} 100%{box-shadow:0 0 0 0 rgba(87,216,136,0)} }
  @media (prefers-reduced-motion: reduce){ .about-page .board-strip .live::before{animation:none} }
  /* Signage section headers */
  .about-page section { margin-top:48px; scroll-margin-top:80px; }
  .about-page .sign { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
  .about-page .chip { width:16px; height:16px; flex:none; border-radius:4px; background:var(--chip, var(--accent)); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35), 0 0 0 1px rgba(0,0,0,.06); }
  .about-page .sign-no { font-family:var(--mono); font-size: calc(11.5px * var(--text-scale)); letter-spacing:.2em; color:var(--label); text-transform:uppercase; padding-top:1px; }
  .about-page .sign-rule { flex:1 1 auto; height:1px; background:repeating-linear-gradient(90deg,var(--rule) 0 6px, transparent 6px 12px); }
  .about-page h2 { font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem, 3.6vw, 1.72rem); line-height:1.18; letter-spacing:-.005em; margin:0 0 14px; color:var(--ink); }
  .about-page p { margin:0 0 15px; color:var(--ink2); max-width:66ch; }
  .about-page p strong { color:var(--ink); font-weight:600 }
  /* Card panel */
  .about-page .card { background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(20px,3vw,28px); }
  .about-page .card > p:last-child { margin-bottom:0 }
  .about-page .prose-card { position:relative; overflow:hidden }
  .about-page .prose-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent)); }
  /* Badges */
  .about-page .badge-row { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
  .about-page .badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size: calc(12px * var(--text-scale)); font-weight:600; letter-spacing:.04em; padding:6px 12px 6px 10px; border-radius:999px; background:var(--card); border:1px solid var(--rule); color:var(--ink); }
  .about-page .badge .dot { width:9px; height:9px; border-radius:50% }
  .about-page .badge.sched { border-color:color-mix(in srgb, var(--green) 45%, var(--rule)); }
  .about-page .badge.sched .dot { background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%, transparent) }
  .about-page .badge.est { border-color:color-mix(in srgb, var(--amber) 50%, var(--rule)); }
  .about-page .badge.est .warn { color:#9a6a16; font-size: calc(13px * var(--text-scale)); line-height:1; }
  .about-page .badge-defs { display:grid; gap:12px; margin:0 0 24px; }
  .about-page .badge-def { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline; background:var(--card2); border:1px solid var(--rule2); border-radius:var(--radius-sm); padding:14px 16px; }
  .about-page .badge-def p { margin:0; font-size: calc(14.5px * var(--text-scale)); max-width:none }
  /* Status "ticket" cards */
  .about-page .tickets { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:4px; }
  .about-page .ticket { position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--rule); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; }
  .about-page .ticket:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg) }
  .about-page .ticket .stub { position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--stub); border-bottom:1px dashed var(--rule); font-family:var(--mono); font-size: calc(11.5px * var(--text-scale)); letter-spacing:.08em; color:var(--label); text-transform:uppercase; }
  .about-page .ticket .stub::before, .about-page .ticket .stub::after { content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:var(--bg); border:1px solid var(--rule); top:38px; z-index:2; }
  .about-page .ticket .stub::before { left:-8px }
  .about-page .ticket .stub::after { right:-8px }
  .about-page .ticket .platform { display:inline-flex; align-items:baseline; gap:5px; color:var(--ink); }
  .about-page .ticket .platform b { font-size: calc(14px * var(--text-scale)); letter-spacing:.02em }
  .about-page .ticket .photo { aspect-ratio:16/10; position:relative; display:flex; align-items:flex-end; padding:12px; background:var(--card2); color:#fff; }
  .about-page .ticket .photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .about-page .ticket .photo::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px); }
  .about-page .ticket .photo .cap { position:relative; z-index:1; font-family:var(--mono); font-size: calc(11.5px * var(--text-scale)); letter-spacing:.03em; background:rgba(12,10,6,.62); padding:5px 9px; border-radius:7px; line-height:1.3; box-shadow:0 1px 6px rgba(0,0,0,.25); }
  .about-page .ticket .photo .rail { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--chip); opacity:.9; z-index:1; }
  .about-page .ticket .tbody { padding:13px 15px 15px; display:flex; flex-direction:column; gap:7px; }
  .about-page .ticket .tbody .line { font-family:var(--serif); font-size:1.02rem; font-weight:600; color:var(--ink); }
  .about-page .ticket .tbody .note { font-size: calc(14px * var(--text-scale)); color:var(--ink2); margin:0; max-width:none }
  .about-page .ticket .tbody .status { margin-top:2px }
  @media (max-width:620px){ .about-page .tickets { grid-template-columns:1fr } }
  @supports not (aspect-ratio: 1 / 1){ .about-page .ticket .photo { min-height:190px; } }
  .about-page .ticket-outro { margin:18px 0 0; font-size: calc(14.5px * var(--text-scale)); }
  /* Data sources — icon cards grid */
  .about-page .sources { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
  @media (max-width:640px){ .about-page .sources { grid-template-columns:1fr } }
  .about-page .sources li { display:flex; gap:15px; align-items:flex-start; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:17px 18px; }
  .about-page .sources li.span-2 { grid-column:1 / -1 }
  .about-page .src-ico { flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--card2); background:color-mix(in srgb,var(--chip,var(--accent)) 14%, var(--card2)); border:1px solid var(--rule); border-color:color-mix(in srgb,var(--chip,var(--accent)) 32%,var(--rule)); color:var(--chip,var(--link)); position:relative; }
  .about-page .src-ico::after { content:""; position:absolute; left:8px; right:8px; bottom:5px; height:2px; border-radius:2px; background:var(--chip,var(--accent)); opacity:.5; }
  .about-page .src-ico svg { width:22px; height:22px; display:block }
  .about-page .src-txt { min-width:0 }
  .about-page .src-txt p { margin:0; font-size: calc(13.8px * var(--text-scale)); color:var(--ink2); line-height:1.55; max-width:none }
  .about-page .src-txt p strong { color:var(--ink); font-weight:600 }
  /* Accuracy callout */
  .about-page .callout { border:1px solid var(--rule); border-left:4px solid var(--green); background:var(--card); border-radius:0 var(--radius) var(--radius) 0; padding:18px 20px; box-shadow:var(--shadow); }
  .about-page .callout p { margin:0; max-width:none }
  .about-page .callout p + p { margin-top:13px }
  /* About -> Contact pointer card */
  .about-page .contact-cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
  .about-page .contact-cta p { margin:0; flex:1 1 260px }
  .about-page .cta-link { appearance:none; text-decoration:none; white-space:nowrap; border-radius:10px; font-family:var(--sans); font-weight:600; font-size: calc(15px * var(--text-scale)); color:#0e2138; padding:11px 18px; background:linear-gradient(180deg,#7cc4ff,var(--accent)); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 18px -8px rgba(58,134,217,.8); display:inline-flex; align-items:center; gap:8px; }
  .about-page .cta-link:hover { filter:brightness(1.04); color:#0e2138 }
  .about-page .cta-link .arr { font-family:var(--mono) }
  /* Feedback (highlighted card) */
  .about-page .feedback { background:var(--card); background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--accent) 12%, var(--card)) 0%, var(--card) 55%); border:1px solid var(--rule); border-color:color-mix(in srgb,var(--accent) 32%,var(--rule)); border-radius:calc(var(--radius) + 2px); box-shadow:var(--shadow-lg); overflow:hidden; }
  .about-page .feedback .fb-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; background:var(--stub); border-bottom:1px dashed var(--rule); font-family:var(--mono); font-size: calc(11.5px * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--label); }
  .about-page .feedback .fb-head .tk { display:inline-flex; align-items:center; gap:8px; color:var(--ink) }
  .about-page .feedback .fb-inner { padding:clamp(20px,3.2vw,30px); }
  .about-page .feedback .intro { margin:0 0 22px; color:var(--ink2); max-width:60ch }
  .about-page form.fb { display:grid; gap:18px }
  .about-page .field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:560px){ .about-page .field-row { grid-template-columns:1fr } }
  .about-page .field { display:grid; gap:6px }
  .about-page .fb form label, .about-page .field > label { font-family:var(--mono); font-size: calc(11.5px * var(--text-scale)); letter-spacing:.08em; text-transform:uppercase; color:var(--label); display:flex; align-items:baseline; gap:8px; }
  .about-page .field .opt { color:var(--label); opacity:.75; letter-spacing:.04em; text-transform:none; font-size: calc(11px * var(--text-scale)) }
  .about-page .field .req { color:var(--amber); text-transform:none; letter-spacing:.04em; font-size: calc(11px * var(--text-scale)) }
  .about-page .hint { font-size: calc(12.5px * var(--text-scale)); color:var(--label); font-family:var(--sans); letter-spacing:0; margin:0 }
  .about-page .field input, .about-page .field textarea { font-family:var(--sans); font-size: calc(15.5px * var(--text-scale)); color:var(--ink); background:var(--card2); border:1px solid var(--rule); border-radius:10px; padding:11px 13px; width:100%; box-sizing:border-box; line-height:1.55; transition:border-color .15s, box-shadow .15s; }
  .about-page .field textarea { min-height:122px; resize:vertical }
  .about-page .field input::placeholder, .about-page .field textarea::placeholder { color:var(--label); opacity:1 }
  .about-page .field input:focus-visible, .about-page .field textarea:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%, transparent); }
  @media (forced-colors: active){ .about-page .field input:focus-visible, .about-page .field textarea:focus-visible { outline:2px solid Highlight; outline-offset:1px; } }
  .about-page .form-foot { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
  .about-page button.send { appearance:none; cursor:pointer; border:0; border-radius:10px; font-family:var(--sans); font-weight:600; font-size: calc(15px * var(--text-scale)); letter-spacing:.01em; color:#0e2138; padding:12px 20px; background:linear-gradient(180deg,#7cc4ff,var(--accent)); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 18px -8px rgba(58,134,217,.8); display:inline-flex; align-items:center; gap:9px; }
  .about-page button.send:hover { filter:brightness(1.04); transform:translateY(-1px) }
  .about-page button.send:active { transform:translateY(1px) }
  .about-page button.send:disabled { opacity:.6; cursor:default; transform:none }
  .about-page button.send .arr { font-family:var(--mono) }
  .about-page .fb-status { font-family:var(--mono); font-size: calc(12.5px * var(--text-scale)); color:var(--label); letter-spacing:.02em; min-height:1.2em; margin:0; }
  .about-page .fb-status.ok { color:#2f7d54 }
  .about-page .fb-status.err { color:#9a6a16 }
  .about-page .email-line { margin:20px 0 0; padding-top:18px; border-top:1px solid var(--rule); font-size: calc(14.5px * var(--text-scale)); color:var(--ink2); }
  .about-page .email-line a { font-family:var(--mono); font-size: calc(13.5px * var(--text-scale)) }
  /* Honeypot — kept in the DOM for bots, off-screen for everyone else. */
  .about-page .fb-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  /* Backlink */
  .about-page .backlink { display:inline-flex; align-items:center; gap:8px; margin:44px 0 0; font-weight:600; text-decoration:none; color:var(--link); font-size: calc(15.5px * var(--text-scale)); }
  .about-page .backlink:hover { color:var(--ink); gap:11px; transition:gap .15s }
  .about-page .backlink .arr { font-family:var(--mono) }

  /* Breadcrumb trail under the masthead */
  .breadcrumb { max-width: 1140px; margin: 0 auto; padding: 10px 24px 0; font: calc(13px * var(--text-scale))/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; color: var(--label); }
  .breadcrumb a { color: var(--link); text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .bc-sep { margin: 0 7px; color: var(--rule); }
  .bc-here { color: var(--ink2); }

  /* Article keyword search (Articles hub) */
  .search-wrap { margin: 18px 0 4px; }
  #article-search { width: 100%; max-width: 560px; box-sizing: border-box; padding: 12px 15px; font: calc(16px * var(--text-scale))/1.3 system-ui,-apple-system,"Segoe UI",sans-serif; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }
  #article-search:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: var(--link); }
  .search-hint { font: calc(13px * var(--text-scale))/1.5 system-ui,sans-serif; color: var(--label); margin: 6px 0 0; }
  #search-results { list-style: none; margin: 14px 0 0; padding: 0; }
  #search-results li { margin: 0 0 2px; }
  #search-results a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); border-bottom: 1px solid rgba(216,202,162,0.45); }
  #search-results a:hover { background: rgba(74,95,140,0.07); }
  .sr-type { display: inline-block; font: 600 calc(10px * var(--text-scale))/1 system-ui,sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--label); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 7px; margin-left: 8px; vertical-align: middle; }
  .sr-ja { color: var(--label); font-size: calc(13px * var(--text-scale)); margin-left: 6px; }
  .sr-snip { display: block; font: calc(13px * var(--text-scale))/1.5 system-ui,sans-serif; color: var(--ink2); margin-top: 3px; }
  .sr-empty { color: var(--label); font: calc(14px * var(--text-scale))/1.5 system-ui,sans-serif; padding: 10px 2px; }
  mark { background: #f5e6a8; color: inherit; padding: 0 1px; border-radius: 2px; }
  .hub-source-note { margin: 12px 0 0; padding-left: 12px; border-left: 3px solid var(--rule); font: calc(14px * var(--text-scale))/1.6 system-ui,sans-serif; color: var(--ink2); max-width: 64ch; }
  /* While a query is active, hide the browse cards/lists so results stand alone */
  body.searching .hub-lead, body.searching .hub-source-note, body.searching .cat-cards, body.searching .browse-sections { display: none; }

  /* Japanese pages — a real Mincho stack (instead of per-glyph fallback to the
     OS gothic default) and the looser leading kanji needs. */
  html[lang="ja"] body { font-family: "Iowan Old Style", "Palatino Linotype", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif; }
  html[lang="ja"] h1 { line-height: 1.25; letter-spacing: 0; }
  html[lang="ja"] .a-head .lead, html[lang="ja"] .sections p { line-height: 1.95; }
  html[lang="ja"] ul.events li .ev { line-height: 1.85; }

  /* Print — the article body is the document; chrome stays on screen. */
  @media print {
    .site-header, .breadcrumb, .toc, .cta-row, .backlink, footer.page { display: none !important; }
    body { background: #fff; color: #000; font-size: 12pt; padding: 0; }
    .article-grid { display: block; }
    .a-rail { margin: 0 0 14pt; }
    .infobox { border: 1pt solid #999; border-radius: 0; }
    .sources a[href]::after { content: " (" attr(href) ")"; font-size: 90%; }
    .lead-hero, .prose-fig, .ph { border-color: #999; break-inside: avoid; }
  }

  /* ── Site-wide dark mode (2026-07-20) ─────────────────────────────────
     Mirrors the live map's dark-sepia chrome; data-theme lands on <html>
     pre-paint via THEME_PREF_SCRIPT (shared bt-chrome-theme key). The
     route-map tokens get night values too so maps don't glare inside
     dark pages. */
  :root[data-theme="dark"] {
    --bg: #16130e;
    --ink: #e9e2d0;
    --ink2: #c2b795;
    --label: #b3a88c;
    --link: #94b4e0;
    --rule: #453e2c;
    --card: #242017;
    --nav: #262218;
    --map-sea: #0f1a24;
    --map-land: #262117;
    --map-coast: #4d6478;
    --map-muni: #4a4231;
    --map-pref: #5d7488;
    --map-label: #b9c7d5;
  }
  /* Settings menu (2026-07-20, replaces the single theme toggle) — gear
     pinned to the masthead's top-right corner; dropdown of switch rows
     whose on-state derives purely from the <html> data-* attributes. */
  .site-header { position: relative; }
  .site-prefs { position: absolute; top: 14px; right: 16px; }
  .prefs-gear {
    width: 32px; height: 32px; padding: 0;
    background: var(--card); color: var(--ink2);
    border: 1px solid var(--rule); border-radius: 999px;
    line-height: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .prefs-gear:hover, .prefs-gear[aria-expanded="true"] { color: var(--link); }
  .prefs-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
    width: 218px; padding: 6px 6px 8px; text-align: left;
    background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  }
  .prefs-title {
    padding: 6px 10px 4px; color: var(--label);
    font: 600 calc(10px * var(--text-scale))/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .pref-row {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 10px; border: none; border-radius: 6px;
    background: transparent; color: var(--ink); cursor: pointer; text-align: left;
    font: 500 calc(13px * var(--text-scale))/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .pref-row:hover { background: rgba(90,178,255,0.12); }
  .pref-sw {
    flex: 0 0 auto; width: 30px; height: 17px; border-radius: 999px;
    background: var(--rule); position: relative; transition: background 0.15s ease;
  }
  .pref-sw::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 13px; height: 13px; border-radius: 999px; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35); transition: transform 0.15s ease;
  }
  :root[data-theme="dark"] .pref-row[data-attr="data-theme"] .pref-sw,
  :root[data-textsize="large"] .pref-row[data-attr="data-textsize"] .pref-sw,
  :root[data-motion="reduced"] .pref-row[data-attr="data-motion"] .pref-sw,
  :root[data-contrast="more"] .pref-row[data-attr="data-contrast"] .pref-sw,
  :root[data-font="sans"] .pref-row[data-attr="data-font"] .pref-sw,
  :root[data-links="underline"] .pref-row[data-attr="data-links"] .pref-sw { background: #5ab2ff; }
  :root[data-theme="dark"] .pref-row[data-attr="data-theme"] .pref-sw::after,
  :root[data-textsize="large"] .pref-row[data-attr="data-textsize"] .pref-sw::after,
  :root[data-motion="reduced"] .pref-row[data-attr="data-motion"] .pref-sw::after,
  :root[data-contrast="more"] .pref-row[data-attr="data-contrast"] .pref-sw::after,
  :root[data-font="sans"] .pref-row[data-attr="data-font"] .pref-sw::after,
  :root[data-links="underline"] .pref-row[data-attr="data-links"] .pref-sw::after { transform: translateX(13px); }
  /* Dark overrides for surfaces/inks hard-coded outside the token set
     (found by the 2026-07-20 axe pass on dark article pages: light card
     fills + status inks went light-on-light / dark-on-dark). */
  :root[data-theme="dark"] .about-page {
    --bg2: #1b1712; --card2: #2a251a; --rule2: #453e2c;
    --accent-ink: #9ec9f0; --green: #79c98a; --amber: #d9a54c; --stub: #221e15;
    /* --board-* stay as-is: the departure-board vignette is dark art in
       both themes by design. */
  }
  :root[data-theme="dark"] .badge-sch,
  :root[data-theme="dark"] .about-page .fb-status.ok { color: #79c98a; }
  :root[data-theme="dark"] .badge-est,
  :root[data-theme="dark"] .about-page .badge.est .warn,
  :root[data-theme="dark"] .about-page .fb-status.err { color: #d9a54c; }
  :root[data-theme="dark"] .mini-map svg { background: #10151c; }
  :root[data-theme="dark"] .btn-primary { color: #0e1826; }
  :root[data-theme="dark"] .ntl-diff.easy { background: #22301c; color: #a4d885; }
  :root[data-theme="dark"] .ntl-diff.hard { background: #33270f; color: #dd9a55; }
  :root[data-theme="dark"] .ntl-opt.correct { background: #22301c; border-color: #5c8f3a; color: #b5e096; }
  :root[data-theme="dark"] .ntl-opt.wrong { background: #3a1c19; border-color: #b45050; color: #f0a8a0; }
  :root[data-theme="dark"] .toc a.active { background: rgba(148,180,224,0.16); }
  /* Category-count accents keep their hue in dark via color-mix
     lightening (falls back to the base color where unsupported). */
  :root[data-theme="dark"] .cc-count { color: color-mix(in srgb, var(--cc-accent, var(--link)) 70%, #fff); }
  :root[data-theme="dark"] #random-station-btn { color: #0e1826; }