.map-overview-page {
  --maps-navy: #0a1120;
  --maps-panel: rgba(14, 24, 42, 0.92);
  --maps-panel-soft: rgba(13, 22, 38, 0.78);
  --maps-gold: #e8c46f;
  --maps-gold-soft: rgba(232, 196, 111, 0.42);
  --maps-parchment: #f6ead0;
  --maps-muted: rgba(241, 228, 198, 0.72);
  min-height: 100vh;
  /* The teal wash is sized to the first viewport rather than a fixed radius:
     at 44rem it died ~700px down and left the remaining several thousand
     pixels of article sitting on flat black. The field underneath grades over
     the whole document, matching how the other page classes are built. */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(36, 115, 126, 0.22), transparent 60%)
      50% 0 / 100% min(900px, 100vh) no-repeat,
    linear-gradient(180deg, #0a1322 0%, #08111d 38%, #091626 100%);
}

.map-overview-page .site-shell-header {
  position: relative;
}

.maps-shell,
.map-detail-layout,
.map-detail-footnote {
  width: min(1420px, calc(100% - clamp(2rem, 6vw, 7rem)));
  margin-inline: auto;
}

.maps-shell {
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  padding: clamp(2rem, 4vw, 4rem) 0 4rem;
}

.maps-panel {
  overflow: hidden;
  border: 1px solid rgba(213, 177, 101, 0.34);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 236, 176, 0.05), rgba(0, 0, 0, 0.12)),
    var(--maps-panel-soft);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.maps-band {
  padding: 0.62rem 0.85rem;
  border-bottom: 3px double rgba(232, 196, 111, 0.45);
  color: #fff0c2;
  background: linear-gradient(180deg, rgba(31, 50, 82, 0.94), rgba(14, 24, 42, 0.95));
  font-family: var(--site-font-title);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-kicker {
  margin: 0;
  color: var(--maps-gold);
  font-family: var(--site-font-body);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.maps-index-hero {
  padding: 7px;
  border-radius: 7px;
  background: linear-gradient(180deg, #e4c078, #a9761f 52%, #6d4611);
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 251, 232, 0.6);
}

.maps-index-hero-inner {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid rgba(255, 236, 176, 0.18);
  border-radius: 3px;
  background:
    radial-gradient(60% 130% at 10% -10%, rgba(232, 196, 111, 0.15), transparent 62%),
    radial-gradient(70% 130% at 92% 0%, rgba(36, 115, 126, 0.22), transparent 64%),
    linear-gradient(180deg, rgba(28, 46, 76, 0.97), rgba(10, 17, 32, 0.99));
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.85);
}

.maps-index-hero h1,
.map-detail-hero h1 {
  margin: 0.35rem 0 0;
  color: #fff6dd;
  font-family: var(--site-font-title);
  font-weight: 760;
  letter-spacing: 0.015em;
  line-height: 0.94;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.65);
}

.maps-index-hero h1 {
  font-size: clamp(2.7rem, 5vw, 4.2rem);
}

.maps-title-underline {
  width: min(290px, 56%);
  height: 9px;
  margin: 0.6rem 0 0.2rem;
  background: url("/static/assets/optimized/images/homepage/Header_Underline.5df0d77f55da.webp") center / 100% 100% no-repeat;
  opacity: 0.82;
}

.maps-index-lede {
  max-width: 62ch;
  margin: 0.5rem 0 0;
  color: var(--maps-parchment);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.5;
}

.maps-index-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.5rem, 4vw, 3.4rem);
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(213, 177, 101, 0.38);
}

.maps-index-stats div {
  display: grid;
  gap: 0.14rem;
}

/* Ruled dividers between the rail figures, per the design's hero rail. */
.maps-index-stats div + div {
  padding-left: clamp(1.4rem, 3vw, 2.8rem);
  border-left: 1px solid rgba(213, 177, 101, 0.34);
}

.maps-index-stats dt {
  color: var(--maps-gold);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.maps-index-stats dd {
  grid-row: 1;
  margin: 0;
  color: #fff6dd;
  font-family: var(--site-font-title);
  font-size: 1.55rem;
}

/* Engraved band: the design's heavier title treatment for the methodology
   panel — gradient bar, gold diamond marker, and a rule under the edge. */
.maps-methodology .maps-band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.66rem 0.9rem;
  border-bottom: 1px solid rgba(169, 121, 35, 0.9);
  background: linear-gradient(180deg, rgba(31, 50, 82, 0.95), rgba(16, 27, 46, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.14), inset 0 -3px 0 rgba(232, 196, 111, 0.16);
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.maps-methodology .maps-band::before {
  width: 6px;
  height: 6px;
  flex: none;
  content: "";
  transform: rotate(45deg);
  background: var(--maps-gold);
  box-shadow: 0 0 8px rgba(232, 196, 111, 0.7);
}

.maps-methodology .maps-band::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(232, 196, 111, 0.55) 12%, rgba(232, 196, 111, 0.55) 88%, transparent);
}

.maps-methodology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  padding: 1.35rem 1.5rem 1.55rem;
}

.maps-methodology h2 {
  margin: 0 0 0.42rem;
  color: var(--maps-gold);
  font-family: var(--site-font-body);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.maps-methodology p,
.maps-set-description,
.maps-footnote {
  color: var(--maps-muted);
  line-height: 1.55;
}

.maps-methodology p {
  margin: 0;
}

.maps-browser-panel {
  display: flex;
  align-items: end;
  gap: 0.85rem 1.1rem;
  padding: 0.95rem 1.1rem;
}

.maps-browser-panel .map-control-search {
  flex: 1 1 320px;
}

.maps-browser-panel > p {
  flex: none;
  margin: 0 0 0.62rem auto;
  color: var(--maps-muted);
  font-size: 0.85rem;
}

.map-control {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

.map-control > span {
  color: var(--maps-gold);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.map-control input,
.map-control select {
  width: 100%;
  min-height: 44px;
  padding: 0.58rem 0.7rem;
  border: 1px solid rgba(213, 177, 101, 0.4);
  border-radius: 5px;
  color: #fff6dd;
  background: rgba(7, 13, 24, 0.84);
}

.map-control input::placeholder {
  color: rgba(241, 228, 198, 0.46);
  font-style: italic;
}

.map-control input:focus-visible,
.map-control select:focus-visible {
  outline: none;
  border-color: rgba(235, 199, 119, 0.7);
  box-shadow: 0 0 18px rgba(225, 173, 76, 0.18);
}

.maps-card-section {
  display: grid;
  gap: 1.15rem;
}

/* Author `display` declarations outrank the UA rule for [hidden], so the
   set-group toggles need an explicit opt-out or a deselected map set would
   stay visible once a second set is registered. */
.maps-card-section[hidden],
.map-browser-set[hidden] {
  display: none;
}

.map-section-heading {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: end;
  gap: 0 5px;
  padding: 1.35rem 0 0.55rem;
  border-bottom: 1px solid rgba(213, 177, 101, 0.42);
}

.map-section-number {
  grid-row: span 2;
  color: rgba(232, 196, 111, 0.22);
  font-family: var(--site-font-title);
  font-size: 4rem;
  line-height: 0.78;
}

.map-section-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  padding-bottom: 0.28rem;
  color: var(--maps-gold);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.map-section-eyebrow::before {
  width: 20px;
  height: 2px;
  content: "";
  background: var(--maps-gold);
}

.map-section-heading h2 {
  margin: 0;
  color: #fff2d2;
  font-family: var(--site-font-title);
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.maps-set-description {
  max-width: 92ch;
  margin: 0;
}

/* auto-fill rather than a fixed column count: pools vary in size and the
   track floor is what keeps the card art legible. */
.maps-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 1.1rem;
}

.maps-card,
.maps-card > a,
.maps-card > div {
  min-width: 0;
}

.maps-card > a,
.maps-card > div {
  display: grid;
  overflow: hidden;
  height: 100%;
  border: 1px solid rgba(213, 177, 101, 0.28);
  border-radius: 7px;
  color: inherit;
  background: linear-gradient(180deg, rgba(255, 231, 158, 0.05), rgba(0, 0, 0, 0.1)), #0d1728;
  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.24);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.maps-card > a:hover,
.maps-card > a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(235, 199, 119, 0.6);
  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.32), 0 0 24px rgba(225, 173, 76, 0.14);
}

/* The design frames square minimap art at 4/3; our card assets are purpose-cut
   2:1 preview banners, so the ratio follows the art and only the design's
   colour lift carries over. */
.maps-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-bottom: 1px solid rgba(213, 177, 101, 0.3);
  filter: saturate(1.16) contrast(1.06) brightness(1.1);
}

.maps-card-copy {
  display: grid;
  align-content: start;
  gap: 0.38rem;
  padding: 0.82rem 0.9rem 0.95rem;
}

.maps-card-copy strong {
  color: #fff6dd;
  font-family: var(--site-font-title);
  font-size: 1.16rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.maps-card-copy > span {
  color: var(--maps-muted);
  font-size: 0.88rem;
  line-height: 1.42;
}

.maps-card-copy small {
  color: var(--maps-gold);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.maps-card-unpublished img {
  filter: grayscale(0.68) brightness(0.62);
  opacity: 0.75;
}

.maps-card-unpublished > div {
  border-color: rgba(213, 177, 101, 0.15);
  background: rgba(12, 20, 36, 0.62);
  box-shadow: none;
}

.maps-card-unpublished .maps-card-copy strong,
.maps-card-unpublished .maps-card-copy small {
  color: rgba(241, 228, 198, 0.5);
}

.maps-empty-state,
.map-browser-empty {
  margin: 0;
  padding: 1rem;
  color: var(--maps-muted);
  text-align: center;
}

/* Per-pool empty state, in the design's dashed "pending" treatment. */
.maps-set-empty {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0;
  padding: 1rem 1.2rem;
  border: 1px dashed rgba(213, 177, 101, 0.5);
  border-radius: 5px;
  background: rgba(20, 34, 58, 0.55);
  color: var(--maps-muted);
  line-height: 1.55;
}

.maps-set-empty[hidden] {
  display: none;
}

.maps-set-empty-tag {
  flex: none;
  margin-top: 0.1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  background: rgba(232, 196, 111, 0.16);
  color: var(--maps-gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.maps-footnote {
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(213, 177, 101, 0.28);
  font-size: 0.86rem;
}

/* Detail page */
.map-detail-shell {
  min-width: 0;
  padding-bottom: 4rem;
}

.map-detail-hero {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  border-bottom: 2px solid rgba(213, 177, 101, 0.58);
  background:
    linear-gradient(92deg, rgba(8, 14, 27, 0.98) 0%, rgba(8, 14, 27, 0.83) 40%, rgba(8, 14, 27, 0.36) 74%, rgba(8, 14, 27, 0.68) 100%),
    linear-gradient(180deg, transparent 48%, rgba(8, 14, 27, 0.96)),
    var(--map-hero) center 43% / cover no-repeat;
}

.map-detail-hero-inner {
  display: grid;
  align-content: center;
  gap: 0.9rem;
  width: min(1420px, calc(100% - clamp(2rem, 7vw, 9rem)));
  min-height: 500px;
  margin-inline: auto;
  padding: 3.2rem 0 2.7rem;
}

.map-detail-hero h1 {
  font-size: clamp(4rem, 8vw, 6.8rem);
}

.map-detail-hero blockquote {
  max-width: 50ch;
  margin: 0;
  color: var(--maps-parchment);
  font-size: clamp(1.12rem, 1.75vw, 1.4rem);
  line-height: 1.42;
}

.map-official-source {
  margin: -0.35rem 0 0;
  color: rgba(241, 228, 198, 0.6);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* One shared track set for every row, so the rating words (which vary in
   length) can never leave the meters at different widths. */
.map-hero-summary {
  display: grid;
  grid-template-columns: 5.3rem minmax(0, 1fr) auto;
  row-gap: 0.5rem;
  column-gap: 0.75rem;
  width: min(600px, 100%);
  margin-top: 0.3rem;
  padding: 0.85rem 1.05rem;
  border-left: 3px solid var(--maps-gold);
  background: linear-gradient(90deg, rgba(15, 27, 45, 0.92), rgba(15, 27, 45, 0.24));
}

/* The design reads the ratings as proportional meters rather than dots: the
   segment track owns the free column so every bar spans the same width. */
.map-hero-summary-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: 0.75rem;
}

.map-hero-summary-row + .map-hero-summary-row {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(213, 177, 101, 0.16);
}

.map-hero-summary-desc {
  grid-column: 2 / -1;
  margin: -0.2rem 0 0;
  color: var(--maps-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.map-hero-summary-scale + .map-hero-summary-desc {
  border-bottom: 1px solid rgba(213, 177, 101, 0.16);
  padding-bottom: 0.5rem;
}

.map-hero-summary-label {
  color: var(--maps-gold);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.map-hero-summary-value {
  color: #fff6dd;
  font-family: var(--site-font-title);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-style: normal;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.map-hero-summary-value i {
  color: var(--maps-gold);
  font-style: normal;
}

.map-hero-segments {
  display: flex;
  min-width: 0;
  gap: 4px;
}

.map-hero-segment {
  flex: 1;
  height: 9px;
  background: transparent;
  border: 1px solid rgba(213, 177, 101, 0.32);
}

.map-hero-segment.is-filled {
  background: var(--maps-gold);
  border-color: var(--maps-gold);
  box-shadow: 0 0 12px rgba(225, 173, 76, 0.35);
}

/* A half-earned segment: the rating is real but the resource is conditional. */
.map-hero-segment.is-variable {
  background: repeating-linear-gradient(135deg, rgba(232, 196, 111, 0.5) 0 3px, transparent 3px 6px);
  border-color: rgba(213, 177, 101, 0.5);
}

.map-detail-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 328px;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.map-article {
  grid-row: 1;
  grid-column: 2;
}

.map-facts {
  grid-row: 1;
  grid-column: 3;
}

.map-browser-column {
  position: sticky;
  top: 1rem;
  min-width: 0;
  grid-column: 1;
}

/* Column-flex so the list is the only scrolling part and the panel tracks the
   viewport height while stuck, as in the design. */
.map-browser {
  display: flex;
  overflow: hidden;
  max-height: calc(100vh - 2.5rem);
  flex-direction: column;
  border: 4px double rgba(213, 177, 101, 0.5);
  border-radius: 6px;
  background: var(--maps-panel);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 236, 176, 0.05);
}

.map-browser-heading {
  margin: 0;
  flex: none;
}

.map-browser-controls {
  display: grid;
  flex: none;
  gap: 0.7rem;
  padding: 0.8rem;
  border-bottom: 1px solid rgba(213, 177, 101, 0.24);
  background: rgba(20, 34, 58, 0.5);
}

.map-control-mobile-map {
  display: none;
}

.map-browser-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.map-browser-set-label {
  display: flex;
  justify-content: space-between;
  padding: 0.62rem 0.72rem;
  color: var(--maps-gold);
  background: rgba(20, 34, 58, 0.88);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-browser-row > a,
.map-browser-unpublished {
  display: flex;
  align-items: center;
  min-height: 43px;
  gap: 0.55rem;
  padding: 0.36rem 0.58rem;
  border-bottom: 1px solid rgba(213, 177, 101, 0.13);
  border-left: 3px solid transparent;
  color: var(--maps-muted);
  font-size: 0.91rem;
  text-decoration: none;
}

.map-browser-row img {
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid rgba(213, 177, 101, 0.38);
  border-radius: 3px;
  object-fit: cover;
}

.map-browser-row > a:hover,
.map-browser-row > a:focus-visible,
.map-browser-row > a[aria-current="page"] {
  border-left-color: var(--maps-gold);
  color: #fff6dd;
  background: linear-gradient(90deg, rgba(255, 236, 176, 0.14), rgba(255, 236, 176, 0.02));
}

.map-browser-unpublished {
  color: rgba(241, 228, 198, 0.49);
}

.map-browser-unpublished img {
  filter: grayscale(0.75) brightness(0.65);
}

.map-browser-unpublished small {
  margin-left: auto;
  color: rgba(232, 196, 111, 0.5);
  font-size: 0.53rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-article {
  min-width: 0;
  max-width: 1010px;
  color: var(--maps-parchment);
}

/* Reference data, so it tracks the prose the whole way down rather than
   leaving a dead column: same sticky-rail treatment as the map browser. */
.map-facts {
  position: sticky;
  top: 1rem;
  display: flex;
  overflow: hidden;
  max-height: calc(100vh - 2.5rem);
  min-width: 0;
  flex-direction: column;
  border: 4px double rgba(213, 177, 101, 0.5);
  border-radius: 6px;
  background: var(--maps-panel);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 236, 176, 0.05);
}

.map-facts > .maps-band {
  flex: none;
}

.map-facts-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.map-facts-figure {
  padding: 0.8rem;
  border-bottom: 1px solid rgba(213, 177, 101, 0.24);
}

.map-facts-figure p {
  margin: 0.5rem 0 0;
  color: var(--maps-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.map-facts-minimap {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(213, 177, 101, 0.46);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.map-facts-table {
  width: 100%;
  border-collapse: collapse;
}

.map-facts-table th,
.map-facts-table td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid rgba(213, 177, 101, 0.14);
  text-align: left;
  vertical-align: top;
}

.map-facts-table th {
  width: 42%;
  border-right: 1px solid rgba(213, 177, 101, 0.24);
  color: var(--maps-gold);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.map-facts-table td {
  color: #fff4d3;
  font-size: 0.94rem;
  line-height: 1.4;
}

/* Banded rows keep a long fact list scannable at this narrow measure. */
.map-facts-table tr:nth-child(even) th,
.map-facts-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}

.map-facts-table td small {
  display: block;
  padding-top: 0.18rem;
  color: rgba(241, 228, 198, 0.55);
  font-size: 0.7rem;
  line-height: 1.4;
}

.map-article-section {
  margin-bottom: 2.4rem;
}

.map-article-section > p {
  margin: 1rem 0;
  color: rgba(246, 234, 208, 0.89);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.68;
}

/* Subheads sit inside a section, so they stay in the body face and lean on
   colour and tracking rather than a second rule competing with the 0N header. */
.map-article-section > h3 {
  margin: 1.7rem 0 -0.3rem;
  color: var(--maps-gold);
  font-family: var(--site-font-body);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-callout {
  margin: 1.6rem 0;
  padding: 1rem 0;
  border-top: 1px solid rgba(213, 177, 101, 0.4);
  border-bottom: 1px solid rgba(213, 177, 101, 0.4);
  color: #fff0c2;
  font-family: var(--site-font-body);
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}

.map-table-wrap {
  overflow-x: auto;
  margin: 1.2rem 0;
  border: 1px solid rgba(213, 177, 101, 0.32);
  border-radius: 5px;
}

.map-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.89rem;
}

.map-table-wrap th,
.map-table-wrap td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgba(213, 177, 101, 0.17);
  text-align: left;
}

.map-table-wrap tbody tr:hover td {
  background: rgba(255, 236, 176, 0.07);
}

.map-table-wrap th {
  color: var(--maps-gold);
  background: rgba(20, 34, 58, 0.86);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Framed plate: gilt outer edge, black mount, then a hairline gold rebate
   around the panel itself. */
.map-overhead-plate {
  margin: 1.5rem 0;
  border: 3px solid #a97923;
  border-radius: 4px;
  background: #05060c;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34), 0 0 24px rgba(225, 173, 76, 0.12);
  transition: border-color 280ms ease, box-shadow 280ms ease;
}

.map-overhead-plate:hover,
.map-overhead-plate:focus-within {
  border-color: #d5b165;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 34px rgba(225, 173, 76, 0.22);
}

.map-overhead-frame {
  overflow: hidden;
  border: 4px solid #05060c;
  border-radius: 2px;
  outline: 1px solid rgba(232, 196, 111, 0.55);
  outline-offset: -5px;
  background: var(--maps-panel);
}

.map-overhead-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.64rem 0.9rem;
  border-bottom: 3px double rgba(232, 196, 111, 0.55);
  color: #fff0c2;
  background: linear-gradient(180deg, rgba(20, 34, 58, 0.98), rgba(10, 17, 32, 0.98));
  font-family: var(--site-font-title);
  font-size: 0.84rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.map-overhead-bar-end {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.6rem;
  color: var(--maps-gold);
  font-family: var(--site-font-body);
  font-size: 0.62rem;
  font-weight: 850;
}

.map-overhead-counter {
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(232, 196, 111, 0.34);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Step controls only exist when an article carries more than one view. */
.map-overhead-stage {
  position: relative;
}

.map-overhead-step {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: 1px solid rgba(232, 196, 111, 0.45);
  border-radius: 999px;
  color: #fff0c2;
  background: rgba(10, 17, 32, 0.82);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.map-overhead-step:hover,
.map-overhead-step:focus-visible {
  border-color: rgba(235, 199, 119, 0.85);
  background: rgba(20, 34, 58, 0.95);
}

.map-overhead-step-prev { left: 14px; }
.map-overhead-step-next { right: 14px; }

.map-overhead-button {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  background: radial-gradient(80% 80% at 50% 40%, rgba(36, 115, 126, 0.16), transparent 70%);
  cursor: zoom-in;
}

.map-overhead-button img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(232, 196, 111, 0.35);
  filter: saturate(1.1) contrast(1.04) brightness(1.06);
}

.map-overhead-plate figcaption {
  padding: 0.78rem 0.95rem 0.9rem;
  border-top: 1px solid rgba(213, 177, 101, 0.25);
  color: var(--maps-muted);
  font-size: 0.87rem;
  line-height: 1.5;
}

.map-overhead-plate figcaption small {
  display: block;
  margin-top: 0.35rem;
  color: rgba(241, 228, 198, 0.5);
}

.map-evidence-label {
  display: inline-flex;
  margin-left: 0.4rem;
  padding: 0.12rem 0.35rem;
  border: 1px solid rgba(232, 196, 111, 0.34);
  border-radius: 3px;
  color: var(--maps-gold);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.map-sources {
  margin-top: 2rem;
}

.map-sources > p {
  margin: 1rem 1.1rem;
  color: var(--maps-muted);
  line-height: 1.55;
}

.map-sources ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1rem;
  margin: 0;
  padding: 0 1.1rem 1.15rem;
  list-style: none;
}

.map-sources li {
  color: rgba(241, 228, 198, 0.64);
  font-size: 0.78rem;
  line-height: 1.4;
}

.map-sources li span {
  display: block;
  color: var(--maps-gold);
  font-weight: 820;
}

.map-detail-footnote {
  margin-top: 2.5rem;
}

body.map-viewer-open {
  overflow: hidden;
}

.map-viewer {
  width: min(1180px, calc(100vw - 2rem));
  max-width: none;
  height: min(900px, calc(100vh - 2rem));
  max-height: none;
  padding: 0;
  border: 3px solid #b8872b;
  border-radius: 5px;
  color: var(--maps-parchment);
  background: #070c15;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.72), 0 0 45px rgba(225, 173, 76, 0.18);
}

.map-viewer::backdrop {
  background: rgba(1, 4, 10, 0.86);
  backdrop-filter: blur(5px);
}

.map-viewer-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  border: 4px solid #05060c;
  outline: 1px solid rgba(232, 196, 111, 0.5);
  outline-offset: -5px;
}

.map-viewer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.55rem 0.55rem 1rem;
  border-bottom: 3px double rgba(232, 196, 111, 0.55);
  background: linear-gradient(180deg, rgba(20, 34, 58, 0.98), rgba(10, 17, 32, 0.98));
}

.map-viewer h2 {
  margin: 0;
  color: #fff0c2;
  font-family: var(--site-font-title);
  font-size: clamp(0.83rem, 1.6vw, 1.05rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-viewer [data-map-viewer-close] {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(232, 196, 111, 0.5);
  border-radius: 50%;
  color: #fff1c5;
  background: rgba(5, 10, 19, 0.8);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.map-viewer-image-wrap {
  display: grid;
  min-height: 0;
  padding: 14px;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(80% 80% at 50% 40%, rgba(36, 115, 126, 0.16), transparent 70%);
}

.map-viewer-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.map-viewer-frame > p {
  margin: 0;
  padding: 0.78rem 0.95rem;
  border-top: 1px solid rgba(213, 177, 101, 0.25);
  color: var(--maps-muted);
  font-size: 0.87rem;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .map-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .map-browser-column,
  .map-article,
  .map-facts {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .map-browser-column {
    position: static;
  }

  /* Full-width facts panel: no longer a viewport-height sticky rail, and the
     minimap reads better beside the table than above it at this measure. */
  .map-facts {
    position: static;
    display: block;
    max-height: none;
  }

  .map-facts-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    overflow: visible;
  }

  .map-facts-figure {
    border-right: 1px solid rgba(213, 177, 101, 0.24);
    border-bottom: 0;
  }

  /* Stacked layout: the panel is no longer a viewport-height sticky rail, so
     it must release both the height cap and the internal scroll. */
  .map-browser {
    display: block;
    max-height: none;
  }

  .map-browser-controls {
    grid-template-columns: minmax(200px, 1fr) minmax(180px, 0.45fr);
  }

  .map-browser-list {
    overflow: visible;
  }

  /* Rows live inside a per-set group, so the stacked-layout grid belongs on
     the group rather than on the scroll container. */
  .map-browser-set {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .map-browser-set-label,
  .map-browser-empty {
    grid-column: 1 / -1;
  }

  .map-browser-row > a,
  .map-browser-unpublished {
    min-width: 0;
  }

  .map-browser-unpublished small {
    display: none;
  }
}

@media (max-width: 900px) {
  .map-detail-hero,
  .map-detail-hero-inner {
    min-height: 460px;
  }

  .map-browser-set {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .maps-shell,
  .map-detail-layout,
  .map-detail-footnote {
    width: calc(100% - 2rem);
  }

  .maps-shell {
    padding-top: 1.5rem;
  }

  .maps-index-hero-inner {
    padding: 1.65rem 1.3rem;
  }

  .maps-index-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .maps-index-stats dt {
    font-size: 0.54rem;
  }

  .maps-index-stats dd {
    font-size: 1.25rem;
  }

  .map-sources ul {
    grid-template-columns: 1fr;
  }

  /* Below the 252px track floor auto-fill would still leave one cramped
     column, so pin it explicitly. */
  .maps-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .maps-browser-panel {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .maps-browser-panel > p {
    margin: 0;
  }

  .map-section-heading {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .map-section-number {
    font-size: 3.1rem;
  }

  .map-detail-hero {
    min-height: 520px;
    background-position: 58% center;
  }

  .map-detail-hero-inner {
    width: calc(100% - 2rem);
    min-height: 520px;
    padding: 2.4rem 0 2rem;
  }

  .map-detail-hero h1 {
    font-size: clamp(3.5rem, 18vw, 5rem);
  }

  .map-hero-summary {
    width: 100%;
    padding: 0.7rem 0.85rem;
  }

  .map-hero-summary {
    grid-template-columns: 3.9rem minmax(0, 1fr) auto;
    column-gap: 0.55rem;
  }

  .map-hero-summary-row {
    column-gap: 0.55rem;
  }

  .map-hero-summary-desc {
    font-size: 0.74rem;
  }

  .map-hero-summary-label {
    font-size: 0.58rem;
  }

  .map-hero-summary-value {
    font-size: 0.92rem;
  }

  .map-browser-controls {
    grid-template-columns: 1fr;
  }

  .map-control-mobile-map {
    display: grid;
  }

  .map-browser-list {
    display: none;
  }

  .map-facts-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .map-facts-figure {
    border-right: 0;
    border-bottom: 1px solid rgba(213, 177, 101, 0.24);
  }

  /* Keep the view counter on small screens; only drop the enlarge hint. */
  .map-overhead-hint {
    display: none;
  }

  .map-overhead-step {
    width: 40px;
    height: 40px;
  }

  .map-viewer {
    width: calc(100vw - 1rem);
    height: calc(100vh - 1rem);
  }

  .map-viewer-frame > p {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .maps-card > a,
  .maps-card > div,
  .map-overhead-step {
    transition: none;
  }

  .maps-card > a:hover,
  .maps-card > a:focus-visible {
    transform: none;
  }
}