/* GENERATED — do not edit. Source: src/css/styles.css
   This file is the NON-CRITICAL remainder: everything from the "Long-form content" marker
   onward. The above-the-fold rules that precede it are inlined into each page's <head> as
   <style id="gv-critical"> by scripts/inject-critical-css.mjs, so nothing ships twice. */
/* ---------- Long-form content ---------- */

/* TIMELINE DOT — one component for the two story chronologies (review 6.13 step 4).
   /missionary-ridge-fire had .mr-dot and /october-flood had .ft-dot: the same absolutely
   positioned round marker with a card-coloured ring and a --line halo, differing only in
   size, left offset and colour. Those three ride on custom properties so each page keeps
   exactly what it had — 13px/#c58133 at left:1px, and 14px/#e8a11a at left:2px — and a
   single dot can be re-coloured in place (the "big one" entry on Missionary Ridge). */
.tl-dot{position:absolute;left:var(--tl-dot-x,2px);top:5px;
  width:var(--tl-dot-size,14px);height:var(--tl-dot-size,14px);border-radius:50%;
  background:var(--tl-dot-color,#e8a11a);border:2px solid var(--card,#fff);box-shadow:0 0 0 1px var(--line)}

.prose{max-width:68ch;margin-left:auto;margin-right:auto;font-size:1.0625rem;line-height:1.6}
.prose h3{font-size:var(--step-1);margin:var(--s5) 0 var(--s2)}
.prose h4{font-size:var(--step--1);margin:var(--s5) 0 var(--s1);text-transform:uppercase;letter-spacing:var(--track-caps);color:var(--ink-soft);font-weight:700}
.prose p{margin:var(--s2) 0}
.prose ul{margin:var(--s2) 0;padding-left:var(--s4)}
.prose li{margin:var(--s1) 0}
.prose a{text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(44,127,149,.4)}
.prose a:hover{text-decoration-color:var(--lake)}
.prose li::marker{color:var(--lake-text)}
.prose p,.prose li,.sec-lead{text-wrap:pretty}
h1,h2,h3,.sec-title,.tile h3{text-wrap:balance}
.anchor-offset{scroll-margin-top:80px}

/* Anchor offset while the full-width fire-ban banner (.alertbar, red/amber) is showing.
   The alertbar is now a SEPARATE second header row BELOW the always-present slim strip,
   so the sticky header is taller than the old banner-only mode (slim strip + banner
   together, ~30px more). Keyed on body:has(.alertbar) so a jumped-to anchor clears both
   rows; the normal slim condbar already clears the default offsets, so no-banner behavior
   is unchanged. env() absorbs the notch inset the header adds on mobile. */
body:has(.alertbar) [id]{scroll-margin-top:calc(160px + env(safe-area-inset-top, 0px))}
/* Jumpnav pages: the jumpnav stacks BELOW the header on banner days (see the .jumpnav
   rule), so a jumped-to anchor must clear header + jumpnav TOGETHER. Scoped with
   :has(.jumpnav) so non-jumpnav pages keep the smaller header-only offset. The jumpnav
   wraps to several rows on phones, hence the larger mobile value. */
body:has(.alertbar):has(.jumpnav) [id]{scroll-margin-top:calc(200px + env(safe-area-inset-top, 0px))}
@media(max-width:560px){
  body:has(.alertbar):has(.jumpnav) [id]{scroll-margin-top:calc(278px + env(safe-area-inset-top, 0px))}
}

/* generic two-column data list (gauges, regs, etc.) */
.datalist{list-style:none;margin:0;padding:0}
.datalist li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.datalist li b{color:var(--pine);white-space:nowrap}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:var(--step--1h)}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.tbl th{background:var(--sand-2);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}

/* ---------- 5-day forecast row — tap any day for the NWS day/night narrative
   (same click-to-expand mechanism as the /forecast page's 7-day cards) ---------- */
.forecast{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.fc{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.fc summary{padding:10px;text-align:center;display:flex;flex-direction:column;gap:3px;cursor:pointer;list-style:none}
.fc summary::-webkit-details-marker{display:none}
.fc summary::after{content:"▸ tap";color:var(--ink-faint);font-size:var(--step--2);margin-top:2px}
.fc[open] summary::after{content:"▾ close"}
.fc summary b{font-size:var(--step--1)}
.fc .fc-date{display:block;font-weight:600;font-size:var(--step--2);color:var(--ink-soft)}
.fc-ico{font-size:1.3rem}
.fc-hi{font-weight:700;color:var(--pine)}
.fc-lo{font-size:var(--step--1);color:var(--ink-soft)}
.fc-body{padding:8px 10px 12px;margin-top:-2px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:var(--step--1);line-height:1.5;text-align:left}
.fc-body p{margin:0 0 6px}
.fc-body p:last-child{margin-bottom:0}
.fc-body b{color:var(--ink)}
@media(max-width:560px){.forecast{grid-template-columns:repeat(3,1fr)}}

/* ---------- fire-restriction banner ---------- */
.restriction-banner{border-radius:var(--r-m);padding:12px 16px;margin:0 0 18px;border:1px solid}
.restriction-banner.is-warn{background:#fcefda;border-color:#e7cf86;color:var(--warn-ink)}
.restriction-banner.is-danger{background:#fae6e3;border-color:#e3b3ab;color:var(--danger-ink)}

/* fire-restriction detail card (data-driven from restrictions.json) */
.restriction-detail{margin:6px 0 4px}
.restriction-card{border:1px solid;border-radius:var(--radius);padding:16px 18px}
.restriction-card.is-warn{background:#fcefda;border-color:#e7cf86}
.restriction-card.is-orange{background:#fde7d3;border-color:#e0a86a}
.restriction-card.is-danger{background:#fae6e3;border-color:#e3b3ab}
.restriction-card.is-ok{background:#e6f3ec;border-color:#bcdcc8}
.rc-head{font-weight:700;font-size:var(--step-1);color:var(--ink)}
.rc-meta{color:var(--ink-soft);font-size:var(--step--1h);margin:4px 0 10px}
.rc-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0}
.rc-cols h3,.rc-cols h4{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;color:var(--ink)}
.rc-cols ul{margin:0;padding-left:18px}
.rc-cols li{margin:3px 0}
.rc-penalty{font-weight:700;margin:8px 0}
.rc-verify{display:inline-block;background:#fff6e6;border:1px solid #e7cf86;border-radius:var(--r-s);padding:6px 10px;color:var(--warn-ink);font-weight:600;font-size:var(--step--1h)}
.rc-verify a{font-weight:700}
.rc-links{margin-top:10px;border-top:1px solid rgba(20,30,24,.1);padding-top:10px;display:flex;flex-direction:column;gap:4px}
.rc-links h4{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:2px}
@media(max-width:560px){.rc-cols{grid-template-columns:1fr}}

/* ---------- conditions sub-grid blocks ---------- */
.databand{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.databand .panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.databand .panel h3{font-size:var(--step-1);display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.kv{display:flex;gap:18px;flex-wrap:wrap;margin:6px 0}
.kv div b{display:block;font-size:var(--step-2);color:var(--pine)}
.kv div span{font-size:var(--step--1);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
@media(max-width:720px){.databand{grid-template-columns:1fr}}

/* trusted sources groups */
.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.sources .grp{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.sources .grp h3,.sources .grp h4{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.06em;color:var(--lake-text);margin-bottom:8px}
.sources .grp a{display:block;padding:3px 0}
@media(max-width:720px){.sources{grid-template-columns:1fr}}

/* ---------- directory ---------- */
/* R32: small dismissible map-tiles note (above the map, not a takeover) */
.map-note-warn{display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:#fcefda;border:1px solid #e7cf86;border-radius:var(--r-m);padding:8px 13px;margin:0 0 12px;
  font-size:var(--step--1);color:var(--ink)}
.map-note-warn button{flex:none;background:none;border:0;font-size:1.25rem;line-height:1;cursor:pointer;
  color:var(--ink-soft);padding:0 4px}
.map-note-warn button:hover{color:var(--pine)}

/* R31: Middle Mountain map layer legend */
#mmLegend{display:flex;flex-wrap:wrap;gap:var(--s4);margin:4px 0 12px;font-size:var(--step--1);color:var(--ink-soft)}
.mm-leg{display:inline-flex;align-items:center;gap:6px}
.mm-leg i{width:18px;height:4px;border-radius:var(--r-s);display:inline-block}

/* R29: "Old-timer's rule of thumb" callout aside (Living Here guides) */
.oldtimer{border:1px solid var(--line);border-left:4px solid var(--pine);background:var(--sand-2);
  border-radius:var(--r-m);padding:13px 16px;margin:18px 0}
.oldtimer .ot-h{font-weight:700;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em;color:var(--pine);margin-bottom:3px}
.oldtimer p{margin:0;color:var(--ink)}
/* R59: "Local pick" — a neighbor's recommendation of a featured partner, woven inline
   into content prose. Reuses the .oldtimer callout family (left accent + uppercase
   eyebrow); teal accent, no shadow, compact ~420px. The name always links to the
   partner's full listing page. */
.localpick{border:1px solid var(--line);border-left:4px solid var(--lake);background:var(--sand-2);
  border-radius:var(--r-m);padding:12px 15px;margin:18px 0;max-width:420px;box-shadow:none}
.localpick .lp-h{font-weight:700;font-size:var(--step--2);text-transform:uppercase;letter-spacing:.05em;color:var(--lake-text);margin:0 0 3px}
.localpick .lp-name{display:inline-block;font-weight:800;font-size:1.02rem;color:var(--pine);line-height:1.2;text-decoration:none}
.localpick .lp-name:hover{color:var(--lake-text);text-decoration:underline}
.localpick p{margin:4px 0 0;color:var(--ink);font-size:var(--step--1h);line-height:1.45}
.localpick .lp-tel{display:inline-block;margin-top:7px;font-weight:700;color:var(--lake-text);font-size:var(--step--1h)}

/* R30: Middle Mountain route table — vehicle-class clarity */
.route-tbl td .who{font-weight:700;white-space:nowrap}

/* R28: guide cards (two-hop to the directory) */
.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:6px}
.guide-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 12px;
  border:1px solid var(--line);border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.guide-card:hover{border-color:var(--pine);transform:translateY(-1px)}
.guide-card .glogo{width:100%;height:88px;object-fit:contain}
.guide-card .gph{width:88px;height:88px;display:flex;align-items:center;justify-content:center;font-size:2.4rem;
  background:var(--sand-2);border-radius:var(--r-m)}
.guide-card h3{font-size:1rem;margin:0}
.guide-card .gline{font-size:var(--step--1);color:var(--ink-soft)}
.guide-card .gtel{font-weight:700;color:var(--pine);font-size:var(--step--1h)}
@media(max-width:820px){.guide-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.guide-grid{grid-template-columns:1fr}}

/* R28: fishing — species selector buttons + inline PD illustration plates */
.fish-select{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:6px 0 22px}
.fish-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--line);
  border-radius:var(--r-m);background:#fff;text-decoration:none;color:var(--ink);text-align:center;font-size:var(--step--1);font-weight:700}
.fish-btn img{width:100%;height:52px;object-fit:contain}
.fish-btn:hover{border-color:var(--pine);box-shadow:var(--shadow);transform:translateY(-1px)}
@media(max-width:820px){.fish-select{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.fish-select{grid-template-columns:repeat(2,1fr)}}
.fish-thumb{float:right;width:190px;max-width:42%;margin:2px 0 8px 16px;border:1px solid var(--line);
  border-radius:var(--r-m);background:#fff}
@media(max-width:560px){.fish-thumb{float:none;display:block;width:100%;max-width:none;margin:6px 0 10px}}

/* R26: "Respect Vallecito" stewardship asks — 2-up cards that reuse .ecard */
.asks{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:6px}
.asks .ecard h3{font-size:var(--step-1)}
.asks .ecard .src{margin-top:auto;font-size:var(--step--1);color:var(--ink-soft)}
.asks .ecard .src a{color:var(--ink-soft);text-decoration:underline}
.asks .ecard .src a:hover{color:var(--pine)}
@media(max-width:760px){.asks{grid-template-columns:1fr}}

/* R25: tap-to-call local-contacts card pinned atop the directory */
.loc-contacts{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow);margin-bottom:22px}
.loc-contacts h2{font-size:var(--step-1);margin:0 0 var(--s1)}
.loc-contacts .grid-call{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 10px}
.loc-contacts .grid-call a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--sand-2);color:var(--ink);text-decoration:none}
.loc-contacts .grid-call a span{font-size:var(--step--1);color:var(--ink-soft)}
.loc-contacts .grid-call a b{font-size:1rem;color:var(--pine)}
.loc-contacts .grid-call a.is-emerg{background:#fae6e3;border-color:#e3b3ab}
.loc-contacts .grid-call a.is-emerg b{color:#b3261e}
.loc-contacts .grid-call a:hover{border-color:var(--pine)}
@media(max-width:640px){.loc-contacts .grid-call{grid-template-columns:repeat(2,1fr)}}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.filters button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:600;
  font-size:var(--step--1h);cursor:pointer;color:var(--ink-soft)}
.filters button.active,.filters button:hover{background:var(--pine);color:#fff;border-color:var(--pine)}
.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.lcard{border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;gap:5px}
.lcard.feat{border-color:var(--lake);box-shadow:0 0 0 2px rgba(44,127,149,.15),var(--shadow)}
.lcard .cat{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.06em;color:var(--lake-text);font-weight:700}
.lcard h3{font-size:var(--step-1)}
.lcard .star{color:var(--warn)}
@media(max-width:820px){.listing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.listing-grid{grid-template-columns:1fr}}
.pimg img.zoomable,.pstrip img.zoomable{cursor:zoom-in;transition:opacity .15s}
.pimg img.zoomable:hover,.pstrip img.zoomable:hover{opacity:.92}
.pimg img.zoomable:focus-visible,.pstrip img.zoomable:focus-visible{outline:3px solid var(--lake);outline-offset:2px}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(18,22,20,.92)}
.lightbox.open{display:flex}
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:94vw}
.lightbox img{max-width:92vw;max-height:84vh;border-radius:var(--r-s);box-shadow:0 12px 48px rgba(15,40,42,.55);background:#fff}
.lb-cap{color:#f1efe9;font-size:var(--step--1);text-align:center;max-width:60ch}
.lb-close,.lb-nav{position:absolute;top:50%;transform:translateY(-50%);border:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;border-radius:999px;line-height:1;display:flex;align-items:center;justify-content:center}
.lb-nav{width:52px;height:52px;font-size:2rem}
.lb-prev{left:18px}.lb-next{right:18px}
.lb-close{top:18px;right:18px;transform:none;width:44px;height:44px;font-size:1.6rem}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:3px solid var(--lake-2);outline-offset:2px}
@media(max-width:560px){.lb-nav{width:42px;height:42px;font-size:var(--step-2)}.lb-prev{left:8px}.lb-next{right:8px}}

/* ---------- Carousel — the partner slideshow (review 8.1) ----------
   One component for what used to be three near-identical copies: .rd- (rubber-duck),
   .jkc- (johnnies) and .vrs- (vr-solutions), each with its own CSS block and its own
   inline <script>. The skeleton, the 44x44 dot hit areas (finding 1.13) and the JS
   (public/assets/js/carousel.js) are shared; the SKIN is not. Every value the three
   pages disagreed on is a custom property with the johnnies/vr-solutions value as its
   default, so those two declare almost nothing and rubber-duck keeps its own palette —
   including its blue idle dot, which is David's decision, not an oversight.

   Page-local by design and NOT part of this component: .rd-badge, .rd-bubbles,
   .rd-hint, .vrs-tag, .vrs-label. They are brand decoration that happens to sit on top
   of a carousel. */
.carousel{position:relative;max-width:var(--car-max,820px);margin:0 auto var(--car-gap,6px);
  border-radius:var(--car-radius,14px);overflow:hidden;background:var(--car-bg,#0e1413);
  border:1px solid var(--car-border,var(--line));box-shadow:var(--car-shadow,var(--shadow))}
.carousel-stage{position:relative;width:100%;aspect-ratio:4/3;background:var(--car-stage,#0e1413)}
.carousel-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--car-fade,.6s) ease;pointer-events:none}
.carousel-slide.on{opacity:1;pointer-events:auto}
/* NO img sizing here, deliberately. johnnies and vr-solutions fill the frame; rubber-duck floats
   a framed print on a blue field. More to the point, an <img> with width/height ATTRIBUTES
   carries them as presentational hints, so a shared `width:100%;height:100%` here is not a
   neutral default — it changes the used size of any slide that was relying on those hints.
   Sizing is a skin decision; each page states its own. (Measured during 8.1: adding it moved
   rubber-duck's slide from 733x550 to 733x489.) */
/* opt-in: clicking the picture advances. Pages whose slides open a lightbox must NOT set it. */
.carousel[data-advance-on-click] .carousel-slide{cursor:pointer}
.carousel-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px var(--car-cap-x,14px) 12px;
  color:#fff;font-weight:600;font-size:var(--step--1h);text-align:center;
  background:var(--car-cap-bg,linear-gradient(to top,rgba(8,16,14,.85),rgba(8,16,14,0)))}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border:none;
  border-radius:999px;background:rgba(255,255,255,.85);color:var(--car-ink,#143a2f);
  font-size:var(--car-nav-size,1.7rem);line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;box-shadow:0 3px 10px var(--car-nav-shadow,rgba(0,0,0,.25));
  transition:background .15s,transform .15s}
.carousel-nav:hover{background:#fff;transform:translateY(-50%) scale(var(--car-nav-scale,1.07))}
.carousel-nav:focus-visible{outline:3px solid var(--lake);outline-offset:2px}
.carousel-prev{left:12px}.carousel-next{right:12px}
/* The dot is 44x44 of TARGET with the paint clipped to the content box — the padding is the
   hit area, not whitespace around a small button (finding 1.13). Do not shrink width/height
   to make the dot look smaller; raise --car-dot-pad instead. */
.carousel-dots{display:flex;gap:0;justify-content:center;align-items:center;padding:0;flex-wrap:wrap}
.carousel-dot{width:44px;height:44px;box-sizing:border-box;border-radius:999px;border:none;cursor:pointer;
  transition:transform .15s,background .15s;background:var(--dot-idle,#c4cdc9);background-clip:content-box;
  padding:var(--car-dot-pad,17px)}
.carousel-dot.on{background:var(--dot-active,var(--pine));background-clip:content-box;transform:scale(1.35)}
/* --ken: rubber-duck's Ken Burns treatment. Slides drift in from the right, out to the left,
   and the resting slide creeps in scale. Nothing else on the site uses it. */
.carousel--ken .carousel-slide{transform:scale(1.06) translateX(7%);will-change:opacity,transform;
  transition:opacity .7s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.carousel--ken .carousel-slide.on{transform:scale(1) translateX(0);animation:carKen 6s ease-out forwards}
.carousel--ken .carousel-slide.is-prev{opacity:0;transform:scale(1.06) translateX(-7%)}
@keyframes carKen{from{transform:scale(1) translateX(0)}to{transform:scale(1.05) translateX(0)}}
@media(prefers-reduced-motion:reduce){
  .carousel-slide{transition:none}
  .carousel--ken .carousel-slide{transition:opacity .35s ease;transform:none!important}
  .carousel--ken .carousel-slide.on{animation:none}
}

/* ---------- Solunar bite windows (/fishing) ----------
   The markup used to carry a class — .nowcell — that is defined nowhere in this stylesheet,
   so the whole block rendered as unstyled inline runs and every time fused to its label
   ("1:03 AM – 3:03 AMMoonrise"). These are the rules that class was always missing. */
.bite-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:6px}
.bite-head{grid-column:1/-1;font-weight:800;color:var(--ink);margin-top:10px}
.bite-head:first-child{margin-top:0}
.bite-cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:11px 14px;text-align:left}
.bite-cell b{display:block;font-size:1rem;color:var(--pine);letter-spacing:-.01em;line-height:1.3}
.bite-cell span{display:block;margin-top:3px;font-size:var(--step--1);color:var(--ink-soft);line-height:1.4}
.bite-note{margin-top:12px;font-size:var(--step--1);color:var(--ink-soft)}

/* ---------- Pet-friendly stays list (/directory) ----------
   Was .linklist, which only exists under footer.site — the anchors had no separator and ran
   together. A wrapping flex row keeps them apart at any width and keeps the 44px target. */
.petlist{display:flex;flex-wrap:wrap;gap:4px 18px;margin:2px 0 10px}
.petlist a{font-weight:600;min-height:44px;display:inline-flex;align-items:center}

/* ---------- realtor / listings page ---------- */
.agent-card{display:grid;grid-template-columns:140px 1fr;gap:20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;align-items:center}
.agent-card .ph{width:140px;height:140px;border-radius:var(--r-m);background:var(--sand);display:flex;align-items:center;
  justify-content:center;color:var(--ink-soft);font-size:var(--step--1);text-align:center;overflow:hidden}
.agent-card .ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:560px){.agent-card{grid-template-columns:1fr}.agent-card .ph{width:100%;height:200px}}
.idx-container{border:2px dashed var(--lake);border-radius:var(--radius);padding:24px;background:var(--bg-cool);text-align:center;color:var(--ink-soft)}
.idx-container b{color:var(--pine)}
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.prop{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.prop .img{aspect-ratio:4/3;background:var(--sand);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:var(--step--1)}
.prop .img img{width:100%;height:100%;object-fit:cover}
.prop .body{padding:14px;display:flex;flex-direction:column;gap:4px}
.prop .price{font-size:var(--step-1);font-weight:700;color:var(--pine)}
.prop .meta{font-size:var(--step--1);color:var(--ink-soft)}
@media(max-width:820px){.prop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.prop-grid{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:var(--s4);max-width:560px}
.form label{font-weight:600;font-size:var(--step--1h);display:flex;flex-direction:column;gap:6px}
.form input,.form select,.form textarea{padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-m);font:inherit;background:#fff}
.form textarea{min-height:140px;resize:vertical}
.form .hp{position:absolute;left:-9999px}
.form button{align-self:flex-start}

/* ---------- events ---------- */
.event{display:flex;gap:var(--s4);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.event .date{flex:0 0 64px;text-align:center;background:var(--pine);color:#fff;border-radius:var(--r-m);padding:8px}
.event .date b{display:block;font-size:var(--step-2);line-height:1}
.event .date span{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.06em}

footer.site{background:linear-gradient(180deg,var(--pine),var(--dusk) 70%,var(--night));color:#cfe0d7;padding:40px 0 24px;margin-top:10px}
footer.site a{color:#fff}
footer.site .cols{display:grid;grid-template-columns:1.4fr 2.4fr 1fr 1.1fr;gap:24px}
/* Phase 2 #6: the Explore dump clustered into 4 labeled footer groups (2×2 in its column). */
footer.site .fgroups{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin-top:10px}
footer.site .fgroup .fgroup-t{font-size:var(--step--2);font-weight:700;text-transform:uppercase;letter-spacing:var(--track-caps);color:#9fe6d6;margin:0 0 4px}
footer.site .fgroup .linklist{margin-top:0;gap:5px}
@media(max-width:720px){footer.site .fgroups{grid-template-columns:1fr}}
/* Footer sign-off block (text only) */
footer.site .copy{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;text-align:left}
.signoff-text{display:flex;flex-direction:column;gap:2px}
@media(max-width:560px){footer.site .copy{flex-direction:column;align-items:flex-start}}
.signoff{font-size:var(--step-1);color:#eaf6ef;margin:0}
.signoff-meta{font-size:var(--step--1);color:#9fe6d6;margin:0}
.signoff-line{font-size:var(--step--1h);color:#cfe0d7;margin:6px 0 0;font-style:italic;opacity:.9}
footer.site .cols h3{font-size:var(--step--1h);text-transform:uppercase;letter-spacing:.1em;color:#9fe6d6}
footer.site .linklist{display:flex;flex-direction:column;gap:6px;margin-top:10px}
footer.site .copy{border-top:1px solid #2c5142;margin-top:24px;padding-top:16px;font-size:var(--step--1h)}
@media(max-width:720px){footer.site .cols{grid-template-columns:1fr}}
.footer-slogan{color:#9fe6d6;font-weight:700;letter-spacing:.02em;margin:2px 0 8px;font-size:var(--step--1h)}

/* ---------- hero slogan (home) ---------- */
.hero .slogan{display:block;font-size:clamp(1.1rem,2.6vw,1.5rem);letter-spacing:.01em;   /* font-weight: the display-face group above the cut (6.12) */
  color:#9fe6d6;margin:2px 0 10px}
.brand-tag{font-size:var(--step--1h);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lake-text);display:block;margin-top:-4px}

/* ---------- fire stations + schematic map ---------- */
.firemap{background:var(--bg-cool);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.firemap svg{width:100%;height:auto;display:block}
.note-emerg{font-size:var(--step--1);color:var(--danger);font-weight:700}
/* fire-station map embed slot (holds a Google My Maps iframe once provided) */
.map-embed{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-cool);
  height:440px;overflow:hidden}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.map-embed .map-ph{height:100%;padding:20px;line-height:1.6;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-soft)}

/* ---------- directory tiers ---------- */
.featured-strip{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:0 0 14px;
  background:var(--sand-2);border:1px solid var(--sand);border-radius:var(--r-m);padding:11px 14px}
.feat-lead{display:inline-flex;align-items:center;gap:5px;font-size:var(--step--2);text-transform:uppercase;
  letter-spacing:.06em;color:var(--pine);font-weight:700;margin-right:2px}
.feat-chip{display:inline-flex;align-items:center;padding:5px 12px;border:1px solid var(--lake);border-radius:999px;
  color:#fff;background:var(--lake);font-weight:600;font-size:var(--step--1);text-decoration:none;transition:background .15s}
.feat-chip:hover{background:var(--lake-2);border-color:var(--lake-2);text-decoration:none}
.filterbar{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.filter-lead{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:700}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--step--2);font-weight:700;padding:3px 8px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.04em}
.badge-partner{background:#1d3b2f;color:#9fe6d6}
.badge-verified{background:#e4f1f3;color:var(--info)}
.cat-head{margin:var(--s5) 0 var(--s3);font-size:var(--step-1);display:flex;align-items:center;gap:var(--s3)}
.cat-head .count{font-size:var(--step--1);color:var(--ink-soft);font-weight:600}

/* contact icon row */
.contacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:var(--step--1)}
.contacts a,.contacts span{display:inline-flex;align-items:center;gap:5px;color:var(--lake-text)}
.contacts .ico{font-size:var(--step--1h)}
.contacts .soc{color:var(--lake-text)}
.contacts .soc svg{display:block}
.contacts .soc:hover{opacity:.75}
.hours{font-size:var(--step--1);color:var(--ink-soft);margin-top:4px}

/* featured partner card (rich) */
.pcard{grid-column:1 / -1;display:grid;grid-template-columns:200px 1fr;gap:20px;background:#fff;border:1px solid var(--lake);
  border-radius:var(--radius);box-shadow:0 0 0 2px rgba(44,127,149,.12),var(--shadow);padding:20px;margin-bottom:6px}
.pcard .pimg{width:200px;height:200px;border-radius:var(--r-m);overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:12px;color:var(--ink-soft);font-size:var(--step--1);text-align:center}
.pcard .pimg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pcard .pimg.pimg--cover{padding:0}
.pcard .pimg.pimg--cover img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.pcard,.lcard{scroll-margin-top:120px}
.pcard .pimg.ph{background:linear-gradient(135deg,var(--pine),var(--lake));color:#fff;font-weight:700;font-size:1rem;line-height:1.3;padding:14px}
.pstrip{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pstrip img{width:84px;height:60px;object-fit:cover;border-radius:var(--r-s);border:1px solid var(--line)}
.pcard h3{font-size:var(--step-1);margin-bottom:2px}
.pcard .offer{margin-top:8px;background:#fcefda;border:1px solid #e7cf86;color:var(--warn-ink);border-radius:var(--r-s);padding:6px 10px;font-size:var(--step--1);display:inline-block}
.pcard .cta{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:640px){.pcard{grid-template-columns:1fr}.pcard .pimg{width:100%;height:220px}}

/* ---------- business profile page ---------- */
.bizhero{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:center}
.bizhero .ph{width:260px;height:260px;border-radius:var(--radius);overflow:hidden;background:var(--sand);display:flex;align-items:center;justify-content:center}
.bizhero .ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.bizhero{grid-template-columns:1fr}.bizhero .ph{width:100%;height:260px}}

/* ---------- Round 6: data note, start-here, glance, CTAs, gallery, images ---------- */
/* .data-note — the live-data caveat under the /conditions H1. Three things review 6.6 got
   wrong about this rule, each found by measuring rather than reading:
     1. It is not on white. It is inside the hero band, on the pine gradient.
     2. So --warn is 4.16:1 against --pine and 2.70:1 against --pine-2, not 2.94:1 on white.
     3. And --warn-ink, the suggested fix, would be 2.07:1 there — WORSE than the bug, because
        the -ink tokens exist for light surfaces.
   Then the real one: `.pagehero p` (0,0,1,1) outranks `.data-note` (0,0,1,0), so this colour
   has never applied at all. The note renders #dfeae3 at 9.9:1 — legible, but reading as
   ordinary hero copy rather than the caution its own markup (bold, ⚠-prefixed) intends.
   Qualified so the declaration is honest, in the dark-surface warning colour. */
.pagehero .data-note{color:var(--warn-lite)}
.data-note{display:block;font-size:var(--step--1);font-weight:700;margin-top:4px}
.starthere{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:6px;margin-top:14px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.4);color:#fff;padding:8px 14px;border-radius:999px;font-weight:700;font-size:var(--step--1h)}
.starthere:hover{background:rgba(255,255,255,.24);text-decoration:none}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
/* Home: "Explore Vallecito" discovery strip — 4-up row reusing .ecard styling */
.explore-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media(max-width:820px){.explore-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.explore-strip{grid-template-columns:1fr}}
.glance{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.glance .q{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s4)}
.glance .q h3{font-size:1rem;margin-bottom:4px}
.glance .q p{margin:0;color:var(--ink-soft);font-size:var(--step--1h)}
@media(max-width:640px){.glance{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.gallery figure{margin:0;aspect-ratio:1/1;border-radius:var(--r-m);overflow:hidden;background:var(--sand);border:1px solid var(--line)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.gallery{grid-template-columns:repeat(2,1fr)}}
.stat .src{display:block;font-size:var(--step--1h);color:var(--ink-faint);margin-top:3px;text-transform:none;letter-spacing:0;font-weight:600}
.section-img{width:100%;max-height:300px;object-fit:cover;display:block;border-radius:var(--radius);margin:0 0 18px}

/* inline photo figures (R19 free images) — image + small credit caption */
figure.imgfig{margin:var(--s4) 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
figure.imgfig img{width:100%;height:auto;display:block}
figure.imgfig figcaption{font-size:var(--step--1h);color:var(--ink-soft);padding:7px 12px}
figure.imgfig figcaption a{color:var(--ink-soft);text-decoration:underline}
figure.imgfig figcaption a:hover{color:var(--pine)}

/* compact home contacts strip + mobile table scroll */
.contacts-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;background:#fff;border:1px solid var(--line);
  border-left:5px solid var(--danger);border-radius:var(--r-m);padding:14px 18px;box-shadow:var(--shadow);font-size:var(--step--1h)}
.contacts-strip .cs-emerg{font-weight:700;color:var(--danger)}
.contacts-strip .cs-emerg a{color:var(--danger)}
.contacts-strip .cs-item{color:var(--ink-soft)}
.contacts-strip .cs-all{margin-left:auto;font-weight:700;white-space:nowrap}
@media(max-width:560px){.contacts-strip{font-size:var(--step--1h)}.contacts-strip .cs-all{margin-left:0}}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- lake map (map.html) ---------- */
#map{width:100%;height:70vh;min-height:380px;border-radius:var(--radius);border:1px solid var(--line);z-index:1;background:var(--bg-cool)}
/* init-failure fallback shown inside the map box when Leaflet never initializes */
.map-initfail{display:flex;align-items:center;justify-content:center;height:100%;padding:20px;text-align:center;color:var(--ink-soft);font-weight:600}
.map-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.map-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:6px 12px;font-weight:700;font-size:var(--step--1);cursor:pointer;color:var(--ink-soft)}
.map-chip[aria-pressed="true"]{background:var(--pine);color:#fff;border-color:var(--pine)}
.map-chip .ct{opacity:.7;font-weight:600}
.map-emoji-icon{font-size:20px;line-height:26px;text-align:center;width:26px;height:26px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  background:rgba(247,245,240,.95);border-radius:var(--radius);padding:20px;z-index:2}
.map-note{font-size:var(--step--1);color:var(--ink-soft);margin-top:8px}
.poi-list h3{font-size:1rem;margin:16px 0 6px}
.poi-list ul{margin:0;padding-left:18px}
.poi-list li{margin:5px 0}
.leaflet-popup-content{font-size:var(--step--1h);line-height:1.4}

/* ---------- fishing: jump nav + weekly report ---------- */
.jumpnav{position:sticky;top:60px;z-index:30;background:rgba(247,245,240,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.jumpnav .wrap{display:flex;gap:6px;flex-wrap:wrap;overflow-x:auto;padding-top:8px;padding-bottom:8px}
/* Review 3.8: at 390px the 11 links wrapped to THREE ragged rows, 160px of sticky chrome that
   read as a paragraph of links rather than navigation. Below --bp-md it becomes one row that
   scrolls sideways, which is what a chip nav should do on a phone. */
@media(max-width:720px){                                    /* --bp-md */
  .jumpnav .wrap{flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .jumpnav .wrap::-webkit-scrollbar{display:none}
  .jumpnav a{scroll-snap-align:start;flex:0 0 auto}
}

/* Review 3.8: the Ask Val FAB is fixed bottom-right and was sitting on top of whatever ended
   the page. Reserve its height so the last element always clears it. */
@media(max-width:720px){                                    /* --bp-md */
  body{padding-bottom:76px}
  body.no-fab{padding-bottom:0}
}
.jumpnav a{white-space:nowrap;font-weight:700;font-size:var(--step--1);color:var(--ink-soft);padding:6px 12px;border-radius:999px}
.jumpnav a:hover{background:rgba(29,59,47,.07);color:var(--pine);text-decoration:none}
/* On banner days the sticky header gains the alertbar row, so drop the jumpnav's own
   sticky top down to sit just below BOTH header rows (slim strip + banner) instead of
   tucking behind them. Tracks the measured banner-day header height (desktop ~143px,
   mobile ~141px). */
body:has(.alertbar) .jumpnav{top:144px}
/* Left the shared card group above the cut (review 6.12) because it re-specified border and
   box-shadow there anyway; `background` comes with it so the card keeps its white fill. */
.report-card{background:var(--card);border:1px solid var(--lake);border-radius:var(--radius);
  box-shadow:0 0 0 2px rgba(44,127,149,.12),var(--shadow);padding:18px 20px}
.report-species{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.report-species li{font-size:var(--step--1h)}
@media(max-width:560px){.jumpnav{top:56px}
  body:has(.alertbar) .jumpnav{top:142px}}

/* live road-camera link tiles (plan-your-visit) */
.cam-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin:8px 0 6px}
.cam-tile{display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 18px;min-height:88px;text-decoration:none;color:var(--ink)}
.cam-tile:hover{border-color:var(--lake);text-decoration:none;transform:translateY(-1px)}
.cam-tile .cam-ico{font-size:1.4rem;line-height:1}
.cam-tile .cam-label{font-weight:700}
.cam-tile .cam-sub{font-size:var(--step--1);color:var(--lake-text);font-weight:700}
@media(max-width:560px){.cam-grid{grid-template-columns:1fr}}
/* live road-camera STILLS grid (First Visit + Conditions) — shared with assets/js/cams.js.
   4-col on desktop, 2-col on phones. A failed still degrades to a plain link-out tile. */
.cam-live{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
.cam-live .cam{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0e1413;box-shadow:var(--shadow)}
.cam-live .cam-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
.cam-live .cam img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#0e1413}
.cam-live .cam-cap{display:block;padding:8px 11px;font-size:var(--step--1);font-weight:700;color:var(--ink);background:var(--card);line-height:1.3}
.cam-live .cam-time{font-weight:600;color:var(--ink-soft)}
.cam-live .cam-fail{background:var(--card)}
.cam-live .cam-fail img{display:none}
.cam-live .cam-fail .cam-cap::after{content:" — snapshot unavailable · view on COtrip \2197";display:block;margin-top:3px;font-weight:600;color:var(--lake-text)}
@media(max-width:820px){.cam-live{grid-template-columns:repeat(2,1fr)}}
/* camera lightbox (built by cams.js) */
.cam-lb{position:fixed;inset:0;z-index:9999;background:rgba(8,12,10,.9);display:flex;align-items:center;justify-content:center;padding:20px}
.cam-lb[hidden]{display:none}
.cam-lb-box{position:relative;max-width:min(96vw,1100px);width:100%}
.cam-lb-img{width:100%;max-height:78vh;object-fit:contain;border-radius:10px;background:#0e1413;display:block}
.cam-lb-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-top:10px;color:#fff}
.cam-lb-cap{font-weight:600;font-size:var(--step--1h)}
.cam-lb-link{color:#9fe6d6;font-weight:700;white-space:nowrap}
.cam-lb-close{position:absolute;top:-14px;right:-6px;width:40px;height:40px;border:none;border-radius:999px;background:rgba(255,255,255,.92);color:#143a2f;font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.35)}

/* PWA: installed (standalone) mode. viewport-fit=cover lets content reach the
   screen edges, so pad the sticky header for the notch/Dynamic Island/status bar
   and respect side insets in landscape. No effect in a normal browser tab. */
@media (display-mode: standalone){
  header.site{padding-top:env(safe-area-inset-top)}
  header.site>.wrap,
  .condbar>.wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}

/* ===== Round 38: readability + scroll polish ===== */
/* Opt-in two-column list — halves the length of long, scannable lists; 1 col on narrow screens. */
.cols2{column-count:2;column-gap:40px}
.cols2>li,.cols2>p{break-inside:avoid}
@media(max-width:1100px){.cols2{column-count:1}}

/* Back-to-top button (injected site-wide by nav.js). Stacked ABOVE the always-present
   "Ask Vallecito" chat FAB (.gv-ask-fab, ~44px tall at right:18/bottom:18) so the two
   don't overlap — same right edge, with a gap. (Back-to-top only appears on scroll.) */
.backtop{position:fixed;right:18px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:50;
  width:46px;height:46px;border:0;border-radius:50%;background:var(--pine);color:#fff;font-size:1.3rem;
  line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur-move) ease,transform var(--dur-move) ease,visibility var(--dur-move) ease;box-shadow:0 6px 18px rgba(15,40,42,.28)}
.backtop.show{opacity:1;visibility:visible;transform:none}
.backtop:hover{filter:brightness(1.12)}
.backtop:focus-visible{outline:3px solid var(--lake);outline-offset:2px}
/* On phones, keep the back-to-top STACKED ABOVE the chat FAB (right:18/bottom:18,
   ~40px icon-only) — not down at bottom:12 where the two overlapped. Same right edge. */
@media(max-width:560px){.backtop{right:18px;bottom:calc(72px + env(safe-area-inset-bottom,0px));width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.backtop{transition:none}}

/* ===== Round 40: map directions link + share button ===== */
.popup-dir{font-weight:600}
.btn-share{background:var(--card);border:1px solid var(--line);color:var(--pine)}
.btn-share[data-shared]::after{content:" \2713 copied"}

/* ---------- Tonight at the Lake widget (astro.js) ---------- */
.tonight{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.tonight-list{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 20px}
.tonight-list li{display:flex;align-items:center;gap:9px;font-size:var(--step--1h);padding:8px 0;border-bottom:1px dashed var(--line)}
.tonight-list .tn-val{margin-left:auto;font-weight:700;color:var(--pine);text-align:right}
.tonight-list .tn-ico{width:1.4em;text-align:center;flex:0 0 auto}
.tonight-note{margin:12px 0 0;font-weight:600}
.tonight-fine{margin:6px 0 0;font-size:var(--step--1);color:var(--ink-soft)}

/* ---------- Lake tile: 30-day sparkline + season chips (conditions.js) ---------- */
.lake-spark{display:block;width:100%;height:34px;margin-top:8px}
.lake-spark path{fill:none;stroke:var(--lake);stroke-width:2}
.lake-spark .spark-area{fill:rgba(44,127,149,.12);stroke:none}

/* ---------- Lake-level history chart + comparison strip (conditions #lake) ---------- */
.lake-history{margin-top:4px}
.lh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lh-head h3{margin:0}
.lc-pills{display:inline-flex;gap:4px;background:var(--sand-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.lc-pill{appearance:none;border:0;background:transparent;color:var(--ink-soft);font-weight:700;font-size:var(--step--1);
  padding:5px 11px;border-radius:var(--r-pill);cursor:pointer;font-variant-numeric:tabular-nums lining-nums;line-height:1}
.lc-pill:hover{color:var(--pine)}
.lc-pill[aria-pressed="true"]{background:var(--lake);color:#fff}
.lc-wrap{margin:12px 0 4px}
.lc-svg{display:block;width:100%;height:auto;aspect-ratio:640/200}
.lc-static{min-height:60px;display:flex;align-items:center;font-size:var(--step--1h)}
.lc-static svg{width:100%;height:56px;display:block}
.lc-static .lcs-line{fill:none;stroke:var(--lake);stroke-width:2}
.lc-static .lcs-area{fill:rgba(44,127,149,.12);stroke:none}
/* chart primitives */
.lc-grid{stroke:var(--line);stroke-width:1;opacity:.7}
.lc-axis{font-size:12px;font-variant-numeric:tabular-nums lining-nums}
.lc-area{fill:rgba(44,127,149,.14);stroke:none}
.lc-line{fill:none;stroke:var(--lake);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.lc-full{stroke:var(--pine-2);stroke-width:1.2;stroke-dasharray:5 4;opacity:.75}
.lc-full-lbl{fill:var(--pine-2);font-size:10.5px;font-weight:700;opacity:.85}
.lc-dot{stroke:#fff;stroke-width:1.5}
.lc-max{fill:var(--pine-2)}.lc-min{fill:#b06a2c}.lc-cur{fill:var(--lake)}
.lc-dlbl{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.lc-curlbl{fill:var(--lake)}
.lc-sentence{font-size:1rem;line-height:1.5;color:var(--ink);margin:8px 0 2px;font-weight:600}
.lc-sentence:empty{display:none}
.lc-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;margin:10px 0 8px}
.lc-strip:empty{display:none}
.lc-cell{background:var(--card);padding:9px 11px;display:flex;flex-direction:column;gap:1px}
.lc-cl{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);font-weight:700}
.lc-cv{font-size:1.15rem;color:var(--pine);font-variant-numeric:tabular-nums lining-nums;line-height:1.2}
.lc-cs{font-size:var(--step--1);color:var(--ink-faint);font-variant-numeric:tabular-nums lining-nums}
.lc-src{font-size:var(--step--1);margin:2px 0 0}
.season-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.season-chip{font-size:var(--step--1);font-weight:600;background:var(--sand-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;color:var(--ink-soft)}
.season-chip b{color:var(--pine)}

/* ---------- Photo of the Week (home) ---------- */
.potw figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.potw img{width:100%;height:auto;max-height:440px;object-fit:cover;display:block}
.potw figcaption{font-size:var(--step--1h);color:var(--ink-soft);padding:9px 14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.potw figcaption .potw-credit{font-weight:600}

/* ===== Design tokens: caps tracking + tabular numerics ===== */
/* Uppercase micro-labels unify onto the caps tracking token; the eyebrow keeps the wider track,
   declared with the rest of .eyebrow above the cut (review 6.12). */
.brand-tag,.tbl th,.kv div span,.rc-cols h3,.rc-cols h4,.rc-links h4,
.sources .grp h3,.sources .grp h4,.feat-lead,.filter-lead,.badge,.oldtimer .ot-h,.lcard .cat,.event .date span,
.stale-flag,footer.site .cols h3{letter-spacing:var(--track-caps)}
/* Data numerics: tabular + lining so figures align and don't jitter as live values update. */
.tile .big,.condbar,.tbl,.fc,.kv b,.stat b,.drive b,.event .date b{font-variant-numeric:tabular-nums lining-nums}

/* ===================== Phase 2: heroes, banding, rhythm, bleed ===================== */

/* #2/#3: 3px waterline glint along the bottom edge of every hero. */
/* #3 HERO TIERS — story (full-bleed photo, corner scrim, upper-right clean) & guide (softer). */
.hero--story,.hero--guide{position:relative;overflow:hidden;color:#fff;background-color:var(--night);
  background-repeat:no-repeat;background-size:cover;background-position:var(--focus,center 28%)}
.hero--story{background-image:
  linear-gradient(78deg,rgba(12,29,22,.72) 0%,rgba(12,29,22,.4) 34%,transparent 58%),
  linear-gradient(0deg,rgba(12,29,22,.5),transparent 38%),
  var(--hero-img,none),
  linear-gradient(180deg,#0f2a20,var(--pine) 45%,var(--pine-2))}
.hero--guide{background-image:
  linear-gradient(78deg,rgba(12,29,22,.62) 0%,rgba(12,29,22,.34) 34%,transparent 58%),
  linear-gradient(0deg,rgba(12,29,22,.3),transparent 38%),
  var(--hero-img,none),
  linear-gradient(180deg,#0f2a20,var(--pine) 45%,var(--pine-2))}
/* Height and the bottom-left position come from the tier + the shared .wrap rule above
   (finding 5.1); these classes keep only their own backdrop treatment. */

/* #3 UTILITY TIER — no photo: pine base + a single hand-traced contour band along the bottom. */
.hero--utility{position:relative;overflow:hidden;color:#fff;background-color:var(--pine);
  background-image:url(/assets/img/hero-contour.svg),linear-gradient(180deg,#0f2a20,var(--pine) 55%,var(--pine-2));
  background-repeat:no-repeat,no-repeat;background-position:bottom center,center;background-size:1440px auto,cover}

/* #5 SECTION RHYTHM */
.band-major{padding:var(--s9) 0 var(--s8)}
.band-quiet{padding:var(--s8) 0}
/* A short lead-in band that sits directly on the section below it — the standing intro
   paragraph under a jumpnav. Written as section.band--tight, not .band--tight: the base is
   section.band{padding:var(--s7) 0}, and a lone class would lose to it on specificity. */
section.band--tight{padding-top:var(--s5);padding-bottom:0}
/* The chapter mark — a short lake rule before an eyebrow at a mode change — lived here.
   3.3 removed the .chapter eyebrows it drew, leaving one .chapter section (conditions
   #tonight) with no eyebrow inside it and the rule matching nothing. Removed in 6.16. */
/* Conditions: let the tiles overlap the hero's lower edge. */
/* pad-overlap existed to make room under the hero for the tile grid to ride up into. The
   data tier is 200px, and 90px of that as bottom padding leaves no room for the copy — the
   grid's own -56px margin already does the overlap, so the padding is no longer needed. */
.pagehero.pad-overlap{padding-bottom:0}
.grid.overlap-up{margin-top:-56px;position:relative;z-index:2}
/* When the fire-restriction banner has real content it sits directly above the
   tile grid — the -56px pull was designed to lift the grid onto the HERO below
   it, but with the banner present it instead swallows the banner (its one-line
   desktop height is under 56px, so it vanished entirely there; on mobile the
   text wraps taller than 56px so a sliver survived — same bug, different
   symptom). Cancel the pull whenever the banner is actually shown. */
#fireBanner:not([hidden]) + .grid.overlap-up{margin-top:0}

/* #4 TONAL BANDING — cool surface for water & data sections (sand-2 story handled by .alt). */
.band--cool{background:var(--bg-cool);border-top:1px solid var(--line)}

/* #8 FULL-BLEED MAPS — escape the wrap; caption stays in an inner .wrap. */
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.bleed.gv-smap,.bleed#cmap,.bleed#wfMap,.map-bleed{height:56vh;min-height:420px;border-radius:0}

/* #1 pull-quote / blockquote (Fraunces family applied above) */
.pq,blockquote{font-size:var(--step-2);line-height:1.35;color:var(--pine);max-width:34ch;margin:var(--s5) 0;
  padding-left:var(--s4);border-left:3px solid var(--lake)}

/* #7 unit affixes inside tile values (wrapped by conditions.js render path). */
.unit{font-size:max(.55em,12px);font-weight:600;letter-spacing:0;color:var(--ink-soft);margin-left:.06em}

/* ========================= Phase 3: signature moves ========================= */

/* #1 THE WATERLINE — full-bleed reservoir-fill divider.
   The label is a fixed-left pill OVERLAID on the whole track (not ridden inside the fill's
   right edge). When the reservoir drops through fall/winter the fill narrows toward the
   left; the old inside-the-fill label clipped its leading digit ("45%" → "5%"). The pill
   sits over the track and stays fully readable at ANY level — from full pool down to the
   winter low — reading on the lake fill or the sand alike. */
.waterline{width:100vw;margin-inline:calc(50% - 50vw);height:56px;background:var(--sand-2);position:relative;overflow:hidden}
.waterline .wl-fill{height:100%;min-width:3%;background:linear-gradient(90deg,var(--lake),var(--lake-2));
  border-right:3px solid var(--pine);transition:width 600ms var(--ease-water)}
.waterline .wl-label{position:absolute;top:50%;left:12px;transform:translateY(-50%);
  color:var(--pine);font-size:var(--step--1);font-weight:800;font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;background:rgba(247,245,240,.85);padding:3px 12px;border-radius:999px;
  box-shadow:0 1px 2px rgba(15,40,42,.12)}
@media (prefers-reduced-motion:reduce){.waterline .wl-fill{transition:none}}

/* #2 LIVE-TILE CHOREOGRAPHY — value-in + tile wash on real change (JS gates first paint). */
@media (prefers-reduced-motion:no-preference){
  @keyframes value-in{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}}
  @keyframes tile-wash{from{background-color:rgba(70,165,189,.10)}to{background-color:transparent}}
  .tile .big.is-fresh,.tile .small.is-fresh,.aqi-pill.is-fresh{animation:value-in 240ms var(--ease-settle)}
  .tile.is-fresh{animation:tile-wash 700ms ease-out}
}
.gauge>i{transition:width 600ms var(--ease-water)}
@media (prefers-reduced-motion:reduce){.gauge>i{transition:none}}

/* #3 CONDBAR LIFE — breathing live-dot (transform+opacity ring; no box-shadow repaint). */
.condbar-dot{position:relative}
@media (prefers-reduced-motion:no-preference){
  .condbar-dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--ok);
    transform:scale(1);opacity:.55;animation:dot-breathe 3.2s var(--ease-water) infinite}
  @keyframes dot-breathe{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
  .condbar .tick-fade{animation:tick-fade 240ms ease}
  @keyframes tick-fade{from{opacity:.25}to{opacity:1}}
}
/* life-safety: danger/amber banner swaps are INSTANT — never transition. */
.condbar-danger,.condbar-amber,.condbar-danger *,.condbar-amber *{transition:none !important;animation:none !important}

/* #4 TONIGHT DUSK BAND + night family (fire-safety satellite band, lightbox). */
.tonight-band{background:linear-gradient(180deg,var(--dusk),var(--night));border-top:1px solid var(--night)}
.tonight-band .sec-title,.tonight-band h2,.tonight-band h3{color:#fff}
.tonight-band .sec-lead,.tonight-band .tonight-fine,.tonight-band .muted{color:#9fb8ac}
.tonight-band .eyebrow{color:#9fe6d6}
.tonight-band .tonight{background:#16342a;border-color:#24493a;color:#eaf6ef}
.tonight-band .tonight-list li{border-bottom-color:#24493a}
.tonight-band .tonight-list .tn-val,.tonight-band .tonight-note{color:#9fe6d6}
.gv-smap-band{background:linear-gradient(180deg,var(--dusk),var(--night));color:#fff}
.gv-smap-band .sec-title,.gv-smap-band h2{color:#fff}
.gv-smap-band .sec-lead,.gv-smap-band .muted{color:#9fb8ac}
.lightbox{background:rgba(12,29,22,.94)}

/* #7 STATS UNBOXED — the .stat and .stat b declarations moved up to the base rule above the
   cut (review 6.12), so the first paint draws the unboxed stat rather than a white card that
   is then un-drawn. Only the variants that are unique to this block remain. */
.stat .src{margin-top:2px}
.stat.stat-loss{border-top-color:#e8a11a}
.stat.stat-loss b{color:#e8a11a}              /* "1 — life lost": amber, NEVER danger red */
/* missionary-ridge memorial figure — amber on the page's charcoal memorial band, never red. */
.mr-loss b{color:#e8a11a;font-variant-numeric:tabular-nums lining-nums}

/* #6 HOMEPAGE CARD GRID — 12-col: 2 image-top lead cards (span 6) + compact (span 3).
   The grid declaration itself moved up to the base .cards rule above the cut (review 6.12). */
.cards>*{grid-column:span 3}
.cards .lead{grid-column:span 6;padding:0;overflow:hidden}
.cards .lead .card-img{width:100%;height:180px;object-fit:cover;display:block}
.cards .lead h3{padding:var(--s4) var(--s5) 0}
.cards .lead p{padding:0 var(--s5)}
.cards .lead a{margin-top:auto;padding:var(--s3) var(--s5) var(--s5)}
@media(max-width:900px){.cards .lead{grid-column:span 6}.cards>*{grid-column:span 6}}
@media(max-width:560px){.cards .lead,.cards>*{grid-column:1 / -1}}
/* glance: 5th Q&A as a full-width unboxed answer strip. */
.glance-strip{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.glance-strip h3{font-size:var(--step-1);margin:0 0 4px}
.glance-strip p{font-size:var(--step-1);color:var(--ink);margin:0;max-width:64ch}

/* #10 HOME AMBIENT — two drifting radials under the glint (transform-only, home only). */
@media (prefers-reduced-motion:no-preference){
  .hero.ambient::before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;will-change:transform;
    background:radial-gradient(38% 40% at 25% 42%,rgba(70,165,189,.20),transparent 60%),
               radial-gradient(34% 36% at 76% 56%,rgba(159,230,214,.15),transparent 62%);
    animation:hero-drift 52s var(--ease-water) alternate infinite}
  @keyframes hero-drift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,1.5%,0)}}
}
.hero.ambient .wrap{position:relative;z-index:2}

/* #9 SCROLL REVEALS — JS adds .reveal, then .in. No-JS never hides (rules gated + JS-only class). */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(12px);
    transition:opacity 420ms var(--ease-settle),transform 420ms var(--ease-settle);transition-delay:var(--reveal-delay,0ms)}
  .reveal.in{opacity:1;transform:none}
}

/* #8 INTERACTION — dropdown open/close, accordions (progressive), directory dip.
   The closed and open transforms moved up to the .navmenu block above the cut (review 6.12);
   only the OPEN transition stays here, because it is the one thing this block adds — a slower
   --dur-move easing on the way open than the --dur-quick used on the way closed. */
.navgroup.open .navmenu{
  transition:opacity var(--dur-move) var(--ease-settle),transform var(--dur-move) var(--ease-settle),visibility var(--dur-move)}
details.about-data,details.fs-acc{interpolate-size:allow-keywords}
details.about-data::details-content,details.fs-acc::details-content{block-size:0;overflow:clip;
  transition:block-size var(--dur-move) var(--ease-settle),content-visibility var(--dur-move) allow-discrete}
details.about-data[open]::details-content,details.fs-acc[open]::details-content{block-size:auto}
.about-data>summary,.fs-acc>summary{cursor:pointer;list-style:none}
.about-data>summary::-webkit-details-marker,.fs-acc>summary::-webkit-details-marker{display:none}
.about-data>summary::after,.fs-acc>summary::after{content:"▾";display:inline-block;margin-left:6px;
  transition:transform var(--dur-quick) var(--ease-settle)}
.about-data[open]>summary::after,.fs-acc[open]>summary::after{transform:rotate(180deg)}
.directory-dip{opacity:.35;transition:opacity 110ms ease}
/* lightbox open fade + figure pop (progressive: degrades to instant where unsupported). */
@media (prefers-reduced-motion:no-preference){
  .lightbox{opacity:0;transition:opacity var(--dur-quick) ease,display var(--dur-quick) allow-discrete;transition-behavior:allow-discrete}
  .lightbox.open{opacity:1}
  .lightbox.open .lb-figure{transition:transform var(--dur-move) var(--ease-settle)}
  @starting-style{.lightbox.open{opacity:0}.lightbox.open .lb-figure{transform:scale(.96)}}
}

/* #12 season greeting under the hero eyebrow (home only). */
.hero .season-greet{margin:4px 0 2px;font-size:var(--step--1h);font-weight:600;color:#eaf6ef;max-width:52ch;
  text-shadow:0 1px 2px rgba(10,20,15,.35)}

/* ===================== Phase 4: story register + imagery ===================== */

/* #1 dark-pine story bands (narrative pages — no dashboard grammar here) */
.story-band{background:var(--pine);color:var(--sand-2)}
.story-band .sec-title,.story-band h2,.story-band h3,.story-band h4{color:#fff}
.story-band p,.story-band li,.story-band .sec-lead,.story-band .muted{color:var(--sand-2)}
.story-band a{color:#9fe6d6}
/* blockquote — Fraunces upright, candle-gold rule (NOT warn-orange) */
blockquote{font-size:1.35rem;line-height:1.4;   /* font-family+weight: the display-face group above the cut (6.12) */
  padding-left:20px;border-left:3px solid #e8a11a;margin:var(--s5) 0;color:var(--pine);
  hanging-punctuation:first;text-indent:-.45ch}
blockquote>:first-child{text-indent:-.45ch}
blockquote cite{display:block;font-style:normal;font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:var(--track-caps);color:var(--ink-soft);text-indent:0;margin-top:8px}
.story-band blockquote{color:#fff}
.story-band blockquote cite{color:var(--sand)}
/* "Voices from the fire" pull-quotes (base .pq already Fraunces via Phase 2) */
.pq{font-size:1.6rem;max-width:40ch}
.story-band .pq{color:#fff;border-left-color:#e8a11a}
/* Alan Wyatt memorial block */
.memorial{background:linear-gradient(180deg,#232019,#181613);color:#ece7db;border-top:3px solid #e8a11a;
  padding:var(--s8) 0;box-shadow:none}
.memorial h1,.memorial h2,.memorial h3{color:#fff}
.memorial p,.memorial li,.memorial .muted,.memorial cite{color:#ece7db}
.memorial a{color:#e8a11a}
.memorial .pq,.memorial blockquote{color:#fff;border-left-color:#e8a11a}

/* #2 carvings zigzag */
.carve-zig{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5);align-items:center;
  padding:var(--s5) 0;border-bottom:1px solid var(--line);position:relative}
.carve-zig:nth-of-type(even){grid-template-columns:300px minmax(0,1fr)}
.carve-zig:nth-of-type(even) .carve-zig-media{order:-1}
.carve-num-ghost{font-family:var(--font-display);font-size:3.2rem;font-weight:700;color:var(--sand);
  -webkit-text-stroke:1.5px var(--pine);line-height:1;display:block;margin-bottom:6px}
.carve-zig h3{font-size:var(--step-2);margin:0 0 6px}
@media(max-width:640px){.carve-zig,.carve-zig:nth-of-type(even){grid-template-columns:1fr}
  .carve-zig:nth-of-type(even) .carve-zig-media{order:0}}
/* No. 5 (Alan Wyatt) — full-bleed centered pine caesura, no border */
.carve-caesura{grid-column:1/-1;text-align:center;background:var(--pine);color:#fff;border:0;border-bottom:0;
  width:100vw;margin-inline:calc(50% - 50vw);padding:var(--s7) var(--s5)}
.carve-caesura h3,.carve-caesura .carve-num-ghost{color:#fff}
.carve-caesura .carve-num-ghost{-webkit-text-stroke:1.5px #9fe6d6;color:transparent}
.carve-caesura .carve-plate{max-width:340px;margin:var(--s4) auto 0}

/* #3 plate series — uniform 4:5 crop + eyebrow plate labels */
.carve-plate{aspect-ratio:4/5;object-fit:cover;object-position:center 8%;width:100%;
  border-radius:var(--r-l);display:block;background:var(--sand-2)}
.plate-label{text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--step--1);
  color:var(--ink-soft);font-weight:700;margin-top:8px}

/* #4 carvings celebration */
.carve-flame-stamp{width:20px;height:20px;color:#e8a11a;vertical-align:-.2em;margin-left:6px}
.carve-complete{opacity:0}
.carve-complete.show{opacity:1}
@media (prefers-reduced-motion:no-preference){
  @keyframes found{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
  .carve-no.just-found,.carve-num-ghost.just-found{animation:found 320ms cubic-bezier(.34,1.56,.64,1)}
  @keyframes carve-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .carve-complete.show{animation:carve-rise 420ms var(--ease-settle)}
  @keyframes shimmer{0%{background-position:-150% 0}100%{background-position:250% 0}}
  .carve-track-bar.celebrate span{background-image:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);
    background-size:200% 100%;animation:shimmer 900ms ease-in-out 2}
}

/* #5 trails wide band-openers + contour behind Cautions */
.figure-wide{aspect-ratio:21/9;object-fit:cover;width:100%;border-radius:var(--r-l);display:block;background:var(--sand-2)}
/* #8 crop families — a photo appears once at lead size; every reuse changes crop */
.crop-lead{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:var(--r-l);display:block;background:var(--sand-2)}
.crop-detail{aspect-ratio:21/9;object-fit:cover;width:100%;border-radius:var(--r-l);display:block;background:var(--sand-2)}
.crop-thumb{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:var(--r-s);display:block;background:var(--sand-2)}
.cautions-contour{position:relative;background:var(--pine);color:#fff;overflow:hidden;
  background-image:url(/assets/img/hero-contour.svg);background-repeat:no-repeat;background-position:bottom center;background-size:1440px auto}
.cautions-contour .sec-title,.cautions-contour h2{color:#fff}
/* The warn card sits on a tan background — keep its text dark, not the section's white */
.cautions-contour .restriction-card{color:var(--ink)}

/* #6 Vallecito grade (opt-in only — never a blanket img rule) */
.img-grade{filter:saturate(.92) contrast(1.04)}
.img-archival{filter:grayscale(1) sepia(.16) contrast(1.05)}
/* Ute portraits — PROTECTED: never cropped/scrimmed/graded/duotoned or used in OG cards;
   caption names person/band + date first. */
img.ute-portrait{object-fit:contain;background:var(--sand-2);filter:none !important}

/* #7 figure grammar — ONE caption style; radii on figures (--r-l) / thumbs (--r-s) only */
.fig-title{font-weight:600}
.fig-credit{display:block;font-size:var(--step--2);color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:.06em;text-align:right;margin-top:2px}
figure.imgfig img,figure.gfeature img,.section-img{border-radius:var(--r-l)}
.pstrip img,.gallery-grid img,.guide-card .glogo,.fish-btn img{border-radius:var(--r-s)}

/* #10 "From the porch" marginalia (promotes the existing .oldtimer voice) */
.oldtimer cite,.porch-sig{display:block;font-style:normal;font-size:var(--step--1);color:var(--ink-soft);margin-top:6px}

/* #9 community shot list */
.shotlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s4) var(--s5);margin-top:var(--s4)}
.shotlist h3{font-size:var(--step-0);margin:0 0 4px}
.shotlist ul{margin:0;padding-left:18px}
.shotlist li{margin:3px 0;font-size:var(--step--1h);color:var(--ink-soft)}

/* Part B — compact annual-cycle chart on /conditions. Shares the renderer with
   /lake-levels Chapter 1 (lake-annual-chart.js). The ll-* chart classes are
   page-local to lake-levels, so the ones this chart needs are defined here scoped
   to .cond-annual, plus the "today" marker. max-width caps the 680x262 viewBox to
   ~215px tall (compact) with no letterboxing; it scales down on mobile. */
.cond-annual{margin:14px 0 4px;max-width:560px}
.cond-annual svg{display:block;width:100%;height:auto;background:var(--card,#fff);border:1px solid var(--line);border-radius:12px}
.cond-annual .cond-annual-cap{font-size:var(--step--1);margin-top:6px}
.cond-annual .ll-grid{stroke:var(--line);stroke-width:1;opacity:.7}
.cond-annual .ll-axis{font-size:12px;font-variant-numeric:tabular-nums lining-nums}
.cond-annual .ll-full{stroke:var(--pine-2,#3a6b56);stroke-width:1.2;stroke-dasharray:5 4;opacity:.8}
.cond-annual .ll-full-lbl{fill:var(--pine-2,#3a6b56);font-size:10.5px;font-weight:700;opacity:.85}
.cond-annual .ll-band{fill:rgba(44,127,149,.12);stroke:none}
.cond-annual .ll-median{fill:none;stroke:#8a8578;stroke-width:1.8;stroke-dasharray:4 3}
.cond-annual .ll-cur{fill:none;stroke:var(--lake,#2c7f95);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.cond-annual .ll-albl{fill:var(--ink,#222);font-size:10.5px;font-weight:700}
.cond-annual .ll-albl-sm{fill:var(--ink-soft);font-size:9.5px;font-weight:600}
.cond-annual .la-today{fill:#c0392b;stroke:#fff;stroke-width:1.6}
.cond-annual .la-today-lbl{fill:#c0392b;font-size:12px;font-weight:800}

/* ===================== Itineraries 2.0 — chips + data-driven blocks ===================== */
.itin-how{background:var(--bg-cool);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 14px;font-size:var(--step--1h);line-height:1.5}
.itin-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px}
.itin-chips-lead{font-weight:700;color:var(--ink-soft);font-size:var(--step--1h);margin-right:2px}
.itin-chip{border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:var(--step--1h);padding:7px 14px;border-radius:999px;cursor:pointer;transition:background var(--dur-quick),border-color var(--dur-quick),color var(--dur-quick)}
.itin-chip:hover{border-color:var(--lake)}
.itin-chip[aria-pressed="true"]{background:var(--lake);border-color:var(--lake);color:#fff}
.itin-chip-clear{border-style:dashed;color:var(--ink-soft);font-weight:600}
.itin-actions{display:flex;gap:10px;margin:10px 0 6px}
.itin-btn{border:1px solid var(--line);background:var(--card);color:var(--pine);font:inherit;font-weight:700;font-size:var(--step--1);padding:7px 14px;border-radius:999px;cursor:pointer}
.itin-btn:hover{border-color:var(--lake)}
.itin-day{margin:22px 0 0}
.itin-day-h{font-size:var(--step-2);color:var(--pine);border-bottom:2px solid var(--line);padding-bottom:6px;margin:0 0 12px}
.itin-block{border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow);padding:14px 16px;margin:0 0 12px;transition:opacity var(--dur-quick),box-shadow var(--dur-quick)}
.itin-block[data-reset="1"]{background:var(--sand-2);border-style:dashed}
.itin-block.itin-dim{opacity:.42}
.itin-block.itin-match{box-shadow:0 0 0 2px var(--lake),var(--shadow)}
.ib-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ib-clock{font-variant-numeric:tabular-nums;font-weight:800;color:var(--lake-text);font-size:var(--step--1);white-space:nowrap}
.ib-title{font-size:var(--step-1)}
.ib-drive{margin:6px 0 0;font-size:var(--step--1);color:var(--ink-soft)}
.ib-water{margin:8px 0 0;background:#e4f1f3;border-left:4px solid var(--info);border-radius:8px;padding:8px 12px;font-size:var(--step--1h);line-height:1.45}
.ib-tracks{display:grid;gap:8px;margin:10px 0 0}
.ib-track{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:var(--step--1h);line-height:1.5;background:var(--bg,#f7f5f0)}
.ib-track .ib-tk{display:inline-block;font-weight:800;color:var(--pine);font-size:var(--step--2);text-transform:uppercase;letter-spacing:.06em;margin-right:6px}
.ib-track.track-hi{border-color:var(--lake);box-shadow:0 0 0 1px var(--lake);background:#fff}
.ib-links{margin:9px 0 0;font-size:var(--step--1h);font-weight:600}
.ib-ann{margin:8px 0 0}
.ib-ann-line{display:none;font-size:var(--step--1h);line-height:1.45;color:var(--ink-soft);padding:5px 0 0}
.ib-ann-line.show{display:block}
.ib-ann-line .oc,.itin-block .oc{color:var(--warn-ink);font-weight:700}
.itin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:14px 0 0}
.itin-card{display:flex;flex-direction:column;gap:6px;border-radius:14px;padding:16px 18px;color:var(--ink)}
.itin-card:hover{text-decoration:none;transform:translateY(-1px);border-color:var(--lake)}
.itin-card-k{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--lake-text)}
.itin-card h3{font-size:var(--step-1)}
.itin-card p{margin:0;color:var(--ink-soft);font-size:var(--step--1h);line-height:1.45}
.itin-card-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.itin-card-chip{font-size:var(--step--2);font-weight:700;color:var(--ink-soft);background:var(--bg-cool);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.itin-card-cta{margin-top:auto;font-weight:700;color:var(--lake-text)}
@media print{
  .itin-chips,.itin-actions,.itin-how,header.site,footer.site,.condbar,.alertbar,.jumpnav,#gvAsk,.gv-ask,.newsletter{display:none!important}
  .itin-block{break-inside:avoid;box-shadow:none;opacity:1!important;border-color:#bbb}
  .itin-block.itin-dim{opacity:1!important}
  .ib-ann-line{display:block!important}   /* print shows every annotation */
  a{color:#000!important;text-decoration:none}
}

/* ---------- Review 2.8: heading LEVELS changed, appearance did not ----------
   Six pages ran h1 -> h3 with no h2, and four more skipped h2 -> h4. The headings were
   promoted to the correct level, which is a semantic change only -- but the site styles
   headings by TAG (.prose h3, .tile h3, .ecard h3, .rc-cols h4, .sources .grp h4), and the
   global rule `h1,h2,.sec-title{font-family:var(--font-display);font-weight:600}` means a
   promoted h2 silently picks up Fraunces at weight 600. Every selector below restores what
   the old tag rendered, verified by diffing computed styles across 219 headings on the ten
   affected pages. Do not "simplify" these away. */

/* Finding 5.1: two heroes carry a CTA row inside the frame on top of eyebrow + h1 + sub, which
   does not fit a fixed tier at 390px. Tightening their in-hero spacing is a layout fix, not a
   copy one — the copy contract itself is finding 5.2. */
.re-hero>.wrap{padding-top:18px;padding-bottom:18px}
.re-hero h1{font-size:clamp(1.9rem,5vw,3.1rem);line-height:1.05}
.re-hero .sub,.re-hero .re-mood{margin:6px 0 0}
.re-hero-cta{margin-top:10px}
@media(max-width:560px){
  .re-hero h1{font-size:1.75rem}
  .re-hero .re-mood{display:none}          /* the mood line returns below the fold in 5.2 */
}

/* Finding 0.2 put a CTA row inside the hero on nine pages so the first call to action lands
   above the fold; finding 5.1 fixes the hero height. At 390px a STACKED pair of buttons is
   ~110px and does not fit a 260px tier. Inside a hero they stay on one wrapping row at 44px —
   the 0.2 intent (a CTA above the fold) survives, it just costs one line instead of three.
   Outside the hero the stacked full-width treatment is untouched. */
@media(max-width:560px){                         /* --bp-sm */
  .hero--page>.wrap .cta-row,.hero--page>.wrap .re-hero-cta,
  .hero--data>.wrap .cta-row,.hero--landing>.wrap .cta-row{
    flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:10px}
  .hero--page>.wrap .cta-row .btn,.hero--page>.wrap .re-hero-cta .btn,
  .hero--data>.wrap .cta-row .btn,.hero--landing>.wrap .cta-row .btn{
    width:auto;min-height:44px;padding:9px 14px;font-size:var(--step--1)}
}
/* The last three spills, each from page chrome stacked above the H1 rather than from copy:
   Johnnie's carries an eyebrow AND a seasonal status chip (90px before the headline), and
   /real-estate's display H1 runs to three lines. Tightened inside the hero only. */
.hero--page>.wrap .jk-chip{margin:4px 0 0;padding:5px 10px;font-size:var(--step--2)}
.hero--page>.wrap>.eyebrow{margin-bottom:2px}
.re-hero h1{font-size:clamp(1.8rem,4.4vw,2.7rem)}
@media(max-width:560px){                         /* --bp-sm */
  .re-hero h1{font-size:1.6rem}
}

/* Note strip (finding 5.2 / HERO-SYSTEM.md). Sourcing and methodology used to sit in the hero
   competing with the headline for the same eye. Demoted, not deleted: one quiet line on the
   cream background directly under the hero, still visible and still provable. */
.note-strip{background:var(--bg);border-bottom:1px solid var(--line)}
.note-strip p{margin:0;padding:10px 0;font-size:var(--step--1);color:var(--ink-soft)}
@media(max-width:560px){                         /* --bp-sm */
  .note-strip p{padding:8px 0;font-size:var(--step--2)}
}

/* CRITICAL (found while measuring 5.2). The hero .wrap is a fixed-height flex column, so its
   children have the default flex-shrink:1 — and when the content is taller than the tier, flex
   shrinks the most compressible child to NOTHING. On the partner pages that meant the hero
   sub-copy rendered at 0px: present in the DOM, read by screen readers, invisible on screen.
   Pinning flex-shrink:0 makes the copy keep its natural height; anything that still does not fit
   is clipped by the tier overflow, which is visible and obviously wrong rather than silently
   missing. */
.hero--landing>.wrap>*,.hero--page>.wrap>*,.hero--data>.wrap>*{flex-shrink:0}


