.location-page .desktop-nav a[aria-current="page"]::after { right: 0; }
.location-page main { overflow: hidden; }

.location-hero { position: relative; min-height: 790px; display: flex; align-items: center; overflow: hidden; color: #fff; background: var(--green-dark); }
.location-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.location-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,27,22,.9) 0%, rgba(8,27,22,.6) 44%, rgba(8,27,22,.1) 78%), linear-gradient(0deg, rgba(8,27,22,.73), transparent 45%); }
.location-hero-copy { position: relative; z-index: 1; padding-bottom: 95px; }
.location-hero-copy h1 { max-width: 820px; margin-bottom: 28px; font-size: clamp(4.5rem, 8.5vw, 8.8rem); line-height: .82; }
.location-hero-copy > p:not(.eyebrow) { max-width: 650px; margin-bottom: 34px; color: rgba(255,255,255,.84); font-family: var(--serif); font-size: clamp(1.12rem, 1.9vw, 1.55rem); line-height: 1.5; }
.location-hero-times { position: absolute; z-index: 2; left: 50%; bottom: 0; min-height: 122px; display: flex; align-items: center; gap: 52px; border-top: 1px solid rgba(255,255,255,.28); transform: translateX(-50%); }
.location-hero-times > div { padding-right: 52px; display: flex; align-items: center; gap: 14px; border-right: 1px solid rgba(255,255,255,.22); }
.location-hero-times > div:last-child { border-right: 0; }
.location-hero-times strong { font-family: var(--serif); font-size: 2.2rem; font-weight: 500; line-height: 1; }
.location-hero-times span { color: rgba(255,255,255,.67); font-size: .65rem; line-height: 1.45; }

.location-story { padding-block: 120px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 100px; align-items: start; }
.location-story h2 { max-width: 720px; margin-bottom: 0; }
.location-story-copy { padding-top: 32px; }
.location-story-copy p { color: var(--ink-soft); font-family: var(--serif); font-size: 1.2rem; line-height: 1.72; }
.location-story-copy p:last-child { margin-bottom: 0; }

.park-context { margin-bottom: 110px; padding: 34px 38px; display: grid; grid-template-columns: 275px minmax(0, 1fr) 310px; gap: 38px; align-items: center; background: linear-gradient(120deg, rgba(247,243,235,.95), rgba(220,234,240,.92)); border: 1px solid rgba(40,77,90,.16); border-radius: 20px; box-shadow: var(--shadow-soft); }
.park-context-mark { padding: 18px; background: rgba(255,255,255,.76); border-radius: 14px; box-shadow: 0 12px 30px rgba(23,33,29,.1); }
.park-context-mark img { width: 100%; height: auto; display: block; }
.park-context-copy .eyebrow { margin-bottom: 9px; }
.park-context-copy h2 { margin-bottom: 10px; font-size: clamp(1.9rem, 3vw, 3rem); }
.park-context-copy > p:last-child { max-width: 760px; margin: 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.6; }
.park-context-action { display: flex; align-items: stretch; flex-direction: column; gap: 11px; }
.park-context-action .button { text-align: center; }
.park-context-action small { color: var(--ink-soft); font-size: .54rem; line-height: 1.45; text-align: center; }

.regional-map-section { padding-block: 110px 120px; color: #fff; background: linear-gradient(135deg, #102e27 0%, #214956 100%); }
.regional-map-heading { margin-bottom: 48px; display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: end; }
.regional-map-heading h2 { margin-bottom: 0; }
.regional-map-heading > p { margin: 0 0 7px; color: rgba(255,255,255,.64); font-family: var(--serif); font-size: 1.04rem; line-height: 1.6; }
.regional-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; }
.regional-map { position: relative; min-height: 640px; overflow: hidden; background: #eee7da; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; box-shadow: 0 24px 65px rgba(4,18,15,.28); }
.regional-map svg { width: 100%; height: 100%; }
.map-urban { fill: #e5dccf; opacity: .82; }
.map-urban-east { fill: #e9e0d4; }
.map-park { fill: #d9e4d4; stroke: #bdcdb8; stroke-width: 1; }
.map-park-island { fill: #d2dfce; }
.regional-road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road-casing { stroke: #c9bfae; stroke-width: 8; }
.road-major { stroke: #fffaf1; stroke-width: 4.5; }
.road-major.road-us { stroke: #f0ca7c; stroke-width: 4.2; }
.road-secondary { stroke: #cdbfa9; stroke-width: 5; }
.road-minor { stroke: #fffaf1; stroke-width: 2.6; }
.regional-main-river, .regional-main-highlight, .regional-channel, .regional-tributary { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.regional-main-river { stroke: #82b4c1; stroke-width: 28; }
.regional-main-highlight { stroke: #bad8df; stroke-width: 8; opacity: .82; }
.regional-channel { stroke: #82b4c1; stroke-width: 10; }
.regional-tributary { stroke: #99c3cd; stroke-width: 14; }
.regional-tributary.st-croix-river { stroke-width: 17; }
.regional-island-land { fill: #c7d5c0; stroke: #8eaa85; stroke-width: 1.2; }
.waterway-label { fill: #547e89; font: italic 650 9px var(--serif); letter-spacing: .13em; }
.channel-label { font-size: 7.5px; }
.tributary-label { font-size: 8px; }
.island-land-label { fill: #5f795f; font: 760 8px var(--sans); letter-spacing: .12em; }
.road-shields rect { fill: #fffdf8; stroke: #a99a84; stroke-width: 1; }
.road-shields text { fill: #31574d; font: 780 8px var(--sans); text-anchor: middle; dominant-baseline: middle; }
.destination-route { fill: none; stroke: #ad7f3f; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 9; opacity: .7; transition: stroke .25s ease, stroke-width .25s ease, opacity .25s ease; }
.destination-route.is-active { stroke: #173d34; stroke-width: 4; stroke-dasharray: 2 7; opacity: 1; }
.map-city-label text:first-child { fill: #173d34; font: 780 13px var(--sans); letter-spacing: .1em; }
.map-city-label text:last-child { fill: #647970; font: 700 9px var(--sans); letter-spacing: .08em; }
.map-city-label.small text:first-child { font-size: 11px; }
.destination-pin { color: #2e6656; transition: transform .25s ease; }
.destination-pin .pin-ring { fill: rgba(46,102,86,.12); stroke: currentColor; stroke-width: 2; }
.destination-pin .pin-core { fill: currentColor; }
.destination-pin.is-active { color: #b27f38; transform: scale(1.45); }
.island-marker .marker-label-bg { fill: rgba(255,253,248,.93); stroke: rgba(23,61,52,.18); stroke-width: 1; }
.island-marker circle { fill: #173d34; stroke: #fff; stroke-width: 3; }
.island-marker path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.island-marker text { fill: #173d34; font: 800 11px var(--sans); letter-spacing: .13em; }
.island-marker .island-marker-sub { fill: #5d756d; font-size: 7px; letter-spacing: .08em; }
.north-arrow { fill: none; stroke: #31574d; stroke-width: 2; }
.north-label { fill: #31574d; font: 780 12px var(--sans); }
.regional-map-note { position: absolute; left: 16px; bottom: 14px; padding: 8px 11px; color: #49645c; background: rgba(255,253,248,.9); border: 1px solid rgba(49,87,77,.15); border-radius: 6px; font-size: .58rem; box-shadow: 0 5px 18px rgba(23,61,52,.08); }
.map-aside { padding: 36px 30px; display: flex; flex-direction: column; color: #fff; background: linear-gradient(160deg, rgba(199,166,114,.82), rgba(101,127,109,.88)); border: 1px solid rgba(255,255,255,.22); border-radius: 20px; }
.map-aside-number { font-family: var(--serif); font-size: 6.5rem; line-height: .8; }
.map-aside > strong { margin: 12px 0 32px; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.map-aside > p { color: rgba(255,255,255,.76); font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; }
.map-aside .text-link { margin-top: auto; align-self: flex-start; }

.destination-section { padding-block: 120px; }
.destination-heading { margin-bottom: 50px; display: grid; grid-template-columns: 1fr 440px; gap: 80px; align-items: end; }
.destination-heading h2 { max-width: 760px; margin-bottom: 0; }
.destination-heading > p { margin-bottom: 7px; color: var(--ink-soft); font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; }
.destination-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.destination-card { min-height: 340px; padding: 30px; display: flex; flex-direction: column; background: rgba(255,255,255,.72); border: 1px solid rgba(40,77,90,.14); border-radius: 17px; box-shadow: 0 12px 38px rgba(23,33,29,.06); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.destination-card:nth-child(2), .destination-card:nth-child(5) { background: rgba(220,234,240,.72); }
.destination-card:hover, .destination-card:focus-visible { background: #fff; box-shadow: var(--shadow-soft); transform: translateY(-5px); }
.destination-card > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.destination-card > div span { color: var(--green); font-size: .61rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.destination-card > div strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; white-space: nowrap; }
.destination-card h3 { margin: auto 0 12px; font-family: var(--serif); font-size: 1.75rem; font-weight: 500; }
.destination-card p { margin-bottom: 22px; color: var(--ink-soft); font-size: .72rem; line-height: 1.55; }
.destination-link { color: var(--green); font-size: .66rem; font-weight: 740; }
.travel-disclaimer { max-width: 900px; margin: 28px 0 0; color: var(--ink-soft); font-size: .63rem; line-height: 1.65; }

.arrival-section { padding-block: 120px; background: linear-gradient(125deg, var(--sand-pale), var(--sage)); }
.arrival-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.arrival-photo { height: 610px; overflow: hidden; border-radius: 22px; box-shadow: var(--shadow); }
.arrival-photo img { width: 100%; height: 100%; object-fit: cover; }
.arrival-copy h2 { max-width: 720px; margin-bottom: 28px; }
.arrival-copy > p { max-width: 650px; color: var(--ink-soft); font-family: var(--serif); font-size: 1.08rem; line-height: 1.68; }
.arrival-points { margin: 36px 0; padding-block: 6px; border-block: 1px solid rgba(40,77,90,.18); }
.arrival-points > div { padding: 18px 0; display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; }
.arrival-points > div + div { border-top: 1px solid rgba(40,77,90,.14); }
.arrival-points span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: .65rem; }
.arrival-points p { margin: 0; color: var(--ink-soft); font-size: .71rem; line-height: 1.5; }
.arrival-points strong { display: block; margin-bottom: 3px; color: var(--ink); }

.location-cta { margin-block: 100px; padding: 80px; color: #fff; background: linear-gradient(125deg, var(--green-dark), var(--river-deep)); border-radius: 25px; box-shadow: var(--shadow); }
.location-cta h2 { max-width: 970px; margin-bottom: 40px; }
.location-cta > div { display: flex; align-items: center; gap: 28px; }

@media (max-width: 1080px) {
  .location-hero { min-height: 720px; }
  .location-story, .arrival-grid { gap: 55px; }
  .park-context { grid-template-columns: 245px 1fr; }
  .park-context-action { grid-column: 2; max-width: 420px; }
  .regional-map-heading, .destination-heading { grid-template-columns: 1fr 350px; gap: 45px; }
  .regional-map-layout { grid-template-columns: 1fr; }
  .map-aside { min-height: 240px; }
  .map-aside-number { font-size: 5rem; }
  .map-aside > strong { margin-bottom: 14px; }
  .map-aside .text-link { margin-top: 20px; }
  .destination-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .location-hero { min-height: 760px; align-items: flex-end; }
  .location-hero-shade { background: linear-gradient(0deg, rgba(8,27,22,.94) 0%, rgba(8,27,22,.52) 68%, rgba(8,27,22,.14)); }
  .location-hero-copy { padding: 0 0 202px; }
  .location-hero-copy h1 { font-size: clamp(4rem, 19vw, 5.7rem); }
  .location-hero-times { min-height: 160px; gap: 20px; overflow-x: auto; }
  .location-hero-times > div { min-width: 145px; padding-right: 20px; align-items: flex-start; flex-direction: column; gap: 7px; }
  .location-hero-times strong { font-size: 1.85rem; }
  .location-story { padding-block: 80px; grid-template-columns: 1fr; gap: 30px; }
  .location-story-copy { padding-top: 0; }
  .location-story-copy p { font-size: 1.05rem; }
  .park-context { margin-bottom: 80px; padding: 28px 24px; grid-template-columns: 1fr; gap: 24px; border-radius: 16px; }
  .park-context-mark { width: 100%; max-width: 280px; padding: 15px; }
  .park-context-copy h2 { font-size: 1.75rem; }
  .park-context-action { grid-column: 1; max-width: none; }
  .regional-map-section { padding-block: 80px; }
  .regional-map-heading, .destination-heading { grid-template-columns: 1fr; gap: 24px; }
  .regional-map-heading > p, .destination-heading > p { font-size: .94rem; }
  .regional-map { min-height: 500px; overflow-x: auto; }
  .regional-map svg { width: 720px; max-width: none; }
  .regional-map-note { right: 12px; font-size: .54rem; }
  .destination-section { padding-block: 82px; }
  .destination-grid { grid-template-columns: 1fr; }
  .destination-card { min-height: 310px; padding: 26px; }
  .arrival-section { padding-block: 80px; }
  .arrival-grid { grid-template-columns: 1fr; gap: 44px; }
  .arrival-photo { height: 420px; }
  .location-cta { width: 100%; margin-block: 0; padding: 70px 22px 90px; border-radius: 0; }
  .location-cta > div { align-items: flex-start; flex-direction: column; }
}