/* ============================================================================
 *  IntMap · the historical-map entry pages   (history/… · ja/history/…)
 * ----------------------------------------------------------------------------
 *  Generated by scripts/history-pages.mjs when the site is built. Loaded AFTER css/pages.css and
 *  css/landing.css and built on their palette (--pg-*) and components (.lp-*), so these pages are the
 *  same family as the landing pages in light and dark. Only what those two do not already have is
 *  here: the breadcrumb, the year chips, the numeric column and the neighbour links.
 *  ⚠ Nothing here may make the page wider than the screen (the rule css/landing.css states): the chips
 *  wrap, the table scrolls inside its own box.
 * ========================================================================== */

.lp-hist .hp-hero{ padding-top:28px; }
.lp-hist .hp-hero h1{ font-size:44px; }

.hp-crumbs{ margin-top:22px; font-size:14px; color:var(--pg-mut); display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; }
.hp-crumbs a{ text-decoration:none; }
.hp-crumbs a:hover{ text-decoration:underline; }
.hp-sep{ color:var(--pg-line); }

.lp-tablewrap .hp-num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hp-desc{ color:var(--pg-mut); font-size:13px; }

.hp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.hp-chips a{
  display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:980px;
  background:var(--pg-accent-soft); color:var(--pg-accent); font-size:14px; font-weight:500; text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.hp-chips a:hover{ filter:brightness(1.05); text-decoration:underline; }

.hp-nav{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin:22px 0 0; }
.hp-nav a{ font-weight:600; font-size:15px; text-decoration:none; }
.hp-nav a[rel="next"]{ margin-left:auto; }

.hp-region{ text-decoration:none; color:inherit !important; display:block; }
.hp-region:hover{ border-color:var(--pg-accent); }

@media (max-width:640px){
  .lp-hist .hp-hero h1{ font-size:30px; }
  .hp-chips a{ min-height:32px; padding:0 12px; font-size:13px; }
}

/* ── (marketing-next) the «on this day» pages (on-this-day/… · ja/on-this-day/…, scripts/on-this-day-pages.mjs) ── */
.otd-card{ margin:22px 0 0; }
.otd-card img{ display:block; width:100%; max-width:760px; height:auto; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,0.18); }
.otd-list{ list-style:none; margin:0; padding:0; }
.otd-ev{ display:grid; grid-template-columns:4.2em minmax(0,1fr); gap:4px 14px; padding:14px 0; border-bottom:1px solid var(--pg-line-soft); }
.otd-ev:last-child{ border-bottom:none; }
.otd-y{ font-size:22px; font-weight:700; color:var(--pg-accent); font-variant-numeric:tabular-nums; line-height:1.25; }
.otd-t{ margin:0; font-size:17px; font-weight:600; line-height:1.4; }
.otd-s{ margin:2px 0 6px; font-size:13px; color:var(--pg-mut); }
.otd-none{ display:inline-flex; align-items:center; min-height:34px; padding:0 14px; color:var(--pg-mut); font-size:14px; font-variant-numeric:tabular-nums; }
.otd-month h2{ margin-bottom:10px; }
@media (max-width:640px){
  .otd-ev{ grid-template-columns:3.4em minmax(0,1fr); gap:2px 10px; }
  .otd-y{ font-size:18px; }
  .otd-t{ font-size:15px; }
  .otd-none{ min-height:32px; padding:0 12px; font-size:13px; }
}

/* ── (history-year-pages) the year pages (history/years/… · ja/history/years/…, scripts/year-pages.mjs) ──
   The picture is the record drawn as SVG (scripts/lib/world-svg.mjs); it scales to the column. The polity table keeps a
   readable width and scrolls inside its own box on a phone rather than breaking every word into a column of letters. */
.yp-map{ margin:30px 0 0; }
.yp-map img{ display:block; width:100%; height:auto; border-radius:18px; }
.yp-map figcaption{ margin-top:10px; }
.lp-tablewrap table.yp-names{ min-width:600px; }
.yp-rec{ font-size:13px; color:var(--pg-mut); }
.yp-more{ margin-top:14px; }
.yp-more summary{ display:flex; align-items:center; min-height:44px; cursor:pointer; font-weight:600; color:var(--pg-accent); }
/* the hub: one row per century (per millennium before 1000 BC), its years as chips beside the heading */
.yp-era{ display:grid; grid-template-columns:minmax(0,13em) minmax(0,1fr); gap:8px 20px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--pg-line-soft); }
.yp-era:last-child{ border-bottom:none; }
.yp-era h2{ margin:0; font-size:19px; }
@media (max-width:640px){ .yp-era{ grid-template-columns:minmax(0,1fr); } }