:root{--blue:#546792;--ink:#3f4c6e;--cream:#fcfaee;--yellow:#fcfbd5;--line:#d6dbe5;--muted:#64708a}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}header{max-width:1280px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}header img{width:160px;height:auto}header span{font-size:14px;color:var(--muted)}main{max-width:1280px;margin:auto;padding:28px}h1{font-size:clamp(28px,3.4vw,44px);line-height:1.2;letter-spacing:-.035em;margin:8px 0 12px}h2{font-size:24px;margin:0}h3{margin:0;font-size:20px}.eyebrow{font-size:13px;letter-spacing:.14em;font-weight:750;color:var(--blue);margin:0}.heading{display:flex;gap:35px;align-items:center;justify-content:space-between}.intro{margin:0;color:var(--muted);max-width:670px}.month{font-size:14px;font-weight:650;min-width:240px}select{width:100%;display:block;margin-top:6px;background:white;border:1px solid var(--line);padding:12px;border-radius:12px;color:var(--ink);font:inherit;font-size:16px}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:white;border-radius:30px;padding:11px 20px;min-height:44px}button:hover{border-color:var(--blue)}button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}button:focus-visible,select:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:3px solid #ebaa57;outline-offset:4px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin:23px 0 10px}#reset{background:transparent;border-color:transparent;color:var(--muted);padding:10px 12px}.season-summary{margin:10px 0 20px;font-size:14px;color:var(--muted);min-height:22px}.workspace{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start}.map-panel{position:relative;border-radius:24px;overflow:hidden;border:1px solid #c8dce4;background:radial-gradient(ellipse at 45% 60%,#e7f7f5,#d8eaf2)}.map-top{display:flex;justify-content:space-between;gap:15px;font-size:14px;padding:19px 22px;position:relative;z-index:1}.map-top span:first-child{font-weight:700}#map{width:100%;display:block;margin-top:-25px}.land{fill:#fcfbd5;stroke:#b0b895;stroke-width:1.3}.island-label{fill:#81876f;font-size:15px;letter-spacing:3px}.ocean-label{fill:#7098ab;font-size:14px;letter-spacing:4px}.pin .leader{stroke:#7c9ab0;stroke-width:1;fill:none}.pin circle{fill:var(--blue);stroke:white;stroke-width:3}.pin text{fill:var(--ink);font-size:16px;font-weight:650;paint-order:stroke;stroke:#e1f0f3;stroke-width:6px;stroke-linejoin:round}.pin .hit{fill:transparent;stroke:none}.pin{cursor:pointer}.pin.dim{opacity:.27}.pin.active circle{fill:#d89346;stroke:white;stroke-width:4}.pin.active text{fill:#976026}.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;font-size:13px;padding:0 12px}.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#aebdd0;margin-right:7px}.legend .yes{background:var(--blue)}.geo-note{font-size:12px;text-align:center;color:#627f90;margin:8px 0 16px}#detail{background:white;border-radius:24px;border:1px solid var(--line);overflow:hidden}.detail-body{padding:24px}.detail-photo{width:100%;height:190px;object-fit:cover;display:block}.photo-label{font-size:12px;color:var(--muted);margin:6px 24px 0}.detail-top{display:flex;justify-content:space-between;gap:12px;align-items:start}.detail-top h2{font-size:30px;line-height:1.2}.english{font-size:14px;color:var(--muted)}.coast{font-size:13px;background:#edf2f9;padding:5px 10px;border-radius:20px;white-space:nowrap}.vibe{margin:16px 0;font-size:18px}.season-box{background:var(--yellow);border-radius:14px;padding:14px 16px;font-size:14px}.season-box strong{display:block;margin-bottom:4px}.facts{margin:22px 0}.facts dt{font-weight:700;margin-top:16px}.facts dd{margin:4px 0 0;color:#59647a}.compare-button{border-radius:12px;width:100%;color:var(--blue);border-color:var(--blue)}.outside{font-size:14px;color:#9b6330;margin:0 0 14px}.results{margin-top:30px}.results-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px}.results-heading span{font-size:14px;color:var(--muted)}#beachList{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.beach-tile{border-radius:16px;text-align:left;padding:17px;background:white}.beach-tile strong{display:block;font-size:17px}.beach-tile small{display:block;color:var(--muted);font-size:14px;line-height:1.4;margin-top:6px}.beach-tile.active{background:var(--yellow);border-color:var(--blue)}#empty{background:white;padding:24px;border-radius:16px;border:1px solid var(--line)}#empty p{margin:6px 0 0}#comparePanel{margin-top:30px}#comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:16px}.compare-card{background:white;padding:20px;border:1px solid var(--line);border-radius:18px}.compare-card p{font-size:14px}.compare-card button{font-size:14px;padding:7px 14px}.ocean-note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:30px}footer{display:flex;justify-content:space-between;gap:24px;font-size:13px;padding-bottom:20px;color:var(--muted)}footer details{max-width:850px}footer a{color:var(--blue)}summary{cursor:pointer} [hidden]{display:none!important}@media(min-width:1000px){#detail{position:sticky;top:20px}}@media(max-width:850px){main{padding:22px 16px}.heading{display:block}.month{display:block;margin-top:20px;max-width:100%}.workspace{grid-template-columns:1fr}.map-panel{max-width:600px;width:100%;margin:auto}#beachList{grid-template-columns:repeat(2,1fr)}.results-heading{display:block}.results-heading span{display:block;margin-top:4px}.detail-photo{height:180px}#comparison{grid-template-columns:1fr}header{padding:16px}header span{display:none}footer{display:block}footer>span{display:block;margin-top:18px}.map-top{padding:16px;font-size:13px}.filters{gap:8px}.filters button{padding:10px 14px;font-size:14px}.detail-body{padding:20px}#map text{font-size:18px}}@media(prefers-reduced-motion:no-preference){button,.pin{transition:background .15s,opacity .2s}}@media(max-width:350px){#beachList{grid-template-columns:1fr}.coast{white-space:normal}.detail-top h2{font-size:26px}}

.mobile-label,.beach-number{display:none}@media(max-width:850px){.pin .desktop-label{display:none}.pin .mobile-label{display:block;font-size:32px}.beach-number{display:inline}.pin .leader{stroke-width:1.5}}

.map-column{min-width:0}.map-column .results{margin-top:20px}.map-column #beachList{grid-template-columns:repeat(2,minmax(0,1fr))}.map-column .results-heading{display:block}.map-column .results-heading span{display:block;margin-top:5px}.beach-number{display:inline;color:var(--blue)}.beach-tile{overflow-wrap:anywhere}@media(max-width:350px){.map-column #beachList{grid-template-columns:1fr}}

.beach-tile .fit-note{color:#86622f;font-size:14px;padding-top:7px;border-top:1px solid #e2e5ea;margin-top:9px}

/* Coastal palette, with the TopsterTour blue and yellow retained. */
body{background:linear-gradient(135deg,#fffdee 0%,#f4f8fb 75%);background-attachment:fixed}
header{border-bottom-color:#d3deea}
.eyebrow{color:#356d89}.month select{border:2px solid #a3b5cf;box-shadow:0 5px 18px #5467920a}
.filters button[data-filter]{box-shadow:0 3px 10px #54679209;border-width:2px}
.filters button[data-filter=swim]{border-color:#76c6d1;background:#e1f6fa}
.filters button[data-filter=family]{border-color:#e6cc74;background:#fff6d2}
.filters button[data-filter=surf]{border-color:#eeae81;background:#ffeadc}
.filters button[data-filter=quiet]{border-color:#a8c886;background:#edf5dd}
.filters button[data-filter][aria-pressed=true]{background:#546792;border-color:#546792;color:white;box-shadow:0 4px 12px #54679225}
.map-panel{background:radial-gradient(ellipse at 47% 49%,#e2f8eb 0%,#a8e5e5 48%,#67c4da 100%);border-color:#8abecb;box-shadow:0 12px 30px #3992a518}
.map-top{color:#244961}.map-top span:first-child{background:#ffffffd9;padding:5px 12px;border-radius:20px;white-space:nowrap}.map-top span:last-child{padding-top:5px}
.land{fill:url(#islandFill);stroke:#839957;stroke-width:1.5;filter:drop-shadow(0 5px 6px #286b7325)}
.pin.east circle{fill:#16828e}.pin.south circle{fill:#546792}.pin.active circle{fill:#c5722e;stroke-width:4}.pin .leader{stroke:#3c8091}.pin text{stroke:#d9f4ee;color:#284664}.pin.active text{fill:#8b481e}.pin.dim{opacity:.36}.island-label{fill:#657237}.ocean-label{fill:#30627e}.geo-note{color:#355c70}.legend{color:#294f68}.legend .yes{background:#546792}
.beach-tile{overflow:hidden;border-top:5px solid #546792;box-shadow:0 4px 16px #5467920b}.beach-tile[data-coast=east]{border-top-color:#16828e;background:#f2fbfb}.beach-tile[data-coast=south]{background:#fafaff}.beach-tile.active{background:#fff4c6;box-shadow:0 5px 18px #b9983020}.tile-photo{display:block;width:calc(100% + 34px);max-width:none;height:100px;object-fit:cover;margin:-17px -17px 14px}
#detail{box-shadow:0 12px 30px #54679212;border-color:#c7d1e2}.detail-body{border-top:6px solid #546792}#detail[data-coast=east] .detail-body{border-top-color:#16828e}.detail-photo{height:220px}.detail-top{background:linear-gradient(120deg,#f3f5ff,#fff9d9);border-radius:16px;padding:16px;margin:-4px -4px 0}.coast{background:#546792;color:white}#detail[data-coast=east] .coast{background:#167582}.season-box{background:#fff3ba;border:1px solid #ead889}.facts dt{color:#436188}.compare-button{background:#edf2fb;font-weight:650}.compare-card{border-top:5px solid #87bfc9;box-shadow:0 4px 15px #5467920b}
@media(max-width:850px){.detail-photo{height:190px}.detail-top{padding:14px}.map-top{align-items:flex-start}.map-top span:last-child{font-size:13px;max-width:155px}.tile-photo{height:90px}.detail-top h2{font-size:27px}}
/* A selected beach stays legible on its yellow surface. */
.beach-tile[aria-pressed=true],.beach-tile.active{background:#fff4c6;color:#3f4c6e;border-color:#546792}
.beach-tile[aria-pressed=true] strong,.beach-tile.active strong{color:#3f4c6e}
.beach-tile[aria-pressed=true] small,.beach-tile.active small{color:#59647a}
.beach-tile[aria-pressed=true] .beach-number{color:#546792}
.beach-tile[aria-pressed=true] .fit-note{color:#78531d}
.beach-tile{text-align:left;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.tile-photo{flex-shrink:0}