:root{ --bg:#faf6ec; --bg-2:#f2ecdd; --card:#fff; --ink:#1c2b2a; --ink-2:#5a6559; --line:#eadfc7;
  --green:#1c2b2a; --green-d:#12211f; --footer:#162823; --accent:#d1774f; --accent-d:#a35130;
  --open:#2f7340; --advis:#946110; --closed:#bd3a2c; --beach:#2f7fb5;
  --sans:"Figtree",system-ui,sans-serif; --disp:"Schibsted Grotesk","Figtree",sans-serif; --mark:"Permanent Marker",cursive;
  --r:20px; --hdr:68px;
  /* teal = the ONE primary-action color (locked CTA roles); green = state fills; terracotta never a button */
  --teal:#277671; --teal-d:#1f5d5a; --unk:#9aa39a;
  /* legacy aliases so any un-rewritten inline var() stays on-brand */
  --paper:#f2ecdd; --sand:#eadfc7; --aqua:#7cb3bc; --open-tint:#e9f3ec;
  --r-card:16px; --r-ctrl:12px; --r-pill:999px; --sh-sm:0 1px 2px rgba(28,43,42,.05); }
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5;font-size:15.5px;-webkit-font-smoothing:antialiased}
/* overscroll + short-page canvas: cream above the page, footer-green below it */
html{background:var(--footer) linear-gradient(var(--bg) 50%,var(--footer) 50%) no-repeat fixed}
a{color:var(--accent-d);text-decoration:none}
.ic{width:1em;height:1em;flex:none;stroke-width:2}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px}

/* header / nav */
header.top{border-bottom:1px solid var(--line)}
.top .bar{max-width:1080px;margin:0 auto;padding:0 26px;display:flex;align-items:center;justify-content:space-between;height:var(--hdr)}
.brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.brand .logo{width:30px;height:30px;display:grid;place-items:center;color:var(--ink)}
.brand .logo svg{width:30px;height:30px}
.top .nav{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:600}
.top .nav a{color:var(--ink);opacity:.82}.top .nav a:hover{opacity:1}
.top .nav .joinbtn{color:#fff !important;opacity:1 !important;background:#277671;border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px}
.top .nav .joinbtn:hover{background:#1f5d5a}
@media(max-width:640px){.top .nav a.hidesm{display:none}}

/* breadcrumb + title */
.pgtop{display:flex;align-items:center;gap:14px;justify-content:space-between;margin:20px 0 16px}
.pgtop+.crumbs{display:block;margin:10px 0 10px}
.crumbs{font-size:13px;color:var(--ink-2)}.crumbs a{color:var(--ink-2)}.crumbs a:hover{text-decoration:underline}.crumbs .sep{opacity:.55;margin:0 4px}
.back{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;line-height:1.2;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px 9px 13px}.back:hover{border-color:#d3c9b4}.back .ic{width:16px;height:16px}
.titlerow{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
h1{font-family:var(--disp);font-size:clamp(32px,4.4vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.02;margin:0 0 8px}
.sub{font-size:16px;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sub .status{display:inline-flex;align-items:center;gap:6px;font-weight:800}
/* visible last-updated stamp (the freshness signal, lifted out of the tooltip/footer to near the top) */
.sub .fresh{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.sub .fresh .ic{width:13px;height:13px}
/* status dots — color always means "live state" (never used on plain facts) */
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block}
.dot.ok{background:var(--open);box-shadow:0 0 0 3px rgba(63,148,85,.20)}
.dot.warn{background:var(--advis);box-shadow:0 0 0 3px rgba(207,138,36,.20)}
.dot.bad{background:var(--closed);box-shadow:0 0 0 3px rgba(209,73,58,.18)}
.dot.unk{background:var(--unk);box-shadow:0 0 0 3px rgba(154,163,154,.20)}
.stx-ok{color:#2c6b3e}.stx-warn{color:#a06a17}.stx-bad{color:#a53527}.stx-unk{color:var(--ink-2)}
.act{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.2;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer}.act .ic{width:16px;height:16px}
.act:hover{border-color:#d3c9b4}

/* hero photo (+ the photo-count badge, same chip as the map panel) */
.imgbadge{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;background:rgba(20,30,25,.55);color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.imgbadge .ic{width:14px;height:14px}
.destphoto{position:relative;margin:16px 0 4px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8;background:#eef1ee}
.destphoto img{width:100%;height:100%;object-fit:cover;display:block}
.destphoto .credit{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px 14px 8px;font-size:10.5px;font-weight:600;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));text-align:right}
.destphoto.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#e9e1cf,#dcd3bd)}
.destphoto.ph svg{width:100%;height:100%;color:#9a8f74}

/* no-photo hero: category icon on a neutral sand tile matching the site — clearly a designed graphic, never a fake photo */
.destph{margin:16px 0 4px;border-radius:var(--r);aspect-ratio:16/8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  background:linear-gradient(160deg,#cfe0e6,#dfe9cf 60%,#e9dcc0);border:1px solid var(--line)}
.destph-ic{width:54px;height:54px;color:#8f846a}
.destph-ic svg{width:100%;height:100%}
.destph-lbl{font-family:var(--mark);font-size:17px;letter-spacing:.01em;color:var(--ink-2);opacity:.82;transform:rotate(-2deg)}

/* the page's ONE callout: the red unsafe-today card (amber/tips live in the facts + FAQ) */
.alert{display:flex;gap:13px;align-items:flex-start;border-radius:16px;padding:15px 18px;margin:18px 0 0;background:#fbeae7;border:1px solid #f0cdc5}
.alert .icw{flex:0 0 auto;margin-top:1px;color:var(--closed)}.alert .icw .ic{width:22px;height:22px}
.alert p{font-size:14.5px;font-weight:600;margin:0;color:#7c2a1f}
.alert.warn{background:#fbf2e2;border-color:#eeddb9}
.alert.warn .icw{color:var(--advis)}.alert.warn p{font-weight:500;color:#6d4a10}

/* Right now — ONE white band under the gallery: kicker + left-aligned segments, hairline dividers */
.rnband{display:flex;align-items:stretch;background:#fff;border-radius:14px;margin:20px 0 0;padding:14px 20px}
.rnband .kick{flex:0 0 auto;display:flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);padding-right:20px}
.rn{flex:1 1 auto;min-width:0;padding:2px 20px;border-left:1px solid var(--line)}
.rn .vrow{display:flex;align-items:center;gap:8px}
.rn .v{font-family:var(--disp);font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.rn .l{font-size:12px;color:var(--ink-2);margin-top:2px}
.rn.sk .bar{height:15px;width:64%;border-radius:6px;background:var(--line);animation:condpulse 1.15s ease-in-out infinite}
.rn.sk .bar.sm{height:9px;width:82%;margin-top:7px}
@keyframes condpulse{0%,100%{opacity:.45}50%{opacity:.85}}
@media(max-width:760px){.rnband{flex-direction:column;padding:16px 20px}.rnband .kick{padding:0 0 10px}
  .rn{padding:10px 0;border-left:0;border-top:1px solid var(--line)}.rnband .kick + .rn{border-top:0;padding-top:0}}
/* baked, indexable heading for the conditions band (SEO target "conditions at {place}"); live values still fill client-side */
.rnh{font-family:var(--disp);font-size:20px;font-weight:800;letter-spacing:-.02em;margin:26px 0 0}
.rnh + .rnband{margin-top:12px}
/* baked NOAA monthly water-temp climatology; a wide table that scrolls on narrow screens */
.wtwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.wtemp{border-collapse:collapse;font-size:14px;width:100%}
.wtemp caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wtemp th,.wtemp td{padding:9px 12px;text-align:center;white-space:nowrap}
.wtemp thead th{font-weight:800;color:var(--ink-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line)}
.wtemp tbody th{text-align:left;font-weight:800;color:var(--ink)}
.wtemp td{font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.wtsrc{font-size:12.5px;color:var(--ink-2);margin:12px 0 0}
/* "Plan your next visit" — open visual section deep in the page (after Common questions). Its job is
   dwell: season strips, tide curve, temp curve as visual anchors, one answer-line each, generous air,
   handing off into Nearby as the exit. The verdict line stays UP TOP with the band (a now-answer). */
.planv{font-size:15.5px;font-weight:600;line-height:1.55;margin:14px 0 0;max-width:66ch;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 18px}
.planx .pel{margin:26px 0 0}.planx .pel:first-of-type{margin-top:14px}
.planx .pk{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 5px}
.planx .pans{font-size:14.5px;font-weight:600;margin:0 0 10px;max-width:64ch}
.planx .pans.soft{color:var(--ink-2);font-weight:500}
/* now-state chip: a small baked pill on a seasonal fact (computed window vs build date). One per
   fact, only where a window parses; year-round and unparseable facts carry none. */
.nchip{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-top:7px;white-space:nowrap}
/* featured-day view: ONE large designed chart + a slim day-picker strip below it */
.featured{position:relative;margin-top:8px}
.scrub{font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px;min-height:21px;color:var(--ink)}
.scrub .soft{color:var(--ink-2);font-weight:600}
.fsvg{touch-action:pan-y}
.fsvg{width:100%;max-width:760px;height:auto;display:block}
.daytabs{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:4px;scrollbar-width:thin}
.dtab{flex:0 0 auto;min-width:74px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer;font-family:var(--sans)}
.dtab .dw{display:block;font-size:14px;font-weight:800}
.dtab .dt{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-top:2px}
.dtab.on{background:var(--green);border-color:var(--green)}
.dtab.on .dw,.dtab.on .dt{color:#fff}
.davg{position:absolute;top:-2px;right:0;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);border:1.5px dashed var(--line);border-radius:999px;padding:4px 10px;background:var(--bg);z-index:2}
.dattr{font-size:11.5px;color:var(--ink-2);margin:8px 0 0}
.subchart{margin-top:10px}
.subchart > summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--teal-d);list-style:none;padding:4px 0}
.subchart > summary::-webkit-details-marker{display:none}
/* scroll-revealed sticky bar (design-mock stickybar pattern): hidden at load — the page opens clean —
   then slides in with breadcrumb + section chips once the title row scrolls out of view */
.stickybar{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(250,246,236,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transform:translateY(-110%);transition:transform .18s ease}
.stickybar.show{transform:none}
.stickybar .sbrow{display:flex;align-items:center;justify-content:space-between;gap:18px;height:52px;max-width:1200px;margin:0 auto;padding:0 26px}
/* left zone: identity. Ancestors muted before the bolder place name; they collapse in stages
   (full -> "… › Hull ›" -> name alone). The name never goes. */
.sbid{flex:0 0 auto;max-width:40%;min-width:0;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
@media(max-width:640px){.sbid{max-width:52%}}
.sbid .anc,.sbid .dots{font-size:12.5px;font-weight:600;color:var(--ink-2);flex:none}
.sbid .anc a{color:var(--ink-2)}.sbid .anc a:hover{text-decoration:underline}
.sbid .dots{display:none}
.sbid .pname{font-family:var(--disp);font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1000px){.sbid .a1,.sbid .a2{display:none}.sbid .dots{display:inline}}
@media(max-width:640px){.sbid .a3,.sbid .dots{display:none}}
/* right zone: the chips read as buttons, not more breadcrumb. Right alignment comes from margin-left:auto
   on the first chip, NOT justify-content:flex-end — flex-end makes left-side overflow unscrollable, so on
   narrow screens the lit chip sat half-clipped against the place name. */
.secchips{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:7px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
.secchips a:first-child{margin-left:auto}
.secchips::-webkit-scrollbar{display:none}
.secchips a{flex:none;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--ink);background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:999px;white-space:nowrap}
.secchips a:hover{border-color:#d3c9b4}
.secchips a.on{color:#fff;background:var(--green);border-color:var(--green)}
/* icon-only share, far right: small glyph, full-size hit target; never collapses */
.sbshare{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);cursor:pointer}
.sbshare:hover{border-color:#d3c9b4}.sbshare .ic{width:17px;height:17px}
section[id],div[id="nearby"]{scroll-margin-top:75px}

/* the character line: the lede that opens the left column — the page's only prose */
.main > .desc{font-size:16.5px;line-height:1.6;color:var(--ink);max-width:62ch;margin:2px 0 26px}

/* body layout — keepband is a grid child (not part of .main) so the one-column collapse
   stacks main → map card → keepband; on desktop it still reads as the main column's last block */
.body{display:grid;grid-template-columns:1fr 360px;gap:46px;margin:32px 0 56px;align-items:start}
.body > .main{min-width:0}   /* grid min-width:auto would let the day carousel blow the column out instead of scrolling */
.body > .keepband{grid-column:1;margin:0}
@media(max-width:880px){.body{grid-template-columns:1fr}.side{position:static !important}.body > .keepband{grid-column:auto}}
h2{font-family:var(--disp);font-size:23px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.h2sub{font-size:14px;color:var(--ink-2);margin:0 0 20px}
section.blk{padding:26px 0;border-top:1px solid var(--line)}
section.blk:first-child{border-top:0;padding-top:6px}

/* 'What to expect': masonry columns — each column packs its facts tightly regardless of the
   other's heights (no row-aligned whitespace voids) */
.amen{columns:2;column-gap:26px}
@media(max-width:520px){.amen{columns:1}}
.am{display:flex;align-items:flex-start;gap:13px;break-inside:avoid;margin-bottom:18px}
/* long values clamp to ~3 lines with an INLINE "more" fused to the ellipsis ("…mid-June … more");
   expanded text ends with "less" in the same position. JS truncates at a word boundary only when a
   value measures past 3 lines; the full prose ships in the DOM regardless. */
.am .vtx{display:block}
.morelink{display:inline;background:none;border:0;padding:0;margin:0;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.morelink:hover{color:var(--ink)}
.am .icw{width:26px;flex:0 0 auto;color:var(--ink);margin-top:1px}.am .icw .ic{width:24px;height:24px}
.am .lab{font-size:12px;color:var(--ink-2);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.am .val{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.45}
.am .val .s{font-weight:500;color:var(--ink-2);font-size:13.5px}
.am .val a{color:var(--ink-2)}
.am.soft .icw{color:var(--ink-2)}.am.soft .val{font-weight:600;color:var(--ink-2)}
.unconf{font-size:12px;color:var(--advis);font-weight:600}

/* 'Getting in' — lots, access points; separators sit BETWEEN rows only */
.gihead{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:22px 0 4px}
.gihead:first-child{margin-top:0}
.lot{display:flex;gap:12px;align-items:flex-start;padding:14px 10px;border-radius:10px}
.lot + .lot{border-top:1px solid var(--line);border-top-left-radius:0;border-top-right-radius:0}
.lot .icw{flex:0 0 auto;color:var(--teal-d);margin-top:1px}.lot .icw .ic{width:20px;height:20px}
.lot .grow{min-width:0;flex:1}
.lot .t{font-size:15px;font-weight:800;letter-spacing:-.01em}
.lot .n{font-size:13.5px;color:var(--ink-2);margin-top:1px}
.lot.soft .icw{color:var(--ink-2)}.lot.soft .t{font-weight:600}
/* the repeatable lot fact strip: scans like a table row */
.lotfacts{display:flex;gap:22px;flex-wrap:wrap;margin-top:7px}
.lotfacts .lf{display:flex;flex-direction:column}
.lotfacts .lf .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.lotfacts .lf .v{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.lot .ext{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--teal-d);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 13px;margin-top:2px;background:#fff}
.lot .ext .ic{width:13px;height:13px}

/* 'Worth knowing': the sourced one-liners no field holds */
.worth{margin:0;padding-left:20px;display:grid;gap:8px}
.worth li{line-height:1.5}

/* 'What's here' facilities inventory */
.facgroup{margin-top:20px}
.facgroup:first-child{margin-top:4px}
.facgroup > h3{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.facil{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}
@media(max-width:560px){.facil{grid-template-columns:1fr}}
.fi{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.facil .fi:nth-child(-n+2){border-top:0}
@media(max-width:560px){.facil .fi:nth-child(2){border-top:1px solid var(--line)}}
.fi .icw{flex:0 0 auto;color:var(--teal-d);margin-top:1px}.fi .icw .ic{width:20px;height:20px}
.fi .t{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.fi .n{font-size:13px;color:var(--ink-2);margin-top:1px}

/* FAQ */
.qa{border-top:1px solid var(--line);padding:16px 2px}.qa:first-child{border-top:0}
.qa .q{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16.5px;font-weight:700;cursor:pointer}
.qa .q .ic{width:20px;height:20px;color:var(--ink-2);flex:0 0 auto;transition:transform .2s}
.qa.closed .q .ic{transform:rotate(-90deg)}
.qa .a{font-size:14.5px;color:var(--ink-2);margin:11px 0 0;max-width:64ch}
.qa.closed .a{display:none}

.srcnote{font-size:12px;color:var(--ink-2);line-height:1.5;margin:18px 0 44px}.srcnote a{color:var(--accent-d);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* 'Keep it current' — a visible call-out band, never behind a chevron */
.keepband{display:flex;gap:18px;align-items:flex-start;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin:34px 0 0}
.keepband .kic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--teal-d)}
.keepband .kic .ic{width:22px;height:22px}
.keepband h2{font-size:21px;margin:2px 0 4px}
.keepband p{font-size:14.5px;color:var(--ink-2);margin:0 0 14px;max-width:60ch}
.cbtns{display:flex;gap:10px;flex-wrap:wrap}
.cbtn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--ink);text-decoration:none}
.cbtn .ic{width:15px;height:15px;color:var(--teal-d)}

/* sticky plan card — wayfinding + the one teal primary; email capture arms to the state green */
/* The sticky bar is fixed at the viewport top and 53px tall (52 + its rule), so a plan card that
   sticks at 22px slides under it - the map loses its top edge and its zoom controls sit behind
   the chips. It only has to clear the bar while the bar is actually revealed, which is why this
   is a :has() rule and not a bigger constant: on a page short enough that the title row never
   scrolls away, the card keeps its original 22px. */
.side{position:sticky;top:22px}
body:has(.stickybar.show) .side{top:75px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 48px -26px rgba(20,30,25,.5);overflow:hidden}
.plan .pmap{height:240px;background:#dfe9e6;position:relative}
.pctrls{position:absolute;top:12px;right:12px;z-index:3;display:flex;flex-direction:column;gap:8px}
.pctrls button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);box-shadow:0 8px 28px -12px rgba(20,30,25,.4);cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0}
.pctrls button:hover{background:#fff}
.pctrls button svg{width:19px;height:19px;display:block}
.plan .in{padding:20px}
.planbtn{display:block;text-align:center;background:var(--teal);color:#fff;font-weight:800;font-size:15.5px;border-radius:999px;padding:14px;text-decoration:none}
.planbtn:hover{background:var(--teal-d)}
.planbtn.alt{background:#fff;color:var(--teal-d);border:1.5px solid var(--teal);padding:12.5px;margin-top:10px;display:none}
.planbtn.alt:hover{background:#f2f9f8}
/* launch tier: collect-only waitlist capture (nothing sends yet); focus + armed states are locked.
   Linear like the homepage: email, then the optional where-line, then the button LAST — so the
   eye passes the optional question before the submit (a fast submit can't skip it unseen). */
/* the standard capture block: divider (with air) -> header -> inputs -> button -> status line */
.caphead{font-size:13.5px;font-weight:600;color:var(--ink-2);text-align:left;margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.capstatus{display:none;font-size:12.5px;color:var(--ink-2);text-align:left;margin:8px 0 0}
.capstatus.show{display:block}
.emailcap{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.emailcap input{width:100%;box-sizing:border-box;min-width:0;font:inherit;font-size:13.5px;color:var(--ink);padding:11px 15px;border:1px solid var(--line);border-radius:999px;background:#fff}
.emailcap input::placeholder{color:#a8a08b}
.emailcap input:focus{outline:none;border-color:var(--teal)}
.emailcap button{font:inherit;font-size:13.5px;font-weight:700;padding:11px 18px;border-radius:999px;border:1.5px solid var(--teal);background:#fff;color:var(--teal-d);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.emailcap button:hover{background:#f2f9f8}
.emailcap.armed button{background:var(--green);border-color:var(--green);color:#fff}
/* the optional expansion-vote line: unfolds when the email field is engaged, rides the same submit */
.emailwhere{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease}
.emailwhere.show{max-height:64px;opacity:1}
.emailwhere input{width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:var(--ink);padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:#fff}
.emailwhere input::placeholder{color:#a8a08b}
.emailwhere input:focus{outline:none;border-color:var(--teal)}
@media(max-width:700px){.emailcap input,.emailwhere input{font-size:16px}}  /* <16px focus-zooms the page on phones */
@media (prefers-reduced-motion:reduce){.emailwhere{transition:none}}
.visits{font-size:13px;color:var(--ink-2);text-align:center;margin:12px 0 0}

/* nearby */
.near{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.near{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.near{grid-template-columns:1fr}}
.nc{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
.nc .img{height:96px}.nc .img.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#e9e1cf,#dcd3bd);color:#9a8f74}.nc .img.ph svg{width:34px;height:34px}
.nc .in{padding:12px 14px}.nc .t{font-weight:800;font-size:15px}.nc .m{font-size:12.5px;color:var(--ink-2);margin-top:2px}

/* footer */
footer.site{background:var(--footer);color:#aebfb5;padding:30px 0;font-size:13.5px}
footer.site .wrap{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}
footer.site a{color:#dde8e1;text-decoration:none}
footer.site .fbrand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:17px;color:#fff}
footer.site .fbrand .flogo{width:26px;height:26px;color:#dde8e1;display:grid;place-items:center}
footer.site .fbrand .flogo svg{width:26px;height:26px}
footer.site .fnav{display:flex;gap:20px;font-weight:600}
footer.site .fnav a:hover{color:#fff}
footer.site .fcopy{margin-left:auto;color:#8ca293;font-size:12.5px}
@media(max-width:640px){footer.site .fcopy{margin-left:0;flex-basis:100%}}
.beta{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid #3a4f48;border-radius:5px;padding:2px 7px;margin-right:7px;color:#c7d3c9}

/* ── list pages: hubs / type + town indexes / closed-today ── */
.listwrap{max-width:900px;margin:0 auto;padding:22px 26px 48px}
.listhead{padding:30px 0 6px}
.listhead h1{margin:8px 0 6px}
.listhead .lead{font-size:16px;color:var(--ink-2);font-weight:500;max-width:60ch}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;cursor:pointer}
/* Teal, not terracotta (2026-08-17, TD-095). White on the accent was 3.24:1, the worst pair left on
   the site - and this rule was already breaking the token block's own line at the top of this
   stylesheet: "teal = the ONE primary-action color (locked CTA roles); terracotta never a button".
   The fix is the rule the file already stated, so the hub CTA now matches the nav's Join button and
   the place pages' Plan button instead of being a third opinion. */
.btn-primary{background:var(--teal);color:#fff}.btn-primary:hover{background:var(--teal-d)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn .ic{width:16px;height:16px}
.tlist{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:20px}
.tlist li{display:flex;align-items:center;gap:12px;padding:15px 20px;border-top:1px solid var(--line);font-size:16px;font-weight:600}.tlist li:first-child{border-top:0}
.tlist li a{color:var(--ink)}.tlist .dot{width:10px;height:10px;border-radius:50%;flex:none}
.tlist .rt{margin-left:auto;color:var(--ink-2);font-size:13px;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:22px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;color:var(--ink)}.tcard:hover{box-shadow:0 12px 28px -20px rgba(20,30,25,.5)}.tcard .n{font-weight:800;font-size:17px;letter-spacing:-.01em}.tcard .m{font-size:13px;color:var(--ink-2);margin-top:3px}
/* guides row: the hubs' links INTO the fact-family list pages */
.guides{margin-top:38px}
.guides h2{font-family:var(--disp);font-size:19px;font-weight:900;letter-spacing:-.02em;margin:0}
.guides .btnrow{margin-top:12px}
/* fact-family list pages (e.g. dog-friendly beaches near Boston): tiers of place-name anchors, each with its rule */
.lp-tier{margin-top:34px}
.lp-tier h2{font-family:var(--disp);font-size:21px;font-weight:900;letter-spacing:-.02em;margin:0}
.lp-tier .tnote{color:var(--ink-2);font-size:14px;font-weight:500;margin:5px 0 0;max-width:64ch}
.lp-list{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:14px}
.lp-list li{display:flex;align-items:baseline;gap:13px;padding:15px 20px;border-top:1px solid var(--line)}.lp-list li:first-child{border-top:0}
.lp-list .dot{position:relative;top:4px;flex:none}
.lp-list a{color:var(--ink);font-weight:800;font-size:16px;flex:none}.lp-list a:hover{text-decoration:underline}
.lp-list .rule{color:var(--ink-2);font-size:14px;font-weight:500;margin-left:auto;text-align:right;max-width:58%}
@media(max-width:620px){.lp-list li{flex-wrap:wrap}.lp-list .rule{margin-left:23px;text-align:left;max-width:100%}}
.listfoot{color:var(--ink-2);font-size:12.5px;line-height:1.6;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);max-width:74ch}
.listfoot .beta{color:var(--ink-2);border-color:var(--line)}

/* ── state hub: category browse ── */
.hub{max-width:1120px;margin:0 auto;padding:0 26px 40px}
.hero{padding:46px 0 30px}
.hero .eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d)}
.hero h1{font-family:var(--disp);font-size:clamp(38px,6vw,68px);margin:12px 0 0;letter-spacing:-.035em;line-height:.98}
.hero .lead{font-size:clamp(15px,1.7vw,18px);color:var(--ink-2);font-weight:500;margin:16px 0 0;max-width:56ch;line-height:1.5}
.hero .cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;background:var(--green);color:#fff;font-weight:700;font-size:15px;padding:13px 22px;border-radius:999px}
.hero .cta:hover{background:var(--green-d)}.hero .cta .ic{width:16px;height:16px}
/* white category cards, matching the homepage (site/index.html) .catcard exactly */
.catgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
@media(max-width:900px){.catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.catcard{position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;color:var(--ink);box-shadow:0 1px 2px rgba(28,43,42,.03),0 12px 26px -22px rgba(28,43,42,.4);transition:transform .2s cubic-bezier(.2,.7,.3,1),background .2s,color .2s,border-color .2s}
.catcard:hover{transform:translateY(-4px);background:var(--green);color:#fff;border-color:transparent}
.catcard .ci svg{width:44px;height:44px;display:block;color:var(--accent-d);stroke-width:2}
.catcard:hover .ci svg{color:#f3d3c1}
.catcard .cbot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.catcard .cn{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.catcard .cc{font-size:12.5px;font-weight:600;opacity:.7;margin-top:2px}
.catcard .cc b{font-weight:800;opacity:1}
.catcard .arr{font-size:20px;font-weight:900;color:var(--accent)}
.catcard:hover .arr{color:#f3d3c1}
.hubfoot{color:var(--ink-2);font-size:12px;line-height:1.6;margin-top:42px;padding-top:18px;border-top:1px solid var(--line)}
.hubfoot .beta{color:var(--ink-2);border-color:var(--line)}
@media(max-width:560px){.hero{padding:34px 0 24px}.catgrid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}.catcard .cover .ic{width:42px;height:42px}}