html[data-chooser] { font-size: calc(82% * var(--font-scale)); }
.region-index {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--atlas-paper);
  color: var(--atlas-ink);
  font-family: var(--atlas-sans);
}
.region-index *, .region-index *::before { box-sizing: border-box; }
.region-index header, .overview {
  width: min(calc(100% - 80px), 1220px);
  margin-inline: auto;
}
.region-index header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--atlas-rule);
}
.masthead { display: flex; align-items: center; gap: 12px; font-size: 1.16rem; }
.masthead b { font-family: var(--atlas-serif); letter-spacing: .035em; }
.overview {
  display: grid;
  grid-template-columns: minmax(235px, .43fr) minmax(0, 1fr);
  grid-template-areas: "title map" "list map";
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: clamp(36px, 5vw, 72px);
  margin-block: auto;
  padding-block: clamp(32px, 6vh, 72px);
}
.overview h1 {
  grid-area: title;
  align-self: end;
  margin: 0 0 clamp(18px, 2.8vh, 32px);
  font: 600 clamp(2rem, 3.5vw, 3.5rem)/1.13 var(--atlas-serif);
  letter-spacing: -.025em;
}
.region-list { grid-area: list; align-self: start; border-top: 1px solid var(--atlas-rule); }
.region {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-content: center;
  align-items: baseline;
  gap: 3px 15px;
  padding: clamp(11px, 1.9vh, 19px) 0;
  border-bottom: 1px solid var(--atlas-rule);
  color: inherit;
  text-decoration: none;
}
.region::before {
  content: "";
  align-self: center;
  width: 8px;
  height: 8px;
  background: var(--region-ink);
  border-radius: 50%;
}
.overview [data-edition="tokyo"] { --region-ink: #9b4b3b; }
.overview [data-edition="osaka"] { --region-ink: #47684e; }
.overview [data-edition="nagoya"] { --region-ink: #91601d; }
.overview [data-edition="hokkaido"] { --region-ink: #33645b; }
.region strong { font: 600 clamp(1.25rem, 2.2vw, 1.65rem)/1.3 var(--atlas-serif); }
.region small { grid-column: 2; color: var(--atlas-secondary); font-size: .84rem; line-height: 1.55; text-wrap: pretty; }
.region small span { display: inline-block; white-space: nowrap; }
.region small span:not(:last-child)::after { content: " ·"; }
.atlas-sheet {
  grid-area: map;
  align-self: center;
  min-width: 0;
  container-type: inline-size;
  margin: 0;
}
.japan-map {
  display: block;
  width: 100%;
  aspect-ratio: 760 / 540;
  background: #e9f1f1;
  border: 1px solid #cbd8d2;
}
.atlas-sheet figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  color: var(--atlas-secondary);
  font-size: .82rem;
  line-height: 1.45;
}
.atlas-sheet figcaption a { color: inherit; text-underline-offset: .16em; }
.map-region { cursor: pointer; }
.inset-label { fill: var(--atlas-secondary); font: calc(var(--inset-type, 15px) * var(--font-scale) / 1.6) var(--atlas-sans); }
.leader { fill: none; stroke: var(--region-ink); stroke-width: 1.4; stroke-linejoin: round; }
.station-dot { fill: var(--region-ink); stroke: var(--atlas-page); stroke-width: 2.2; }
.map-label {
  fill: var(--atlas-ink);
  stroke: #f5f6ed;
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  font: 600 calc(var(--map-type, 25px) * var(--font-scale) / 1.6) var(--atlas-serif);
}
.label-hit, .point-hit, .land-hit { opacity: 0; pointer-events: fill; }
.overview:has([data-edition="tokyo"]:is(:hover, :focus-visible)) [data-edition="tokyo"],
.overview:has([data-edition="osaka"]:is(:hover, :focus-visible)) [data-edition="osaka"],
.overview:has([data-edition="nagoya"]:is(:hover, :focus-visible)) [data-edition="nagoya"],
.overview:has([data-edition="hokkaido"]:is(:hover, :focus-visible)) [data-edition="hokkaido"] {
  color: var(--region-ink);
  & strong { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
  & .map-label { fill: var(--region-ink); text-decoration: underline; }
  & .station-dot { stroke-width: 3; r: 8px; }
}
@media (max-width: 800px) {
  .region-index header, .overview { width: min(calc(100% - 36px), 620px); }
  .region-index header { min-height: 60px; }
  .overview {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "map" "list";
    gap: 16px;
    margin-block: 0;
    padding-block: 26px 36px;
  }
  .overview h1 { margin: 0; font-size: 2rem; }
  .region-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9em,100%), 1fr)); column-gap: 20px; }
  .region { grid-template-columns: 7px minmax(0, 1fr); align-content: start; gap: 4px 10px; padding: 14px 0; }
  .region::before { width: 6px; height: 6px; }
  .region small { font-size: .88rem; }
}
@media (max-width: 480px) {
  .leader { stroke-width: 2; }
  .station-dot { r: 7px; }
  .region-list { column-gap: 14px; }
}

@container (max-width: 620px) {
  .map-label { --map-type: 32px; }
  .inset-label { --inset-type: 21px; }
}
@container (max-width: 410px) {
  .map-label { --map-type: 44px; }
  .inset-label { --inset-type: 29px; }
}