/* [surf] Surf Outlook (/surf). Matches the [grow-theme] look with an ocean palette. */
.sf-hero{position:relative;overflow:hidden;display:flex;gap:18px;align-items:center;margin:14px 0 18px;padding:24px 24px 20px;border-radius:18px;color:#eef7fb;border-bottom:0;background:radial-gradient(120% 140% at 0% 0%,#1b7fa6 0%,#0f5f83 40%,#0a3d5c 72%,#001738 100%);box-shadow:0 6px 22px rgba(0,23,56,.18)}
.sf-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,206,84,.32),rgba(255,206,84,0) 70%);pointer-events:none}
.sf-hero .sf-mark{width:72px;height:72px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.sf-hero .sf-ht{position:relative;z-index:1;min-width:0}
.sf-hero h1{color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,5vw,44px);line-height:1.1;margin:0 0 8px}
.sf-hero .dek.big{color:#dcecf3;font-size:clamp(16px,2.2vw,19px);line-height:1.5;margin:0 0 8px;max-width:62ch}
.sf-hero .meta{color:#a9cbdb;margin:0;font-size:.85rem}
.sf-rip{border-radius:16px;padding:12px 18px;margin:16px 0;border:2px solid #b8c2cc;background:#f4f6f8}
.sf-rip h2{margin:4px 0 6px;font-size:1.3rem}
.sf-rip-high{background:#fdecea;border-color:#c62828}.sf-rip-high h2{color:#9b1c1c}
.sf-rip-moderate{background:#fff6e0;border-color:#d4a017}.sf-rip-moderate h2{color:#7a5200}
.sf-rip-low{background:#eaf6ea;border-color:#4f8f45}.sf-rip-low h2{color:#1f5e1f}
.sf-heads{margin:4px 0 8px;padding-left:20px;font-weight:700}
.sf-ripsafe{font-size:.92rem;line-height:1.5;margin:6px 0 4px}
.sf-now,.sf-how{background:linear-gradient(180deg,#f1f7fa,#eaf3f7);border:1px solid #cfe2ea;border-radius:16px;padding:8px 18px 16px;margin:16px 0}
.sf-bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.sf-buoy{background:#fff;border-radius:14px;padding:10px 14px;border:1px solid #dbe7ee;box-shadow:0 1px 3px rgba(0,23,56,.05)}
.sf-buoy h3{margin:2px 0 8px;font-size:1.05rem}
.sf-ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.sf-o{background:#f7fbfd;border-radius:12px;padding:8px 10px;border:1px solid #e1edf3;border-top:3px solid #1b7fa6}
.sf-o b{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#0f5f83}
.sf-o span{display:block;font-size:1.2rem;font-weight:700;color:#001738;margin:2px 0}
.sf-o small{display:block;color:#555;font-size:.78rem;line-height:1.3}
.sf-stale{display:block;color:#a04f00;font-weight:600}
.sf-tides{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:8px 0}
.sf-tide{border-radius:14px;padding:10px 12px;background:#fff;border:1px solid #e1e6ec;box-shadow:0 1px 3px rgba(0,23,56,.05)}
.sf-tide b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.sf-tide span{display:block;font-size:1.1rem;font-weight:700;color:#001738}
.sf-tide small{color:#555}
.sf-tide-h{border-top:3px solid #0f5f83}.sf-tide-l{border-top:3px solid #9bb7c6}
.sf-spots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:16px;margin:10px 0 12px}
.sf-spot{border:1px solid #e1e6ec;border-radius:16px;background:#fff;padding:12px 16px 14px;box-shadow:0 2px 10px rgba(0,23,56,.06);min-width:0}
.sf-sh h3{font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;color:#0a3d5c;margin:2px 0 2px}
.sf-sh .small{margin:0 0 6px}
.sf-today{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.sf-b{font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:999px;background:#eef1f5;color:#223}
.sf-rip-b-high{background:#c62828;color:#fff}.sf-rip-b-moderate{background:#f3c64a;color:#3d2b00}.sf-rip-b-low{background:#2f7d32;color:#fff}
.sf-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sf-day{border-radius:12px;padding:8px 6px;text-align:center;background:#f6f7f9;border:1px solid #e6e9ee;min-width:0}
.sf-day b{display:block;font-size:.74rem;color:#334}
.sf-day em{display:block;font-style:normal;font-weight:800;font-size:1.02rem;margin:3px 0}
.sf-day span{display:block;font-size:.8rem;font-weight:600;color:#001738}
.sf-day small{display:block;font-size:.7rem;color:#555;line-height:1.25;margin-top:2px}
.sf-r-good{background:#dff1dc;border-color:#b9dcb3}.sf-r-good em{color:#1f5e1f}
.sf-r-fair{background:#fff4d1;border-color:#f0dc9a}.sf-r-fair em{color:#6b4e00}
.sf-r-poor{background:#f1f3f6}.sf-r-poor em{color:#6a7380}
.sf-eat{margin-top:12px;border-top:1px solid #edf0f3;padding-top:8px}
.sf-eat h4{margin:2px 0 6px;font-size:1rem;color:#0a3d5c}
.sf-meals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sf-meal h5{margin:0 0 4px;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#a06a00}
.sf-meal ul{list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.4}
.sf-meal li{margin:0 0 5px}
.sf-nws{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;margin:8px 0}
.sf-seg{border:1px solid #e3e7ec;border-radius:14px;padding:10px 14px;background:#fff;border-top:3px solid #1b7fa6}
.sf-seg h3{margin:2px 0 4px;font-size:1.05rem}
.sf-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:.88rem;margin:6px 0}
.sf-dl dt{font-weight:700;color:#0f5f83}.sf-dl dd{margin:0}
.sf-how ul{padding-left:20px;line-height:1.5}.sf-src{font-size:.8rem;color:#555}
@media (max-width:760px){.sf-hero{padding:18px 16px 16px;border-radius:14px;gap:12px;align-items:flex-start}.sf-hero .sf-mark{width:48px;height:48px}.sf-bgrid{grid-template-columns:1fr}}
@media (max-width:560px){.sf-days{grid-template-columns:repeat(3,minmax(0,1fr))}.sf-meals{grid-template-columns:1fr}.sf-dl{grid-template-columns:1fr}.sf-dl dd{margin-bottom:6px}}