/* KiwiSurf spot pages (/surf/<spot>/ and /surf/<spot>/pt/). Tokens, type and buttons match assets/site.css; no third-party requests. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Fraunces.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/NunitoSans.woff2) format('woff2')}
:root{
  --surface-50:#fdfdfa;--surface-300:#f8f7f2;--surface-500:#f5f3ea;
  --ink-100:#f2f1ec;--ink-200:#edeae4;--ink-300:#d8d6ce;--ink-400:#a4a39d;--ink-500:#706f69;--ink-600:#6b6a64;--ink-700:#43423e;--ink-800:#2c2b29;--ink-900:#1d1d1c;
  --night:#190922;--kiwi:#1a7a42;--kiwi-ink:#1f6b35;--flesh:#8cc63f;--teal:#2ec4b6;--sea:#2c91af;--deep:#31295f;--coral:#eb6928;--sand:#e6b195;
  --l1:#d8d6ce;--l2:#e7c78d;--l3:#bcd56a;--l4:#8cc63f;--l5:#1a7a42;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;--sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);--out:cubic-bezier(.16,1,.3,1);
  --shadow-border:0 0 0 1px var(--ink-200),0 1px 1px rgba(29,29,28,.02),0 3px 3px rgba(29,29,28,.02),0 6px 6px rgba(29,29,28,.03),0 12px 12px rgba(29,29,28,.03),0 24px 24px rgba(29,29,28,.03);
  --lift:0 18px 40px -18px rgba(49,41,95,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--surface-300);color:var(--ink-900);font:400 16px/26px var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 0;margin:0;letter-spacing:-.015em}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.k{display:inline-block;width:1em;height:1em;vertical-align:-.15em;flex:none}
.k.off{filter:grayscale(1);opacity:.3}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;border:0;font:700 16px/24px var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.btn svg{width:16px;height:16px}
.btn-dark{background:linear-gradient(0deg,var(--ink-800),var(--ink-700));color:var(--ink-100);box-shadow:0 0 0 1px var(--ink-700)}
.btn-dark:hover{background:linear-gradient(0deg,var(--ink-900),var(--ink-800));transform:translateY(-1px)}
.btn-light{background:rgba(255,255,255,.72);color:var(--ink-900);box-shadow:0 0 0 1px rgba(29,29,28,.14)}
.btn-light:hover{background:#fff}
.btn-kiwi{background:var(--flesh);color:#14301c;box-shadow:0 0 0 1px #7db536,0 10px 24px -10px rgba(26,122,66,.6)}
.btn-kiwi:hover{background:#9bd14d;transform:translateY(-1px)}

/* header: two light pills */
.hdr{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;width:1200px;max-width:calc(100% - 16px);display:flex;justify-content:space-between;pointer-events:none}
.pill{pointer-events:auto;display:flex;align-items:center;height:46px;padding:4px;border-radius:12px;background:rgba(253,253,250,.82);box-shadow:var(--shadow-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.logo{display:flex;align-items:center;gap:8px;padding:0 10px 0 6px;height:36px;text-decoration:none;font:700 20px/1 var(--serif);letter-spacing:-.02em}
.logo img{width:28px;height:28px;border-radius:50%}
.nav-b{display:flex;align-items:center;height:36px;padding:0 12px;border-radius:8px;font:600 15px/20px var(--sans);text-decoration:none;color:var(--ink-700)}
.nav-b:hover{background:rgba(29,29,28,.05)}
.pill .get{height:36px;padding:0 12px;border-radius:10px;font-size:15px;margin-left:4px;gap:0}
.pill .get .lg{margin-left:.28em}
.pill .sep{width:1px;height:20px;background:var(--ink-900);opacity:.12;margin:0 4px}

/* hero: dawn sky that runs into the painting of the coast */
.hero{position:relative;background:linear-gradient(180deg,#cdb2c2 0%,#d3b8c0 60%,#d6bcc0 100%);padding:108px 24px 0;overflow:hidden}
.hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:56px;align-items:start}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none;font:600 13px/18px var(--sans);color:var(--ink-700)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.45}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.hero h1{font-size:64px;line-height:1.04;letter-spacing:-.025em;color:var(--ink-900)}
.hero h1 em{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--deep)}
.lede{margin-top:20px;max-width:560px;font:500 19px/30px var(--sans);color:var(--ink-700)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(29,29,28,.08);font:700 13px/18px var(--sans);color:var(--ink-700)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.lang{margin-top:18px;font:600 14px/20px var(--sans);color:var(--ink-700)}
.lang a{color:var(--deep)}
.hero-art{position:relative;z-index:1;margin:56px -24px 0;height:min(56.25vw,82vh);overflow:hidden}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.hero-art::before{content:"";position:absolute;inset:0 0 auto 0;height:30%;z-index:1;background:linear-gradient(180deg,#d6bcc0,rgba(214,188,192,0))}
.hero-art figcaption{position:absolute;right:16px;bottom:12px;z-index:1;font:600 11px/14px var(--sans);color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* today card */
.today{position:relative;background:#fff;border-radius:22px;padding:22px 22px 18px;box-shadow:var(--shadow-border),var(--lift)}
.today-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px}
.today-h b{font:700 13px/18px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-600)}
.upd{display:inline-flex;align-items:center;gap:6px;font:700 12px/16px var(--sans);color:var(--kiwi-ink);background:#e9f6e2;border-radius:999px;padding:3px 9px;white-space:nowrap}
.upd::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kiwi);box-shadow:0 0 0 3px rgba(26,122,66,.18);animation:pulse 2.4s var(--ease) infinite}
.upd.old{color:#8a4b12;background:#fdeedd}.upd.old::before{background:var(--coral);box-shadow:0 0 0 3px rgba(235,105,40,.18)}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(26,122,66,0)}}
.score{display:flex;align-items:center;gap:14px;margin-top:16px}
.kr{display:flex;gap:4px;font-size:30px}
.score .r{font:600 40px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.score .r small{font-size:20px;color:var(--ink-500)}
.verdict{margin-top:12px;font:500 22px/29px var(--serif);letter-spacing:-.01em;color:var(--ink-900)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:18px;border-radius:14px;overflow:hidden;background:var(--ink-200);box-shadow:0 0 0 1px var(--ink-200)}
.stats div{background:var(--surface-50);padding:10px 12px}
.stats small{display:block;font:700 11px/15px var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-600)}
.stats b{display:block;margin-top:2px;font:800 16px/21px var(--sans);font-variant-numeric:tabular-nums}
.stats i{display:block;font:600 12px/16px var(--sans);font-style:normal;color:var(--ink-600)}
.tides{margin-top:12px;font:600 13px/19px var(--sans);color:var(--ink-600)}
.coast{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ink-200);font:600 13px/19px var(--sans);color:var(--ink-700)}
.coast a{color:var(--deep);font-weight:800;white-space:nowrap}
.stale{display:none;margin-top:12px;padding:10px 12px;border-radius:12px;background:#fdf3e7;font:600 13px/19px var(--sans);color:#8a4b12}
.stale.on{display:block}

/* sections */
.sec{max-width:1200px;margin:0 auto;padding:96px 24px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:800 12px/16px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--kiwi)}
.eyebrow .k{font-size:16px}
.sec h2{margin-top:10px;font-size:46px;line-height:1.1;letter-spacing:-.022em;max-width:820px}
.sec .intro{margin-top:16px;max-width:720px;font:400 18px/30px var(--sans);color:var(--ink-700)}
.card{background:#fff;border-radius:18px;box-shadow:var(--shadow-border)}

/* next days */
.days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:32px}
.day{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 16px 14px;border:0;border-radius:16px;background:#fff;box-shadow:var(--shadow-border);text-align:left;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.day:hover{transform:translateY(-2px)}
.day[aria-selected=true]{box-shadow:0 0 0 2px var(--ink-900),var(--lift)}
.day .dn{font:800 13px/18px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-600)}
.day .dd{font:500 20px/24px var(--serif)}
.day .kr{font-size:17px;gap:2px;margin-top:2px}
.day .dl{font:700 14px/19px var(--sans);color:var(--ink-800)}
.day .ds{font:600 13px/18px var(--sans);color:var(--ink-600)}
.rt{display:inline-block;padding:1px 8px;border-radius:999px;font:800 12px/18px var(--sans);font-variant-numeric:tabular-nums;background:var(--surface-500);color:var(--ink-700)}
.rt.g{background:#e3f6dc;color:var(--kiwi-ink)}.rt.a{background:#fdeedd;color:#9a4a12}

/* hour by hour */
.hours{margin-top:20px;padding:8px 0 4px}
.panel+.panel{margin-top:28px}
.panel:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:12px}
.js .panel[hidden]{display:none}
.panel-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding:12px 20px 12px}
.panel-h h3{font-size:24px;line-height:30px}
.panel-h p{font:600 14px/20px var(--sans);color:var(--ink-600)}
.panel-h .say{flex-basis:100%;font:500 17px/25px var(--serif);color:var(--ink-800)}
.hl{list-style:none;margin:0;padding:0}
.hl li,.hl-head{display:grid;grid-template-columns:62px 150px minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr);align-items:center;gap:12px;padding:10px 20px}
.hl-head{padding-top:4px;padding-bottom:8px;font:800 11px/14px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-600)}
.hl li{position:relative;border-top:1px solid var(--ink-200);font:600 15px/20px var(--sans);font-variant-numeric:tabular-nums}
.hl li.win{background:linear-gradient(90deg,#eef8e8,#f6fbf2)}
.hl li.win::before{content:"";position:absolute;left:0;top:-1px;bottom:0;width:4px;background:var(--kiwi)}
.hl li.now{box-shadow:inset 0 0 0 2px var(--teal);border-radius:10px}
.hl .hh{font:800 16px/20px var(--sans)}
.hl .hh small{display:block;font:800 10px/13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--kiwi)}
.hl li.now .hh small.nowtag{color:#0b6b63}
.hl .kq{display:flex;align-items:center;gap:8px}
.bar{display:inline-block;width:57px;height:16px;flex:none;background:linear-gradient(90deg,var(--bc,var(--l1)) calc(var(--n,1) * 12px - 1.5px),var(--ink-200) 0);-webkit-mask:var(--bm) no-repeat;mask:var(--bm) no-repeat;--bm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='57' height='16'%3E%3Crect y='9.6' width='9' height='6.4' rx='2'/%3E%3Crect x='12' y='7.2' width='9' height='8.8' rx='2'/%3E%3Crect x='24' y='4.8' width='9' height='11.2' rx='2'/%3E%3Crect x='36' y='2.4' width='9' height='13.6' rx='2'/%3E%3Crect x='48' width='9' height='16' rx='2'/%3E%3C/svg%3E")}
.l1{--n:1;--bc:var(--l1)}.l2{--n:2;--bc:var(--l2)}.l3{--n:3;--bc:var(--l3)}.l4{--n:4;--bc:var(--l4)}.l5{--n:5;--bc:var(--l5)}
.hl .sz b{font-weight:800}
.hl .sz i,.hl .sw i,.hl .wd i,.hl .td i{font-style:normal;color:var(--ink-600);font-weight:600}
.hl .sw,.hl .wd,.hl .td{display:flex;align-items:center;gap:7px;min-width:0}
.arr{width:18px;height:18px;flex:none;color:var(--deep)}
.wd .arr{color:var(--ink-700)}
.wk{display:inline-block;padding:0 7px;border-radius:6px;font:800 11px/18px var(--sans);background:var(--surface-500);color:var(--ink-700);white-space:nowrap}
.wk.good{background:#e3f6dc;color:var(--kiwi-ink)}.wk.bad{background:#fde7e1;color:#9b3415}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 20px 12px;border-top:1px solid var(--ink-200);font:600 13px/18px var(--sans);color:var(--ink-600)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend .sw2{width:16px;height:12px;border-radius:3px;background:#eef8e8;box-shadow:inset 3px 0 0 var(--kiwi)}
.src{margin-top:12px;font:400 13px/20px var(--sans);color:var(--ink-600);max-width:880px}
.src a{color:var(--ink-700)}

/* Kiwi's tip */
.tip{display:flex;gap:14px;align-items:flex-start;margin-top:28px;max-width:760px}
.tip img{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(0,0,0,.3)}
.tip p{position:relative;padding:14px 18px;border-radius:4px 18px 18px 18px;background:#fff;box-shadow:var(--shadow-border);font:500 17px/27px var(--sans);color:var(--ink-800)}
.tip p b{color:var(--kiwi-ink)}

/* map + beaches */
.beaches{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;margin-top:40px;align-items:start}
.map{position:sticky;top:84px;padding:14px;overflow:hidden}
.map svg{width:100%;height:auto}
.map .land{fill:#f1e3c8;stroke:#d9b98a;stroke-width:1.2}
.map .sea{fill:url(#seaG)}
.map .pin circle{fill:#fff;stroke:var(--deep);stroke-width:2}
.map .pin.surf circle{fill:var(--flesh);stroke:var(--kiwi)}
.map .pin text.no{font:800 10px var(--sans);fill:var(--ink-900);stroke:none}
.map .pin text{font:800 12px var(--sans);fill:var(--ink-900);paint-order:stroke;stroke:#f1e3c8;stroke-width:4px;stroke-linejoin:round}
.map .town text{font:700 11px var(--sans);fill:var(--ink-600);letter-spacing:.04em;text-transform:uppercase}
.map .lbl{font:800 11px var(--sans);letter-spacing:.12em;fill:#ffffff;opacity:.9}
.map figcaption{margin-top:8px;font:600 11px/15px var(--sans);color:var(--ink-600)}
.bl{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:b}
.bl li{padding:20px 22px;counter-increment:b}
.bl h3{display:flex;align-items:baseline;gap:10px;font-size:23px;line-height:29px}
.bl h3::before{content:counter(b);flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--flesh);color:#14301c;font:800 13px/1 var(--sans);transform:translateY(-3px)}
.bl .lv{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bl .lv span{padding:2px 9px;border-radius:999px;font:800 12px/18px var(--sans);background:var(--surface-500);color:var(--ink-700)}
.bl .lv span.beg{background:#e3f6dc;color:var(--kiwi-ink)}.bl .lv span.adv{background:#fde7e1;color:#9b3415}
.bl p{margin-top:10px;font:400 16px/26px var(--sans);color:var(--ink-700)}

/* when it works: four dials */
.conds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
.cond{padding:20px 20px 18px}
.cond h3{font-size:22px;line-height:28px}
.cond .dial{margin:14px auto 6px;width:150px;height:150px}
.cond .big{margin-top:8px;font:800 18px/24px var(--sans)}
.cond p{margin-top:8px;font:400 15px/23px var(--sans);color:var(--ink-700)}
.dial .ring{fill:none;stroke:var(--ink-200);stroke-width:12}
.dial .arc{fill:none;stroke:var(--flesh);stroke-width:12;stroke-linecap:round}
.dial .arc.wind{stroke:var(--teal)}
.dial text{font:800 11px var(--sans);fill:var(--ink-600)}
.dial .face{fill:none;stroke:var(--deep);stroke-width:2.5;stroke-linecap:round}
.rangebar{position:relative;height:14px;margin:58px 4px 34px;border-radius:999px;background:var(--ink-200)}
.rangebar .ok{position:absolute;top:0;bottom:0;border-radius:999px;background:#d9edc4}
.rangebar .best{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--flesh)}
.rangebar span{position:absolute;top:22px;transform:translateX(-50%);font:800 11px/14px var(--sans);color:var(--ink-600);white-space:nowrap}
.tidebar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:44px 0 22px}
.tidebar i{display:grid;place-items:end center;height:84px;border-radius:10px;background:var(--surface-500);font:800 12px/16px var(--sans);font-style:normal;color:var(--ink-600);padding-bottom:8px}
.tidebar i.on{background:linear-gradient(180deg,#d6f0ec,#a9e1da);color:#0f5b55}
.tidebar i:nth-child(1){height:52px;align-self:end}.tidebar i:nth-child(2){height:68px;align-self:end}

/* seasons chart */
.season{margin-top:36px;padding:24px 24px 18px}
.chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:end;height:220px;padding-top:24px}
.mo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;border-radius:8px 8px 3px 3px;background:var(--surface-500)}
.mo .ok{background:#cfe8b4;border-radius:8px 8px 0 0}
.mo .gd{background:var(--kiwi);border-radius:0 0 3px 3px}
.mo .pct{position:absolute;left:0;right:0;text-align:center;font:800 12px/14px var(--sans);color:var(--kiwi-ink);transform:translateY(-17px)}
.mo.top .gd{background:#12693a}
.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin-top:8px;font:800 12px/16px var(--sans);color:var(--ink-600);text-align:center}
.seas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}
.seas div{padding:18px 18px 16px}
.seas h3{font-size:21px;line-height:27px}
.seas h3 span{display:block;font:800 12px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-600);margin-bottom:2px}
.seas p{margin-top:8px;font:400 15px/23px var(--sans);color:var(--ink-700)}

/* need-to-know grid */
.know{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.know>div{padding:22px 22px 20px}
.know .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--surface-500);font-size:22px}
.know h3{margin-top:14px;font-size:22px;line-height:28px}
.know p,.know li{font:400 15px/24px var(--sans);color:var(--ink-700)}
.know p{margin-top:8px}
.know ul{margin:8px 0 0;padding-left:18px}
.know li+li{margin-top:4px}
.know a{color:var(--deep);font-weight:700}
.know .wide{grid-column:span 2}

/* accuracy */
.acc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:36px}
.acc>div{padding:24px}
.acc .n{display:flex;gap:28px;flex-wrap:wrap;margin-top:12px}
.acc .n b{display:block;font:600 44px/1 var(--serif);letter-spacing:-.02em;color:var(--kiwi-ink)}
.acc .n small{display:block;margin-top:6px;font:700 13px/18px var(--sans);color:var(--ink-600);max-width:180px}
.acc p{margin-top:12px;font:400 15px/24px var(--sans);color:var(--ink-700)}
.acc a{color:var(--deep);font-weight:700}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px);gap:48px}
.qa{padding:4px 0}
.qa details{border-bottom:1px solid var(--ink-200)}
.qa details:last-child{border:0}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:8px 20px;font:500 18px/26px var(--serif);cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(var(--ink-500),var(--ink-500)) center/12px 1.5px no-repeat,linear-gradient(var(--ink-500),var(--ink-500)) center/1.5px 12px no-repeat;transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .ans{padding:0 20px 18px}
.qa .ans p{font:400 16px/27px var(--sans);color:var(--ink-700)}
.qa .ans p+p{margin-top:10px}
.qa a{color:var(--deep);font-weight:700}

/* CTA + more spots */
.cta{position:relative;margin:96px auto 0;max-width:1200px;padding:0 24px}
.cta-in{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding:36px 40px;border-radius:24px;background:radial-gradient(120% 140% at 0% 0%,#3b2a6b 0%,var(--night) 60%);color:var(--ink-100)}
.cta-in img{width:96px;height:96px;border-radius:24px;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.cta h2{font-size:34px;line-height:40px;color:#fff}
.cta p{margin-top:8px;font:500 16px/25px var(--sans);color:var(--ink-300)}
.more{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.more a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;background:#fff;box-shadow:var(--shadow-border);font:700 15px/20px var(--sans);text-decoration:none}
.more a:hover{box-shadow:0 0 0 1px var(--ink-400)}
.more a small{font-weight:600;color:var(--ink-600)}

/* footer */
.ft{margin-top:112px;background:var(--night);color:var(--ink-100);border-radius:12px 12px 0 0}
.ft-in{max-width:1200px;margin:0 auto;padding:56px 24px 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px}
.ft .logo{padding:0;font-size:24px;color:#fff}
.ft p{margin-top:14px;max-width:520px;font:400 14px/22px var(--sans);opacity:.85}
.ft .copy{font-size:12px;line-height:18px;opacity:.6}
.ft nav{display:grid;grid-template-columns:repeat(2,auto);gap:8px 40px;align-content:start}
.ft nav a{font:600 14px/22px var(--sans);text-decoration:none;opacity:.85}
.ft nav a:hover{opacity:1;text-decoration:underline}
.ft .risk{margin-top:10px;font-size:12px;opacity:.7}

/* tablet */
@media (max-width:1080px){
  .hero-in{grid-template-columns:minmax(0,1fr) 400px;gap:32px}
  .hero h1{font-size:52px}
  .conds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hl li,.hl-head{grid-template-columns:54px 132px minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr);gap:10px}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .today{max-width:560px}
  .beaches{grid-template-columns:minmax(0,1fr)}
  .map{position:relative;top:0;max-width:520px}
  .know{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acc,.faq{grid-template-columns:minmax(0,1fr)}
  .faq{gap:20px}
  .days{grid-template-columns:repeat(4,minmax(150px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-24px;margin-right:-24px;padding:4px 24px 12px;scroll-padding-inline:24px;scrollbar-width:none}
  .days::-webkit-scrollbar{display:none}
  .day{scroll-snap-align:start}
}
/* phone */
@media (max-width:640px){
  body{font-size:16px}
  .hdr{top:8px}
  .pill{height:42px}
  .pill .nav-b{padding:0 9px;font-size:14px}
  .pill .get{padding:0 10px;font-size:14px}
  .pill .get .lg{display:none}
  .hero{padding:84px 16px 0}
  .crumbs{margin-bottom:12px;font-size:12px}
  .hero h1{font-size:40px;line-height:1.06}
  .lede{margin-top:14px;font-size:17px;line-height:27px}
  .chips{gap:6px;margin-top:16px}
  .chip{height:28px;font-size:12px;padding:0 10px}
  .hero .ctas{margin-top:20px}
  .hero .ctas .btn{flex:1 1 auto}
  .hero-in{gap:28px}
  .today{padding:18px 16px 16px;border-radius:20px}
  .score .r{font-size:34px}
  .kr{font-size:26px}
  .verdict{font-size:20px;line-height:27px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-art{margin:36px -16px 0;height:auto;aspect-ratio:4/3}
  .hero-art img{object-position:62% 70%}
  .sec{padding:72px 16px 0}
  .sec h2{font-size:32px;line-height:1.15}
  .sec .intro{font-size:17px;line-height:28px}
  .days{margin-left:-16px;margin-right:-16px;padding:4px 16px 12px;scroll-padding-inline:16px;grid-template-columns:repeat(4,minmax(138px,1fr))}
  .panel-h{padding:12px 14px}
  .panel-h h3{font-size:21px;line-height:27px}
  .hl-head{display:none}
  .hl li{grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"h k sz" "h sw sw" "h wd td";gap:6px 10px;padding:12px 14px;font-size:14px;line-height:19px}
  .hl .hh{grid-area:h;align-self:start;padding-top:1px}
  .hl .kq{grid-area:k}
  .hl .sz{grid-area:sz;text-align:right}
  .hl .sw{grid-area:sw}
  .hl .wd{grid-area:wd}
  .hl .td{grid-area:td;justify-content:flex-end}
  .arr{width:16px;height:16px}
  .legend{padding:12px 14px}
  .tip p{font-size:16px;line-height:25px;padding:12px 14px}
  .tip img{width:40px;height:40px}
  .bl li{padding:18px 16px}
  .bl h3{font-size:21px;line-height:27px}
  .conds{grid-template-columns:minmax(0,1fr);gap:12px}
  .season{padding:18px 12px 14px}
  .chart{gap:4px;height:180px}
  .months{gap:4px;font-size:10px}
  .mo .pct{font-size:10px}
  .seas{grid-template-columns:minmax(0,1fr);gap:12px}
  .know{grid-template-columns:minmax(0,1fr);gap:12px}
  .know .wide{grid-column:auto}
  .know>div{padding:18px 16px}
  .acc .n b{font-size:36px}
  .qa summary{padding:8px 16px;font-size:17px}
  .qa .ans{padding:0 16px 16px}
  .cta{margin-top:72px;padding:0 16px}
  .cta-in{grid-template-columns:minmax(0,1fr);padding:28px 22px;gap:18px}
  .cta-in img{width:72px;height:72px;border-radius:18px}
  .cta h2{font-size:28px;line-height:34px}
  .ft{margin-top:80px}
  .ft-in{grid-template-columns:minmax(0,1fr);padding:44px 16px 32px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}