/* A single map composition: neutral fills, provincial detail, community focus. */
.territory{position:relative;isolation:isolate;background:var(--ink);color:var(--paper);overflow:clip;padding-block:64px}
.territory::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 460px 320px at var(--map-x,50%) var(--map-y,50%),rgb(231 213 47 / .065),transparent 100%);mask-image:linear-gradient(transparent,#000 80px,#000 calc(100% - 80px),transparent);opacity:0;transition:opacity 320ms}
.territory.is-near::before{opacity:1}
.territory-shell{position:relative;max-width:1280px}
.territory-sea{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.42;transition:opacity 450ms;mask-image:linear-gradient(transparent,#000 18%,#000 78%,transparent)}
.territory.is-near .territory-sea{opacity:.68}
.territory-sea path{fill:none;stroke:url(#map-sea-ink);vector-effect:non-scaling-stroke;stroke-width:1}
.sea-tide{stroke-opacity:.48}
.sea-stream{stroke-opacity:.72;stroke-dasharray:72 1428;animation:map-sea-current 9s linear infinite;animation-play-state:paused}
.sea-stream-b{stroke-opacity:.58;animation-duration:11.6s;animation-delay:-4.2s}
.sea-stream-c{stroke-opacity:.66;animation-duration:14.2s;animation-delay:-9.1s}
.territory.has-entered .sea-tide{animation:map-sea-arrive 3800ms cubic-bezier(.16,1,.3,1) 1}
.territory.is-near .sea-stream{animation-play-state:running}
.territory.is-paused .sea-tide,.territory.is-paused .sea-stream{animation-play-state:paused}
.territory-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px}
.territory-heading h2{font-size:clamp(32px,3.4vw,48px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.territory-heading-copy p{max-width:45ch;margin:12px 0 0;color:var(--dark-text);font-size:15px;line-height:1.55}
@media(min-width:1000px) and (min-height:650px){.territory-heading{position:sticky;top:20px;z-index:3;align-items:flex-start;padding-block:14px;background:transparent;box-shadow:none}.territory-cta{margin-top:7px}}
.territory-cta{position:relative;color:var(--yellow);border-color:var(--dark-line);flex-shrink:0;font-size:14px}
.territory-cta:hover{border-color:var(--yellow)}
.territory a:focus-visible{outline:2px solid var(--yellow);outline-offset:5px}
.territory-map{min-width:0}
.territory-stage{position:relative}
/* Let the mobile map use the screen width; captions keep the text-column gutter. */
@media(max-width:700px){.territory-stage{margin-inline:calc(8px - var(--gutter))}}
.territory-svg{display:block;position:relative;width:100%;height:auto;overflow:visible;contain:layout style}
/* Reframe one SVG, moving every Canary layer by the same amount. Geometry stays intact. */
.territory-svg.is-mobile-map .map-canary-position,
.territory-svg.is-mobile-map.is-canary-selected :is(.map-effects,.map-selection){transform:translate(350px,300px)}
.territory-svg:focus{outline:none}
.map-context{fill:#272723;opacity:1;pointer-events:none}
.map-inset-frame{fill:var(--ink);stroke:#a4a491;stroke-opacity:.65;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.map-archipelago-target,.map-city-target{pointer-events:all;cursor:pointer}
.map-community{stroke:none}
.territory.is-interactive .map-community{cursor:pointer}
.map-community:focus{outline:none}
.map-effects{pointer-events:none}
.map-surface-light{opacity:0;pointer-events:none;transition:opacity 280ms}
.territory.is-near .map-surface-light{opacity:1}
.map-glint{opacity:0}
.map-province-lines,.map-community-lines,.map-selection{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none}
.map-province-lines{stroke:#d1d1c8;stroke-opacity:.82;stroke-width:.9}
.map-community-lines{stroke:#efeee1;stroke-opacity:.94;stroke-width:1.9}
.map-selection{stroke:var(--yellow);stroke-width:2.5}
.territory-label{position:absolute;left:0;top:0;max-width:calc(100% - 16px);padding:9px 13px;background:var(--ink);color:var(--yellow);border:1px solid var(--yellow);font-size:14px;font-weight:650;line-height:1.4;pointer-events:none;z-index:1;overflow-wrap:anywhere}
.territory-label[hidden]{display:none}
.map-points{pointer-events:none}
.map-dot{fill:var(--yellow)}
.map-dot-core{fill:var(--ink)}
.map-point-head{transform-box:fill-box;transform-origin:center;transition:transform 380ms cubic-bezier(.16,1,.3,1)}
.map-point.is-active .map-point-head{transform:scale(1.25)}
.map-echo{fill:none;stroke:var(--yellow);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.map-echo:nth-child(1){--echo-delay:0ms}
.map-echo:nth-child(2){--echo-delay:200ms}
.map-echo:nth-child(3){--echo-delay:400ms}
.map-point.is-ambient .map-echo{animation:map-echo-drift 1800ms cubic-bezier(.16,1,.3,1) var(--echo-delay,0ms) 1 both}
.map-point.is-active .map-echo{animation:map-echo-expand 1600ms cubic-bezier(.16,1,.3,1) var(--echo-delay,0ms) 1 both}
.territory.is-paused .map-echo{animation-play-state:paused}
.territory-map figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px;padding-top:16px;border-top:1px solid var(--dark-line);font-size:12px;color:var(--dark-text)}
.territory-legend{display:inline-flex;align-items:center;gap:9px}
.territory-legend svg{flex:0 0 20px}
.map-motion-toggle{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--dark-line);background:transparent;color:var(--dark-text);cursor:pointer;transition:color 180ms,border-color 180ms}
.map-motion-toggle[hidden]{display:none}
.map-motion-toggle:hover{color:var(--yellow);border-color:var(--yellow)}
.map-motion-toggle:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.territory.is-motion-paused .sea-tide,.territory.is-motion-paused .sea-stream{animation-play-state:paused}
@keyframes map-echo-drift{0%{transform:scale(.7);opacity:0}12%{opacity:.48}65%{opacity:.19}100%{transform:scale(3.6);opacity:0}}
@keyframes map-echo-expand{0%{transform:scale(.7);opacity:0}12%{opacity:.78}65%{opacity:.3}100%{transform:scale(4.4);opacity:0}}
@keyframes map-sea-arrive{from{transform:translate(-24px,14px);opacity:.3}to{transform:translate(0,0);opacity:1}}
@keyframes map-sea-current{to{stroke-dashoffset:-1500}}
@media(max-width:700px){.territory{padding-block:48px}.territory-heading{margin-bottom:24px;gap:16px}.territory-heading h2{font-size:32px;max-width:7ch}.territory-cta{font-size:13px;gap:12px}.territory-map figcaption{font-size:11px;gap:12px;margin-top:12px;padding-top:12px}.territory-label{font-size:12px;padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.territory::before,.map-glint,.map-surface-light{display:none}}
@media(hover:none){.territory::before,.map-surface-light{display:none}}
@media(max-width:700px){.territory-heading-copy p{font-size:13px;max-width:30ch}.territory-heading{align-items:flex-start}.territory-cta{margin-top:10px}.map-community-lines{stroke-width:1.4}.map-province-lines{stroke-width:.75}.map-selection{stroke-width:2}.territory-sea{opacity:.18}.territory.is-near .territory-sea{opacity:.32}}
@media(prefers-reduced-motion:reduce){.territory.has-entered .sea-tide,.sea-stream,.map-point.is-active .map-echo,.map-point.is-ambient .map-echo{animation:none}.territory-sea,.map-point-head{transition:none}}

/* Coastal reflection shares the pointer gradient; opaque land stops the sea. */
.map-shore-light{fill:none;stroke:url(#map-proximity);stroke-width:9;stroke-linejoin:round;pointer-events:none;opacity:0;transition:opacity 450ms}
.map-shore-light use{vector-effect:non-scaling-stroke}
.territory.is-near .map-shore-light{opacity:1}
@media(prefers-reduced-motion:reduce){.map-shore-light{display:none}}
/* A reversible entrance/exit. All geography shares one map transform. */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .territory{view-timeline:--territory-view block}
  .territory-map{view-timeline:--map-view block;animation:map-scroll-appearance auto linear both;animation-timeline:view(block 8% 12%);animation-range:entry 0% exit 100%;transform-origin:center}
  .territory-heading-copy{animation:map-heading-appearance linear both;animation-timeline:--territory-view;animation-range:entry 0% exit 100%}
  .map-canary-enter{animation:map-canary-appearance linear both;animation-timeline:--map-view;animation-range:entry 0% exit 100%}
  /* Keyboard navigation stays steady. A touch selection must not disable future scrolling. */
  .territory:has(:focus-visible) .territory-map,.territory:has(:focus-visible) .map-canary-enter{animation:none}
  @media(max-width:700px){
   .territory-heading-copy{animation:none}
   .territory-heading h2{--arrival-x:0px;--arrival-y:30px;--arrival-scale:.9;--departure-scale:.95;animation:editorial-enter auto linear both,editorial-exit auto linear forwards;animation-timeline:view(block 0% 18%);animation-range:entry 0% cover 38%,exit 0% exit 100%;transform-origin:left center}
  }
 }
}
@keyframes map-scroll-appearance{0%{opacity:.12;transform:translateY(40px) scale(.95)}24%,78%{opacity:1;transform:none}100%{opacity:.12;transform:translateY(-32px) scale(.97)}}
@keyframes map-heading-appearance{0%{opacity:.12;transform:translate(-18px,24px)}20%,82%{opacity:1;transform:none}100%{opacity:.12;transform:translateY(-18px)}}
@keyframes map-canary-appearance{0%,15%{opacity:.3}32%,78%{opacity:1}100%{opacity:.3}}