.island-explore { padding-top:48px; scroll-margin-top:90px; }
.island-explore__heading {display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:30px}
.island-explore__heading h1 {font-size:clamp(42px,5vw,72px);margin-top:12px}
.island-explore__heading .lede {max-width:320px;font-size:18px}
.island-explorer {--ss-paper:#f4ede1;--ss-ink:#0f2a3c;--ss-muted:#536975;--ss-accent:#c4482f;--ss-line:#d8d4c5;--ss-sea:#82c9c5;--ss-land:#adaf82;--ss-highland:#58755a;--ss-edge:#e3d3ab;--ss-water-near:#c8e4cc;--ss-water-far:#9ad5c8;--ss-sky:#ffffff;--ss-sun:#fff3db;position:relative;background:var(--ss-paper);color:var(--ss-ink);border:1px solid var(--ss-line);border-radius:5px;overflow:hidden}
.island-explorer * {box-sizing:border-box}
.island-explorer button {font:inherit;color:inherit;cursor:pointer}
.island-explorer [hidden] {display:none!important}
.island-explorer :focus-visible {outline:3px solid var(--ss-accent);outline-offset:4px}
.island-explorer .ss-layout {display:grid;grid-template-columns:minmax(0,1fr) 330px;min-width:0}
.island-explorer .ss-map {position:relative;height:600px;height:clamp(540px,70svh,680px);min-width:0;overflow:hidden;background:var(--ss-sea);isolation:isolate}
.island-explorer canvas,.island-explorer .ss-fallback {position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.island-explorer canvas {z-index:1;touch-action:pan-y;cursor:grab}
.island-explorer canvas:active {cursor:grabbing}
.island-explorer .ss-pins {position:absolute;inset:0;z-index:3;pointer-events:none}
.island-explorer .ss-pin {position:absolute;width:44px;height:44px;background:none;border:0;padding:0;pointer-events:auto;transform:translate(-50%,-50%);border-radius:50%}
.island-explorer .ss-dot {display:block;margin:auto;width:18px;height:18px;border-radius:50%;background:var(--ss-ink);border:3px solid var(--ss-paper);box-shadow:0 2px 10px #102b3c45;transition:transform .18s ease,background-color .18s ease}
.island-explorer .ss-pin[aria-pressed=true] {z-index:1}
.island-explorer .ss-pin[aria-pressed=true] .ss-dot {background:var(--ss-accent);width:20px;height:20px;box-shadow:0 0 0 7px #c4482f33;animation:ss-breathe 2.6s ease-in-out infinite}
.island-explorer .ss-pin-label {position:absolute;top:40px;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;padding:3px 10px;border-radius:999px;background:var(--ss-paper);font-size:13px;font-weight:600;line-height:1.45;color:var(--ss-ink);box-shadow:0 2px 10px #102b3c24;transition:background-color .18s ease,color .18s ease}
.island-explorer .ss-pin[aria-pressed=true] .ss-pin-label {color:var(--ss-accent)}
.island-explorer .ss-pin:hover .ss-dot,.island-explorer .ss-pin:focus-visible .ss-dot {transform:scale(1.2);background:var(--ss-accent)}
.island-explorer .ss-pin:hover .ss-pin-label,.island-explorer .ss-pin:focus-visible .ss-pin-label {background:var(--ss-ink);color:var(--ss-paper)}
/* The chosen place breathes, so the eye lands on it and on the idea that the others open too. */
@keyframes ss-breathe {0%,100% {box-shadow:0 0 0 6px #c4482f40} 50% {box-shadow:0 0 0 13px #c4482f0a}}
.island-explorer .ss-water-label {position:absolute;z-index:2;font-size:10px;letter-spacing:2px;color:var(--ss-ink);opacity:.6;pointer-events:none}
.island-explorer .ss-west {left:17px;bottom:72px;writing-mode:vertical-rl;transform:rotate(180deg)}
.island-explorer .ss-east {right:20px;bottom:60px}
.island-explorer .ss-north {position:absolute;top:21px;left:22px;z-index:2;font-size:11px;display:grid;justify-items:center;gap:0}
.island-explorer .ss-north b {font-size:20px;font-weight:400}
.island-explorer .ss-hint {position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:9px;width:max-content;max-width:calc(100% - 24px);margin:0;padding:7px 15px 7px 9px;border-radius:999px;background:var(--ss-paper);box-shadow:0 4px 16px #102b3c26;font-size:13px;font-weight:600;line-height:1.35;color:var(--ss-ink);pointer-events:none;text-wrap:balance}
.island-explorer .ss-hint-mark {flex-shrink:0;width:14px;height:14px;border-radius:50%;background:var(--ss-accent);border:3px solid var(--ss-paper);box-shadow:0 0 0 4px #c4482f33}
.island-explorer .ss-back {position:absolute;z-index:4;top:19px;right:20px;padding:9px 14px;background:var(--ss-paper);border:0;border-radius:24px;font-size:13px;box-shadow:0 3px 12px #102b3c12;min-height:44px}
.island-explorer .ss-detail {padding:26px;min-width:0;scroll-margin-top:100px}
.island-explorer .ss-eyebrow {color:var(--ss-accent);font-size:11px;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 8px}
.island-explorer h2 {font:400 32px/1.1 'Bodoni Moda',serif;margin:0 0 18px}
.island-explorer .ss-photo {position:relative;width:100%;aspect-ratio:1.25;background:#d0dcd0;overflow:hidden;border-radius:2px}
.island-explorer .ss-photo img {display:block;width:100%;height:100%;object-fit:cover}
.island-explorer .ss-photo-open {position:absolute;bottom:10px;right:10px;background:var(--ss-paper);color:var(--ss-ink);border:0;border-radius:24px;padding:10px 14px;font-size:12px;min-height:44px;box-shadow:0 3px 12px #102b3c15}
.island-explorer .ss-gallery {display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding:4px;scrollbar-width:thin}
.island-explorer .ss-thumb {display:block;border:0;border-radius:2px;padding:0;background:none;flex:0 0 72px;height:50px;overflow:hidden}
.island-explorer .ss-thumb img {width:100%;height:100%;object-fit:cover;display:block}
.island-explorer .ss-caption {font-size:12px;color:var(--ss-muted);margin:7px 0 0;min-height:17px}
.island-explorer .ss-copy {font-size:15px;line-height:1.6;margin:16px 0 0}
.island-explorer .ss-location {border-top:1px solid var(--ss-line);margin-top:18px;padding-top:12px;font-size:12px;color:var(--ss-muted)}
.island-explorer .ss-empty {min-height:165px;display:grid;place-content:center;text-align:center;background:#dde3d4;color:var(--ss-muted)}
.island-explorer .ss-empty span {font:400 48px/1 'Bodoni Moda',serif}
.island-explorer .ss-empty p {font-size:13px;margin:12px 0 0}
.island-explorer .ss-places {display:flex;flex-wrap:wrap;gap:6px 10px;padding:12px 18px;border-top:1px solid var(--ss-line)}
.island-explorer .ss-places a {font-size:13px;padding:12px;border-radius:3px;text-decoration:none;min-height:44px}
.island-explorer .ss-places a[aria-current=true] {color:var(--ss-accent);background:#eadfd1}
.island-explorer .ss-credits {border-top:1px solid var(--ss-line);padding:10px 22px;font-size:11px;color:var(--ss-muted)}
.island-explorer .ss-credits summary {cursor:pointer;width:fit-content;min-height:24px;padding-block:4px}
.island-explorer .ss-credits p {max-width:900px;line-height:1.6;padding-top:10px}
.island-explorer .ss-credits a {text-decoration:underline}
@media(max-width:960px) {
 .island-explore__heading {display:block}
 .island-explore__heading .lede {max-width:none;margin-top:20px}
 .island-explorer {margin-inline:calc(var(--gutter) * -1);border-radius:0;border-inline:0}
 .island-explorer .ss-layout {grid-template-columns:1fr}
 .island-explorer .ss-map {height:clamp(360px,96vw,600px)}
 .island-explorer .ss-detail {padding:24px var(--gutter)}
 .island-explorer .ss-photo {aspect-ratio:1.8}
 .island-explorer .ss-places {gap:2px;padding:8px calc(var(--gutter) - 12px)}
 .island-explorer .ss-places a {font-size:12px;padding:12px 9px}
 .island-explorer .ss-credits {padding-inline:var(--gutter)}
}
@media(max-width:520px) {
 /* The island fills the width here, so the sea names would sit on the land. */
 .island-explorer .ss-water-label {display:none}
 .island-explorer .ss-pin-label {font-size:12px;padding:2px 8px}
}
@media(max-width:380px) {
 .island-explorer .ss-pin-label {font-size:11px;max-width:170px}
 .island-explorer .ss-hint {font-size:12px}
}
@media (prefers-reduced-motion: reduce) {
 .island-explorer .ss-dot,.island-explorer .ss-pin-label {transition:none}
 .island-explorer .ss-pin[aria-pressed=true] .ss-dot,.island-explorer .ss-pin--selected .ss-dot {animation:none}
}

/* Nearby places share one comfortable tap target; each retains its own gallery. */
.island-explorer .ss-cluster .ss-dot {width:34px;height:34px;display:grid;place-content:center;color:var(--ss-paper);font-size:14px;font-weight:700}
.island-explorer .ss-pin--selected .ss-dot {background:var(--ss-accent);box-shadow:0 0 0 6px #c4482f30;animation:ss-breathe 2.6s ease-in-out infinite}
.island-explorer .ss-pin--selected .ss-pin-label {color:var(--ss-accent)}
.island-explorer .ss-label-crowded .ss-pin-label {visibility:hidden}
.island-explorer .ss-label-crowded:hover .ss-pin-label,.island-explorer .ss-label-crowded:focus-visible .ss-pin-label {visibility:visible}
.island-explorer .ss-pin:hover,.island-explorer .ss-pin:focus-visible {z-index:4}
.island-explorer .ss-chooser {position:absolute;z-index:6;width:280px;max-width:calc(100% - 16px);max-height:calc(100% - 16px);overflow-y:auto;background:var(--ss-paper);border:1px solid var(--ss-line);border-radius:8px;padding:16px;box-shadow:0 8px 30px #102b3c30}
.island-explorer .ss-chooser-title {font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:2px 35px 12px 0;color:var(--ss-muted)}
.island-explorer .ss-chooser-close {position:absolute;top:3px;right:4px;width:44px;height:44px;border:0;background:none;font-size:26px}
.island-explorer .ss-chooser-place {display:block;width:100%;min-height:44px;padding:10px 8px;text-align:left;border:0;border-top:1px solid var(--ss-line);background:none;font-size:14px;line-height:1.3}
.island-explorer .ss-chooser-place:hover,.island-explorer .ss-chooser-place:focus-visible {background:#eadfd1}