/* The surf report (surf-report.html, written by site/surf.mjs, filled by surf-report.js) and its card on the home page (.sr-home).
   White page, brand palette (ink, paper, gold, white, muted, line). Since 15 November 2026 the ratings, the wind, the tide and the
   night carry the conditions colours of brand-system.css (--cx-*, sand to sea; the block at the end of this file), always beside
   their words and bar counts. Every selector starts with .sr- (or sits under .sr-page) so that the home page can load this file too. */
.sr-page,.sr-page .doc-main{background:var(--white,#fff)}
.sr-page .section-kicker{margin:0;font-size:11px;letter-spacing:1.75px}

/* ── the meter: five bars, gold as far as the rating ── */
.sr-meter{display:inline-flex;align-items:flex-end;gap:2px;flex:none;vertical-align:middle}
.sr-meter i{display:block;width:5px;height:12px;border-radius:1px;background:var(--line,#ded7cb)}
.sr-meter[data-r="1"] i:nth-child(-n+1),.sr-meter[data-r="2"] i:nth-child(-n+2),.sr-meter[data-r="3"] i:nth-child(-n+3),.sr-meter[data-r="4"] i:nth-child(-n+4),.sr-meter[data-r="5"] i{background:var(--gold,#b99860)}
.sr-meter[data-r="x"] i{opacity:.55}
.sr-skel{color:var(--muted,#5c5a55);opacity:.6}
@media (prefers-reduced-motion:no-preference){.sr-skel{animation:sr-breathe 1.8s ease-in-out infinite}}
@keyframes sr-breathe{50%{opacity:.3}}

/* ── 1. the hero ── */
.sr-hero{padding:clamp(40px,5vw,72px) 0 0}
.sr-crumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(36px,5vw,64px);font-size:13px;color:var(--muted)}
.sr-crumbs a{color:var(--ink);text-decoration:none}
.sr-crumbs a:hover{color:var(--gold)}
.sr-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5.5vw,88px);align-items:end}
.sr-head h1{margin:16px 0 0;font-size:clamp(44px,5vw,76px);font-weight:500;letter-spacing:-.045em;line-height:.98;color:var(--ink);text-shadow:none}
.sr-head h1 em{color:var(--gold);font-style:normal}
.sr-lede{margin:0;max-width:520px;padding-bottom:6px;font-size:17px;line-height:1.7;color:var(--muted)}
.sr-verdict{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5.5vw,88px);align-items:start;margin-top:clamp(40px,5vw,64px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--ink)}
.sr-alt:empty{display:none}
.sr-alt-k{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sr-alt ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.sr-alt a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 14px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.sr-alt a:hover .sr-alt-n{color:var(--gold)}
.sr-alt-n{font-size:15px;font-weight:500}
.sr-alt-r{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.sr-alt-m{font-size:12.5px;color:var(--muted)}
.sr-when{margin:0;font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.sr-line{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);margin:14px 0 0;font-size:clamp(30px,3.7vw,54px);font-weight:500;letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.sr-line .sr-meter{gap:3px}
.sr-line .sr-meter i{width:clamp(7px,.75vw,10px);height:clamp(22px,2.4vw,32px);border-radius:1.5px}
.sr-sub{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--muted)}
.sr-window{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--ink)}
.sr-sub:empty,.sr-window:empty{display:none}
.sr-verdict.is-error .sr-line{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;line-height:1.25}
.sr-facts-k{margin:clamp(32px,4vw,48px) 0 0;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sr-facts-k:empty{display:none}
.sr-facts-now{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:12px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sr-fact{padding:22px 20px 22px 0}
.sr-fact+.sr-fact{padding-left:20px;border-left:1px solid var(--line)}
.sr-fact dt{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sr-fact dd{margin:10px 0 0}
.sr-fact b{display:block;font-size:clamp(20px,1.9vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.sr-fact span{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.sr-status{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.sr-noscript{margin:12px 0 0;font-size:14px;color:var(--ink)}

/* ── sections ── */
.sr-sec{padding:clamp(80px,9vw,136px) 0 0}
.sr-sec h2{margin:14px 0 0;max-width:22ch;font-size:clamp(30px,3vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1.08;color:var(--ink)}
.sr-sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5.5vw,88px);align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.sr-sec-copy{margin:0;max-width:520px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.sr-h3{margin:clamp(56px,6vw,88px) 0 22px;font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.sr-note{margin:16px 0 0;font-size:13px;line-height:1.65;color:var(--muted)}
.sr-mini-h{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

/* ── 2. the map and the list ── */
.sr-map-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,56px);align-items:start}
.sr-map-col{position:sticky;top:96px}
.sr-map-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-bottom:14px}
.sr-views{display:inline-flex;border:1px solid var(--line);border-radius:2px}
.sr-views button{min-height:38px;padding:0 14px;font-size:13px;font-weight:500;color:var(--ink);background:transparent;border:0;border-radius:0;cursor:pointer;transition:background .2s,color .2s}
.sr-views button+button{border-left:1px solid var(--line)}
.sr-views button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.sr-views button:focus-visible,.sr-row:focus-visible,.sr-week button:focus-visible,.sr-scroll:focus-visible,.sr-table-wrap:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr-reftime{margin:0;font-size:12.5px;color:var(--muted)}
.sr-map{margin:0}
.sr-map-box{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);border-radius:2px;background:var(--white)}
.sr-frame{position:absolute;inset:0;width:100%;height:100%;display:block}
.sr-frame[hidden]{display:none}
.sr-sea{fill:#fff}
.sr-land{fill:var(--paper,#f3eee4)}
.sr-coast{fill:none;stroke:#5c5a55b3;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sr-static-pins circle{fill:var(--ink)}
.sr-map.is-live .sr-static-pins{display:none}
.sr-layer{position:absolute;inset:0;pointer-events:none}
.sr-layer>*{position:absolute}
.sr-layer>[hidden]{display:none}
.sr-place{transform:translate(10px,-50%);font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:#5c5a55cc;white-space:nowrap}
.sr-place.is-west{transform:translate(calc(-100% - 10px),-50%)}
/* a house: the gold diamond on its point, its name above it */
.sr-house{width:0;height:0;z-index:2}
.sr-house i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;box-sizing:border-box;background:var(--gold);border:2px solid #fff;transform:rotate(45deg);box-shadow:0 1px 3px #10101040}
.sr-house b,.sr-house small{position:absolute;left:0;transform:translateX(calc(-50% + var(--dx,0px)));white-space:nowrap;text-align:center}
.sr-map-box:not([data-view="bay"]) .sr-house b,.sr-map-box:not([data-view="bay"]) .sr-house small{display:none}
.sr-house b{bottom:11px;font-size:12px;font-weight:600;color:var(--ink);line-height:1.1;text-shadow:0 0 3px #f3eee4,0 0 3px #f3eee4}
.sr-house small{bottom:25px;font-size:9px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);text-shadow:0 0 3px #f3eee4}
.sr-pin{display:grid;place-items:center;width:28px;height:28px;margin:0;padding:0;transform:translate(-50%,-50%);background:none;border:0;border-radius:50%;cursor:pointer;pointer-events:auto;z-index:3}
.sr-pin i{width:14px;height:14px;border-radius:50%;background:#fff;border:1.5px solid var(--gold);box-shadow:0 1px 3px #1010101f;transition:transform .2s}
.sr-pin[data-r="0"] i{border-color:#5c5a5580}
.sr-pin[data-r="1"] i{background:#b998604d}
.sr-pin[data-r="2"] i{background:#b9986080}
.sr-pin[data-r="3"] i{background:#b99860b3}
.sr-pin[data-r="4"] i{background:#b99860e6}
.sr-pin[data-r="5"] i{background:var(--gold);border-color:var(--ink)}
.sr-pin span{position:absolute;display:none;padding:4px 8px;border-radius:2px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;pointer-events:none}
.sr-pin[data-side="l"] span{right:calc(100% - 2px)}
.sr-pin[data-side="r"] span{left:calc(100% - 2px)}
.sr-pin[data-side="t"] span{bottom:calc(100% - 2px)}
.sr-pin[data-side="b"] span{top:calc(100% - 2px)}
.sr-pin.is-on{z-index:5}
.sr-pin.is-on i{transform:scale(1.3);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.sr-pin.is-on span,.sr-pin:hover span{display:block}
.sr-pin:hover{z-index:6}
.sr-map figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:11px;line-height:1.5;color:var(--muted)}
.sr-map figcaption span+span{white-space:nowrap}
.sr-callout{min-height:56px;margin-top:14px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.sr-callout:empty{display:none}
.sr-callout p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:14px;color:var(--muted)}
.sr-callout p b{font-size:16px;font-weight:600;color:var(--ink)}
.sr-callout-r{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
.sr-callout a{display:inline-flex;align-items:center;gap:10px;padding-bottom:4px;border-bottom:1px solid var(--muted);font-size:13px;font-weight:500;color:var(--ink);text-decoration:none}
.sr-callout a .icon{width:16px;height:16px;transform:rotate(90deg)}
.sr-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 0 0;padding:0;list-style:none;font-size:12px;color:var(--muted)}
.sr-legend li{display:inline-flex;align-items:center;gap:7px}
.sr-dot{width:11px;height:11px;border-radius:50%;background:#fff;border:1.5px solid var(--gold)}
.sr-dot[data-r="0"]{border-color:#5c5a5580}
.sr-dot[data-r="1"]{background:#b998604d}.sr-dot[data-r="2"]{background:#b9986080}.sr-dot[data-r="3"]{background:#b99860b3}.sr-dot[data-r="4"]{background:#b99860e6}.sr-dot[data-r="5"]{background:var(--gold);border-color:var(--ink)}
.sr-house-dot{width:9px;height:9px;margin:0 2px;background:var(--gold);transform:rotate(45deg)}
.sr-list{display:grid;gap:30px}
.sr-group h3{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.sr-group ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.sr-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 16px;width:100%;margin:0;padding:13px 12px 13px 0;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink);cursor:pointer;transition:background .2s,padding .2s}
.sr-row:hover{background:#f3eee466}
.sr-row[aria-pressed="true"]{padding-left:12px;background:#f3eee4b3;box-shadow:inset 2px 0 0 var(--gold)}
.sr-row-name{grid-column:1;font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.sr-row-meta{grid-column:1;font-size:13px;line-height:1.45;color:var(--muted)}
.sr-row-rate{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
.sr-row-rate b{min-width:62px;font-weight:600}

/* ── 3. the spot ── */
.sr-spot+.sr-spot{margin-top:clamp(56px,6vw,88px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.sr-spot[hidden]{display:none}
.sr-spot-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5.5vw,88px);align-items:end}
.sr-spot-group{grid-column:1;margin:0;font-size:11px;font-weight:600;letter-spacing:1.75px;text-transform:uppercase;color:var(--gold)}
.sr-spot-head h3{grid-column:1;margin:10px 0 0;font-size:clamp(36px,4.2vw,60px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink);scroll-margin-top:110px}
.sr-spot-head h3:focus{outline:none}
.sr-spot-area{grid-column:1;margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.sr-approx{display:block;margin-top:2px;font-size:12.5px}
.sr-spot-brk{grid-column:2;grid-row:2/span 2;margin:0;font-size:15.5px;line-height:1.7;color:var(--ink)}
.sr-spot{scroll-margin-top:96px}
.sr-live{margin:clamp(28px,3.5vw,44px) 0 0}
.sr-live:empty{display:none}
.sr-live-wait,.sr-live-err{margin:0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--muted)}
.sr-now{padding:22px 0 18px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.sr-now-k{margin:0;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sr-now dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:14px 0 0}
.sr-now dl>div{padding-right:18px}
.sr-now dl>div+div{padding-left:18px;border-left:1px solid var(--line)}
.sr-now dt{font-size:12px;color:var(--muted)}
.sr-now dd{margin:6px 0 0}
.sr-now dd b{display:block;font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.sr-now dd>span:not(.sr-meter){display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.sr-now dd.sr-now-r{display:flex;align-items:center;gap:10px}
.sr-now-r b{display:inline!important}
.sr-now-r .sr-meter i{width:6px;height:16px}
.sr-suits{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.sr-suits b{font-weight:600;color:var(--ink)}
.sr-suits em{font-style:normal}
.sr-suits span:empty{display:none}
.sr-week-wrap{margin-top:28px}
.sr-week-note{margin:-4px 0 14px;max-width:620px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.sr-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.sr-week button{display:grid;justify-items:start;gap:6px;width:100%;margin:0;padding:12px 12px 11px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:2px;color:var(--ink);cursor:pointer;transition:border-color .2s}
.sr-week button:hover{border-color:var(--gold)}
.sr-week-d{font-size:12.5px;font-weight:600;white-space:nowrap}
.sr-week-d b{font-weight:600}
.sr-week-w{font-size:12px;color:var(--ink)}
.sr-week-h{font-size:12px;color:var(--muted)}
.sr-chart-wrap{margin-top:30px}
.sr-readout{min-height:3.2em;margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.sr-chart{display:grid;grid-template-columns:44px minmax(0,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sr-axis svg{display:block}
.sr-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent;cursor:crosshair}
.sr-chart-svg{display:block}
.sr-chart-svg text{font-family:var(--sans,'DM Sans',Arial,sans-serif)}
.c-night{fill:#f3eee4;opacity:.75}
.c-grid{stroke:var(--line);stroke-width:1}
.c-grid.is-base{stroke:#5c5a5566}
.c-day{stroke:var(--line);stroke-width:1}
.c-dayname{font-size:11.5px;font-weight:600;fill:var(--ink)}
.c-meter rect{fill:var(--line)}
.c-meter rect.on{fill:var(--gold)}
.c-sun path{fill:none;stroke:var(--muted);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.c-sun text{font-size:9.5px;fill:var(--muted)}
.c-bar,.c-sets{fill:var(--gold)}
.c-bar[data-r="0"],.c-sets[data-r="0"]{fill:var(--line)}
.c-bar[data-r="1"]{fill-opacity:.3}.c-bar[data-r="2"]{fill-opacity:.48}.c-bar[data-r="3"]{fill-opacity:.66}.c-bar[data-r="4"]{fill-opacity:.84}
.c-bar[data-r="x"],.c-sets[data-r="x"]{fill:var(--muted);fill-opacity:.3}
.c-sets{fill-opacity:.16}
.c-sets[data-r="0"]{fill-opacity:.5}
.c-per,.c-wtxt,.c-hour,.c-ttxt{text-anchor:middle;font-size:9.5px;fill:var(--muted)}
.c-ttxt{fill:var(--ink)}
.c-wind path{fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.c-wind.is-off path{stroke:var(--gold)}
.c-wind.is-cross path{stroke:var(--ink)}
.c-wind.is-on path{stroke:#5c5a5599}
.c-tide-a{fill:#f3eee4;opacity:.9}
.c-tide{fill:none;stroke:var(--ink);stroke-width:1.2}
.c-turn{fill:var(--ink)}
.c-sel{fill:#1010100d;stroke:none}
.a-tick{text-anchor:end;font-size:9.5px;fill:var(--muted)}
.a-lab{text-anchor:end;font-size:9px;font-weight:600;letter-spacing:.6px;fill:var(--muted)}
.sr-legend-chart{margin:12px 0 0;max-width:900px;font-size:12px;line-height:1.65;color:var(--muted)}
.sr-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin:clamp(32px,4vw,48px) 0 0}
.sr-guide>div{padding:16px 0;border-top:1px solid var(--line)}
.sr-guide>.is-wide{grid-column:span 2}
.sr-guide dt{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sr-guide dd{margin:7px 0 0;font-size:15px;line-height:1.6;color:var(--ink)}
.sr-guide ul{margin:0;padding:0 0 0 18px}
.sr-guide li+li{margin-top:2px}

/* ── 4. how to read ── */
.sr-read-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5.5vw,88px);align-items:start}
.sr-read-scale h3{margin:0 0 14px;font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.025em;color:var(--ink)}
.sr-scale{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.sr-scale li{display:grid;grid-template-columns:44px 104px minmax(0,1fr);align-items:baseline;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--line)}
.sr-scale .sr-meter{align-self:center}
.sr-scale b{font-size:15px;font-weight:600;color:var(--ink)}
.sr-scale span:last-child{font-size:14.5px;line-height:1.6;color:var(--muted)}
.sr-read-photo{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--line)}
.sr-read-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 50%}
.sr-coach{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px}
.sr-coach article{padding-top:18px;border-top:1px solid var(--ink)}
.sr-coach h4,.sr-levels h4{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sr-coach p{margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--muted)}
.sr-est{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5.5vw,88px);align-items:start}
.sr-est-text p{margin:0 0 14px;max-width:62ch;font-size:15.5px;line-height:1.75;color:var(--muted)}
.sr-est-text p.sr-note{font-size:13px}
.sr-table-wrap{margin-top:clamp(0px,6vw,88px);overflow-x:auto}
.sr-table{width:100%;border-collapse:collapse;font-size:13.5px;color:var(--ink)}
.sr-table caption{margin-bottom:10px;text-align:left;font-size:12px;line-height:1.5;color:var(--muted)}
.sr-table th,.sr-table td{padding:8px 10px 8px 0;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.sr-table thead th{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.sr-table tbody th{font-weight:500}
.sr-table td small{font-size:11.5px;color:var(--muted)}
.sr-table td:last-child,.sr-table th:last-child{text-align:right;padding-right:0}
.sr-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.sr-levels article{padding-top:18px;border-top:1px solid var(--ink)}
.sr-levels p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink)}
.sr-level-rule{color:var(--muted)!important;font-size:13.5px!important}
.sr-level-rule b{display:block;margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.sr-coaches{margin:clamp(36px,4vw,52px) 0 0;max-width:760px;padding-left:18px;border-left:2px solid var(--gold);font-size:16px;line-height:1.7;color:var(--ink)}

/* ── 5. further ── */
.sr-go-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin-top:clamp(28px,3vw,40px)}
.sr-go{position:relative;display:grid;align-content:start;gap:8px;padding:22px 40px 26px 0;border-top:1px solid var(--ink);color:var(--ink);text-decoration:none}
.sr-go-k{font-size:11px;font-weight:600;letter-spacing:1.75px;color:var(--gold)}
.sr-go b{font-size:clamp(19px,1.7vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.sr-go-t{font-size:14px;line-height:1.65;color:var(--muted)}
.sr-go .icon{position:absolute;right:4px;top:24px;width:18px;height:18px;transition:transform .2s}
.sr-go:hover b{color:var(--gold)}
.sr-go:hover .icon{transform:translateX(4px)}

/* ── 6. sources ── */
.sr-sources{padding-bottom:clamp(24px,3vw,40px)}
.sr-credit{margin:22px 0 0;max-width:820px;font-size:16px;line-height:1.7;color:var(--ink)}
.sr-src{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:28px 0 0}
.sr-src>div{padding:16px 0;border-top:1px solid var(--line)}
.sr-src dt{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.sr-src dd{margin:6px 0 0;font-size:14px;line-height:1.7;color:var(--muted)}
.sr-models{margin:24px 0 0;font-size:15px;line-height:1.7;color:var(--ink)}
.sr-page .doc-credits{padding-top:12px}

/* ── the home page's card ── */
.sr-home{display:block;padding:clamp(20px,2.4vw,28px);background:#fff;border:1px solid var(--line,#ded7cb);border-radius:2px;color:var(--ink,#101010);font-family:var(--sans,'DM Sans',Arial,sans-serif)}
.sr-home-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.sr-home-k{margin:0;font-size:11px;font-weight:600;letter-spacing:1.75px;color:var(--gold,#b99860)}
.sr-home-t{margin:0;font-size:12px;color:var(--muted,#5c5a55)}
.sr-home-wait{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--muted,#5c5a55)}
.sr-home-list{margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--line,#ded7cb)}
.sr-home-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:12px 0;border-bottom:1px solid var(--line,#ded7cb);color:inherit;text-decoration:none}
.sr-home-list a:hover .sr-home-name{color:var(--gold,#b99860)}
.sr-home-name{font-size:16px;font-weight:500;letter-spacing:-.01em}
.sr-home-r{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:9px;font-size:13px}
.sr-home-r b{font-weight:600}
.sr-home-m{font-size:12.5px;color:var(--muted,#5c5a55)}
.sr-home-foot{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted,#5c5a55)}
.sr-home-link{display:inline-flex;align-items:center;gap:18px;margin-top:16px;padding-bottom:7px;border-bottom:1px solid var(--muted,#5c5a55);font-size:13px;font-weight:500;color:var(--ink,#101010);text-decoration:none}
.sr-home-link .icon{width:17px;height:17px;transition:transform .2s}
.sr-home-link:hover .icon{transform:translateX(4px)}

/* ── narrower screens ── */
@media (max-width:1120px){
  .sr-fact{padding-right:14px}
  .sr-fact+.sr-fact{padding-left:14px}
  .sr-coach{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .sr-levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .sr-guide{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .sr-head,.sr-sec-head,.sr-spot-head,.sr-read-grid,.sr-est,.sr-verdict{grid-template-columns:minmax(0,1fr)}
  .sr-alt{margin-top:24px}
  .sr-lede,.sr-sec-copy{margin-top:18px}
  .sr-spot-brk{grid-column:1;grid-row:auto;margin-top:12px}
  .sr-map-grid{grid-template-columns:minmax(0,1fr)}
  .sr-map-col{position:static}
  .sr-map-box{aspect-ratio:5/4}
  .sr-read-photo{aspect-ratio:16/9}
  .sr-table-wrap{margin-top:0}
  .sr-go-grid{grid-template-columns:minmax(0,1fr)}
  .sr-now dl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .sr-now dl>div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:900px){
  .sr-facts-now{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sr-fact,.sr-fact+.sr-fact{padding:18px 14px 18px 0;border-left:0}
  .sr-fact:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
  .sr-fact:nth-child(n+3){border-top:1px solid var(--line)}
  .sr-fact:nth-child(5){grid-column:1/-1}
}
@media (max-width:760px){
  .sr-crumbs{margin-bottom:28px}
  .sr-head h1{font-size:clamp(40px,11vw,52px)}
  .sr-lede{font-size:16px}
  .sr-map-box{aspect-ratio:4/5}
  .sr-map-bar{flex-direction:column;align-items:stretch}
  .sr-views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sr-views button{padding:0 6px;font-size:12.5px}
  .sr-pin{width:26px;height:26px}
  .sr-pin i{width:12px;height:12px}
  .sr-house b{font-size:11px}
  .sr-house small{display:none}
  .sr-place{font-size:9px;letter-spacing:1px}
  .sr-week{gap:4px}
  .sr-week button{justify-items:center;gap:7px;padding:10px 2px 9px;text-align:center}
  .sr-week-d{font-size:11.5px;line-height:1.25}
  .sr-week-d b{display:block;font-weight:600}
  .sr-week-w{display:none}
  .sr-week .sr-meter{gap:1.5px}
  .sr-week .sr-meter i{width:4px;height:10px}
  .sr-week-h{font-size:11px}
  .sr-coach,.sr-levels,.sr-guide,.sr-src{grid-template-columns:minmax(0,1fr)}
  .sr-guide>.is-wide{grid-column:auto}
  .sr-scale li{grid-template-columns:44px minmax(0,1fr)}
  .sr-scale span:last-child{grid-column:2}
  .sr-row-rate b{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .sr-row,.sr-pin i,.sr-go .icon,.sr-home-link .icon,.sr-views button{transition:none}
}

/* ── Colour (the owner, 15 November 2026): each rating its colour, from sand to sea (--cx-r0 … --cx-r5 in brand-system.css), on the
   meters, the map pins and their legend, the week strip, the chart bars and the chart's day meters; the wind by where it blows
   from; the tide in sea blue; the night in a cool shade. The words and the bar counts stay, so colour is never the only cue. ── */
.sr-meter[data-r="1"] i:nth-child(-n+1){background:var(--cx-r1)}
.sr-meter[data-r="2"] i:nth-child(-n+2){background:var(--cx-r2)}
.sr-meter[data-r="3"] i:nth-child(-n+3){background:var(--cx-r3)}
.sr-meter[data-r="4"] i:nth-child(-n+4){background:var(--cx-r4)}
.sr-meter[data-r="5"] i{background:var(--cx-r5)}
.sr-pin i,.sr-dot{border:2px solid #fff;box-shadow:0 0 0 1px #10101030,0 1px 3px #1010101f}
.sr-pin[data-r="0"] i,.sr-dot[data-r="0"]{background:var(--cx-r0);border-color:#fff}
.sr-pin[data-r="1"] i,.sr-dot[data-r="1"]{background:var(--cx-r1)}
.sr-pin[data-r="2"] i,.sr-dot[data-r="2"]{background:var(--cx-r2)}
.sr-pin[data-r="3"] i,.sr-dot[data-r="3"]{background:var(--cx-r3)}
.sr-pin[data-r="4"] i,.sr-dot[data-r="4"]{background:var(--cx-r4)}
.sr-pin[data-r="5"] i,.sr-dot[data-r="5"]{background:var(--cx-r5);border-color:#fff}
.sr-dot{width:12px;height:12px}
.sr-week button{border-top:3px solid var(--line)}
.sr-week button:has(.sr-meter[data-r="1"]){border-top-color:var(--cx-r1)}
.sr-week button:has(.sr-meter[data-r="2"]){border-top-color:var(--cx-r2)}
.sr-week button:has(.sr-meter[data-r="3"]){border-top-color:var(--cx-r3)}
.sr-week button:has(.sr-meter[data-r="4"]){border-top-color:var(--cx-r4)}
.sr-week button:has(.sr-meter[data-r="5"]){border-top-color:var(--cx-r5)}
.c-bar[data-r="0"]{fill:var(--cx-r0);fill-opacity:1}
.c-bar[data-r="1"]{fill:var(--cx-r1);fill-opacity:1}
.c-bar[data-r="2"]{fill:var(--cx-r2);fill-opacity:1}
.c-bar[data-r="3"]{fill:var(--cx-r3);fill-opacity:1}
.c-bar[data-r="4"]{fill:var(--cx-r4);fill-opacity:1}
.c-bar[data-r="5"]{fill:var(--cx-r5);fill-opacity:1}
.c-sets[data-r="0"]{fill:var(--cx-r0)}.c-sets[data-r="1"]{fill:var(--cx-r1)}.c-sets[data-r="2"]{fill:var(--cx-r2)}
.c-sets[data-r="3"]{fill:var(--cx-r3)}.c-sets[data-r="4"]{fill:var(--cx-r4)}.c-sets[data-r="5"]{fill:var(--cx-r5)}
.c-sets{fill-opacity:.3}.c-sets[data-r="0"]{fill-opacity:.55}
.c-meter[data-r="1"] rect.on{fill:var(--cx-r1)}.c-meter[data-r="2"] rect.on{fill:var(--cx-r2)}.c-meter[data-r="3"] rect.on{fill:var(--cx-r3)}
.c-meter[data-r="4"] rect.on{fill:var(--cx-r4)}.c-meter[data-r="5"] rect.on{fill:var(--cx-r5)}
.c-wind path{stroke-width:1.8}
.c-wind.is-off path{stroke:var(--cx-off)}
.c-wind.is-cross path{stroke:var(--cx-cross)}
.c-wind.is-on path{stroke:var(--cx-on)}
.c-tide{stroke:var(--cx-tide);stroke-width:1.6}
.c-tide-a{fill:var(--cx-tide-fill);opacity:1}
.c-turn{fill:var(--cx-tide)}
.c-night{fill:var(--cx-night);opacity:1}
/* the colour key under the chart */
.sr-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.4;color:var(--muted)}
.sr-key li{display:inline-flex;align-items:center;gap:8px}
.sr-key i{display:inline-block;flex:none;width:14px;height:10px;border-radius:2px}
.sr-key .k-line{width:16px;height:0;border-top:2px solid var(--cx-tide);border-radius:0}
.sr-key .k-night{background:var(--cx-night);box-shadow:inset 0 0 0 1px var(--line)}
.sr-key .k-arrow{width:auto;height:auto;font-style:normal;font-weight:700;font-size:13px;line-height:1}