/* /local/ — state picker for the 50 state editions (<state>.offthepress.com), 2026-10-29.
   The map is pre-drawn SVG (us-atlas states-albers-10m), one <a> per state, so it works
   with no JS; local.js only adds the hover caption. Regenerate the SVG with the one-off
   node script recorded in the commit message if a state's address ever changes. */
.local-main .container-fluid { max-width: 1000px; }
.local-title { text-align: center; margin-bottom: 10px; }
.local-lede { text-align: center; color: var(--mid-gray); font-size: 17px; max-width: 640px; margin: 0 auto 24px; }

.local-map-wrap { position: relative; }
.lm-map { display: block; width: 100%; height: auto; }
.lm-state path {
  fill: #dcdfe3; stroke: var(--white); stroke-width: 1; stroke-linejoin: round;
  transition: fill .12s;
}
.lm-state:hover path, .lm-state:focus path, .lm-state.is-on path { fill: var(--red); }
.lm-state:focus { outline: none; }
.lm-state:focus-visible path { stroke: var(--black); stroke-width: 2; }
.lm-labels text, .lm-callouts text {
  font: 700 12px var(--font-sans); fill: #3a3f45; text-anchor: middle; dominant-baseline: middle;
  pointer-events: none;
}
.lm-labels text.is-on, .lm-callouts .is-on text { fill: var(--white); }
.lm-callouts line { stroke: #9aa0a6; stroke-width: 1; }
.lm-callouts rect { fill: #dcdfe3; transition: fill .12s; }
.lm-callout:hover rect, .lm-callout:focus rect, .lm-callout.is-on rect { fill: var(--red); }
.lm-callout:hover text, .lm-callout:focus text { fill: var(--white); }
.lm-callout:focus { outline: none; }
.lm-callout:focus-visible rect { stroke: var(--black); stroke-width: 2; }

.local-hover {
  text-align: center; font: 900 22px var(--font-serif); color: var(--black);
  min-height: 1.4em; margin: 6px 0 0;
}

.local-list { margin-top: 36px; border-top: 1px solid var(--border); padding-top: 24px; }
.local-list h2 {
  font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mid-gray); margin: 0 0 14px;
}
.local-list ul { list-style: none; margin: 0; padding: 0; columns: 5 150px; column-gap: 24px; }
.local-list li { break-inside: avoid; }
.local-list a {
  display: block; padding: 6px 0; font-size: 15px; font-weight: 700; color: var(--black);
  text-decoration: none; border-bottom: 1px solid var(--light-gray);
}
.local-list a:hover, .local-list a:focus { color: var(--red); }

@media (max-width: 768px) {
  .local-title { font-size: 32px; }
  .local-lede { font-size: 15px; padding: 0 4px; }
  .lm-labels text { font-size: 15px; }
  .local-hover { display: none; }
  .local-list ul { columns: 2; column-gap: 16px; }
  .local-list a { padding: 10px 0; }
}