/* Ebbward web, "Water column". Self-hosted OFL fonts: see fonts/FONTS.md. */
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-roman.woff2") format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-italic.woff2") format("woff2");font-weight:300 400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{--foam:#EEF6F6;--shallows:#BFE3DF;--seaglass:#7FC4BE;--current:#256F7E;--deep:#0F3D52;--abyss:#082735;--ink:#0B2A36;--mist:#4B6973;--sand:#E7DCC6;--kelp:#86702F;--line:#CFE3E3;--panel:#F8FCFC;
  --b0:#EEF6F6;--b1:#E1F0F0;--b2:#CDE7E6;--b3:#B7DCDB;--b4a:#98CACA;--b4:#1F5C6C;--b5:#113F53;--b6:#082735;
  --serif:"Newsreader",ui-serif,Georgia,serif;--sans:"Hanken Grotesk",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light}
:root[data-theme=dark]{--foam:#0E2826;--shallows:#153A36;--seaglass:#3F8A80;--current:#9CCFC6;--deep:#D3E9E4;--abyss:#061413;--ink:#E3F0EC;--mist:#93B2AB;--sand:#3A382C;--kelp:#D2BA78;--line:#21423E;--panel:#122F2C;
  --b0:#0E2826;--b1:#0D2624;--b2:#0C2321;--b3:#0A201E;--b4a:#091E1C;--b4:#081B19;--b5:#061615;--b6:#041110;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:76px}
body{margin:0;background:var(--foam);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--current)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid currentColor;outline-offset:3px;border-radius:6px}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i.filled{fill:currentColor}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--deep);color:var(--foam);padding:10px 14px;border-radius:10px}
.skip:focus{top:12px}
.serif{font-family:var(--serif)}

/* top bar */
.wtop{position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;gap:20px;padding:0 28px;background:color-mix(in srgb,var(--foam) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.wbrand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:20px;letter-spacing:-.2px;color:var(--ink);text-decoration:none;flex:none}
.wbrand .mark,.s-word .mark{width:26px;height:24px;color:var(--current)}
.wplaces{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;mask-image:linear-gradient(90deg,#000 90%,transparent)}
.wplaces::-webkit-scrollbar{display:none}
.wplaces button{flex:none;min-height:44px;padding:0 14px;border-radius:12px;font-size:15px;font-weight:500;color:var(--mist);transition:background-color .2s,color .2s}
.wplaces button:hover{color:var(--ink);background:color-mix(in srgb,var(--deep) 6%,transparent)}
.wplaces button[aria-pressed=true]{color:var(--ink);background:color-mix(in srgb,var(--current) 15%,transparent);font-weight:600}
.wlinks{display:flex;gap:4px;align-items:center;flex:none}
.wlinks a,.wlinks button{min-height:44px;display:inline-flex;align-items:center;padding:0 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;transition:background-color .2s}
.wlinks a:hover,.wlinks button:hover{background:color-mix(in srgb,var(--deep) 6%,transparent)}
.toggle-pill{border:1px solid var(--line)}

/* today: water on the left, the column on the right */
.today-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
.today-hero{--hh:calc(100vh - 64px);position:sticky;top:64px;height:var(--hh);min-height:620px;color:#0B2A36;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden;background:linear-gradient(180deg,#BCDBE4 0%,#EEF4EC 42%,#3C8F98 43%,#1D6476 70%,#0B3547 100%)}
:root[data-theme=dark] .today-hero{background:linear-gradient(180deg,#46646A 0%,#77908A 42%,#2C7A70 43%,#0F4640 70%,#061C1A 100%);color:#F2F9F8}
.place-button{display:inline-flex;align-items:center;gap:6px;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;border-radius:10px;min-height:44px}
.place-button .i{width:22px;height:22px;margin-top:6px}
.spot-choices{display:grid;margin-top:8px}
.surface-host{position:absolute;inset:0}
.ebb-surface{outline:none}
.ebb-surface:focus-visible{outline:2.5px solid #fff;outline-offset:-5px;border-radius:0}
.surface-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.surface-sun{fill:#FFF6E0}
.surface-moon{fill:#EAF2F1}
.surface-wind path{stroke:#fff}
.ebb-surface[data-sky=day] .surface-wind path{stroke:#2A6B7A}
.wave-back{fill:#9CCFCD;opacity:.75}.wave-mid{fill:#6DB2B3;opacity:.9}
:root[data-theme=dark] .wave-back{fill:#245E58}:root[data-theme=dark] .wave-mid{fill:#1F6A62}
.wave-foam{stroke:#F2FBFA;stroke-width:1.3;opacity:.7}
.surface-gauge line{stroke:#fff;stroke-opacity:.6}
.ebb-surface[data-sky=day] .surface-gauge line{stroke:#0F3D52;stroke-opacity:.45}
.surface-gauge text{font:italic 12px var(--serif);fill:#fff;fill-opacity:.85}
.ebb-surface[data-sky=day] .surface-gauge text{fill:#0F3D52}
.surface-gauge .gauge-level{fill-opacity:1}
.surface-strip .strip-base{stroke:#fff;stroke-opacity:.35}.surface-strip .strip-tick{stroke:#fff;stroke-opacity:.55}
.surface-strip .strip-label{font:500 11px var(--sans);fill:#E6F4F3}
.surface-strip .strip-now{stroke:#fff;stroke-width:1.5}.surface-strip .strip-now-label{font:italic 12px var(--serif);fill:#fff}
.strip-cursor line{stroke:#fff;stroke-width:1.5}.strip-cursor circle{fill:#fff;stroke:#0B3547;stroke-opacity:.25;stroke-width:4}
.hero-top{position:absolute;top:26px;left:34px;right:34px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;z-index:2;pointer-events:none}
.hero-top>*{pointer-events:auto}
.place-name{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.05;letter-spacing:-.5px;margin:0}
.place-sub{font-size:14px;opacity:.8}
.hero-actions{display:flex;gap:8px}
.glass-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#fff 38%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,#fff 50%,transparent);transition:background-color .2s}
.glass-btn:hover{background:color-mix(in srgb,#fff 58%,transparent)}
.glass-btn:disabled{opacity:.55;cursor:default}
.hero-night .hero-top,.hero-night .sky-line{color:#F2F9F8}
.hero-night .glass-btn{background:#FFFFFF1C;border-color:#FFFFFF33}
.sky-line{position:absolute;top:116px;left:34px;right:80px;font-size:15px;z-index:2;display:flex;gap:6px;align-items:center;margin:0;pointer-events:none}
.water-read{position:absolute;left:34px;right:34px;top:calc(var(--hh) * .52 + 8px);color:#fff;z-index:2;pointer-events:none;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:16px}
.water-temp{font-family:var(--serif);font-weight:300;font-size:128px;line-height:.86;letter-spacing:-4px;text-shadow:0 2px 24px #06303D40}
.water-temp small{font-size:.36em;letter-spacing:0;vertical-align:1.1em;margin-left:3px;opacity:.9}
.water-caption{font-size:14px;line-height:1.35;color:#EEF8F7;padding-bottom:8px;text-shadow:0 1px 10px #06303D80}
.water-caption strong{display:block;font-weight:600;color:#fff;font-size:15px}
.water-stats{position:absolute;left:34px;right:34px;top:calc(var(--hh) * .52 + 138px);display:flex;gap:36px;color:#EAF6F5;z-index:2;pointer-events:none;font-size:14px;text-shadow:0 1px 10px #06303D80}
.water-stats b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;color:#fff;letter-spacing:-.2px}
.scrub-caption{position:absolute;left:34px;right:34px;bottom:96px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:3;color:#E6F4F3;font-size:13px}
.scrub-caption button{font-size:13px;font-weight:600;color:#fff;background:#FFFFFF24;border:1px solid #FFFFFF40;border-radius:20px;padding:6px 12px;min-height:34px;transition:background-color .2s}
.scrub-caption button:hover{background:#FFFFFF38}
.scrub-caption .when{display:flex;align-items:center;gap:6px}
.scrub-caption .when i{width:1.5px;height:13px;background:#fff;display:inline-block}
.scrub-hint{font:italic 14px var(--serif);color:#DDEFEE}

/* the water column */
.column{position:relative;z-index:4}
.band{position:relative;padding:30px 48px 38px 88px;background:linear-gradient(var(--top),var(--bot));color:var(--band-ink,var(--ink));--band-mist:var(--mist)}
.band::before{content:"";position:absolute;left:52px;top:0;bottom:0;width:1px;background:var(--band-line,#0F3D5226)}
.band .depth{position:absolute;left:42px;top:34px;width:21px;height:21px;border-radius:50%;background:var(--top);border:1px solid var(--band-line,#0F3D5240);display:grid;place-items:center}
.band .depth::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55}
.layer{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--band-mist);margin:0 0 6px}
.band h2{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;letter-spacing:-.3px;margin:0 0 4px}
.band p{margin:6px 0;max-width:54ch}
.reading{font-family:var(--serif);font-size:56px;line-height:1;font-weight:300;letter-spacing:-1px;margin:4px 0 6px}
.reading small{font-size:18px;letter-spacing:0;margin-left:6px;font-family:var(--sans);font-weight:500;color:var(--band-mist)}
.reading.unknown{font-style:italic}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px;max-width:560px}
.fact b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15}
.fact span{display:block;font-size:14px;color:var(--band-mist)}
.small{font-size:14px;line-height:1.5}.tiny{font-size:13px;line-height:1.45;color:var(--band-mist)}
.band-link{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:560px;margin-top:16px;padding:12px 0 2px;min-height:44px;border-top:1px solid var(--band-line,#0F3D521F);font-weight:600;font-size:15px;color:var(--band-ink,var(--ink));text-align:left;text-decoration:none}
.band-link:hover{color:var(--band-accent,var(--current))}
.band.lit{--band-ink:#EAF6F5;--band-mist:#BFDCDF;--band-line:#FFFFFF2A;--band-accent:#9FE0DA}
:root[data-theme=dark] .band{--band-ink:#E4F1F0;--band-mist:#8FB0B6;--band-line:#FFFFFF1F;--band-accent:#9FE0DA}
.b-summary{--top:var(--b0);--bot:var(--b1);padding-top:40px}
.b-surface{--top:var(--b1);--bot:var(--b2)}
.b-waterline{--top:var(--b2);--bot:var(--b3);--band-mist:#2F4D57}
.b-water{--top:var(--b3);--bot:var(--b4a);--band-mist:#2F4D57}
:root[data-theme=dark] .b-waterline,:root[data-theme=dark] .b-water{--band-mist:#8FB0B6}
.b-below{--top:var(--b4);--bot:var(--b5);padding-top:44px}
.b-floor{--top:var(--b5);--bot:var(--b6);padding-bottom:60px}
.thermo-edge{position:absolute;left:0;right:0;top:-17px;width:100%;height:18px;display:block}
.thermo-edge path{fill:var(--b4)}
.thermo-note{position:absolute;right:48px;top:10px;font:italic 13px var(--serif);color:#BFDCDF}
:root[data-theme=dark] .thermo-note{display:none}
.summary-text{font-family:var(--serif);font-size:26px;line-height:1.35;letter-spacing:-.1px;margin:2px 0 16px;max-width:30ch}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;border-radius:20px;border:1px solid var(--band-line,#0F3D5230);font-size:15px;font-weight:500;color:var(--band-ink,var(--ink));transition:background-color .2s,color .2s}
.chip:hover{background:#0F3D520D}
.chip[aria-pressed=true]{background:var(--deep);color:var(--foam);border-color:var(--deep)}
.chip .i{width:17px;height:17px}
.status-line{font-size:13px;color:var(--band-mist);margin-top:16px}
.state-banner{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--sand) 60%,var(--foam));color:var(--ink);font-size:15px;line-height:1.45;max-width:560px}
:root[data-theme=dark] .state-banner{background:#2E3228;color:#F1E6CF}
.state-banner button{display:inline-block;margin-top:6px;font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.wave-train{width:100%;max-width:560px;height:64px;display:block;margin:6px 0 0}
.train-line{stroke:var(--current);stroke-width:2}
.train-bracket{stroke:var(--band-mist);stroke-width:1}
.tide-mini{width:100%;max-width:560px;height:auto;display:block;margin:8px 0 2px}
.tm-line{stroke:var(--deep);stroke-width:2;stroke-dasharray:7 4}
.tm-a{stop-color:#256F7E;stop-opacity:.22}.tm-b{stop-color:#2A7C8C;stop-opacity:0}
.tm-event{fill:var(--deep)}
.now-line{stroke:var(--band-ink,var(--ink));stroke-opacity:.7;stroke-width:1.2}
.now-label{font:italic 12px var(--serif);fill:var(--band-ink,var(--ink))}
.past{opacity:.38}
.sounding{font:italic 13px var(--serif);fill:var(--band-ink,var(--ink))}
.axis{font:500 11px var(--sans);fill:var(--band-mist,var(--mist))}
.grid{stroke:var(--band-line,var(--line));stroke-width:1}
.spark{width:100%;max-width:560px;height:46px;display:block;margin-top:8px}
.spark path{stroke:currentColor;fill:none;stroke-width:1.8}
.spark .buoy-dot{fill:currentColor}
.vis-art{display:block;width:100%;max-width:560px;height:auto;border-radius:16px;margin:12px 0 6px}
.vis-w1{stop-color:#2B7686}.vis-w2{stop-color:#0C3A4C}
:root[data-theme=dark] .vis-w1{stop-color:#174A45}:root[data-theme=dark] .vis-w2{stop-color:#061715}
.vis-surface{stroke:#DDF3F1;stroke-width:1.4;opacity:.8}
.diver{fill:#E6F2F0}.diver-line{stroke:#E6F2F0;stroke-width:2.2;stroke-linecap:round}
.vis-hatch{stroke:#fff;stroke-opacity:.14;stroke-width:1.2}
.vis-text{font:italic 17px var(--serif);fill:#EAF6F5}
.floor-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;max-width:620px}
.official{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;background:#FFFFFF10;border:1px solid #FFFFFF22;text-decoration:none;color:inherit;min-height:64px;transition:background-color .2s}
.official:hover{background:#FFFFFF1C}
.official div{flex:1}
.official strong{display:block;font-size:15px;font-weight:600}
.official span{font-size:13px;color:var(--band-mist)}
.warnings{margin:12px 0 0;padding:0;list-style:none;max-width:620px}
.warnings li{padding:10px 14px;border-radius:12px;background:#F1E6CF;color:#4A3B1C;font-size:14px;margin-bottom:8px}
.source-mini{margin-top:18px;display:grid;gap:9px;max-width:560px}
.source-mini div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.source-mini em{font-family:var(--serif);font-style:italic;color:var(--band-mist);white-space:nowrap}
.grammar{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--band-mist);margin-top:12px}
.grammar span{display:flex;align-items:center;gap:6px}
.grammar svg{width:26px;height:8px}
.g-model{stroke:currentColor;stroke-width:2}.g-pred{stroke:currentColor;stroke-width:2;stroke-dasharray:5 3}.g-obs{stroke:currentColor;stroke-width:2.6;stroke-dasharray:.1 5;stroke-linecap:round}
.chart-empty{font:italic 16px var(--serif);color:var(--band-mist,var(--mist));margin:14px 0}

/* full-width sections */
.wsec{padding:64px 48px;border-top:1px solid var(--line);background:var(--foam);scroll-margin-top:64px}
.wsec-inner{max-width:1240px;margin:0 auto}
.wsec h2{font-family:var(--serif);font-weight:400;font-size:40px;letter-spacing:-.6px;margin:0 0 6px}
.wsec .lede{color:var(--mist);margin:0 0 26px;max-width:62ch}
.seg{display:flex;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--deep) 7%,transparent);gap:2px;max-width:440px;margin-bottom:10px}
.seg button{flex:1;min-height:40px;border-radius:10px;font-size:15px;font-weight:600;color:var(--mist);transition:background-color .2s,color .2s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px #06303D1A}
.week{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:40px;align-items:start}
.readout{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0 0}
.readout .val{font-family:var(--serif);font-weight:300;font-size:52px;line-height:1;letter-spacing:-1.2px}
.readout .ctx{font-size:14px;color:var(--mist);text-align:right}
.readout .ctx b{display:block;color:var(--ink);font-weight:600}
.fc svg{width:100%;height:auto;display:block;touch-action:pan-y;cursor:ew-resize}
.fc-line{stroke:var(--current);stroke-width:2.2}.fc-line.predicted{stroke-dasharray:7 4}
.fc-gust{stroke:var(--current);stroke-width:1.2;opacity:.45}
.fc-dot{fill:var(--current)}
.fa1{stop-color:#2A7C8C;stop-opacity:.24}.fa2{stop-color:#2A7C8C;stop-opacity:.02}
:root[data-theme=dark] .fa1{stop-color:#9CCFC6;stop-opacity:.2}
.night-band{fill:color-mix(in srgb,var(--deep) 6%,transparent)}
:root[data-theme=dark] .night-band{fill:#00000024}
.chart-cursor line{stroke:var(--ink);stroke-opacity:.35}.chart-cursor circle{fill:var(--panel);stroke:var(--current);stroke-width:2.5}
.gap-label{font:italic 12px var(--serif);fill:var(--mist)}
.hit{cursor:ew-resize}
.fine{font-size:13px;color:var(--mist);margin-top:12px;max-width:70ch}
.days{border-top:1px solid var(--line)}
.day{display:grid;grid-template-columns:56px 44px 1fr auto;align-items:center;gap:12px;width:100%;min-height:58px;border-bottom:1px solid var(--line);text-align:left;transition:background-color .2s}
.day:hover{background:color-mix(in srgb,var(--deep) 4%,transparent)}
.day[aria-pressed=true] .dname{color:var(--current);font-weight:700}
.dname{font-weight:600;font-size:15px}
.day svg{width:44px;height:22px}.day svg path{stroke:var(--current);stroke-width:1.8;fill:none}
.drange{font-size:14px}.drange i{font-style:normal;color:var(--mist);font-size:13px;display:block}
.dwater{font-family:var(--serif);font-size:20px}
.coastsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.map-wrap{border-radius:22px;overflow:hidden;border:1px solid var(--line);max-width:520px}
.coast-map svg{display:block;width:100%;height:auto}
.map-water{fill:#D5ECEB}:root[data-theme=dark] .map-water{fill:#12332F}
.contour{fill:none;stroke:#2A7C8C;stroke-width:1;stroke-opacity:.22}.contour.c0{stroke-opacity:.34}.contour.c4,.contour.c5{stroke-dasharray:3 4}
:root[data-theme=dark] .contour{stroke:#9CCFC6;stroke-opacity:.16}
.map-land{fill:#EDE4D1}:root[data-theme=dark] .map-land{fill:#1D2E2E}
.map-shore{stroke:#B9A57F;stroke-width:1.4}:root[data-theme=dark] .map-shore{stroke:#56685F}
.map-town{font:italic 13px var(--serif);fill:#8A7A5B}:root[data-theme=dark] .map-town{fill:#7C8F86}
.map-credit{font:500 10px var(--sans);fill:var(--mist)}
.pin{cursor:pointer;outline:none}
.pin-dot{fill:var(--deep);stroke:#fff;stroke-width:2.5;transition:fill .2s}
:root[data-theme=dark] .pin-dot{fill:#9CCFC6;stroke:#0E2826}
.pin-ripple{fill:none;stroke:var(--current);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.pin:hover .pin-dot,.pin:focus-visible .pin-dot{fill:var(--current)}
.pin.selected .pin-dot{fill:var(--kelp)}
.pin.selected .pin-ripple{animation:pinRipple 3.2s ease-out infinite}
@keyframes pinRipple{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}
.pin-label{font:600 12px var(--sans);fill:var(--ink);paint-order:stroke;stroke:#D5ECEB;stroke-width:4px;stroke-linejoin:round}
:root[data-theme=dark] .pin-label{stroke:#12332F}
.pin-label.on-land{stroke:#EDE4D1}:root[data-theme=dark] .pin-label.on-land{stroke:#1D2E2E}
.pin:focus-visible .pin-label{text-decoration:underline}
.list-row{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:10px 4px;text-align:left;border-bottom:1px solid var(--line);transition:background-color .2s}
.list-row:hover{background:color-mix(in srgb,var(--deep) 4%,transparent)}
.list-row[aria-current=true]{background:color-mix(in srgb,var(--current) 9%,transparent)}
.list-row .lr-main{flex:1;min-width:0}
.list-row strong{display:block;font-size:16px;font-weight:600}
.list-row span{display:block;font-size:13px;color:var(--mist);margin-top:2px}
.pool{width:52px;height:52px;flex:none}.pool path{fill:var(--shallows);stroke:var(--seaglass);stroke-width:1.5}.pool text{font:400 15px var(--serif);fill:var(--ink)}

/* Scripps camera: La Jolla, kept apart from Laguna */
.camera-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.camera-place{font:italic 16px var(--serif);color:var(--mist);margin:0 0 20px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--deep);background:color-mix(in srgb,var(--sand) 75%,transparent);padding:5px 10px;border-radius:10px}
:root[data-theme=dark] .tag{color:#F1E6CF;background:#3B3A30}
#camera-heading{font-family:var(--serif);font-weight:400;font-size:28px;margin:12px 0 4px}
.camera-value{font-family:var(--serif);font-weight:300;font-size:52px;line-height:1}
.camera-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.camera-actions a,.camera-actions button{min-height:44px;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--current);text-decoration:none}
.camera-landmarks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.camera-landmark{border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;background:var(--panel)}
.camera-landmark strong{display:block;font-family:var(--serif);font-weight:400;font-size:22px}
.camera-landmark span,.camera-landmark small{display:block;font-size:12.5px;color:var(--mist)}
.camera-landmark[data-seen=true]{border-color:var(--current)}
.camera-piling{display:block;width:10px;height:36px;margin:0 auto 8px;border-radius:3px;background:var(--line)}
.camera-landmark[data-seen=true] .camera-piling{background:var(--current)}
.camera-history-heading{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--mist);margin:28px 0 8px}
.camera-history{display:grid;gap:6px}
.camera-history-item{display:grid;grid-template-columns:90px 1fr 60px;gap:12px;align-items:center;font-size:14px}
.camera-history-track{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.camera-history-track i{display:block;height:100%;width:var(--height);background:var(--current)}
.empty{font:italic 16px var(--serif);color:var(--mist)}

/* footer and dialog */
.wfoot{background:var(--b6);color:#A9CBCF;padding:44px 48px;font-size:15px}
.wfoot .wsec-inner{display:flex;gap:40px;justify-content:space-between;flex-wrap:wrap}
.wfoot a{color:#E2F1F0}
.wfoot p{max-width:62ch;margin:0 0 8px}
.wfoot button{color:#E2F1F0;text-decoration:underline;text-underline-offset:3px;min-height:40px}
dialog{border:0;border-radius:22px;padding:0;max-width:min(620px,calc(100vw - 32px));width:100%;background:var(--foam);color:var(--ink);box-shadow:0 30px 80px #06232E55}
dialog::backdrop{background:#06232E66}
.dialog-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}
.dialog-top .layer{margin:0}
#dialog-content{padding:4px 24px 26px}
#dialog-content h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:6px 0 10px}
#dialog-content p{max-width:60ch}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background-color .2s}
.icon-btn:hover{background:color-mix(in srgb,var(--deep) 8%,transparent)}
.source-row{border-top:1px solid var(--line);padding:12px 0}
.source-row p{margin:4px 0 0;color:var(--mist);font-size:14px}
.solid-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:14px;background:var(--deep);color:var(--foam);font-weight:600}
.camera-reference-list div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 0}
.plan-price{font-family:var(--serif);font-size:36px}

/* phones: the same column, stacked */
@media (max-width:980px){
  .wtop{padding:0 14px;gap:10px;justify-content:space-between}.wlinks .hide-small{display:none}.wplaces{display:none}
  .today-wrap{display:block}
  .today-hero{position:relative;top:0;--hh:600px;min-height:0}
  .hero-top{left:20px;right:20px;top:22px}.place-name{font-size:30px}
  .sky-line{top:96px;left:20px;right:70px;font-size:14px}
  .water-read,.water-stats,.scrub-caption{left:20px;right:20px}
  .water-temp{font-size:96px;letter-spacing:-3px}
  .water-stats{gap:22px;top:calc(var(--hh) * .52 + 110px)}.water-stats b{font-size:21px}
  .column{margin-top:-30px}
  .column-edge{display:block}
  .band{padding:22px 20px 28px 58px}.band::before{left:30px}.band .depth{left:20px;top:24px}
  .reading{font-size:44px}.summary-text{font-size:21px}.band h2{font-size:25px}
  .floor-links{grid-template-columns:1fr}
  .row2{gap:14px}
  .wsec{padding:44px 20px}.wsec h2{font-size:32px}
  .week,.coastsec,.camera-card{grid-template-columns:1fr}
  .camera-landmarks{grid-template-columns:repeat(2,1fr)}
  .thermo-note{right:20px}
  .wfoot{padding:36px 20px}
}
.column-edge{display:none;width:100%;height:36px;margin-bottom:-1px}
.column-edge path{fill:var(--b0)}
@media (max-width:420px){.scrub-hint{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}