/* events-feed.css: styles for the data-driven /events page (events page v3: valley map, search, calendar rows).
   Ported from events-preview-shell.html. Scoped to #evx so nothing here can reach another page.
   Site tokens only (gv-critical :root): no raw colours; alpha tints use color-mix() on a token.
   No position:fixed. The filter bar is sticky only from 700px up. Sizes are in rem so 130% text still fits.
   Reuses .wrap, .band and the page hero (pagehero hero--data) from styles.css. .chip is not in the site sheet, so it is defined here.
   Token mapping from the shell (shell value -> site token):
     --lake-ink -> --lake-text      --on-dark-soft -> --glass-soft   --ease-out -> --ease-settle
     --warn (text) -> --warn-ink    #fff -> --on-dark / --card        #fdf0b8 (mark) -> --warn-lite
     #ece5d6 (map backdrop) -> --sand   black halos -> --night   --pine-3 was unused and is dropped */

#evx [hidden]{display:none!important}
#evx h2,#evx h3{font-family:var(--font-display);font-weight:700;color:var(--pine);text-wrap:balance;line-height:1.1;letter-spacing:-.02em;margin:0}
#evx p{margin:0}
#evx a{overflow-wrap:anywhere}
#evx :focus-visible{outline:3px solid var(--lake-2);outline-offset:3px;border-radius:6px}
#evx button{font:inherit}
#evx mark{background:var(--warn-lite);color:inherit;border-radius:3px;padding:0 1px}
#evx #filters{scroll-margin-top:var(--gv-anchor-top,120px)}

/* ---------- Hero: title, search, the valley map, the season ledger (dark pine, the site's data-page hero) ---------- */
#evx .evhero{background:var(--pine);background-image:none;min-height:0;overflow:hidden}
#evx .evhero::after{display:none}
#evx .evhero>.wrap{height:auto;display:block;padding-top:0;padding-bottom:0;margin-top:0}
#evx .evhero>.evhero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s6);align-items:center;padding-block:var(--s7) var(--s6)}
#evx .evhero .eyebrow{margin:0 0 var(--s2)}
#evx .evhero h1{color:var(--on-dark);font-family:var(--font-display);font-size:clamp(2.125rem,6.2vw,4rem);font-weight:600;letter-spacing:-.03em;line-height:1.08;max-width:none}
#evx .evhero .lede{margin:var(--s4) 0 0;max-width:44ch;color:var(--on-dark);font-size:1.1875rem}
#evx .tally{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);align-items:baseline;font-size:1.1875rem;color:var(--on-dark)}
#evx .tally .n{font-weight:700;color:var(--mint);font-variant-numeric:tabular-nums}
#evx .tally button{appearance:none;background:none;border:0;color:var(--mint);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;min-height:44px;padding:0}

/* search */
#evx .search{margin-top:var(--s5);max-width:34rem;display:grid;gap:var(--s2)}
#evx .search label{font-weight:700;font-size:1.3125rem;font-family:var(--font-display);color:var(--on-dark)}
#evx .sbox{position:relative;display:flex;align-items:center;background:var(--card);border-radius:var(--r-m);box-shadow:0 0 0 2px transparent;transition:box-shadow .2s}
#evx .sbox:focus-within{box-shadow:0 0 0 3px var(--mint)}
#evx .sbox svg{position:absolute;left:14px;width:20px;height:20px;fill:none;stroke:var(--ink-soft);stroke-width:2;stroke-linecap:round;pointer-events:none}
#evx .sbox input{flex:1;min-width:0;min-height:52px;border:0;background:transparent;border-radius:var(--r-m);padding:0 var(--s3) 0 44px;font:inherit;font-size:1.125rem;color:var(--ink)}
#evx .sbox input:focus{outline:none}
#evx .sbox input::-webkit-search-cancel-button{display:none}
#evx .qclear{appearance:none;border:0;background:none;color:var(--link);text-decoration:underline;text-underline-offset:.15em;font-size:1rem;min-height:44px;padding:0 var(--s3);cursor:pointer}
#evx .qhelp{font-size:var(--step--1);color:var(--glass-soft);display:flex;flex-wrap:wrap;gap:0 var(--s2);align-items:baseline}
#evx .qhelp .ex{appearance:none;border:0;background:none;color:var(--mint);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--mint) 45%,transparent);text-underline-offset:.2em;font:inherit;min-height:44px;padding:0 4px;cursor:pointer}
#evx .qhelp .ex:hover{text-decoration-color:var(--mint)}

/* the drawing (fallback) */
#evx .valley{position:relative;isolation:isolate;aspect-ratio:4/3;max-width:680px;width:100%;justify-self:end}
#evx .valley>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#evx .valley .road{fill:none;stroke:var(--glass-soft);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
#evx .valley .road.lit{stroke:var(--mint);opacity:1}
#evx .valley .water{fill:var(--lake-2)}
#evx .valley .contour{fill:none;stroke:var(--glass-soft);stroke-width:.7;opacity:.22;vector-effect:non-scaling-stroke}
#evx .valley .contour.major{opacity:.42;stroke-width:1.1}
#evx .valley .rlabel{fill:var(--glass-soft);font-size:11px;font-weight:600;letter-spacing:.02em}
#evx .pin{--pt:translate(-50%,-14px);position:absolute;transform:var(--pt);appearance:none;border:0;background:none;cursor:pointer;padding:6px;min-width:44px;min-height:44px;display:grid;justify-items:center;gap:4px;color:var(--on-dark)}
#evx .pin .dot{width:16px;height:16px;border-radius:50%;background:var(--pine);border:3px solid var(--mint);transition:transform .2s var(--ease-settle),background .2s}
#evx .pin .name{font-weight:700;font-size:var(--step--1);line-height:1.1;white-space:nowrap;text-shadow:0 1px 2px color-mix(in srgb,var(--night) 35%,transparent)}
#evx .pin .cnt{font-size:var(--step--1);color:var(--glass-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
#evx .pin:hover .dot{transform:scale(1.25)}
#evx .pin[aria-pressed="true"] .dot{background:var(--mint);transform:scale(1.35)}
#evx .pin[aria-pressed="true"] .name{color:var(--mint)}
#evx .pin .name,#evx .pin .cnt{text-shadow:0 0 3px var(--pine),0 0 6px var(--pine),0 0 10px var(--pine)}
#evx .pin--lake .dot{display:none}
#evx .pin--side{display:grid;grid-template-columns:auto auto;justify-items:start;align-items:center;column-gap:8px;--pt:translate(-14px,-50%)}
#evx .pin--side .dot{grid-row:1 / span 2}
#evx .valley.filtered .pin[aria-pressed="false"]{opacity:.55}
#evx .map-note{position:absolute;left:0;top:0;font-size:var(--step--1);color:var(--glass-soft)}

/* the real map (Leaflet + USGS The National Map, public domain) */
#evx .tmap{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;background:var(--sand);font-family:inherit;z-index:0}
#evx .tmap .relief{filter:sepia(.32) saturate(.85) contrast(1.04)}
#evx .tmap .sat{filter:saturate(1.05) brightness(.96)}
#evx .tmap .leaflet-control-attribution{font-size:.75rem;background:color-mix(in srgb,var(--sand-2) 88%,transparent);color:var(--ink-soft)}
#evx .tmap .leaflet-control-attribution a{color:var(--link)}
#evx .tmap .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:1.375rem;color:var(--pine)}
#evx .valley.real>svg,#evx .valley.real>.pin{display:none}
#evx .valley.real{margin-bottom:var(--s5)}
#evx .valley.real .map-note{top:auto;bottom:-30px}
#evx .mapswitch{position:absolute;left:10px;top:10px;z-index:500;display:flex;background:color-mix(in srgb,var(--sand-2) 94%,transparent);border-radius:var(--r-pill);padding:3px;gap:2px;box-shadow:0 1px 4px color-mix(in srgb,var(--night) 25%,transparent)}
#evx .mapswitch button{appearance:none;border:0;background:transparent;color:var(--ink);min-height:44px;padding:0 16px;border-radius:var(--r-pill);font-size:1rem;cursor:pointer}
#evx .mapswitch button[aria-pressed="true"]{background:var(--pine);color:var(--on-dark)}
#evx .town-mk{background:none;border:0}
#evx .town-mk::before{content:"";position:absolute;width:48px;height:48px;left:-24px;top:-24px}
#evx .town-mk:focus-visible{outline:none}
#evx .town-mk .ring{position:absolute;left:-13px;top:-13px;width:26px;height:26px;box-sizing:border-box;border-radius:50%;border:3px solid var(--pine);background:color-mix(in srgb,var(--card) 70%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--card) 85%,transparent);transition:transform .25s var(--ease-settle),background .2s}
#evx .town-mk .ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--lake);opacity:0;pointer-events:none}
#evx .town-mk:hover .ring,#evx .town-mk:focus-visible .ring{transform:scale(1.18)}
#evx .town-mk:hover .ring::after,#evx .town-mk:focus-visible .ring::after{animation:evping 1.3s var(--ease-settle) infinite}
#evx .town-mk:focus-visible .ring{outline:3px solid var(--lake);outline-offset:5px}
#evx .town-mk[aria-pressed="true"] .ring{background:var(--lake);border-color:var(--pine);transform:scale(1.2)}
#evx .town-mk .lbl{position:absolute;display:grid;white-space:nowrap;color:var(--pine);line-height:1.15;text-shadow:0 0 2px var(--card),0 0 4px var(--card),0 0 8px var(--sand-2),0 0 12px var(--sand-2)}
#evx .town-mk .lbl .name{font-weight:700;font-size:var(--step--1)}
#evx .town-mk .lbl .cnt{font-size:var(--step--1);color:var(--ink);font-variant-numeric:tabular-nums}
#evx .town-mk.side-b .lbl{left:0;top:18px;transform:translateX(-50%);text-align:center}
#evx .town-mk.side-r .lbl{left:20px;top:0;transform:translateY(-50%)}
#evx .town-mk.side-l .lbl{right:20px;top:0;transform:translateY(-50%);text-align:right}
#evx .town-mk.side-t .lbl{left:0;bottom:18px;transform:translateX(-50%);text-align:center}
#evx .valley.filtered .town-mk[aria-pressed="false"]{opacity:.6}
/* aerial imagery: white labels with a dark halo and a darker pill so they hold on any ground */
#evx .valley.sat .town-mk .lbl{color:var(--on-dark);text-shadow:0 0 2px var(--night),0 0 4px var(--night),0 0 10px var(--night)}
#evx .valley.sat .town-mk .lbl{background:var(--night);background:color-mix(in srgb,var(--night) 62%,transparent);padding:2px 9px;border-radius:14px}
#evx .valley.sat .town-mk .lbl .cnt{color:var(--glass-ink)}
#evx .valley.sat .town-mk .ring{border-color:var(--on-dark);background:color-mix(in srgb,var(--pine) 55%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--night) 35%,transparent)}
#evx .valley.sat .town-mk .ring::after{border-color:var(--mint)}
#evx .valley.sat .town-mk[aria-pressed="true"] .ring{background:var(--mint);border-color:var(--on-dark)}
@keyframes evping{0%{transform:scale(1);opacity:.95}100%{transform:scale(2.3);opacity:0}}

/* ---------- The season ledger: sixty days as sediment ---------- */
#evx .evhero>.ledger-wrap{padding-block:0 var(--s6)}
#evx .ledger{margin:0;display:grid;gap:var(--s2)}
#evx .ledger svg{width:100%;height:96px;display:block;overflow:visible}
#evx .ledger .d{fill:var(--glass-soft);opacity:.28;transition:opacity .35s var(--ease-settle),fill .35s}
#evx .ledger .on .d{fill:var(--mint);opacity:1}
#evx .ledger .d.w,#evx .ledger .on .d.w{fill:var(--lake-2)}
#evx .ledger .base{stroke:var(--pine-2);stroke-width:1;vector-effect:non-scaling-stroke}
#evx .ledger .today{stroke:var(--mint);stroke-width:1.5;vector-effect:non-scaling-stroke}
#evx .ledger-cap{display:grid;gap:var(--s1);font-size:var(--step--1);color:var(--glass-soft)}
#evx .months{position:relative;height:1.4em;display:block}
#evx .months span{position:absolute;top:0;white-space:nowrap}

/* ---------- Next up ---------- */
#evx .next{padding-block:var(--s7) var(--s6)}
#evx .next .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s6) var(--s7);align-items:start}
#evx .next h2{font-size:clamp(1.625rem,3.4vw,2.125rem);margin-bottom:var(--s4)}
#evx .feature{display:grid;gap:var(--s3)}
#evx .feature .when{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--lake-text)}
#evx .feature .t{font-family:var(--font-display);font-size:clamp(1.875rem,4vw,2.75rem);font-weight:700;line-height:1.05;letter-spacing:-.025em;color:var(--pine)}
#evx .feature .where{color:var(--ink-soft);font-size:1.125rem}
#evx .feature p.sum{max-width:52ch;font-size:1.125rem}
#evx .also-up{list-style:none;margin:0;padding:0;display:grid}
#evx .also-up li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--s3);padding-block:var(--s3);border-top:1px solid var(--line)}
#evx .also-up li:first-child{border-top:0;padding-top:0}
#evx .also-up .w{font-weight:700;color:var(--lake-text);font-variant-numeric:tabular-nums}
#evx .also-up .ttl{font-weight:600;color:var(--ink)}
#evx .also-up .ttl a{color:var(--ink);text-decoration-color:var(--line)}
#evx .also-up .ttl a:hover{color:var(--lake-text);text-decoration-color:var(--lake)}
#evx .also-up .pl{color:var(--ink-soft);font-size:var(--step--1)}
#evx .feature a,#evx .also-up .ttl a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- At the lake (static, so it shows even when the feed is down) ---------- */
#evx .lake{background:var(--sand-2);border-block:1px solid var(--line)}
#evx .lake .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s7)}
#evx .lake h2{font-size:clamp(1.625rem,3.4vw,2.125rem)}
#evx .lake .say{display:grid;gap:var(--s3);align-content:start;max-width:56ch}
#evx #lakeBody{display:grid;gap:var(--s3)}
#evx .annual-h{font-size:1.3125rem;margin-bottom:var(--s2)}
#evx .annual{list-style:none;margin:0;padding:0;display:grid}
#evx .annual li{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:var(--s4);padding-block:var(--s4);border-top:1px solid var(--line)}
#evx .annual li:first-child{border-top:0}
#evx .annual .m{font-family:var(--font-display);font-weight:600;font-size:1.1875rem;color:var(--lake-text)}
#evx .annual a{font-weight:700}
#evx .annual-note{margin-top:var(--s3);font-size:var(--step--1);color:var(--ink-soft)}
#evx .lake .localpick{margin-top:var(--s5);max-width:65ch}
#evx .regular{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
#evx .regular li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);font-size:var(--step--1);padding-block:2px}
#evx .regular .p{color:var(--ink-soft);text-align:right}

/* ---------- Filters ---------- */
#evx .evfilters{background:var(--bg);border-block:1px solid var(--line)}
@media (min-width:700px){ /* sticky only on wider screens: a phone's bar would eat the screen */
  #evx .evfilters{position:sticky;top:var(--gv-chrome-h,100px);z-index:5;max-height:calc(100vh - var(--gv-chrome-h,100px));overflow-y:auto}
}
#evx .evfilters .wrap{padding-block:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}
#evx .seg{display:inline-flex;background:var(--sand-2);border-radius:var(--r-pill);padding:4px;gap:2px;flex-wrap:wrap}
#evx .chip{appearance:none;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:1rem;line-height:1.2;min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);cursor:pointer;transition:background .2s var(--ease-settle),color .2s,border-color .2s}
#evx .chip:hover{border-color:var(--lake)}
#evx .chip[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:var(--on-dark)}
#evx .chip:active{transform:scale(.97)}
#evx .seg .chip{border-color:transparent;background:transparent}
#evx .seg .chip:hover{background:var(--sand)}
#evx .seg .chip[aria-pressed="true"]{background:var(--pine);color:var(--on-dark)}
#evx .more[aria-expanded="true"]{border-color:var(--pine)}
#evx select.chip{padding-right:var(--s5)}
#evx .count{color:var(--ink-soft);font-size:var(--step--1);font-variant-numeric:tabular-nums}
#evx .more-filters{display:none;flex-basis:100%;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
#evx .evfilters.open .more-filters{display:flex}
#evx .active{flex-basis:100%;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:var(--step--1)}
#evx .linkbtn{appearance:none;background:none;border:0;color:var(--link);text-decoration:underline;text-underline-offset:.15em;cursor:pointer;min-height:44px;padding:0 var(--s2);font-size:var(--step--1)}

/* ---------- The calendar ---------- */
#evx #list{padding-block:var(--s6) var(--s7)}
#evx .day{display:grid;grid-template-columns:108px minmax(0,1fr);gap:var(--s5);padding-block:var(--s5);border-top:2px solid var(--sand)}
#evx .day:first-child{border-top:0}
/* the shell stuck each date to the top; here the site header and the filter bar are already stuck there, so the date scrolls with its day */
#evx .date{align-self:start;display:grid;justify-items:start;line-height:1}
#evx .date .num{font-family:var(--font-display);font-size:4rem;font-weight:600;color:var(--pine);letter-spacing:-.04em;font-variant-numeric:lining-nums}
#evx .date .dw{font-weight:700;color:var(--lake-text);margin-top:6px}
#evx .date .rel{font-size:var(--step--1);color:var(--ink-soft);margin-top:2px}
#evx .rows{display:grid}
#evx .ev{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--s1) var(--s4);padding-block:var(--s4)}
#evx .ev+.ev{border-top:1px solid var(--line)}
#evx .ev .time{font-weight:700;color:var(--lake-text);font-variant-numeric:tabular-nums;padding-top:3px}
#evx .ev .time.unknown{color:var(--ink-soft);font-weight:400;font-size:var(--step--1)}
#evx .ev .body{display:grid;gap:4px;min-width:0;padding:0}
#evx .ev h3{font-size:1.3125rem;font-weight:600;letter-spacing:-.01em}
#evx .ev .where{color:var(--ink-soft)}
#evx .ev .sum{max-width:64ch}
#evx .meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--step--1);color:var(--ink-soft);margin-top:2px}
#evx .meta .free{color:var(--ok);font-weight:700}
#evx .meta .adult{color:var(--warn-ink);font-weight:700}
#evx .also{font-size:var(--step--1);color:var(--ink-soft)}
#evx .ev .body>div>a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:640px){
  #evx .day{grid-template-columns:1fr;gap:var(--s2)}
  #evx .date{display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap}
  #evx .date .num{font-size:2.75rem}
  #evx .date .dw,#evx .date .rel{margin-top:0}
  #evx .ev{grid-template-columns:1fr;gap:2px}
}

/* ---------- Regular programs: a timetable, not cards ---------- */
#evx .programs{background:var(--pine);color:var(--on-dark)}
#evx .programs .wrap{display:grid;gap:var(--s5)}
#evx .programs h2{color:var(--on-dark);font-size:clamp(1.625rem,3.4vw,2.125rem)}
#evx .programs .intro{color:var(--glass-soft);max-width:60ch}
#evx .tt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));column-gap:var(--s7)}
#evx .tt li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s4);padding-block:var(--s3) var(--s2);border-top:1px solid var(--pine-2)}
#evx .tt .pat{color:var(--mint);font-size:var(--step--1)}
#evx .tt .nm{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--on-dark);line-height:1.2}
#evx .tt .pl{color:var(--glass-soft);font-size:var(--step--1)}
#evx .tt .nx{text-align:right;color:var(--on-dark);font-size:var(--step--1);font-variant-numeric:tabular-nums;white-space:nowrap}
#evx .tt .nx strong{display:block;color:var(--on-dark);font-size:1rem}
#evx .tt .foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 var(--s5);align-items:center}
#evx .tt details{font-size:var(--step--1);color:var(--glass-soft)}
#evx .tt details[open]{flex-basis:100%;order:2}
#evx .tt summary{cursor:pointer;color:var(--mint);min-height:44px;display:inline-flex;align-items:center}
#evx .tt ul{margin:var(--s1) 0 0;padding-left:18px;columns:2;column-gap:var(--s4)}
#evx .tt a{color:var(--mint);text-decoration-color:color-mix(in srgb,var(--mint) 50%,transparent)}
#evx .tt .lk{font-size:var(--step--1)}
#evx .tt .lk a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:560px){ /* --bp-sm */
  #evx .tt ul{columns:1}
}

/* ---------- Empty and failed states, sources note ---------- */
#evx .empty{padding:var(--s6) 0;display:grid;gap:var(--s2);max-width:56ch}
#evx .empty h3{font-size:1.5rem}
#evx .evsrc{background:var(--sand-2)}
#evx .evsrc .wrap{padding-block:var(--s6);font-size:var(--step--1);color:var(--ink-soft);display:grid;gap:var(--s2)}
#evx .evsrc p{max-width:72ch}

@media (max-width:820px){ /* --bp-lg */
  #evx .evhero>.evhero-grid{grid-template-columns:1fr;padding-block:var(--s6) var(--s5)}
  #evx .valley{justify-self:stretch;max-width:none}
  #evx .next .wrap,#evx .lake .wrap{grid-template-columns:1fr}
}

/* ---------- Motion ---------- */
.js #evx .valley .road{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js #evx .valley.drawn .road{transition:stroke-dashoffset 1.1s var(--ease-settle) .55s;stroke-dashoffset:0}
.js #evx .valley .pin{opacity:0;transform:var(--pt) translateY(10px)}
.js #evx .valley.drawn .pin{opacity:1;transform:var(--pt);transition:opacity .5s var(--ease-settle),transform .6s var(--ease-settle);transition-delay:calc(var(--d,0s) + .9s)}
.js #evx .valley.drawn.filtered .pin[aria-pressed="false"]{opacity:.55}
.js #evx .valley .contour{opacity:0}
.js #evx .valley.drawn .contour{opacity:.22;transition:opacity .6s var(--ease-settle);transition-delay:calc(var(--i) * 45ms)}
.js #evx .valley.drawn .contour.major{opacity:.42}
.js #evx .valley .water{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(.2);opacity:0}
.js #evx .valley.drawn .water{transform:none;opacity:1;transition:transform .9s var(--ease-settle),opacity .4s}
.js #evx .valley.real .town-mk .ring,.js #evx .valley.real .town-mk .lbl{opacity:0}
.js #evx .valley.real.drawn .town-mk .ring{opacity:1;animation:evringIn .7s var(--ease-settle) both;animation-delay:var(--d,0s)}
.js #evx .valley.real.drawn .town-mk .lbl{opacity:1;transition:opacity .5s var(--ease-settle);transition-delay:calc(var(--d,0s) + .25s)}
#evx .rise{animation:evrise .55s var(--ease-settle) both;animation-delay:var(--d,0s)}
#evx .tick{animation:evtick .35s var(--ease-settle)}
@keyframes evringIn{0%{transform:scale(2.6);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes evrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes evtick{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes evfadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #evx .town-mk:hover .ring::after,#evx .town-mk:focus-visible .ring::after{animation:none}
  .js #evx .valley .road{stroke-dasharray:none;stroke-dashoffset:0}
  .js #evx .valley .pin{opacity:1;transform:var(--pt);transition:none}
  .js #evx .valley .water{opacity:1;transform:none;transition:none}
  .js #evx .valley .contour{opacity:.22;transition:none}
  .js #evx .valley .contour.major{opacity:.42}
  .js #evx .valley.real .town-mk .ring,.js #evx .valley.real .town-mk .lbl{opacity:1;animation:none;transition:none}
  #evx .rise,#evx .tick{animation:evfadein .2s both}
}

/* On a narrow map (phones, and the two-column hero from 821 to 960px) the lake's label sits left of its ring, right under the
   Aerial/Terrain switch. Put that one label under its ring instead. (events.js picks the side; this overrides it by CSS only.) */
@media (max-width:560px),(min-width:821px) and (max-width:960px){
  #evx .town-mk[data-town="Vallecito"] .lbl{left:0;right:auto;top:22px;bottom:auto;transform:translateX(-50%);text-align:center}
  #evx .town-mk[data-town="Bayfield"] .lbl{left:20px;right:auto;top:10px;bottom:auto;transform:translateY(-50%);text-align:left}
}

/* ---------- Send us an event: an in-page section in the site's .form idiom (fields and buttons come from styles.css) ---------- */
#evx .tally .tally-link{color:var(--mint);text-decoration:underline;text-underline-offset:.2em;display:inline-flex;align-items:center;min-height:44px}
#evx .evsubmit{scroll-margin-top:var(--gv-anchor-top,120px);background:var(--bg);border-top:1px solid var(--line)}
#evx .evsubmit .wrap{padding-block:var(--s7)}
#evx .evsubmit .intro{margin:var(--s2) 0 var(--s5);max-width:60ch;color:var(--ink-soft)}
#evx .evsubmit .form{margin-top:var(--s4)}
#evx .evsubmit .opt{font-weight:400;color:var(--ink-faint)}
#evx .evsubmit .err{font-weight:600;font-size:var(--step--1);color:var(--danger-ink)}
#evx .evsubmit [aria-invalid="true"]{border-color:var(--danger)}
#evx .evsubmit .more{border-top:1px solid var(--line);padding-top:var(--s3)}
#evx .evsubmit .more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--pine)}
#evx .evsubmit .more .form{margin-top:var(--s3)}
#evx .evsubmit .sd-msg{margin:0;font-weight:700;color:var(--danger-ink)}
#evx .evsubmit .btn{min-height:44px}
#evx .evsubmit button:disabled{opacity:.6;cursor:wait}
#evx .evsubmit #subOk{max-width:560px}
#evx .evsubmit #subOk h3{font-size:1.5rem;margin-bottom:var(--s2)}