/* Sargassum Check: v2.4's look (docs/mockups/v2.4.html) for what it draws, v4's tokens for the rest (docs/design.md). No dark
   theme in this build. */
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-700.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-800.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(/fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:600;font-display:swap;src:url(/fonts/figtree-600.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:700;font-display:swap;src:url(/fonts/figtree-700.woff2) format("woff2")}

:root{
  --paper:#F7F4EE;--surface:#FFFFFF;--sunk:#EFEAE0;--line:#E4DDD0;--line-2:#D3CABA;
  --ink:#10262C;--ink-2:#3F5359;--ink-3:#56676C;
  --act:#0A5C63;--act-h:#08474D;--tint:#DDF0EE;--focus:#C2410C;
  --lt-i:#0C6446;--lt-t:#E4F4EC;--md-i:#83460A;--md-t:#FCEFDB;--hv-i:#922414;--hv-t:#FBE5DF;
  --lt-f:#22875E;--md-f:#C47A12;--hv-f:#B8402A;
  --r-s:10px;--r-m:16px;--r-l:22px;--r-cta:14px;
  --fd:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--fb:Figtree,ui-sans-serif,system-ui,sans-serif;
  --gutter:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font:400 .9375rem/1.45 var(--fb)}
h1,h2,h3,h4,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:.75rem 1rem;border-radius:var(--r-s);z-index:9}
.skip:focus{left:8px}
svg{flex:none}

/* Header (v2.4): the brand, where the page is, search (an icon on a phone, a field on a computer) and the language.
   The trail scrolls sideways, opens scrolled to its end and on a phone fades at its start when chips can hide there. */
.hd{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:8px;height:64px;padding:0 8px 0 var(--gutter);background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;min-width:44px;font:800 1.1875rem/1 var(--fd);letter-spacing:-.02em;white-space:nowrap;flex:none}
.brand svg{width:32px;height:32px}
.dv{width:1px;height:28px;background:var(--line);flex:none}
.trl{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);mask-image:linear-gradient(90deg,transparent,#000 24px)}
.trl::-webkit-scrollbar{display:none}
.trl:not(:has(.x)){-webkit-mask-image:none;mask-image:none}
.trl ol{display:flex;align-items:center;width:max-content;min-height:44px;margin-left:auto}
.trl li{display:flex;align-items:center}
.trl li+li::before{content:"›";color:#A3ADB0;font-weight:600}
.tc{display:inline-flex;align-items:center;height:44px;padding:0 10px;font:600 .90625rem/1 var(--fb);color:var(--ink-2);white-space:nowrap}
.tc.on{height:36px;padding:0 12px;border-radius:11px;background:var(--ink);color:#fff;font-weight:700}
.tc.on:has(.x){padding-right:0}
.x{display:grid;place-items:center;width:44px;height:44px}
.ib,.srch{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none}
.srch span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lang{font:700 .84375rem/1 var(--fb)}
/* The region control. Open, its summary's veil covers the page, so a tap anywhere closes it. */
.rg{position:relative;flex:none}
.rg summary{display:flex;align-items:center;justify-content:center;gap:2px;min-width:44px;height:44px;border-radius:12px;font:600 .90625rem/1 var(--fb);color:var(--ink-2);cursor:pointer}
.rg summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rg summary svg{width:16px;height:16px;flex:none}
.rg[open] summary::before{content:"";position:fixed;inset:0}
.rg ul{position:absolute;top:calc(100% + 6px);left:0;width:max-content;max-width:calc(100vw - 32px);max-height:calc(100dvh - 120px);overflow-y:auto;padding:6px;border-radius:14px;background:var(--surface);box-shadow:0 4px 20px rgba(16,38,44,.2)}
.rg a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font:600 .9375rem/1.2 var(--fb);color:var(--ink)}
.rg a[aria-current]{background:var(--ink);color:#fff;font-weight:700}
summary::-webkit-details-marker{display:none}
summary{list-style:none}
@media (max-width:1023px){.dv{display:none}.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (min-width:1024px){
  :root{--gutter:28px}
  .hd{gap:14px;padding:0 28px}
  .rg summary{padding:0 10px;gap:6px}
  .rg summary span{position:static;width:auto;height:auto;clip-path:none}
  .trl{flex:0 1 auto;-webkit-mask-image:none;mask-image:none}
  .trl ol{margin-left:0}
  .srch{display:flex;align-items:center;gap:10px;margin-left:auto;width:auto;flex:0 1 340px;padding:0 14px;border-radius:14px;background:#F1EDE5;color:var(--ink-3);font-size:.875rem;white-space:nowrap;overflow:hidden}
  .srch span{position:static;width:auto;height:auto;clip-path:none}
}

/* Buttons (v2.4): filled, tonal and outlined; chips: a white pill, its glyph on a tile (hollow for the usual level), the
   word in its level's colour; the large form heads a beach or hotel */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-cta);font:700 .875rem/1.1 var(--fb);cursor:pointer}
.btn.pri{min-height:48px;font-size:.9375rem;background:var(--act);color:#fff;box-shadow:0 4px 12px rgba(10,92,99,.28);width:100%}
.btn.pri:hover{background:var(--act-h)}
.btn.tonal{background:var(--tint);color:var(--act)}
.btn.sec{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px #D9D1C2}
.mch{display:flex;align-items:center;gap:8px;width:max-content;margin:14px auto;height:44px;padding:0 16px 0 20px;border:0;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.5px #D9D1C2;font:700 .875rem/1 var(--fb);color:var(--ink);cursor:pointer}
.s-clear,.s-light{--f:var(--lt-f);--x:var(--lt-i);--t:var(--lt-t)}
.s-mod{--f:var(--md-f);--x:var(--md-i);--t:var(--md-t)}
.s-heavy{--f:var(--hv-f);--x:var(--hv-i);--t:var(--hv-t)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 3px;border-radius:9px;background:var(--surface);box-shadow:0 0 0 1px rgba(16,38,44,.09),0 1px 3px rgba(16,38,44,.07);font:600 .78125rem/1 var(--fb);color:var(--ink-3);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.tl{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--f);color:#fff;flex:none}
.tl .g{width:12px;height:10px}
.u .tl{background:var(--surface);color:var(--f);box-shadow:inset 0 0 0 2px var(--f)}
.chip b,.ans b{font-weight:700}
.chip b{color:var(--x)}
.chip .i{margin-left:-2px}
.chip.hero{display:inline-grid;grid-template:"tl b b" auto "tl c t" auto/auto auto 1fr;align-items:center;gap:3px 0;height:auto;padding:0;background:none;box-shadow:none;font-size:.8125rem;white-space:normal;flex:0 1 auto}
.chip.hero .tl{grid-area:tl;width:44px;height:44px;border-radius:14px;margin-right:12px}
.chip.hero .tl .g{width:20px;height:17px}
.chip.hero b{grid-area:b;font:800 1.5625rem/1.05 var(--fd);letter-spacing:-.02em}
.chip.hero .t{grid-area:t}
.chip.hero .i{grid-area:c;margin:0 5px 0 0}
.cnt,.ans,.yr-c{color:var(--x);background:var(--t)}
.r-clear,.r-light{--rc:var(--lt-f)}.r-mod{--rc:var(--md-f)}.r-heavy{--rc:var(--hv-f)}
.mch small{font:600 .8125rem/1 var(--fb);color:var(--ink-3)}
.tag{font-size:.8125rem;font-weight:600;color:var(--ink-3);border:1.5px dashed var(--line-2);border-radius:99px;padding:.25rem .6rem}

/* Cards (v2.4) */
.card{background:var(--surface);border-radius:var(--r-m);padding:14px 16px;box-shadow:0 0 0 1px rgba(16,38,44,.05),0 2px 10px rgba(16,38,44,.04);margin-top:12px}
.card.fx{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fx svg{width:16px;height:16px}

/* Page */
.pg{padding:20px var(--gutter) 88px;max-width:1320px;margin:0 auto}
.verdict{font:800 clamp(1.75rem,1.3rem + 1.8vw,2.5rem)/1.05 var(--fd);letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.verdict.sm{font-size:clamp(1.625rem,1.3rem + 1.6vw,2.25rem);margin-bottom:4px}
.lead,.sub{color:var(--ink-2);font-size:.9375rem;margin-bottom:14px}
.cite{margin-top:8px;padding:14px 0 16px;border-top:1px solid var(--line);font-size:.875rem;color:var(--ink-2);max-width:60ch}
.split>div{min-width:0}
@media (min-width:1024px){.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:start}}

/* Rows (v2.4): white cards; a row's name, short description and, at its right, its status. A row and its pin share hover
   and selection. A beach's name takes two lines at most beside its chip (A4); a chip too long to leave it 68 px goes under
   it, without a gap, so the row stays within v2.4's card part. */
.rows{margin-bottom:24px}
.rows-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:22px 0 10px}
.rows-h h2,.sh h2{font:800 1.25rem/1.15 var(--fd);letter-spacing:-.02em}
.rows-h span{font-size:.8125rem;color:var(--ink-2)}
.rows ul{background:var(--surface);border-radius:var(--r-m);box-shadow:0 0 0 1px rgba(16,38,44,.05),0 2px 10px rgba(16,38,44,.04);overflow:hidden}
.rows li+li{border-top:1px solid #F0EBE2}
.zr{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-height:52px;padding:7px 12px 7px 14px}
.zr.sel{background:#F2F8F7;box-shadow:inset 3px 0 0 var(--act)}
.zr>.zn{flex:1 1 68px}
.zr>.chip{margin-left:auto}
.sun{width:15px;height:15px;margin-left:5px;vertical-align:-2px;color:var(--md-f)}
.sl{display:flex;align-items:center;gap:8px;margin:16px 0 6px;font:700 .75rem/1 var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.sl .tl{width:18px;height:18px;border-radius:6px}
.sl span{margin-left:auto;letter-spacing:0}
.sh{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.hn{font:700 .78125rem/1 var(--fb);color:var(--ink-3);background:var(--sunk);border-radius:999px;padding:5px 9px}
.zr.coming{color:var(--ink-3)}
.zn{display:flex;flex-direction:column;min-width:0}
.zt{font:700 .90625rem/18px var(--fb)}
.zr:not(.pr) .zt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.nt{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--lt-i);font-weight:700}
.zn small{font:500 .78125rem/16px var(--fb);color:var(--ink-3)}
/* A place's row (v2.4's A boards): its name and description at the left; at its right its levels by glyph and word, the
   usual ones hollow, and under them its webcam readings */
.zr.pr{display:grid;grid-template-columns:minmax(0,1fr) fit-content(58%);align-content:center;gap:1px 12px;min-height:44px;padding:5px 12px 5px 14px}
.pr .zn{grid-row:span 2}
.pr .zt,.zn small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zl{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1px 10px}
.zl>span{display:inline-flex;align-items:center;gap:4px;height:16px;font:700 .78125rem/1 var(--fb);color:var(--x);white-space:nowrap}
.zl .tl{width:16px;height:16px;border-radius:5px}
.zl .tl .g{width:10px;height:8px}
.cams{grid-column:2;justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0 8px;font:600 .71875rem/14px var(--fb);color:var(--ink-2)}
.cams.nm{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cams>svg{margin-right:-5px}
.cams>span:not(.vh){display:inline-flex;align-items:center;gap:3px;color:var(--x)}
.cams>svg{width:auto;height:12px}
.cams .tl{width:14px;height:14px;border-radius:4px}
.cams .tl .g{width:9px;height:7px}
@media (max-width:1023px){
  .zr.pr{grid-template-columns:minmax(0,1fr) fit-content(60%);padding-block:4px}
  .pr .zn small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
  /* With three levels or more, the webcam line takes the row's width under them, still at its right, on one line */
  .pr:has(.zl>:nth-child(3)) .zn{grid-row:auto}
  .pr:has(.zl>:nth-child(3)) .cams{grid-column:1/-1}
  /* Four levels, all with counts of two digits (35 beaches read), take a phone's whole width in Spanish, and how much of it
     hangs on the device's text rendering: the line never wraps. Its gaps and type give way first (unhinted, as on a phone),
     then its words, each count and its glyph whole (room for two digits and the ellipsis). */
  .cams:has(>:nth-child(7)){flex-wrap:nowrap;min-width:0;max-width:100%;gap:0 3px;font-size:.6875rem;text-rendering:geometricPrecision;white-space:nowrap}
  .cams:has(>:nth-child(7))>svg,.cams:has(>:nth-child(7))>b{flex:none}
  .cams:has(>:nth-child(7))>svg{margin-right:-2px}
  .cams:has(>:nth-child(7))>span:not(.vh){display:block;min-width:calc(16px + 4ch);overflow:hidden;text-overflow:ellipsis}
  .cams:has(>:nth-child(7)) .tl{display:inline-grid;margin-right:2px;vertical-align:top}
  /* Two usual levels after three of today's would wrap to a fourth line: the row keeps today's, its place's head has all */
  .zl:has(>.u+.u):has(>:nth-child(5))>.u{display:none}
}

/* A list's head (v2.4): where most of its beaches are moderate or heavy, its clear and light ones named first; then its
   beaches by level in one strip, clear first, each with how many a webcam read, the usual levels hollow with their month */
.good{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;font:700 .96875rem/1.3 var(--fb);color:var(--x)}
.good a{text-decoration:underline;text-underline-offset:3px}
.good.bad{margin-top:-8px;font:600 .84375rem/1.3 var(--fb)}
.pk{display:flex;align-items:center;gap:8px;margin:-8px 0 10px;font:600 .8125rem/1.3 var(--fb);color:var(--ink-2)}
.lvs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);margin:0 0 18px;background:var(--surface);border-radius:var(--r-m);box-shadow:0 0 0 1px rgba(16,38,44,.06),0 2px 10px rgba(16,38,44,.05);overflow:hidden}
/* A cell: its glyph's track as wide as the glyph, so the count stays beside it; the word and the line under them span
   both tracks, and a cell is never narrower than its longest word */
.lvs li{display:grid;grid-template-columns:20px auto;align-items:center;align-content:start;gap:2px 7px;padding:12px 10px 9px 12px;border-left:1px solid #F0EBE2;color:var(--x)}
.lvs li:first-child{border-left:0}
.lvs li:not(.u)~.u{background:#FBFAF7}
.lvs b{font:800 1.375rem/1 var(--fd);letter-spacing:-.02em;color:var(--ink)}
.lvs li>span{grid-column:1/-1;font:600 .75rem/1.15 var(--fb);white-space:nowrap;hyphens:none}
.lvs small{grid-column:1/-1;display:flex;align-items:center;gap:3px;height:14px;font:700 .71875rem/1 var(--fb);color:var(--ink-3)}
.lvs small .i{width:13px;height:13px}
.lvs .z b,.lvs .z>span{color:#8A969B}
.lvs .z .tl{opacity:.45}
@media (max-width:1023px){
  .lvs li{grid-template-columns:18px auto;padding:11px 6px 8px 8px;gap:2px 5px}.lvs b{font-size:1.1875rem}.lvs .tl{width:18px;height:18px}.lvs li>span{font-size:.6875rem;line-height:1.1;white-space:normal}
}
/* Six levels (four of today's and the two usual ones of May to August) share the row: less padding, and the usual word
   breaks at its hyphen ("Habitual-mente") */
.lvs:has(>:nth-child(6)) li{padding:11px 4px 8px}
.lvs:has(>:nth-child(6)) li>span{white-space:normal;hyphens:manual}

/* The time row (v2.4): the Today card, then a chip per month from next month to 12 months ahead, each with its year and
   its beaches' usual levels, light solid, moderate and heavy hatched; what the page shows filled ink. On a phone the
   months scroll under Today, which stays in view. */
.tw{display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tw::-webkit-scrollbar{display:none}
.td,.mc{display:flex;flex-direction:column;justify-content:center;gap:2px;height:52px;border:0;border-radius:var(--r-cta);background:var(--surface);box-shadow:inset 0 0 0 1px rgba(16,38,44,.08);font:600 .75rem/1.1 var(--fb);color:var(--ink-3);cursor:pointer}
.td{position:sticky;left:0;z-index:1;flex:none;min-width:116px;padding:0 14px;box-shadow:inset 0 0 0 1px rgba(16,38,44,.08),10px 0 12px -8px rgba(16,38,44,.25)}
.td b{font:800 1rem/1 var(--fd);color:var(--act)}
.mcs{display:flex;gap:6px;flex:1 0 auto}
.mc{position:relative;flex:1 0 54px;align-items:center;padding:0;font-size:.65625rem;line-height:1}
.mc b{font:700 .875rem/1 var(--fb);color:var(--ink)}
.td.on,.mc.on{background:var(--ink);color:#B9C6C9;box-shadow:0 4px 14px rgba(16,38,44,.22)}
.td.on b,.mc.on b{color:#fff}
.mb{display:flex;width:30px;height:5px;margin-top:3px;border-radius:3px;overflow:hidden;background:#ECEEEF}
.mb i{background:var(--rc)}
.mb .r-mod{background:repeating-linear-gradient(135deg,var(--md-f) 0 2px,#E5A24A 2px 4px)}
.mb .r-heavy{background:repeating-linear-gradient(135deg,var(--hv-f) 0 1.5px,#7E2516 1.5px 3px)}
.mb.one{width:auto;height:auto;margin-top:2px;background:none;overflow:visible}
.mb.one .tl{width:18px;height:16px;border-radius:5px}
.mb.one .tl .g{width:10px;height:8px}
.bh+.tw{margin-top:12px}
.hint{font-size:.8125rem;color:var(--ink-2);margin-top:8px;text-align:right}
@media (max-width:1023px){.tw{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}}
@media (min-width:1024px){.td{min-width:132px;box-shadow:inset 0 0 0 1px rgba(16,38,44,.08)}.mc{flex:1 1 0;min-width:50px}}

/* A list page (v2.4's A and E boards): its title, strip and rows, on a computer beside the map, which stays in view under
   the time row while the list scrolls; on a phone the Map pill opens the map instead */
.lh{margin:0 0 12px;font:800 1.5625rem/1.08 var(--fd);letter-spacing:-.025em}
.lh+.sub{margin:-7px 0 12px;font:600 .8125rem/1.2 var(--fb);color:var(--ink-3)}
.lst .rows{margin:0}
.lst .rows-h{margin-top:24px}
@media (max-width:1023px){.pg>.mapc{display:none}}
@media (min-width:1024px){
  .lh{margin-top:18px;font-size:1.6875rem}
  .pg:has(>.mapc){display:grid;grid-template-columns:clamp(400px,39vw,560px) minmax(0,1fr);grid-template-rows:auto auto 1fr;max-width:none;padding:0}
  .pg:has(>.mapc)>.tw{grid-column:1/-1;position:sticky;top:64px;z-index:5;margin:0;padding:12px 28px;background:var(--paper)}
  .lst{padding:0 24px 28px 28px}
  .pg>.mapc{grid-area:2/2/4;position:sticky;top:140px;height:calc(100dvh - 140px)}
  .pg:has(>.mapc)>.cite{margin:0 24px 28px 28px}
  .mapc~.fpill{display:none}
}

/* Beach */
.hero-chip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 18px;font-size:.875rem;color:var(--ink-2)}
.spl{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 18px}
.spl span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 4px;border-radius:9px;background:var(--t);color:var(--x);font:600 .78125rem/1 var(--fb)}
.spl em{font-style:normal;color:var(--ink-2)}
.facts{display:grid;grid-template-columns:fit-content(40%) 1fr;gap:6px 14px;margin-top:20px;font-size:.875rem}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0;font-weight:600}
.fx .facts{margin:0}
.facts a{color:var(--act);text-decoration:underline}
/* v2.4's beach boards: the photo (or the map) first, edge to edge, the name on it (or under it) and its credit; the
   status, then the webcams folded into one row; the hotels, and what follows them in a column on their right on a
   computer, under them on a phone */
.bh{position:relative;margin:-20px calc(50% - 50vw) 0}
.bh.ph>img,.bmap svg{display:block;width:100%;height:220px;object-fit:cover;background:#CFE6E8}
.bh.ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,rgba(16,38,44,0),rgba(16,38,44,.62));pointer-events:none}
.bt{padding-top:14px}
.ph .bt{position:absolute;left:var(--gutter);right:var(--gutter);bottom:12px;z-index:1;padding-top:0;color:#fff}
.ph .verdict{font-size:clamp(1.9375rem,1.3rem + 2.3vw,2.875rem);text-shadow:0 2px 18px rgba(0,0,0,.28)}
.ph .sub{margin:0;color:#fff;font-weight:600}
.cap{position:absolute;right:10px;top:10px;z-index:1;padding:6px 9px;border-radius:9px;background:rgba(16,38,44,.5);color:#fff;font:600 .71875rem/1 var(--fb)}
.cap a{text-decoration:underline;text-underline-offset:2px}
.bmap{position:relative;overflow:hidden}
.bmap .cap{top:auto;right:0;bottom:0;padding:3px 6px;border-radius:6px 0 0 0;background:rgba(255,255,255,.85);color:var(--ink-2);font-weight:400}
.pn .f{fill:var(--f);stroke:#fff;stroke-width:2}
.pn.u .f{fill:#fff;stroke:var(--f);stroke-width:2.5}
.pn .g{color:#fff}
.pn.u .g{color:var(--f)}
.bmap text{font-family:var(--fb);font-weight:700;text-anchor:middle}
.pnl{fill:var(--ink);stroke:#fff;stroke-width:4px;stroke-linejoin:round;paint-order:stroke}
.pnl.r{text-anchor:start}
.pnl.l{text-anchor:end}
.bmap .n{fill:#fff}
.sq svg{width:16px;height:16px}
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px}
.band>div{align-self:flex-start}
.wc{flex:1 1 100%;background:var(--surface);border-radius:var(--r-m);box-shadow:0 0 0 1px rgba(16,38,44,.06),0 2px 10px rgba(16,38,44,.04)}
.wc summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 12px;cursor:pointer}
.wc summary>.i{width:20px;height:20px;color:var(--ink-2)}
.wc summary>b{white-space:nowrap}
.rd{display:flex;gap:10px;font:700 .78125rem/1 var(--fb);white-space:nowrap}
.rd span,.wlg span{display:inline-flex;align-items:center;gap:4px}
.rd span{color:var(--x)}
.rd .tl{width:16px;height:16px;border-radius:5px}
.chv{display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border-radius:9px;background:#F1EDE5;transform:rotate(-90deg);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.chv svg{width:16px;height:16px}
.wc[open] .chv{transform:rotate(90deg)}
.wcin{padding:0 12px 10px;animation:wcin .32s cubic-bezier(.2,.7,.2,1)}
@keyframes wcin{from{opacity:0;transform:translateY(-6px)}}
.cr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 10px;padding:4px 0;border-top:1px solid #F0EBE2}
.cn{display:flex;align-items:center;gap:7px;min-height:44px;font-weight:700}
.crb{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 10px;width:100%}
.st{display:flex;gap:3px}
.st span{display:flex;flex-direction:column;align-items:center;gap:2px}
.st i{display:grid;place-items:center;width:22px;height:15px;border-radius:4px;background:var(--f);color:#fff}
.st i:not([class]),.nr{background:var(--surface);box-shadow:inset 0 0 0 1.5px #D5CCBC}
.st .g{width:9px;height:8px}
.st b{font:600 .625rem/1 var(--fb);color:var(--ink-3)}
.lk{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--act)}
.wlg{display:flex;flex-wrap:wrap;gap:4px 8px;padding-top:6px;font:600 .71875rem/1 var(--fb);color:var(--ink-3)}
.wlg .tl{width:14px;height:14px;border-radius:4px}
.wlg .tl .g{width:8px;height:7px}
.nr{display:inline-block;width:14px;height:10px;border-radius:3px}
.side{margin-top:24px}
.side .bmap{margin-bottom:12px;border-radius:var(--r-m)}
.side .bmap svg{height:auto;aspect-ratio:420/460}
.wb~.side .bmap svg{aspect-ratio:520/300}
.side .card{margin:0}
/* Past the hero on a phone, the bar with the name, the chip and the Map pill slides in (v2.4's C2-2) */
.stick{position:fixed;left:0;right:0;top:0;z-index:7;display:flex;align-items:center;gap:8px;height:60px;padding:0 10px 0 var(--gutter);background:var(--surface);box-shadow:0 1px 0 var(--line),0 6px 18px rgba(16,38,44,.1);transform:translateY(-102%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.stick.past{transform:none}
.sbn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:0}
.sbn>b{max-width:100%;font:800 .96875rem/1.1 var(--fd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stick .fpill{position:static;transform:none;min-height:44px;padding:0 15px;font-size:.875rem;flex:none}
@media (min-width:1024px){
  .stick{display:none}
  .pg>.bt{grid-area:2/1}
  .pg:has(>.bt)>.band{grid-area:2/2;justify-self:end;margin-top:14px}
  .pg:has(>.bt)>.tw{grid-row:3}
  .bh.ph>img{height:300px}
  .bmap svg{height:280px}
  .wc{flex:0 1 520px}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:0 32px;align-items:start}
  .cols>*{grid-column:1/-1}
  .cols>.hotels{grid-column:1;max-width:none}
  .cols>.side{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.chv,.stick{transition:none}.wcin{animation:none}}

/* A webcam page (v2.4's C4 boards): what it reads, the beach it reads, the hotels there; on a computer the beach, its map
   and the last 7 days in a column on the right */
.wm .band{justify-content:space-between}
.wm .hero-chip{margin:0 0 4px}
.wb .rows{margin:0}
.wb .sub{margin:8px 0 0;font-size:.875rem}
.wk7 h2{display:flex;align-items:baseline;gap:12px;font:800 1.0625rem/1.2 var(--fd)}
.wk7 h2 small{margin-left:auto;font:600 .78125rem/1 var(--fb);color:var(--ink-3)}
.wr{display:grid;grid-template-columns:76px 1fr 1fr;gap:8px;align-items:center;padding:6px 0;border-top:1px solid #F0EBE2;font-size:.8125rem}
.wr>b{font-weight:600;color:var(--ink-2)}
.wr .chip{display:flex;width:auto;min-width:0}
.wr.wh{padding:8px 0 4px;border:0;font:700 .71875rem/1 var(--fb);color:var(--ink-3)}
.nor{display:block;font:600 .78125rem/1 var(--fb);color:#8A969B}
.nor::first-letter{text-transform:uppercase}
.side>.sh:first-child{margin-top:0}
@media (min-width:1024px){
  .cols:has(>.wb){grid-template-columns:minmax(0,1fr) 520px;grid-template-rows:auto auto 1fr}
  .cols>.wm{grid-area:1/1}
  .cols>.wb{grid-area:1/2/3}
  .cols:has(>.wb)>.hotels{grid-area:2/1/4}
  .cols:has(>.wb)>.side{grid-area:3/2;margin-top:12px}
  .cols:has(>.wb) .hcs{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Search */
.find{margin-bottom:20px}
.sfield{display:flex;align-items:center;gap:.6rem;min-height:56px;padding:0 1rem;border:2px solid var(--ink);border-radius:var(--r-m);background:var(--surface)}
.sfield input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 1.0625rem var(--fb);color:var(--ink);min-height:48px}
.none{color:var(--ink-2);margin-bottom:16px}

/* Trust pages */
.doc{max-width:720px;margin:0 auto}
.doc h1{font:800 clamp(1.75rem,1.3rem + 1.8vw,2.5rem)/1.05 var(--fd);letter-spacing:-.02em;margin-bottom:10px}
.doc h2{font:700 1.25rem/1.25 var(--fd);margin:28px 0 8px}
.doc h3,.doc h4{font:700 1.0625rem/1.3 var(--fb);margin:20px 0 6px}
.doc p,.doc ul,.doc ol{margin:0 0 12px}
.doc ul{list-style:disc;padding-left:1.25rem}
.doc ol{list-style:decimal;padding-left:1.25rem}
.doc li{margin-bottom:4px}
.doc a{color:var(--act);text-decoration:underline;overflow-wrap:anywhere}
.doc hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.doc code{font-size:.875em;background:var(--sunk);padding:0 .25em;border-radius:4px}
.tbl{overflow-x:auto;margin-bottom:12px}
.tbl table{border-collapse:collapse;font-size:.875rem;min-width:100%}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:8px;border-bottom:1px solid var(--line)}
.ver{font-size:.8125rem;color:var(--ink-3);margin-top:24px}
/* The embed maker (/embed): a place picker, the card, its line of HTML */
.emb{display:grid;gap:12px;margin-top:20px}
.emb label{display:grid;gap:4px;font-weight:600;font-size:.875rem;color:var(--ink-2)}
.emb select,.emb-code{width:100%;min-height:48px;padding:.6rem .8rem;border:1.5px solid var(--line-2);border-radius:var(--r-s);font:600 1rem var(--fb);color:var(--ink);background:var(--surface)}
.emb-code{display:block;font:400 .875rem/1.4 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
.doc a img{display:block;max-width:100%;height:auto}

/* Footer */
.ft{background:var(--sunk);padding:12px var(--gutter) 16px;font-size:.875rem}
.ft nav{display:flex;flex-wrap:wrap;gap:0 14px}
.ft a{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center;color:var(--ink-2)}
.ft p{color:var(--ink-3);margin-top:8px}
.ft p a{min-height:44px}
.rule{font-size:.8125rem;color:var(--ink-3);margin:0 0 12px}
/* A hotel card (v2.4): its own photo, where it has one, at its left on a phone and on top on a computer; its name (two
   lines' room on a computer, so a row's relations align) and its relation to the sand; then "Check prices on" and the
   partners side by side, across the card so both fit at 320 px. A list shows v2.4's first 8 on a phone and 12 on a
   computer, at most three a row, then the Show more chip. */
.hcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px;align-items:start}
.hc{display:flex;flex-wrap:wrap;background:var(--surface);border-radius:18px;box-shadow:0 0 0 1px rgba(16,38,44,.06),0 6px 20px rgba(16,38,44,.07);overflow:hidden}
.hp{position:relative;width:118px;min-height:88px;background:var(--sunk)}
.hp>svg{position:absolute;inset:0;margin:auto;color:var(--ink-2)}
.hp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hp .cap{top:auto;right:6px;bottom:6px;max-width:calc(100% - 12px);padding:3px 5px;border-radius:6px;font-size:.625rem;line-height:1.2}
.hc-b{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;padding:13px 12px 0}
.hc h3{font:800 1.03125rem/1.15 var(--fd);letter-spacing:-.015em}
.hc h3 a{display:inline-block;padding:13px 0;margin:-13px 0;color:inherit}
.pl{display:flex;align-items:center;gap:6px;font:600 .8125rem/1.2 var(--fb);color:var(--ink-2)}
.pl svg{width:15px;height:15px;color:var(--act)}
.bk2,.hc>.qlink{flex-basis:100%;padding:12px}
.hc>.qlink{padding-top:0}
@media (min-width:1024px){
  .hcs{grid-template-columns:repeat(auto-fill,minmax(max(260px,(100% - 28px)/3),1fr));gap:14px;align-items:stretch}
  .hc{flex-flow:column}
  .hp{width:auto;height:150px}
  .hc-b{padding:13px 14px 0}
  .hc h3{min-height:2.3em}
  .bk2{flex-basis:auto;padding:12px 14px 14px}
  .hc>.qlink{flex-basis:auto;padding:0 14px}
}
@media (max-width:1023px){.hcs:not(.all)>:nth-child(n+9),.mch .pc{display:none}}
@media (min-width:1024px){.hcs:not(.all)>:nth-child(n+13),.mch .ph,.mch.ph{display:none}}
.bk2 small{display:block;font:600 .71875rem/1 var(--fb);color:var(--ink-3);margin:0 0 6px}
.bb{display:flex;flex-wrap:wrap;gap:8px}
.bb .btn{flex:1 1 auto;max-width:100%;padding:0 10px;white-space:nowrap}
.qlink{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;color:var(--act);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.s22{width:100%}
.s22map{display:block;width:100%;height:420px;border:0;border-radius:var(--r-m)}
.disc{font-size:.8125rem;color:var(--ink-3);margin:8px 0}
.disc a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* A hotel page (v2.4's D boards): its own photos first, edge to edge (on a phone one at a time, dots under them); the
   answer; the booking, a card beside the page on a computer and a bar fixed to the bottom on a phone. The photos come
   after the answer in the page, so its first block is the heading. */
.pg:has(>.hm){display:flex;flex-direction:column}
.hg{order:-1;margin-bottom:14px}
.hgs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hgs figure{position:relative;flex:0 0 100%;scroll-snap-align:start}
.hgs img{display:block;width:100%;height:240px;object-fit:cover;background:var(--sunk)}
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.dots i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.6)}
.dots i.on{width:18px;background:#fff}
.hm>.pl{color:var(--act);margin-bottom:8px}
.hm .wc{flex-basis:100%}
.hm .tw{margin-top:18px}
.hm>.lk svg{width:16px;height:16px;transform:rotate(180deg)}
.hs h2{font:800 1.25rem/1.15 var(--fd);letter-spacing:-.015em}
.bkh{display:flex;align-items:center;gap:14px}
.bkh img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.bkh .pl{margin-top:4px}
.bkf .disc{margin:0;font-size:.75rem}
.shut{margin:10px 0 0;font-weight:600;font-size:.875rem}
.shut a{text-decoration:underline;text-underline-offset:2px}
.bkf .qlink{color:var(--ink-2);text-decoration:none}
@media (max-width:1023px){
  .hsc{display:contents}
  .bkm{display:none}
  .hs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 10px;padding:10px var(--gutter) calc(4px + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -1px 0 var(--line),0 -8px 24px rgba(16,38,44,.1)}
  .bkh>div,.hs>.chip{display:none}
  .bkh:not(:has(img)){display:none}
  .hs .bk2{flex:1;min-width:0;padding:0}
  .hs .bb{flex-wrap:nowrap}
  .bkf{flex-basis:100%;display:flex;flex-direction:row-reverse;align-items:center;gap:12px}
  .bkf .disc{flex:1}
  body:has(.hs){padding-bottom:150px}
  .shut{flex-basis:100%;order:-1;margin:0}
  body:has(.shut){padding-bottom:195px}
}
@media (max-width:359px){.bkh{display:none}}
@media (min-width:1024px){
  .pg:has(>.hm){display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto auto 1fr;grid-template-areas:"g g" "m s" "c s";gap:0 40px;align-items:start}
  .hg{grid-area:g;margin-bottom:22px}
  .hgs{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,167px);gap:6px;overflow:visible}
  .hgs img{height:100%}
  .hgs figure:first-child,.hgs figure:first-child:nth-last-child(2)+figure{grid-row:span 2}
  .hgs figure:only-child{grid-column:span 2}
  .hgs figure:nth-child(n+4),.dots,.hm>.pl{display:none}
  .hm{grid-area:m}
  .hm~.cite{grid-area:c}
  .hsc{grid-area:s;position:sticky;top:84px;display:grid;gap:12px}
  .bkm .bmap{border-radius:var(--r-l)}
  .bkm svg{height:auto;aspect-ratio:400/240}
  .hs{padding:18px;background:var(--surface);border-radius:var(--r-l);box-shadow:0 0 0 1px rgba(16,38,44,.06),0 10px 30px rgba(16,38,44,.08)}
  .hs>.chip{margin-top:14px}
  .hs .bk2{padding:12px 0 4px}
  .hs .bb{flex-direction:column}
}

/* Today: the newest reading's time, the verdict, the counts */
.upd{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.upd i{width:9px;height:9px;border-radius:50%;background:var(--lt-f)}
.today{margin-bottom:24px}
.sbar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;margin:4px 0 10px}
.sbar i{background:var(--rc)}
.cnts{display:flex;flex-wrap:wrap;gap:8px}
.cnt,.ans{display:inline-flex;align-items:center;gap:.35rem;height:28px;padding:0 .65rem;border-radius:99px;font:600 .8125rem/1 var(--fb);white-space:nowrap}
/* A report: its beaches by level and against the usual, then a row per week */
.rpt>.cnts{margin-bottom:8px}.rpt>.rows{margin-top:16px}
.wk{padding:10px 0 12px;border-bottom:1px solid var(--line)}

/* When to go: the season hub's basin map (the usual belt, the regions as bubbles), its calendar, a row per region;
   the all-inclusive list */
.smw{container:smap/inline-size;margin:0 -16px 8px}
.smap{position:relative;aspect-ratio:1005/680;background:#CFE6E8;overflow:hidden;counter-reset:pin}
.smap>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.smap .land{fill:#F3EEE3;stroke:#55808A;stroke-width:1;vector-effect:non-scaling-stroke}
.smap .cl{fill:none;stroke:#1F5F86;stroke-width:1;opacity:.16;vector-effect:non-scaling-stroke}
.belt>g{transform-box:fill-box;transform-origin:center;transition:opacity .3s,transform .3s}
.belt .wr{fill:none;stroke:#9A6E14;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sea-t{position:absolute;font:italic 500 .75rem/1 var(--fb);color:#55808A;white-space:nowrap;transform:translate(0,-50%);pointer-events:none}
/* A label sits where src/place.ts put it for this range of map widths (five ranges, contiguous, the last from 900 px): --x/--y
   offset it from its point, --l px of leader at --r degrees join them when it stands away, --w is its width. Where the labels
   cannot all fit across a range (.p0 to .p4 on .smw) the regions are numbered points (.spt, for pointers: the list carries the
   links) with a list under the map; where not even those fit (.n0 to .n4) the list alone. */
.hl,.spt{position:absolute;z-index:2;white-space:nowrap;--x:var(--x0);--y:var(--y0);--l:var(--l0);--r:var(--r0);transform:translate(calc(var(--x)*1px),calc(var(--y)*1px))}
@container smap (560px <= width < 680px){.hl,.spt{--x:var(--x1);--y:var(--y1);--l:var(--l1);--r:var(--r1)}}
@container smap (680px <= width < 760px){.hl,.spt{--x:var(--x2);--y:var(--y2);--l:var(--l2);--r:var(--r2)}}
@container smap (760px <= width < 900px){.hl,.spt{--x:var(--x3);--y:var(--y3);--l:var(--l3);--r:var(--r3)}}
@container smap (width >= 900px){.hl,.spt{--x:var(--x4);--y:var(--y4);--l:var(--l4);--r:var(--r4)}}
.hl::before,.spt::before{content:"";position:absolute;left:calc(var(--x)*-1px - 3px);top:calc(var(--y)*-1px - 3px);width:calc(var(--l)*1px + 3px);height:6px;transform-origin:3px 3px;transform:rotate(calc(var(--r)*1deg));opacity:min(1,var(--l));pointer-events:none;background:radial-gradient(circle at 3px 3px,#10262C 3px,transparent 3.5px),linear-gradient(rgba(16,38,44,.7),rgba(16,38,44,.7)) 3px 2px/100% 2px no-repeat}
.hl{box-sizing:border-box;width:calc(var(--w)*1px)}
.hl.soon{display:inline-flex;align-items:center;gap:.3rem;height:24px;padding:0 .5rem;border:1px dashed #8A9A9F;border-radius:99px;background:rgba(255,255,255,.8);font:600 .75rem/1 var(--fb);color:var(--ink-2)}
.hl.live{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:8px 10px;border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(16,38,44,.18);color:var(--ink)}
.hl.live>b{font:700 .8125rem/1.1 var(--fb)}
.hl.live::after{content:"";position:absolute;left:38px;bottom:-5px;width:11px;height:11px;background:#fff;transform:rotate(45deg);box-shadow:3px 3px 4px rgba(16,38,44,.08);opacity:calc(1 - min(1,var(--l)))}
/* A numbered point: a 44 px box (the tap target) holding a 28 px disc, its leader ending at the disc. */
.spt{display:none;box-sizing:border-box;width:44px;height:44px;counter-increment:pin}
.spt::before{width:calc(var(--l)*1px + 11px)}
.spt::after{content:counter(pin);position:absolute;left:8px;top:8px;width:28px;height:28px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(16,38,44,.25);font:700 .8125rem/1 var(--fb);color:var(--ink)}
.spt.soon::after{border:1.5px dashed #8A9A9F;box-shadow:none;background:rgba(255,255,255,.85);color:var(--ink-2)}
.key{display:none;counter-reset:pin;list-style:none;margin:0;padding:4px 16px 0}
.key li{counter-increment:pin}
.key li>*{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--ink)}
.key li>*::before{content:counter(pin);display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);font:700 .75rem/1 var(--fb)}
.key b{flex:1 1 8rem;min-width:0;overflow-wrap:anywhere}
.key .cnt{margin-left:auto}
@container smap (width < 560px){.p0 .hl,.n0 .hl{display:none}.p0 .spt,.p0 .key,.n0 .key{display:block}}
@container smap (560px <= width < 680px){.p1 .hl,.n1 .hl{display:none}.p1 .spt,.p1 .key,.n1 .key{display:block}}
@container smap (680px <= width < 760px){.p2 .hl,.n2 .hl{display:none}.p2 .spt,.p2 .key,.n2 .key{display:block}}
@container smap (760px <= width < 900px){.p3 .hl,.n3 .hl{display:none}.p3 .spt,.p3 .key,.n3 .key{display:block}}
@container smap (width >= 900px){.p4 .hl,.n4 .hl{display:none}.p4 .spt,.p4 .key,.n4 .key{display:block}}
.mcap{position:absolute;left:16px;bottom:10px;display:flex;align-items:center;gap:.35rem;margin:0;font-size:.75rem;color:var(--ink-2);background:rgba(255,255,255,.85);border-radius:99px;padding:.3rem .6rem;z-index:2}
.mcap b{font-weight:700;color:var(--ink)}
.mcap .sg{width:16px;height:12px;border-radius:3px;background:radial-gradient(#8A6A12,#A3832A 55%,transparent 80%);opacity:.9}
.yrs{margin-bottom:24px}
.yr-r{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n b" "d d" "c c";gap:4px 10px;align-items:center;padding:10px 0 12px;border-bottom:1px solid var(--line)}
.yr-r b{grid-area:n;font-weight:600}
.yr-r small{grid-area:d;font-size:.8125rem;color:var(--ink-3)}
.yr-r .cnt{grid-area:b}
.yr{grid-area:c;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;text-align:center}
.yr-c{display:grid;place-items:center;height:30px;border-radius:7px}
.yr-c.on{box-shadow:inset 0 0 0 2px var(--ink)}
.yr-h{padding:0;border:0;font:600 .75rem/1 var(--fb);color:var(--ink-3)}
.yr-h .on{color:var(--ink);font-weight:700}
.lead a{text-decoration:underline;text-underline-offset:3px}
.hc-s{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
@media (min-width:1024px){.split.hub{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.smw{margin:0 0 8px}.smap{border-radius:22px}.yrs{max-width:720px}}

/* The Map and List pills: 24 px above the screen bottom on a list page, 16 px above the sheet on the map */
.fpill{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.25rem;border-radius:99px;background:var(--ink);color:#fff;font:700 1rem/1 var(--fb);box-shadow:0 8px 24px rgba(16,38,44,.28)}

/* The map (v2.4): beside a list on a computer; /map is one screen, on a phone a full-screen map under a sheet, on a computer
   a 420 px list column beside it */
[hidden]{display:none!important}
body.app{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.app .pg{flex:1;min-height:0;width:100%;max-width:none;padding:0}
.mapp{position:relative;height:100%}
.mapc{position:absolute;inset:0;isolation:isolate;font:inherit}
#map{background:#CFE6E8}
#map .leaflet-tile-pane{filter:saturate(.45) brightness(1.03)}
.msheet{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px var(--gutter) calc(14px + env(safe-area-inset-bottom));background:var(--surface);border-radius:24px 24px 0 0;box-shadow:0 -6px 24px rgba(16,38,44,.18)}
.msheet::before{content:"";position:absolute;top:10px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:#D5CCBC}
.msheet .tw{margin-bottom:8px}
.mscope{display:flex;justify-content:space-between;gap:8px;margin:4px 0 8px;font:700 .875rem/1.2 var(--fb);color:var(--ink-2)}
.msum .lvs{margin:0}
.msum .hint{margin-top:12px;text-align:left}
.msum .hint::first-letter{text-transform:uppercase}
.msheet.tap .tw,.msheet.tap .mscope,.msheet.tap .msum{display:none}
.mc-h{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:12px}
.mc-h>div{flex:1}
.mc-h h2{font:800 1.25rem/1.15 var(--fd)}
.mc-h p{font-size:.875rem;color:var(--ink-2)}
.mrows{display:none}
/* What floats over it: Sea conditions at its top left with its key, the zoom and My location, what the marks mean */
.mback,.mlist,.mloc,.seac,.mleg,.mlg,.medge{position:absolute;z-index:1000}
#map .mback{top:16px;left:16px;color:var(--ink);background:var(--surface);border-radius:14px;box-shadow:0 2px 8px rgba(16,38,44,.2)}
#map .mlist{color:#fff;left:auto;right:16px;top:16px;bottom:auto;transform:none;min-height:44px;padding:0 18px;font-size:.875rem}
.seac{left:72px;top:16px;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px;background:var(--surface);box-shadow:0 2px 8px rgba(16,38,44,.2);font:700 .84375rem/1 var(--fb);cursor:pointer}
.seac small{font-weight:600;color:var(--ink-3)}
.seac input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}
.seac:has(:disabled){color:#8A969B;cursor:default}
.sw{position:relative;width:30px;height:18px;border-radius:99px;background:#D5CCBC;transition:background-color .24s}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .24s}
.seac input:checked+.sw{background:var(--act)}
.seac input:checked+.sw::after{transform:translateX(12px)}
.seac input:focus-visible+.sw{outline:3px solid var(--focus);outline-offset:2px}
.mleg{left:16px;top:68px;display:flex;flex-direction:column;gap:4px;margin:0;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.95);font-size:.75rem;color:var(--ink-2)}
.seac:has(input:not(:checked))~.mleg{display:none}
.mleg span{display:inline-flex;align-items:center;gap:6px}
.mleg span::before{content:"";width:14px}
.lg-a::before{height:8px;border-radius:50%;background:#6B5D1E;box-shadow:0 0 6px 2px rgba(196,160,64,.5)}
.lg-c::before{height:2px;background:#1F5F86}
.lg-w::before{height:8px;border-radius:2px;background:#EEF6F7;box-shadow:inset 0 0 0 1px #CFE6E8}
.mloc{right:16px;bottom:calc(var(--sheet,0px) + 16px);background:var(--surface);border:0;border-radius:12px;color:var(--ink);box-shadow:0 2px 8px rgba(16,38,44,.2);cursor:pointer}
.mlg{left:16px;bottom:calc(var(--sheet,0px) + 16px);display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(16,38,44,.18);font:600 .75rem/1 var(--fb);color:var(--ink-2);text-transform:lowercase}
.mlg span{display:flex;align-items:center;gap:7px}
.mlg .mlr{font-weight:700;text-transform:none}
#map:not([data-band=region]) .mlg{display:none}
.medge{top:68px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100% - 32px);min-height:44px;padding:0 14px;border:0;border-radius:99px;background:var(--surface);color:var(--ink);font:600 .8125rem/1 var(--fb);box-shadow:0 4px 16px rgba(16,38,44,.2);cursor:pointer}
.medge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaflet-sea-pane{pointer-events:none}
.sea{transition:opacity .24s}
/* Marks by level, never colour alone: at region zoom a circle, a square, a diamond, hollow for the usual level; closer a
   pin with its glyph or a cluster with a segment per level; a name beside it, dark when selected */
.mkx,.pinx{display:grid;place-items:center}
.mkx.sel,.pinx.sel,.zlx.sel{z-index:1000!important}
.mk{display:block;width:10px;height:10px;border-radius:50%;background:var(--rc);box-shadow:0 0 0 1.3px #fff}
.mk.r-mod{border-radius:2px}
.mk.r-heavy{border-radius:2px;transform:rotate(45deg)}
.mk.u{background:#fff;box-shadow:inset 0 0 0 2.2px var(--rc)}
.mkx.sel .mk{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.mkx .sun{position:absolute;left:-10px;top:-9px;width:12px;height:12px}
.pin{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--rc);color:#fff;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(16,38,44,.3)}
.pin .g{width:13px;height:11px}
.pin.u{background:#fff;color:var(--rc);box-shadow:inset 0 0 0 2.5px currentColor,0 2px 6px rgba(16,38,44,.25)}
.cu{display:flex;width:max-content;border-radius:99px;box-shadow:0 0 0 2px #fff,0 2px 8px rgba(16,38,44,.3)}
.cs{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 9px;background:var(--rc);color:#fff;font:800 .8125rem/1 var(--fb)}
.cs:first-child{border-radius:99px 0 0 99px}
.cs:last-child{border-radius:0 99px 99px 0}
.cs:only-child{border-radius:99px}
.cs.u{background:#fff;color:var(--rc);box-shadow:inset 0 0 0 2px currentColor}
.cs .g{width:12px;height:10px}
.sel>.pin,.sel>.cu{box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--ink),0 4px 10px rgba(16,38,44,.35);transform:scale(1.18)}
.zlb{position:absolute;display:flex;align-items:center;gap:6px}
.zlb.l{flex-direction:row-reverse}
.pin-n{position:absolute;left:50%;top:50%}
.pin-n,.zlb b{padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.95);box-shadow:0 1px 4px rgba(16,38,44,.18);font:800 .8125rem/1 var(--fb);color:var(--ink);white-space:nowrap}
.sel .pin-n,.sel .zlb b{background:var(--ink);color:#fff}
.rb{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 7px;border-radius:var(--r-m);background:var(--surface);box-shadow:0 4px 16px rgba(16,38,44,.2);white-space:nowrap;cursor:pointer}
.rb b{font:700 .875rem/1.1 var(--fb)}
.rb.coming{padding-left:14px;background:rgba(255,255,255,.85);border:1.5px dashed var(--line-2);box-shadow:none;color:var(--ink-2)}
#map .leaflet-control-attribution{font:400 .6875rem/1.4 var(--fb)}
/* On a phone the sheet covers the map's foot, so the map's credit (OpenStreetMap's licence) sits under the top row; in a month
   the top row's Sea conditions says Today only, without its switch, and My location rests */
@media (max-width:1023px){
  body.app .hd{position:static;height:0;padding:0;box-shadow:none}
  body.app .hd>:not(.rg){display:none}
  .mleg{left:72px}
  body.app .rg{position:fixed;top:68px;left:16px;z-index:1001;border-radius:14px;background:var(--surface);box-shadow:0 2px 8px rgba(16,38,44,.2)}
  #map .leaflet-control-zoom,.mlg .mpk,.seac:has(:disabled) .sw,.seac:has(:disabled)~.mloc{display:none}
  #map .leaflet-bottom{top:64px;bottom:auto}
  .seac{max-width:calc(100% - 178px);gap:6px;padding:0 10px;font-size:.8125rem}
  .seac>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* "Condiciones del mar" and "Solo hoy" fit no one row beside the List pill */
  .seac:lang(es):has(:disabled){display:grid;grid-template-columns:auto auto;gap:2px 8px;align-content:center}
  .seac:lang(es):has(:disabled)>svg{grid-row:span 2}
}
@media (max-width:389px){.seac small{display:none}}
@media (min-width:1024px){
  .mapp{display:grid;grid-template-columns:420px minmax(0,1fr)}
  .mside{overflow-y:auto;padding:20px 24px 24px 32px;border-right:1px solid var(--line)}
  .mapc{position:relative;inset:auto}
  .msheet{position:static;padding:0;background:none;border-radius:0;box-shadow:none}
  .msheet::before,#map .mlist,#map .mback,.seac small{display:none}
  .seac{left:16px}
  .mloc{right:16px;top:120px;bottom:auto}
  .mcard{display:none}
  .mrows{display:block;margin-top:12px}
  #map .leaflet-top.leaflet-right .leaflet-control{margin:16px 16px 0 0}
  #map .leaflet-control-zoom{border:0;box-shadow:none}
  #map .leaflet-control-zoom a{width:44px;height:44px;line-height:44px;margin-bottom:8px;border:0;border-radius:12px;box-shadow:0 2px 8px rgba(16,38,44,.2);color:var(--ink);font:600 1.25rem/44px var(--fb)}
}
@media (prefers-reduced-motion:reduce){.sea,.sw,.sw::after,.belt>g{transition:none}}
/* SCK-118: the call to action under a beach status, and an area links to each beach hotels */
.cta{margin-top:12px}
.cta svg{width:16px;height:16px}
.chs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.chs .mch{margin:0;width:auto;height:44px;padding:0 14px;font-size:.8125rem}
.chl{margin:14px 0 0;font:700 .75rem/1 var(--fb);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.hotels{scroll-margin-top:76px}
@media (min-width:1024px){.pg:has(>.mapc)>.hotels{padding:0 24px 28px 28px;scroll-margin-top:150px}}