/*
 * Pamlico County Story Map — all styles scoped under .psm so a theme's own
 * rules don't leak in and these don't leak out.
 */
.psm {
  --psm-ink: #12171c;
  --psm-soft: #5b6670;
  --psm-rule: #dfe3e7;
  --psm-blue: #1a6fd4;
  --psm-blue-dk: #0f4e9c;
  --psm-sea: #e4ecf1;
  --psm-land: #fff;
  --psm-shore: #b9c8d3;

  color: var(--psm-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;

  /* Themes put this in columns of wildly different widths, so the layout
     responds to the space it actually has, not to the viewport. */
  container-type: inline-size;
  container-name: psm;
}

.psm *,
.psm *::before,
.psm *::after { box-sizing: border-box; }

.psm p { margin: 0; }
.psm a { text-decoration: none; box-shadow: none; }
.psm ol,
.psm ul { list-style: none; margin: 0; padding: 0; }
.psm img { max-width: 100%; height: auto; }

/* Stacked by default; the two-column layout is opted into further down, and
   only once there is room for a readable map beside the panel. */
.psm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.psm-mapframe {
  background: var(--psm-sea);
  border: 1px solid var(--psm-rule);
  border-radius: 10px;
  overflow: hidden;
}
.psm-map { display: block; width: 100%; height: auto; }

/* ---------- map paint ---------- */
.psm-sea { fill: var(--psm-sea); }
.psm-land { fill: var(--psm-land); }
.psm-water { fill: var(--psm-sea); fill-rule: evenodd; }
.psm-shore { fill: none; stroke: var(--psm-shore); stroke-width: 1; vector-effect: non-scaling-stroke; }
.psm-scrim { fill: #fff; opacity: .55; fill-rule: evenodd; }
.psm-countyline { fill: none; stroke: #7b8a97; stroke-width: 2; stroke-dasharray: 9 7; }

.psm-road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.psm-road.psm-minor { stroke: #9aa3ab; stroke-width: 1.2; }
.psm-road.psm-mid   { stroke: #4a5158; stroke-width: 2.2; }
.psm-road.psm-major { stroke: #14181c; stroke-width: 3.6; }

.psm-waterlabel {
  fill: #8ba3b4;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  text-anchor: middle;
}
.psm-roadlabel {
  fill: #6b7480;
  font-size: 14px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
}

/* ---------- town markers ---------- */
.psm-town { cursor: pointer; }
.psm-town .psm-hit { fill: transparent; }
.psm-town .psm-halo { fill: var(--psm-blue); opacity: 0; transition: opacity .15s; }
.psm-town .psm-dot { transition: r .15s, fill .15s, stroke .15s; }
.psm-town .psm-townlabel { paint-order: stroke; stroke: #fff; transition: fill .15s; }
.psm-town:focus { outline: none; }

.psm-town.psm-is-story .psm-dot { fill: var(--psm-blue); stroke: #fff; stroke-width: 2.5; }
.psm-town.psm-is-story .psm-townlabel {
  fill: var(--psm-ink);
  font: 700 19px/1 system-ui, sans-serif;
  stroke-width: 4.5px;
}
.psm-town.psm-is-story:hover .psm-dot,
.psm-town.psm-is-story:focus-visible .psm-dot { r: 10; }

.psm-town.psm-is-plain .psm-dot { fill: #fff; stroke: #8d98a3; stroke-width: 2; }
.psm-town.psm-is-plain .psm-townlabel {
  fill: var(--psm-soft);
  font: 500 15px/1 system-ui, sans-serif;
  stroke-width: 4px;
}
.psm-town.psm-is-plain:hover .psm-dot,
.psm-town.psm-is-plain:focus-visible .psm-dot { r: 7; stroke: var(--psm-blue-dk); }

.psm-town:hover .psm-halo,
.psm-town:focus-visible .psm-halo { opacity: .18; }
.psm-town:hover .psm-townlabel,
.psm-town:focus-visible .psm-townlabel { fill: var(--psm-blue-dk); }

.psm-town.psm-on .psm-halo { opacity: .22; }
.psm-town.psm-on .psm-townlabel { fill: var(--psm-blue-dk); }
.psm-town.psm-is-story.psm-on .psm-dot { r: 10.5; fill: var(--psm-blue-dk); }
.psm-town.psm-is-plain.psm-on .psm-dot { r: 7.5; stroke: var(--psm-blue-dk); stroke-width: 3; }

/* ---------- chips + legend ---------- */
.psm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.psm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--psm-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--psm-ink);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color .12s, background .12s, color .12s;
}
.psm-chip:hover { border-color: var(--psm-blue); color: var(--psm-blue-dk); }
.psm-chip.psm-on { background: var(--psm-blue-dk); border-color: var(--psm-blue-dk); color: #fff; }
.psm-chip-n {
  font-size: .75rem;
  font-weight: 700;
  color: var(--psm-soft);
  background: #eef1f4;
  border-radius: 999px;
  padding: 1px 7px;
}
.psm-chip.psm-on .psm-chip-n { background: rgba(255, 255, 255, .22); color: #fff; }
.psm-chip-plain { font-weight: 500; color: var(--psm-soft); border-style: dashed; }
.psm-chip-plain.psm-on { color: #fff; border-style: solid; }

.psm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  margin-top: 14px !important;
  font-size: .78rem;
  color: var(--psm-soft);
}
.psm-key { display: inline-block; margin-right: 6px; vertical-align: middle; }
.psm-key-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--psm-blue); }
.psm-key-hollow { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #8d98a3; }
.psm-key-road { width: 22px; height: 3px; background: #14181c; }
.psm-key-line { width: 22px; border-top: 2px dashed #7b8a97; }

.psm-panhint { display: none; margin-top: 8px !important; font-size: .75rem; color: var(--psm-soft); }
.psm-credit { margin-top: 16px !important; font-size: .75rem; color: var(--psm-soft); }
.psm-credit a { color: var(--psm-blue-dk); text-decoration: underline; }

/* ---------- panel ---------- */
.psm-panel {
  background: #fff;
  border: 1px solid var(--psm-rule);
  border-radius: 10px;
  padding: 22px;
}
.psm-panel.psm-loading { opacity: .45; }

.psm-panel-head { border-bottom: 1px solid var(--psm-rule); padding-bottom: 16px; }
.psm-back { display: inline-block; margin-bottom: 10px; font-size: .82rem; font-weight: 600; color: var(--psm-blue-dk); }
.psm-back:hover { text-decoration: underline; }
.psm-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--psm-soft);
}
.psm-h2 {
  margin: 4px 0 6px !important;
  padding: 0;
  font: 700 1.6rem/1.15 Georgia, "Times New Roman", serif;
  letter-spacing: -.015em;
  color: var(--psm-ink);
}
.psm-lede { margin-top: 10px !important; color: #3b454e; }
.psm-meta { margin-top: 2px !important; font-size: .88rem; color: var(--psm-soft); }
.psm-tag-plain { font-style: italic; }
.psm-note {
  margin-top: 10px !important;
  padding-left: 11px;
  border-left: 3px solid var(--psm-rule);
  font-size: .84rem;
  color: var(--psm-soft);
}
.psm-empty { margin-top: 16px !important; color: var(--psm-soft); }

.psm-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 15px;
  border: 1px solid var(--psm-blue-dk);
  border-radius: 7px;
  background: var(--psm-blue-dk);
  color: #fff;
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.3;
}
.psm-btn:hover { background: #0b3f80; color: #fff; }
.psm-btn-quiet { background: #fff; color: var(--psm-blue-dk); border-color: var(--psm-rule); }
.psm-btn-quiet:hover { background: #f3f6f9; color: var(--psm-blue-dk); }

.psm-subhead {
  margin: 26px 0 2px !important;
  padding: 0;
  font: 700 .72rem/1.3 system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--psm-soft);
}
.psm-townlist-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--psm-rule);
  color: var(--psm-ink);
}
.psm-townlist-link:hover .psm-townlist-name { color: var(--psm-blue-dk); text-decoration: underline; }
.psm-townlist-name { font-weight: 600; }
.psm-townlist-count { font-size: .82rem; color: var(--psm-soft); font-variant-numeric: tabular-nums; }
.psm-townlist-plain .psm-townlist-name { font-weight: 500; color: var(--psm-soft); }

.psm-story { border-bottom: 1px solid var(--psm-rule); }
.psm-story:last-child { border-bottom: 0; }
.psm-story > a { display: flex; gap: 13px; padding: 15px 2px; color: inherit; }
.psm-story > a:hover .psm-story-title { color: var(--psm-blue-dk); text-decoration: underline; }
.psm-thumb {
  flex: 0 0 88px;
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 5px;
  background: #eef1f4;
}
.psm-story-text { display: block; min-width: 0; }
.psm-story-title {
  display: block;
  margin-bottom: 3px;
  font: 600 1rem/1.3 Georgia, "Times New Roman", serif;
}
.psm-story time { font-size: .75rem; color: var(--psm-soft); }
.psm-story-excerpt {
  display: block;
  margin-top: 5px;
  font-size: .85rem;
  line-height: 1.45;
  color: #4a545d;
}

/* ---------- sizing to the container ----------
 * Town names are drawn in SVG user units on a 1240-unit-wide map, so the size
 * they end up at depends entirely on how wide the map is rendered. These bands
 * keep them legible from a sidebar up to a full-width page.
 */

/* stacked, container 700-920: map is the full container width */
.psm-town.psm-is-story .psm-townlabel { font-size: 22px; }
.psm-town.psm-is-plain .psm-townlabel { font-size: 17px; }
.psm-roadlabel { font-size: 16px; }

/* stacked and roomy: the map is wide, so the names can come back down */
@container psm (min-width: 920px) {
  .psm-town.psm-is-story .psm-townlabel { font-size: 19px; }
  .psm-town.psm-is-plain .psm-townlabel { font-size: 15px; }
  .psm-roadlabel { font-size: 14px; }
}

/* room for map and panel side by side, with the map still readable */
@container psm (min-width: 1080px) {
  .psm-layout-side .psm-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
  }
  .psm-layout-side .psm-panel {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* the map column is now ~400px narrower than the container */
  .psm-layout-side .psm-town.psm-is-story .psm-townlabel { font-size: 23px; }
  .psm-layout-side .psm-town.psm-is-plain .psm-townlabel { font-size: 17px; }
  .psm-layout-side .psm-roadlabel { font-size: 16px; }
}

@container psm (min-width: 1350px) {
  .psm-layout-side .psm-town.psm-is-story .psm-townlabel { font-size: 18px; }
  .psm-layout-side .psm-town.psm-is-plain .psm-townlabel { font-size: 14px; }
  .psm-layout-side .psm-roadlabel { font-size: 13px; }
}

/* Too narrow to shrink the map any further without the names turning to mush,
   so hold it at a legible width and let it pan sideways instead. */
@container psm (max-width: 700px) {
  .psm-mapframe { overflow-x: auto; overscroll-behavior-x: contain; }
  .psm-map { width: 640px; }
  .psm-town.psm-is-story .psm-townlabel { font-size: 25px; stroke-width: 6px; }
  .psm-town.psm-is-plain .psm-townlabel { font-size: 19px; }
  .psm-town .psm-dot { stroke-width: 3; }
  .psm-roadlabel { font-size: 19px; }
  .psm-panhint { display: block; }
  .psm-chip { padding: 6px 11px; font-size: .85rem; }
  .psm-legend { gap: 4px 14px; }
}

/* Same treatment on phones, for browsers without container query support. */
@media (max-width: 700px) {
  .psm-mapframe { overflow-x: auto; overscroll-behavior-x: contain; }
  .psm-map { width: 640px; }
  .psm-town.psm-is-story .psm-townlabel { font-size: 25px; stroke-width: 6px; }
  .psm-town.psm-is-plain .psm-townlabel { font-size: 19px; }
  .psm-roadlabel { font-size: 19px; }
  .psm-panhint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .psm * { transition: none !important; }
}