.map-page { padding-top: 66px; padding-bottom: 110px; }
.map-intro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 370px); gap: 15px 75px; align-items: end; padding: 0 0 45px; }
.map-intro .eyebrow { grid-column: 1 / -1; margin: 0; }
.map-intro h1 { grid-column: 1; margin: 0; font: 400 clamp(58px, 7.5vw, 132px)/.98 var(--etch); letter-spacing: -.055em; }
.map-intro > p:not(.eyebrow) { grid-column: 2; margin: 0 0 10px; max-width: 370px; font-size: 16px; line-height: 1.5; }
.map-counts { grid-column: 1 / -1; display: flex; gap: 27px; padding-top: 28px; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.map-counts span { display: inline-flex; align-items: center; gap: 9px; }
.map-counts span::before { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); content: ''; }
.map-counts span + span::before { background: var(--blue); }
.map-toolbar { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; min-height: 74px; border: 1px solid var(--ink); border-bottom: 0; background: #fff; }
.map-search { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; padding: 0 22px; }
.map-search input { width: 100%; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 23px/1.2 var(--serif); }
.map-search input::placeholder { color: #77736d; }
.map-search span[aria-hidden] { font: 400 30px/1 var(--serif); }
.map-actions { display: flex; align-items: stretch; }
.map-actions button { min-width: 64px; padding: 0 19px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 11px/1 var(--mono); cursor: pointer; }
.map-actions button:hover, .map-actions button:focus-visible { background: var(--acid); }
.map-actions button:first-child { min-width: 123px; text-transform: uppercase; }
.map-actions button[aria-pressed="true"] { background: var(--acid); }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); min-height: 720px; border: 1px solid var(--ink); background: #fff; }
.map-canvas-panel { position: relative; min-width: 0; min-height: 720px; overflow: hidden; background-color: #fff; background-image: radial-gradient(#e7e4dc .8px, transparent .8px); background-size: 19px 19px; }
.map-canvas { width: 100%; height: 720px; }
.map-canvas-hint { position: absolute; right: 22px; bottom: 14px; left: 22px; margin: 0; color: #5e5b54; font: 400 9px/1.5 var(--mono); letter-spacing: .04em; text-align: center; pointer-events: none; }
.map-unavailable { position: absolute; right: 30px; bottom: 50px; left: 30px; margin: 0; padding: 15px; border: 1px solid var(--ink); background: #fff; font: 12px/1.5 var(--mono); }
.map-unavailable[hidden] { display: none; }
.map-detail { min-width: 0; max-height: 720px; overflow-y: auto; padding: 29px 28px 42px; border-left: 1px solid var(--ink); background: var(--paper); }
.map-detail .eyebrow { margin: 0 0 25px; }
.map-detail h2 { margin: 8px 0 17px; font: 400 clamp(38px, 3vw, 56px)/1.05 var(--serif); letter-spacing: -.025em; }
.map-detail p:not(.eyebrow):not(.map-detail-type) { margin: 0 0 20px; color: #555149; font-size: 14px; line-height: 1.6; }
.map-detail-type { margin: 0; color: #a82335; font: 500 9px/1.4 var(--mono); letter-spacing: .12em; }
.map-detail-cover { width: 100%; max-height: 210px; margin: 14px 0 19px; object-fit: cover; }
.map-detail-link { display: inline-flex; margin: 5px 0 20px; padding: 12px 15px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font: 500 10px/1 var(--mono); text-decoration: none; text-transform: uppercase; }
.map-detail-link:hover { background: var(--blue); border-color: var(--blue); }
.map-detail h3 { margin: 25px 0 11px; font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.map-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.map-detail-tags button { padding: 6px 8px; border: 1px solid var(--ink); border-radius: 30px; background: transparent; font: 10px/1.3 var(--mono); cursor: pointer; }
.map-detail-tags button:hover { background: var(--acid); }
.map-detail-list { margin: 0; padding-left: 18px; font-size: 12px; }
.map-detail-list li { margin-bottom: 8px; }
.map-detail-list a { text-underline-offset: 3px; }
.map-related { display: grid; border-top: 1px solid var(--line); }
.map-related button { display: flex; justify-content: space-between; gap: 15px; width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 400 17px/1.25 var(--serif); text-align: left; cursor: pointer; }
.map-related button:hover { color: var(--blue); }
.map-index { margin-top: 90px; }
.map-index-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 19px; border-bottom: 1px solid var(--ink); }
.map-index-head .eyebrow { margin: 0 0 8px; }
.map-index-head h2 { margin: 0; font: 400 clamp(43px, 5vw, 75px)/1 var(--etch); }
.map-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
.map-index-grid a { display: flex; justify-content: space-between; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 19px/1.18 var(--serif); text-decoration: none; }
.map-index-grid a:hover { color: var(--blue); }
@media (max-width: 1100px) {
  .map-intro { grid-template-columns: 1fr; }
  .map-intro h1, .map-intro > p:not(.eyebrow) { grid-column: 1; }
  .map-intro > p:not(.eyebrow) { max-width: 620px; }
  .map-layout { grid-template-columns: minmax(0, 1fr) 310px; }
}
@media (max-width: 760px) {
  .map-page { padding-top: 42px; }
  .map-intro h1 { font-size: clamp(46px, 12vw, 84px); }
  .map-toolbar { min-height: 60px; flex-wrap: wrap; }
  .map-search { padding: 0 13px; }
  .map-search input { font-size: 17px; }
  .map-actions { width: 100%; min-height: 49px; border-top: 1px solid var(--line); }
  .map-actions button { min-width: 44px; padding: 0 11px; }
  .map-actions button:first-child { min-width: 115px; font-size: 9px; }
  .map-layout { grid-template-columns: 1fr; }
  .map-canvas-panel { min-height: 570px; }
  .map-canvas { height: 570px; }
  .map-detail { max-height: none; min-height: 240px; border-top: 1px solid var(--ink); border-left: 0; }
  .map-index-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .map-actions button { transition: none; } }