/* bestresorts.miami: Miami pastels, Art Deco accents, system fonts. */
:root{
  --sand:#fffaf2; --paper:#ffffff; --ink:#1b2a33; --muted:#5b6b74; --line:#eadfce;
  --teal:#0b5e6e; --teal2:#12808f; --sea:#bfe9ec; --pink:#ff8fb1; --pink2:#d9467a; --sun:#ffc84a;
  --lilac:#b9a7e8; --mint:#8fdcc8; --peach:#ffd2b8;
  --low:#1f8a5b; --low-bg:#d9f3e6; --mod:#9a6a00; --mod-bg:#fff0c2; --high:#c22a3a; --high-bg:#ffe0e2;
  --card-shadow:0 1px 2px rgba(27,42,51,.06),0 6px 20px rgba(27,42,51,.07);
  --radius:18px;
  --head:"Avenir Next","Avenir","Futura","Century Gothic","Segoe UI","Helvetica Neue",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --sand:#0e1d26; --paper:#152a35; --ink:#eef4f6; --muted:#a3b6bf; --line:#27424f;
  --teal:#7fd6e0; --teal2:#5cc3cf; --sea:#123947; --pink:#ff8fb1; --pink2:#ff8fb1; --sun:#ffd166;
  --low:#6fe0a7; --low-bg:#123a2a; --mod:#ffd36b; --mod-bg:#3a3010; --high:#ff8d97; --high-bg:#4a1820;
  --card-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font:16px/1.6 var(--body)}
a{color:var(--teal2)}
a:hover{color:var(--pink2)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--head);line-height:1.2;letter-spacing:.01em;margin:1.4em 0 .5em}
h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:700;margin-top:.4em}
h2{font-size:clamp(1.35rem,3vw,1.75rem)}
h3{font-size:1.15rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.narrow{max-width:760px}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.js-only{display:none}
html.js .js-only{display:revert}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--paper);padding:6px 10px;z-index:9}

/* header */
.top{background:var(--paper);border-bottom:3px solid var(--pink);position:sticky;top:0;z-index:5}
.top::after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--mint),var(--sea) 30%,var(--lilac) 60%,var(--sun))}
.bar{display:flex;align-items:center;gap:14px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font:700 1.12rem var(--head);color:var(--ink);text-decoration:none;letter-spacing:.02em}
.brand b{color:var(--pink2)}
.top nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.top nav a{text-decoration:none;color:var(--ink);padding:6px 10px;border-radius:999px;font-weight:600;font-size:.95rem}
.top nav a:hover,.top nav a[aria-current]{background:var(--sea);color:var(--ink)}
.units{border:2px solid var(--teal2);background:transparent;color:var(--teal2);border-radius:999px;padding:3px 12px;font-weight:700;cursor:pointer;font-size:.9rem}
.units:hover{background:var(--teal2);color:var(--paper)}
@media (max-width:700px){
  .bar{gap:6px;padding:6px 0}
  .top nav{order:3;width:100%;margin:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .top nav a{white-space:nowrap;font-size:.9rem;padding:5px 9px}
  .units{margin-left:auto}
  .top{position:static}
}

/* hero */
.hero{position:relative;color:#fff;background:#0b5e6e;overflow:hidden;isolation:isolate}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,40,55,.42),rgba(11,40,55,.35) 40%,rgba(11,40,55,.78))}
.hero .wrap{padding-top:clamp(36px,7vw,90px);padding-bottom:28px}
.hero h1{margin:0 0 .2em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero p.lede{font-size:clamp(1.02rem,2.2vw,1.25rem);max-width:640px;margin:.2em 0 1em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero .credit{position:absolute;right:10px;bottom:6px;font-size:.7rem;color:rgba(255,255,255,.85);text-shadow:0 1px 3px #000;margin:0}
.hero .credit a{color:inherit}
.sunburst{position:absolute;right:-60px;top:-40px;width:360px;opacity:.55;z-index:-1;pointer-events:none}
@media (max-width:700px){.sunburst{width:220px;right:-50px;top:-30px}}
.hero.small .wrap{padding-top:40px;padding-bottom:22px}

/* deco divider */
.deco{display:flex;align-items:center;gap:10px;color:var(--pink2);margin:2.2em 0 .2em}
.deco::before,.deco::after{content:"";flex:1;height:0;border-top:2px solid var(--line);box-shadow:0 4px 0 -0 var(--line)}
.deco svg{width:46px;height:20px}

/* condition cards */
.cards{--n:4;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:18px 0}   /* PARK-56: columns follow the card count (up to 6 in a row), then 3 or 2 per row, short last row centred */
.cards>*{flex:0 1 calc((100% - (var(--n) - 1) * 14px) / var(--n))}
.cards:has(>:nth-child(1):last-child){--n:1}.cards:has(>:nth-child(2):last-child){--n:2}.cards:has(>:nth-child(3):last-child){--n:3}
.cards:has(>:nth-child(5):last-child){--n:5}.cards:has(>:nth-child(6):last-child){--n:6}
@media (max-width:1000px){.cards:has(>:nth-child(4):last-child){--n:2}.cards:has(>:nth-child(5):last-child),.cards:has(>:nth-child(6):last-child){--n:3}}
.hero .cards{margin-bottom:6px}
.card{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--card-shadow);border:1px solid var(--line);position:relative;min-width:0}
.card h3,.card .k{font:700 .78rem var(--head);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 4px}
.card .v{font:700 clamp(1.9rem,6vw,2.6rem)/1.05 var(--head);margin:2px 0 4px}
.card .v small{font-size:.45em;font-weight:600;color:var(--muted)}
.card p{margin:.2em 0;font-size:.92rem}
.card .asof{font-size:.76rem;color:var(--muted);margin-top:8px}
.card.risk-low{background:var(--low-bg);border-color:transparent}.card.risk-low .v{color:var(--low)}
.card.risk-moderate{background:var(--mod-bg);border-color:transparent}.card.risk-moderate .v{color:var(--mod)}
.card.risk-high{background:var(--high-bg);border-color:transparent}.card.risk-high .v{color:var(--high)}
.card .spark{width:100%;height:44px;margin-top:6px}
.spark .band{fill:var(--sea)}.spark .ln{fill:none;stroke:var(--teal2);stroke-width:2}
.stale{display:inline-block;background:var(--mod-bg);color:var(--mod);border-radius:6px;padding:0 6px;font-size:.78rem;font-weight:700}
.uvbar{display:flex;gap:2px;margin-top:6px}.uvbar i{flex:1;height:8px;border-radius:2px;background:var(--line)}
.uv-low{color:#2e8b3c}.uv-mod{color:#b38f00}.uv-high{color:#e06a00}.uv-vhigh{color:#d01c2a}.uv-ext{color:#8a3dc2}
@media (prefers-color-scheme:dark){.uv-low{color:#6fe08a}.uv-mod{color:#ffe066}.uv-high{color:#ffa94d}.uv-vhigh{color:#ff7b86}.uv-ext{color:#d6a6ff}}

.alert{background:var(--high-bg);border-left:6px solid var(--high);border-radius:12px;padding:12px 16px;margin:16px 0;color:var(--ink)}
.alert strong{color:var(--high)}
.alert p{margin:.25em 0}
.alert details summary{cursor:pointer;font-weight:600}
.hero .alert{box-shadow:var(--card-shadow)}

/* grids of beach cards */
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:18px 0}   /* PARK-56: 4 / 2 / 1 columns, short last row centred */
.grid>*{flex:0 1 calc((100% - 3 * 18px) / 4);min-width:0}
@media (max-width:1000px){.grid>*{flex-basis:calc((100% - 18px) / 2)}}
@media (max-width:600px){.grid>*{flex-basis:100%}}
.bcard{background:var(--paper);border-radius:var(--radius);overflow:hidden;box-shadow:var(--card-shadow);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .15s}
.bcard:hover{transform:translateY(-2px);color:var(--ink)}
.bcard img{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--sea)}
.bcard .ph{aspect-ratio:16/10;background:linear-gradient(135deg,var(--sea),var(--lilac));display:flex;align-items:center;justify-content:center}
.bcard .b{padding:12px 16px 16px}
.bcard h3{margin:0 0 4px;font-size:1.1rem}
.bcard p{margin:0;color:var(--muted);font-size:.92rem}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag{font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--sea);color:var(--ink)}
.tag.pink{background:#ffe1ea;color:#8c2048}.tag.sun{background:#fff0c2;color:#6b4d00}.tag.lilac{background:#ece6ff;color:#4a3a8a}.tag.mint{background:#d6f5ec;color:#11604a}
@media (prefers-color-scheme:dark){.tag.pink{background:#4a1f30;color:#ffc2d6}.tag.sun{background:#3d3210;color:#ffe08a}.tag.lilac{background:#2e2850;color:#d6ccff}.tag.mint{background:#123d33;color:#a8f0da}}

/* filter */
.filter{background:var(--paper);border-radius:var(--radius);padding:14px 16px;border:1px solid var(--line);box-shadow:var(--card-shadow);margin:16px 0}
.filter fieldset{border:0;padding:0;margin:0 0 8px}
.filter legend{font:700 .8rem var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:5px 12px;border-radius:999px;border:2px solid var(--line);font-weight:600;font-size:.9rem;background:var(--sand)}
.chips input:checked+span{background:var(--teal2);border-color:var(--teal2);color:#fff}
.chips input:focus-visible+span{outline:3px solid var(--pink)}
.count{font-weight:700;color:var(--teal2)}

/* layout */
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split>*{min-width:0}
.side{position:sticky;top:80px}
@media (max-width:900px){.side{position:static}}
.panel{background:var(--paper);border-radius:var(--radius);padding:16px 18px;border:1px solid var(--line);box-shadow:var(--card-shadow);margin:0 0 18px}
.panel h2,.panel h3{margin-top:0}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
dl.facts dt{font-weight:700;color:var(--muted);font-size:.9rem}
dl.facts dd{margin:0}
@media (max-width:480px){dl.facts{grid-template-columns:1fr}dl.facts dt{margin-top:6px}}
.ok{color:var(--low);font-weight:700}.no{color:var(--high);font-weight:700}
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:6px 0;border-bottom:1px dashed var(--line)}
ul.clean li:last-child{border:0}
.crumbs{font-size:.88rem;margin:14px 0 0;color:var(--muted)}
.crumbs a{color:var(--muted)}
.hero .crumbs,.hero .crumbs a{color:rgba(255,255,255,.9)}

/* photo figure */
figure.photo{margin:0 0 18px;border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:var(--card-shadow)}
figure.photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
figure.photo figcaption{font-size:.75rem;color:var(--muted);padding:6px 12px}
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}   /* PARK-56: 3 / 2 / 1 columns, centred */
.gallery>*{flex:0 1 calc((100% - 2 * 12px) / 3);min-width:0}
@media (max-width:600px){.gallery>*{flex-basis:calc((100% - 12px) / 2)}}
@media (max-width:420px){.gallery>*{flex-basis:100%}}
.gallery figure{margin:0;background:var(--paper);border-radius:12px;overflow:hidden}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:.72rem;color:var(--muted);padding:4px 8px}

/* map */
.map{width:100%;height:auto;border-radius:var(--radius);background:var(--sea);display:block}
.map .pin{fill:var(--pink2);stroke:#fff;stroke-width:1.6}
.map .pin.cur{fill:var(--sun);stroke:var(--ink);stroke-width:2}
.map a:hover .pin{fill:var(--sun)}
.map text{font:700 9px var(--body);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.map text.town{font-weight:600;font-style:italic;fill:var(--muted);font-size:8px}
.map.inset text{font-size:6px}
.mapnote{font-size:.72rem;color:var(--muted);margin:4px 0 0}

/* tables */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0;border-radius:12px;border:1px solid var(--line);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
td.wrap,th.wrap{white-space:normal;min-width:180px}
thead th{background:var(--sea);font-family:var(--head);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
tbody tr:hover{background:rgba(127,214,224,.12)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.heat{display:inline-block;min-width:3.2em;text-align:center;border-radius:6px;padding:1px 4px;font-weight:700}

/* charts */
.chart{width:100%;height:auto;min-width:560px;display:block}
.chartbox{overflow-x:auto;background:var(--paper);border-radius:var(--radius);border:1px solid var(--line);padding:10px;margin:12px 0}
.chart .grid line,.chart line.grid{stroke:var(--line);stroke-width:1}
.chart .ax{font:11px var(--body);fill:var(--muted)}
.chart .lbl{font:700 11px var(--body);fill:var(--ink)}
.chart .tide{fill:none;stroke:var(--teal2);stroke-width:2.5}
.chart .tidefill{fill:var(--sea);opacity:.7}
.chart .now{stroke:var(--pink2);stroke-width:2;stroke-dasharray:4 3}
.chart .hl{fill:var(--teal2)}
.chart .night{fill:var(--ink);opacity:.06}
.chart .air{fill:none;stroke:var(--pink2);stroke-width:2.5}
.chart .water{fill:none;stroke:var(--teal2);stroke-width:2.5}
.chart .band{fill:var(--sea);opacity:.8}
.chart .rain{fill:var(--lilac);opacity:.75}
.chart .hur{fill:var(--peach);opacity:.45}
.chart .dot{stroke:var(--paper);stroke-width:1.5}
.chart .dot.air{fill:var(--pink2)}.chart .dot.water{fill:var(--teal2)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.85rem;color:var(--muted);margin:4px 4px 0}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:5px;vertical-align:middle}
.picker{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
select{font:inherit;padding:6px 10px;border-radius:10px;border:2px solid var(--line);background:var(--paper);color:var(--ink);max-width:100%}

/* months strip */
.months{display:grid;grid-template-columns:repeat(12,minmax(64px,1fr));gap:6px;overflow-x:auto;padding-bottom:6px}
.months a{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border-radius:12px;padding:8px 6px;text-align:center;border:1px solid var(--line);font-size:.82rem}
.months a b{display:block;font-family:var(--head);font-size:.95rem}
.months a.cur{outline:3px solid var(--pink)}
.months .bar{height:6px;border-radius:3px;margin-top:5px}

/* prose */
.prose{max-width:760px}
.prose p,.prose li{font-size:1.02rem}
.callout{background:var(--paper);border-left:6px solid var(--sun);border-radius:12px;padding:12px 16px;margin:16px 0}
.callout.pink{border-color:var(--pink)}.callout.teal{border-color:var(--teal2)}
.flags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0}   /* PARK-56: 5 in a row, then 3 / 2 per row centred */
.flags>*{flex:1 1 0;min-width:0}
@media (max-width:760px){.flags>*{flex:0 1 calc((100% - 2 * 10px) / 3)}}
@media (max-width:480px){.flags>*{flex-basis:calc((100% - 10px) / 2)}}
.flags div{background:var(--paper);border-radius:12px;padding:10px;border:1px solid var(--line);font-size:.9rem}
.flags svg{width:44px;height:30px;display:block;margin-bottom:4px}
.src{font-size:.82rem;color:var(--muted)}
.forecast{--n:7;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}   /* PARK-56: 7 / 4 / 3 / 2 per row, short last row centred */
.forecast>*{flex:0 1 calc((100% - (var(--n) - 1) * 10px) / var(--n));min-width:0}
@media (max-width:1100px){.forecast{--n:4}}
@media (max-width:640px){.forecast{--n:3}}
@media (max-width:480px){.forecast{--n:2}}
.forecast div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px;font-size:.88rem}
.forecast b{display:block;font-family:var(--head)}
.forecast .t{font:700 1.3rem var(--head)}

/* footer */
.foot{margin-top:56px;background:var(--paper);border-top:3px solid var(--pink);font-size:.86rem;color:var(--muted)}
.foot .wrap{padding-top:22px;padding-bottom:30px}
.foot a{color:var(--muted)}
.foot .deco-top{height:14px;background:repeating-linear-gradient(90deg,var(--mint) 0 18px,var(--sea) 18px 36px,var(--lilac) 36px 54px,var(--peach) 54px 72px)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.top,.foot,.filter,.units{display:none}}
@media (max-width:560px){
  .cards{gap:10px}.cards>*{flex-basis:calc((100% - 10px) / 2)}.cards>:only-child{flex-basis:100%}
  .card{padding:12px 12px;border-radius:14px}
  .card .v{font-size:1.9rem}
  .card p{font-size:.84rem}
  .card .asof{font-size:.7rem}
  .card h3,.card .k{font-size:.68rem;letter-spacing:.06em}
  .hero .wrap{padding-top:26px}
}