:root {
  --bg: #f6f2e8;
  --bg2: #ede6d6;
  --card: #fffdf8;
  --ink: #1b2620;
  --muted: #5b685f;
  --line: #ddd5c3;
  --forest: #1f4d3a;
  --forest2: #2f6b52;
  --lake: #1c6694;
  --sun: #d9692a;
  --sun-soft: #f7dcc8;
  --leaf: #e9f0e6;
  --good: #2f7d4f;
  --warn: #a8641a;
  --danger: #b3261e;
  --danger-soft: #f6dcd9;
  --shadow: 0 1px 2px rgba(27, 38, 32, .06), 0 6px 20px rgba(27, 38, 32, .07);
  --r: 14px;
  --display: "Fraunces", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #111713; --bg2: #18201b; --card: #1a231e; --ink: #e6ede7; --muted: #9aa89f;
  --line: #2c3830; --forest: #7cc4a0; --forest2: #9bd6b8; --lake: #74b6e0; --sun: #f0915a;
  --sun-soft: #3a2a20; --leaf: #1f2c24; --good: #74c79a; --warn: #e3a35a;
  --danger: #e8847a; --danger-soft: #3a211e;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The canvas (html) carries the footer's color, so on iPhone the area past
   the footer when you scroll to the bottom matches the footer instead of
   showing a lighter band. viewport-fit=cover lets backgrounds run edge to
   edge; .wrap keeps content clear of the notch with the safe-area insets. */
html { -webkit-text-size-adjust: 100%; background: var(--bg2); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body); }
img { max-width: 100%; display: block; }
a { color: var(--lake); text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 .9em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 4px; }
main { min-height: 70vh; outline: none; }
/* The home page's static body (scripts/build_pages.py) is for crawlers and
   no-JS visitors; with JS it holds its space invisibly until the app's own
   view replaces it, so nothing flashes and the footer doesn't jump. */
.js .ssr { visibility: hidden; }
.qa h3 { font-size: 1.05rem; margin: 18px 0 4px; }
.qa p { margin: 0; max-width: 72ch; }

/* header */
.top { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--forest); text-decoration: none; font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.brand span { color: var(--ink); line-height: 1.25; }
.brand b { color: var(--sun); }
.btn, .chip.on, .chip[aria-pressed="true"] { color: var(--bg); }
/* One menu at every width: search, light/dark and the hamburger sit on
   the right as square icon buttons, and every link lives in the menu
   panel. My passport is the one filled button on wide screens; at 1024px
   and below it is only in the menu, where it also sits. */
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; min-width: 38px; padding: 0 9px; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.icon-btn:hover { background: var(--bg2); border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }
.icon-btn svg { flex: none; }
.search-kbd { font: 600 .7rem/1 var(--body); color: var(--muted); letter-spacing: .02em; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }
.cta { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 8px; background: var(--forest); color: var(--bg); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.cta:hover { background: var(--forest2); }
.cta.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--forest); }
.stamp-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: var(--sun); color: #fff; font-size: .75rem; text-align: center; }
.menu { position: relative; }
.menu-btn { border-color: transparent; }
.menu-btn path { transition: transform .2s, opacity .2s; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] { background: var(--bg2); }
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }
.menu-panel { position: absolute; top: 46px; right: 0; width: 300px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(22, 21, 20, .16); display: flex; flex-direction: column; }
.menu-panel[hidden] { display: none !important; }
.menu-panel a { display: block; color: var(--ink); text-decoration: none; font-weight: 500; padding: 10px 14px; border-radius: 8px; }
.menu-panel a.sub { font-size: .92rem; padding: 7px 14px; }
.menu-panel a:hover { background: var(--bg2); }
.menu-panel a.on { color: var(--forest); font-weight: 700; }
.menu-panel .label { margin: 10px 14px 2px; font: 700 .7rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.menu-panel .menu-cta { margin-top: 10px; text-align: center; background: var(--forest); color: var(--bg); font-weight: 600; }
.menu-panel .menu-cta:hover { background: var(--forest2); }
.menu-panel .menu-cta.on { color: var(--bg); }
@media (max-width: 1024px) { .cta { display: none; } }
@media (max-width: 600px) {
  .search-kbd { display: none; }
  .top-actions { gap: 6px; }
}
/* Phones: keep the wordmark on one line next to the three buttons, even
   while the rotator shows its longest word ("& Wisconsin"). Phones under 360px
   wrap to two lines rather than shrink the name further. */
@media (max-width: 480px) { .brand { font-size: 1.1rem; gap: 8px; } .brand svg { width: 26px; height: 26px; } .top-in { gap: 8px; } .top-actions { gap: 4px; } .icon-btn { min-width: 36px; height: 36px; padding: 0 8px; } }
@media (max-width: 389px) { .brand { font-size: 1rem; } }

/* search: a dialog over the page, opened from the header, Cmd/Ctrl+K or "/" */
.search-modal { position: fixed; inset: 0; z-index: 3500; display: flex; justify-content: center; align-items: flex-start; padding: max(8vh, 16px) 16px 16px; }
.search-modal[hidden] { display: none !important; }
.search-backdrop { position: absolute; inset: 0; background: rgba(17, 23, 19, .45); backdrop-filter: blur(3px); }
.search-box { position: relative; width: min(640px, 100%); max-height: min(560px, calc(100dvh - 32px)); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); overflow: hidden; }
.search-head { padding: 14px; border-bottom: 1px solid var(--line); }
.search-field { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 50px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.search-field:focus-within { border-color: var(--sun); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 25%, transparent); }
.search-modal .search-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-appearance: none; appearance: none; color: var(--ink); font: 400 1.1rem var(--body); outline: none; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-modal kbd { display: inline-block; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg2); color: var(--muted); font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.search-esc { cursor: pointer; }
.search-results { overflow-y: auto; overscroll-behavior: contain; padding: 8px; margin: 0; list-style: none; }
.search-results li { margin: 0; }
.search-group { margin: 10px 10px 4px; font: 700 .7rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.search-hit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.search-hit .t { font-weight: 600; }
.search-hit .t mark { background: none; color: var(--sun); }
.search-hit .m { flex: none; font-size: .82rem; color: var(--muted); text-align: right; }
.search-hit[aria-selected="true"] { background: var(--bg2); box-shadow: inset 3px 0 0 var(--sun); }
.search-empty { padding: 26px 16px 22px; text-align: center; color: var(--muted); }
.search-empty p { margin: 0 0 14px; }
.search-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: .85rem; }
@media (max-width: 600px) { .search-tips { display: none; } .search-hit { flex-direction: column; gap: 2px; } .search-hit .m { text-align: left; } }
@media (hover: none) { .search-esc { display: none !important; } }

/* buttons, chips, inputs */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 20px; font: 600 1rem var(--body); cursor: pointer; text-decoration: none; background: var(--forest); color: var(--bg); }
.btn:hover { filter: brightness(1.08); }
.btn.alt { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.sun { background: var(--sun); color: #fff; }
.btn.sm { padding: 8px 14px; font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 500 .9rem var(--body); cursor: pointer; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--forest2); }
.chip[aria-pressed="true"], .chip.on { background: var(--forest); color: var(--bg); border-color: var(--forest); }
.chip.static { cursor: default; }
.tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--leaf); color: var(--forest); }
.tag.sun { background: var(--sun-soft); color: var(--sun); }
.tag.lake { background: color-mix(in srgb, var(--lake) 14%, transparent); color: var(--lake); }
select, input[type="search"], input[type="number"] { font: 500 1rem var(--body); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px; }
label.lbl { display: block; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }

/* hero / planner */
.hero { --sky: linear-gradient(180deg, #173b2c 0%, #1f4d3a 45%, #4d6a46 100%); --sc-far: #3d6f55; --sc-mid: #255541; --sc-near: #143528; --sc-lake: #3c6f73; --sc-night: #142235;
  background: var(--sky); color: #f6f2e8; padding: 56px 0 max(19vw, 170px); position: relative; overflow: hidden; isolation: isolate; }
/* golden hour (after the painted Badge hero): deep blue overhead, warm at the horizon, hazy far bluffs */
.hero { --sc-rock: #c9b79c; --sc-rock-line: #9c8a72; }
.hero[data-season="fall"] { --sky: linear-gradient(180deg, #17344c 0%, #29587a 30%, #6f7f8a 52%, #d08a52 78%, #f3b56d 100%); --sc-far: #6b7889; --sc-mid: #3a5641; --sc-near: #1d3a2b; }
.hero[data-season="winter"] { --sky: linear-gradient(180deg, #2b4a5c 0%, #4f6f80 45%, #b9b6c2 80%, #e2cbbf 100%); --sc-far: #6c8a93; --sc-mid: #3f5f63; --sc-near: #213d3c; }
.hero[data-season="spring"] { --sky: linear-gradient(180deg, #1f4a63 0%, #3f7a94 40%, #a9a98f 72%, #e8c79a 100%); --sc-far: #6f8796; }
.hero[data-season="summer"] { --sky: linear-gradient(180deg, #17405f 0%, #33709a 38%, #9ea79a 66%, #f0c483 100%); --sc-far: #66819a; }
.hero-content { position: relative; z-index: 3; }
.scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sc-layer { position: absolute; left: -3%; right: -3%; bottom: -2px; height: max(27.8vw, 230px); will-change: transform; }
.sc-layer svg { width: 100%; height: 100%; display: block; overflow: visible; }
.scene.ready .sc-layer svg { animation: sc-rise 1.4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 90ms); }
.scene.ready .sc-layer:last-of-type svg { animation: none; }
@keyframes sc-rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.sc-sun { animation: sc-breathe 6s ease-in-out infinite; transform-origin: 1220px 150px; }
@keyframes sc-breathe { 50% { transform: scale(1.06); } }
.sc-snow i { position: absolute; top: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .8; animation: sc-fall var(--d) linear infinite; animation-delay: var(--delay); }
@keyframes sc-fall { to { transform: translate(var(--x), 110vh); } }
/* flock: flies in from the right over the sunset and fades out before the headline */
.sc-flock { position: absolute; top: 30%; left: 0; width: 1px; height: 1px; animation: sc-flock 26s linear infinite; animation-delay: -6s; }
.sc-bird { position: absolute; fill: #f6f2e8; opacity: .88; overflow: visible; animation: sc-bob 2.6s ease-in-out infinite; animation-delay: var(--bd); }
.sc-bird .w-near, .sc-bird .w-far { transform-box: view-box; animation: sc-flap var(--fd) ease-in-out infinite alternate; }
.sc-bird .w-near { transform-origin: 18px 14px; }
.sc-bird .w-far { transform-origin: 22px 13px; opacity: .75; animation-name: sc-flap-far; }
@keyframes sc-flap { from { transform: rotate(-26deg) scaleY(1); } to { transform: rotate(34deg) scaleY(.45); } }
@keyframes sc-flap-far { from { transform: rotate(22deg) scaleY(1); } to { transform: rotate(-30deg) scaleY(.45); } }
@keyframes sc-bob { 50% { transform: translateY(-7px); } }
@keyframes sc-flock { 0% { transform: translateX(105vw) translateY(10px); opacity: 0; } 6% { opacity: 1; } 50% { opacity: 1; } 70% { transform: translateX(60vw) translateY(-26px); opacity: 0; } 100% { transform: translateX(60vw) translateY(-26px); opacity: 0; } }
.sc-flock .sc-bird { scale: -1 1; } /* face the direction of travel without fighting the bob animation */
@media (max-width: 760px) { .sc-flock { display: none; } .hero .quick { display: none; } }
@media (prefers-reduced-motion: reduce) { .scene .sc-layer svg, .sc-sun, .sc-flock, .sc-bird, .sc-bird path, .sc-snow i { animation: none !important; } .sc-snow, .sc-flock { display: none; } }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: #f3a36f; }
.hero p.lede { font-size: 1.15rem; max-width: 56ch; color: #d8e4dc; }
.planner { position: relative; z-index: 2; background: var(--card); color: var(--ink); border-radius: 20px; box-shadow: var(--shadow); padding: 20px; margin-top: 28px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 12px; align-items: center; max-width: 860px; }
.planner .say { font-family: var(--display); font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.planner select { width: 100%; font-size: 1.05rem; font-weight: 600; }
@media (max-width: 760px) {
  .planner { grid-template-columns: 1fr; }
  .planner .say { font-size: 1.15rem; }
}
.quick { margin-top: 18px; position: relative; z-index: 2; }
.quick .chip { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); }
.quick .chip:hover { background: rgba(255,255,255,.2); }

/* sections */
.sec { padding: 40px 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-head p { margin: 0; }
.sec-head .row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* iPad landscape (classic 1024 through 12.9" Pro's 1366) renders 4 of these
   sections' cards per row at the default auto-fill sizing -- cap it at 3 so
   nothing feels cramped, instead of just reflowing with an orphaned 4th card
   wrapping to its own row. */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid > :nth-child(4) { display: none; }
}
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.pcard { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .15s; }
.pcard:hover { transform: translateY(-2px); }
.pcard .ph { aspect-ratio: 3 / 2; background: var(--bg2) center/cover no-repeat; position: relative; }
.pcard .ph .tag { position: absolute; left: 10px; top: 10px; background: rgba(16,41,31,.82); color: #fff; }
.pcard .ph .stamp { position: absolute; right: 10px; top: 10px; background: var(--sun); color: #fff; border-radius: 999px; font-size: .75rem; font-weight: 700; padding: 3px 9px; }
.pcard .bd { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard h3 { margin: 0; }
.pcard .meta { font-size: .85rem; color: var(--muted); }
.pcard .why { font-size: .9rem; }
.icons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; }
.icons span { font-size: 1.05rem; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--bg2); }
.icons span.hit { background: var(--sun-soft); outline: 2px solid var(--sun); }

.feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.stat b { display: block; font-family: var(--display); font-size: 2rem; color: var(--forest); line-height: 1.1; }
.stat span { font-size: .85rem; color: var(--muted); }

/* explore */
.explore { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 60px); height: calc(100dvh - 60px); }
.ex-side { border-right: 1px solid var(--line); overflow: auto; background: var(--bg); display: flex; flex-direction: column; }
.ex-filters { padding: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 0; position: sticky; top: 0; background: var(--bg); z-index: 5; }
.ex-filters .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ex-filters select, .ex-filters input { width: 100%; }
.ex-count { font-size: .85rem; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ex-list { list-style: none; margin: 0; padding: 8px; }
.ex-list li a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 8px; border-radius: 12px; color: inherit; text-decoration: none; align-items: center; }
.ex-list li a:hover, .ex-list li a.hl { background: var(--bg2); }
.ex-list .th { width: 64px; height: 64px; border-radius: 10px; background: var(--bg2) center/cover; }
.ex-list b { display: block; font-size: .98rem; }
.ex-list .meta { display: block; font-size: .8rem; color: var(--muted); }
.ex-list .meta:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ex-map { position: relative; }
#map { position: absolute; inset: 0; }
.view-toggle { display: none; }
@media (max-width: 860px) {
  .explore { grid-template-columns: 1fr; height: auto; }
  .ex-side { border-right: 0; overflow: visible; }
  .ex-filters { top: 60px; }
  .ex-map { height: max(220px, calc(100vh - 134px)); height: max(220px, calc(100svh - 134px)); display: none; }
  .explore.show-map .ex-map { display: block; }
  .explore.show-map .ex-list { display: none; }
  .view-toggle { display: inline-flex; }
}
.maplibregl-map { font: inherit; }
.maplibregl-popup-content { border-radius: 12px; padding: 12px 14px; color: #1b2620; box-shadow: var(--shadow); }
.pop { display: grid; gap: 4px; }
.pop a { color: #1c6694; }
.pop b { font-size: 1rem; display: block; }
.pop a { font-weight: 600; }
.pin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pin.park { background: #1f4d3a; } .pin.forest { background: #6b8e23; } .pin.trail { background: #d9692a; } .pin.rec { background: #1c6694; } .pin.lands { background: #7a5c99; } .pin.other { background: #777; }
.legend { position: absolute; z-index: 500; bottom: 22px; left: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: .8rem; display: grid; gap: 4px; box-shadow: var(--shadow); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* park detail */
.p-hero { min-height: min(clamp(240px, 38vw, 380px), 75vh); min-height: min(clamp(240px, 38vw, 380px), 75svh); background: var(--forest) center/cover; position: relative; display: flex; }
.p-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(10,25,18,.85)); }
.p-hero .wrap { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: min(clamp(90px, 18vw, 180px), 22vh); padding-top: min(clamp(90px, 18vw, 180px), 22svh); padding-bottom: 22px; color: #fff; }
.p-hero h1 { color: #fff; margin: 4px 0 0; font-size: clamp(1.8rem, 6vw, 3.2rem); text-wrap: balance; }
.p-hero .kind { font-weight: 600; color: #f3c19f; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.crumbs { font-size: .9rem; }
.crumbs a { color: #e8efe9; }
.p-body { display: grid; grid-template-columns: 1fr 340px; gap: 28px; padding: 28px 16px 56px; }
@media (max-width: 900px) { .p-body { grid-template-columns: 1fr; } }
.p-side { display: grid; gap: 16px; align-content: start; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.box h3 { margin-bottom: 10px; }

.cond-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.cond-row:first-child { border-top: 0; padding-top: 0; }
.cond-row .ic { flex: none; width: 22px; height: 22px; color: var(--forest2); margin-top: 1px; }
.cond-row .cond-main { font-weight: 600; }
.cond-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.facts { display: grid; gap: 10px; margin: 0; }
.facts dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.facts dd { margin: 0; }
.p-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.season { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: .8rem; }
.season th { font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0; }
.season th.act { text-align: left; color: var(--ink); white-space: nowrap; padding-right: 8px; font-size: .88rem; }
.season td { height: 22px; border-radius: 4px; background: var(--bg2); }
.season td.ok { background: color-mix(in srgb, var(--forest2) 40%, transparent); }
.season td.pk { background: var(--forest); }
.season td.now { outline: 2px solid var(--sun); }
.season-wrap { overflow-x: auto; }
.legend-inline { display: flex; gap: 14px; font-size: .8rem; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.legend-inline i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.acts { display: grid; gap: 12px; }
details.act { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
details.act summary { cursor: pointer; padding: 14px 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; list-style: none; }
details.act summary::-webkit-details-marker { display: none; }
details.act summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--muted); }
details.act[open] summary::after { content: "–"; }

details.act .tx { padding: 0 16px 16px; white-space: pre-line; font-size: .95rem; }
details.act .tx a { font-weight: 600; }
.notice { background: var(--sun-soft); border-left: 4px solid var(--sun); padding: 12px 14px; border-radius: 8px; font-size: .92rem; }
.notice.good { background: var(--leaf); border-color: var(--good); }
.notice.bad { background: var(--danger-soft); border-color: var(--danger); }

/* months */
.month-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.month-tabs .chip { flex: none; }
.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.mcard { padding: 18px; }
.mcard h3 { display: flex; align-items: center; gap: 8px; }
.mcard ul { margin: 0; padding-left: 1.1em; }
.mcard li { margin: 4px 0; }
.dates { display: grid; gap: 10px; }
.date { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.date .d { background: var(--forest); color: var(--bg); border-radius: 12px; text-align: center; padding: 6px 0; line-height: 1.1; }
.date .d small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.date .d b { font-family: var(--display); font-size: 1.4rem; }

/* pass */
.price-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.price-table th, .price-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.price-table th { background: var(--bg2); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.price-table td.n { font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--forest); }
.table-wrap { overflow-x: auto; border-radius: var(--r); }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc .inputs { display: grid; gap: 14px; }
.seg { display: inline-flex; background: var(--bg2); border-radius: 999px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 8px 14px; border-radius: 999px; font: 600 .9rem var(--body); color: var(--ink); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--card); box-shadow: var(--shadow); }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type=range] { flex: 1; accent-color: var(--forest); min-height: 44px; }
.range-row output { font-family: var(--display); font-weight: 700; font-size: 1.4rem; min-width: 2.5ch; text-align: right; }
.verdict { background: var(--forest); color: #f6f2e8; border-radius: var(--r); padding: 22px; }
.verdict h3 { color: #fff; font-size: 1.5rem; }
.verdict .big { font-family: var(--display); font-size: 2.6rem; font-weight: 800; color: #f3a36f; line-height: 1; }
.verdict ul { padding-left: 1.1em; margin: 10px 0 0; }
:root[data-theme="dark"] .verdict { background: #1f4d3a; }
.tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tip { padding: 18px; }
.tip .k { font-size: 1.6rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 10px 0 0; }

/* passport */
.pp-head { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.meter { height: 14px; background: var(--bg2); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--forest2), var(--sun)); border-radius: 999px; }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.stampbtn { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px dashed var(--line); background: var(--card); color: var(--ink); border-radius: 12px; padding: 10px; cursor: pointer; font: 500 .9rem var(--body); min-height: 56px; }
.stampbtn .seal { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; font-size: .9rem; }
.stampbtn[aria-pressed="true"] { border-style: solid; border-color: var(--sun); background: var(--sun-soft); }
.stampbtn[aria-pressed="true"] .seal { border: 2px solid var(--sun); background: var(--sun); color: #fff; transform: rotate(-12deg); }

.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.loading { padding: 60px 16px; text-align: center; color: var(--muted); }
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: .92rem; background: var(--bg2); }
.foot p { max-width: 80ch; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 600; z-index: 2000; box-shadow: var(--shadow); }

/* map controls */
/* Every map is a size container, so its overlays size to the map, not the window. */
.maplibregl-map { container-type: inline-size; }
.mapctl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100cqw - 20px); }
.mapctl select, .mapctl button { min-height: 36px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: #fffdf8; color: #1b2620; font: 600 .85rem var(--body); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.mapctl button[aria-pressed="true"] { background: #1f4d3a; color: #fff; border-color: #1f4d3a; }
.mapctl .mc-fly { background: #d9692a; color: #fff; border-color: #d9692a; }
.you-dot { width: 18px; height: 18px; border-radius: 50%; background: #1c6694; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(28,102,148,.25); }
.warn { color: var(--warn) !important; font-weight: 600; }
.pop .warn { color: #a8641a !important; }
.mini-box { padding: 0; overflow: hidden; }
#mini { height: 300px; position: relative; }
.notice-item { padding: 10px 0; border-top: 1px solid var(--line); }
.notice-item:first-of-type { border-top: 0; padding-top: 0; }

/* season timeline */
.timeline { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: 22px; width: min(560px, calc(100% - 24px)); display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow); }
.tl-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sun); color: #fff; font-size: 1rem; cursor: pointer; }
.tl-track { flex: 1; min-width: 0; }
.tl-head { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-track input { width: 100%; accent-color: var(--forest); margin: 4px 0 0; }
.tl-ticks { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); padding: 0 2px; }
/* The overlays on the Explore map size themselves to the map (a container),
   not the window: the map is a side panel on desktop and the whole screen
   on a phone, and either can be short. Anything big collapses. */
.ex-map { container: exmap / size; }
.ex-map .legend { bottom: auto; top: 10px; left: 10px; padding: 0; display: block; z-index: 5; }
.legend summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; font-weight: 600; font-size: .85rem; border-radius: 10px; }
.legend summary::-webkit-details-marker { display: none; }
.legend summary::after { content: "+"; color: var(--muted); font-size: 1.1rem; line-height: 1; }
.legend[open] summary::after { content: "\2013"; }
.legend-body { display: grid; gap: 4px; padding: 0 12px 10px; max-height: calc(100cqh - 160px); overflow: auto; }
/* Long popups scroll inside (the close button stays in the corner); js keepClear() fits them to the free space. */
.ex-map .pop { max-height: max(100px, calc(100cqh - 130px)); overflow: auto; overscroll-behavior: contain; }
/* an open popup sits above the map controls (z 2), under the timeline and key (z 5) */
.ex-map .maplibregl-popup { z-index: 3; }
/* Mid-width maps: slide the timeline left so the Ask Badge button keeps its corner. */
@container exmap (max-width: 760px) { .timeline { left: 12px; right: 90px; width: auto; transform: none; } }
/* Phone-width maps: full width; Ask Badge lifts above it (js/chat.js). */
@container exmap (max-width: 560px) { .timeline { left: 10px; right: 10px; bottom: 12px; } .ex-map .legend { top: 56px; } }
/* Short maps: a slimmer timeline (no tick row, no walking Badge). */
@container exmap (max-height: 480px) {
  .timeline { bottom: 10px; padding: 6px 12px 6px 8px; gap: 10px; border-radius: 12px; }
  .tl-play { width: 36px; height: 36px; font-size: .85rem; }
  .tl-ticks, .tl-buddy { display: none; }
  .tl-head { font-size: .82rem; }
  .ex-map .legend summary { min-height: 32px; padding: 4px 10px; }
}
/* Short maps on touch screens: pinch zooms, so the +/- buttons can go (the compass stays for 3D). */
@media (pointer: coarse) { @container exmap (max-height: 480px) { .ex-map .maplibregl-ctrl-zoom-in, .ex-map .maplibregl-ctrl-zoom-out { display: none; } } }

/* flyover */
.fly { position: fixed; inset: 0; z-index: 3000; background: #0d1410; }
#flymap { position: absolute; inset: 0; }
.fly-bar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(rgba(10,20,15,.85), transparent); color: #fff; }
.fly-bar b { display: block; font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.8rem); }
.fly-bar .kind { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #f3c19f; font-weight: 600; }
.fly-btns { display: flex; gap: 8px; flex: none; }
.fly-hint { position: absolute; z-index: 5; left: 16px; bottom: 10px; color: #e8efe9; text-shadow: 0 1px 3px #000; margin: 0; }
@media (max-width: 600px) { .fly-hint { display: none; } }

/* motion: wavy illustrated ticker + crossed tape bands (js/fx.js) */
.wv { overflow: hidden; }
.wv-track { display: flex; width: max-content; will-change: transform; }
.wv-svg { display: block; flex: none; overflow: visible; }
.wv-text { font-family: "Lilita One", var(--display); fill: var(--forest); letter-spacing: .05em; }
.wv-rule { fill: none; stroke: var(--sun); stroke-width: 2.4; stroke-dasharray: .1 9; stroke-linecap: round; opacity: .55; }
.wv-icon { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.wv-band { margin-top: -6px; padding: 4px 0 0; }
.foot-wave { margin: -6px 0 18px; opacity: .85; }
.foot-wave .wv-text { fill: var(--muted); }
.foot-wave .wv-icon { color: var(--muted) !important; }
.foot-wave .wv-rule { opacity: .3; }
.tape { position: absolute; left: -4%; width: 108%; top: 50%; padding: 12px 0; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.tape.t1 { background: #d9692a; color: #fff7ef; transform: translateY(-50%) rotate(-3deg); z-index: 2; }
.tape.t2 { background: #1f4d3a; color: #f6f2e8; transform: translateY(-50%) rotate(2.4deg); }
.tape-track { display: flex; width: max-content; will-change: transform; }
.tape-run { display: flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; font: 400 clamp(1.3rem, 3vw, 2.1rem)/1.1 "Lilita One", var(--display); letter-spacing: .04em; }
.tape-run i { font-style: normal; opacity: .75; font-size: .8em; }
.tape-run i.wi-sep { display: inline-flex; width: .62em; flex: none; }
.tape-run i.wi-sep svg { width: 100%; height: auto; fill: currentColor; }

/* hand-drawn icon set (js/icons.js) */
.ic { width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: -.24em; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic.lg { width: 1.5em; height: 1.5em; vertical-align: -.36em; }
.ic.xl { width: 2.4rem; height: 2.4rem; stroke-width: 2.8; }
.ic.ok { color: var(--good); }
h3 .ic, summary .ic { color: var(--sun); }
.icons span { color: var(--forest); }
.icons span .ic { width: 20px; height: 20px; stroke-width: 3.6; vertical-align: 0; }
.icons span.hit { color: var(--sun); }
.chip .ic { color: var(--sun); }
.chip[aria-pressed="true"] .ic, .chip.on .ic, .btn .ic, .mapctl .ic { color: inherit; }
.quick .chip .ic { color: #f3c19f; }
.tip .k { color: var(--forest); line-height: 1; margin-bottom: 6px; }
.season th.act .ic { color: var(--forest); margin-right: 4px; }
.pop .ic { width: 18px; height: 18px; color: #1f4d3a; }
.pop span[title] { display: inline-block; margin-right: 3px; }
.warn .ic, .notices h3 .ic { color: var(--sun); }
.notice .ic { color: inherit; }
.stampbtn .seal .ic { width: 18px; height: 18px; vertical-align: 0; }
.pcard .stamp .ic { width: 14px; height: 14px; vertical-align: -2px; stroke-width: 4.5; }
details.act summary .ic { width: 26px; height: 26px; }

/* header word rotator */
.rot { display: inline-block; position: relative; vertical-align: top; height: 1.25em; line-height: 1.25; white-space: nowrap; transition: width .5s cubic-bezier(.6,0,.2,1); perspective: 300px; }
.rot-on { overflow: hidden; }
.brand .rot-word { color: var(--sun); }
.rot-word { position: absolute; left: 0; top: 0; animation: rot-in .55s cubic-bezier(.2,.9,.3,1.25) both; transform-origin: 50% 100%; }
.rot-word.out { animation: rot-out .45s ease-in both; transform-origin: 50% 0; }
.rot-measure { position: absolute; visibility: hidden; white-space: nowrap; }
@keyframes rot-in { from { transform: translateY(90%) rotateX(-80deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rot-out { to { transform: translateY(-90%) rotateX(80deg); opacity: 0; } }

/* hero night + lake */
.hero[data-night] { --sky: linear-gradient(180deg, #0b1424 0%, #142235 55%, #23394a 100%) !important; --sc-far: #1f3340 !important; --sc-mid: #172a33 !important; --sc-near: #0f1d22 !important; }
.hero[data-season="fall"] { --sc-lake: #6f9aa1; }
.hero[data-season="summer"], .hero[data-season="spring"] { --sc-lake: #5f95a8; }
.sc-glint { animation: sc-glint 3.2s ease-in-out infinite; animation-delay: var(--g); opacity: .55; }
@keyframes sc-glint { 50% { opacity: .15; transform: translateX(6px); } }
.sc-star { animation: sc-twinkle var(--t) ease-in-out infinite; animation-delay: var(--d); }
@keyframes sc-twinkle { 50% { opacity: .25; } }
.sc-flies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f8e97a; box-shadow: 0 0 8px 3px rgba(248,233,122,.55); animation: sc-fly-blink var(--d) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes sc-fly-blink { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(10px, -8px); } }
.hero.hero-sm { padding: 40px 0 max(15vw, 140px); }
.hero.hero-sm h1 { max-width: none; }
.hero.hero-sm .lede { margin: 0; }
@media (prefers-reduced-motion: reduce) { .sc-glint, .sc-star, .sc-flies i { animation: none !important; } }

.tape-solo { position: relative; overflow: hidden; padding: 34px 0; }
.tape-solo .tape { position: relative; top: auto; left: -3%; width: 106%; }
.tape-solo .tape.t1 { transform: rotate(-2deg); }
.tape-solo .tape.t2 { transform: rotate(1.6deg); }

/* small-screen patterns: rails scroll sideways on phones and wrap on desktop */
.rail { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; padding: 2px 16px 6px 2px; margin-right: -16px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: none; scroll-snap-align: start; }
@media (min-width: 901px) { .rail.rail-wrap { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; -webkit-mask-image: none; mask-image: none; } }
.act-strip { padding-top: 16px; }
.p-body { padding-top: 14px; }
@media (max-width: 600px) {
  .p-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .p-actions .btn { justify-content: center; padding: 11px 10px; font-size: .92rem; }
  .p-actions #stampBtn { grid-column: 1 / -1; }
  .hero { padding-top: 40px; }
  .hero p.lede { font-size: 1.02rem; }
  .planner { padding: 16px; gap: 10px; margin-top: 20px; }
}

/* explore filters: collapsible summary bar (all widths; opens by default on desktop) */
.ex-summary { display: flex; align-items: center; gap: 8px; }
.ex-sum-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; min-height: 52px; font: inherit; cursor: pointer; }
.ex-sum-btn .ic.lg { color: var(--sun); }
.ex-sum-txt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ex-sum-txt b { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-sum-txt small { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-badge { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--sun); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.ex-chev { flex: none; transition: transform .2s; color: var(--muted); }
.ex-filters.open .ex-chev { transform: rotate(180deg); }
.ex-controls { display: none; }
.ex-filters.open .ex-controls { display: grid; gap: 12px; margin-top: 12px; max-height: calc(100dvh - 170px); overflow: auto; overscroll-behavior: contain; animation: ex-drop .22s ease-out; padding-bottom: 2px; }
.ex-done { display: block; width: 100%; justify-content: center; }
@keyframes ex-drop { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 860px) {
  .ex-filters { padding: 10px 16px; gap: 0; box-shadow: 0 6px 14px rgba(0,0,0,.08); }
  .ex-summary .view-toggle { flex: none; min-height: 52px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ex-filters.open .ex-controls { animation: none; } }

/* mascot (js/mascot.js) */
.badger { overflow: visible; }
.badger .bd-arm-l-up, .badger .bd-arm-r-down, .badger .bd-prop, .badger .bd-open, .badger .bd-shut, .badger .bd-bang { display: none; }
.badger.cheering .bd-arm-l-up { display: inline; }
.badger.cheering .bd-arm-l-down { display: none; }
.badger:is(.walking, .running, .shrug) .bd-arm-r-up { display: none; }
.badger:is(.walking, .running, .shrug) .bd-arm-r-down { display: inline; }
.badger.cheering .bd-arm-r-up { display: inline !important; }
.badger.cheering .bd-arm-r-down { display: none !important; }
.badger.has-mug .bd-mug, .badger.has-rod .bd-rod, .badger.has-lantern .bd-lantern, .badger.has-scarf .bd-scarf { display: inline; }
.badger.has-scarf .bd-bandana { display: none; }
.badger:is(.cheering, .running, .walking) .bd-mug, .badger:is(.cheering, .running) .bd-rod { display: none; }
.badger:is(.cheering, .alert, .yawn) .bd-open { display: inline; }
.badger:is(.cheering, .alert, .yawn) .bd-smile { display: none; }
.badger.yawn .bd-eyes { display: none; }
.badger.yawn .bd-shut { display: inline; }
.badger.alert .bd-bang { display: inline; transform-box: view-box; transform-origin: 206px 52px; animation: bd-bang .45s cubic-bezier(.2,1.6,.4,1); }
.badger .bd-arm-r-up { transform-box: view-box; transform-origin: 144px 146px; animation: bd-wave 1.8s ease-in-out infinite; }
.badger.cheering .bd-arm-r-up { animation: bd-pump-r .55s ease-in-out infinite alternate; }
.badger.cheering .bd-arm-l-up { transform-box: view-box; transform-origin: 96px 146px; animation: bd-pump-l .55s ease-in-out infinite alternate; }
.badger .bd-eyes { transform-box: view-box; transform-origin: 120px 88px; animation: bd-blink 4.6s infinite; }
.badger .bd-pupils { transition: transform .18s ease-out; }
.badger .bd-body { transform-box: view-box; transform-origin: 120px 260px; animation: bd-bob 2.4s ease-in-out infinite; }
.badger .bd-tail { transform-box: view-box; transform-origin: 84px 220px; animation: bd-wag 1.4s ease-in-out infinite; }
.badger .bd-pom { transform-box: view-box; transform-origin: 120px 30px; }
.badger .bd-head { transform-box: view-box; transform-origin: 120px 124px; }
.badger .bd-leg-l { transform-box: view-box; transform-origin: 105px 222px; }
.badger .bd-leg-r { transform-box: view-box; transform-origin: 135px 222px; }
.badger .bd-arm-l-down { transform-box: view-box; transform-origin: 98px 148px; }
.badger .bd-arm-r-down { transform-box: view-box; transform-origin: 142px 148px; }
.badger .bd-steam { animation: bd-steam 2.2s ease-in-out infinite; }
/* walk / run cycle */
.badger:is(.walking, .running) .bd-leg-l { animation: bd-step .5s ease-in-out infinite alternate; }
.badger:is(.walking, .running) .bd-leg-r { animation: bd-step .5s ease-in-out infinite alternate-reverse; }
.badger:is(.walking, .running) .bd-arm-l-down { animation: bd-swing .5s ease-in-out infinite alternate-reverse; }
.badger:is(.walking, .running) .bd-arm-r-down { animation: bd-swing .5s ease-in-out infinite alternate; }
.badger:is(.walking, .running) .bd-body { animation: bd-walkbob .25s ease-in-out infinite alternate; }
.badger.running :is(.bd-leg-l, .bd-leg-r, .bd-arm-l-down, .bd-arm-r-down) { animation-duration: .26s; }
.badger.running .bd-body { animation: bd-runbob .13s ease-in-out infinite alternate; }
@keyframes bd-runbob { from { transform: rotate(9deg) translateY(0); } to { transform: rotate(9deg) translateY(-6px); } }
.badger:is(.walking, .running) .bd-head { animation: bd-headbob .5s ease-in-out infinite alternate; }
.badger.running .bd-head { animation: bd-headbob-run .26s ease-in-out infinite alternate; }
.badger.shrug .bd-head { transform: rotate(-10deg); transition: transform .3s; }
.badger.shrug .bd-arm-l-down { transform: rotate(-38deg); transition: transform .3s; }
.badger.shrug .bd-arm-r-down { transform: rotate(38deg); transition: transform .3s; }
.badger.lookaround .bd-head { animation: bd-look 2.2s ease-in-out 1; }
.badger.yawn .bd-head { animation: bd-yawn 1.6s ease-in-out 1; }
.badger.jump .bd-body { animation: bd-jump .9s cubic-bezier(.3,.7,.4,1) 1; }
.badger.jump .bd-shadow { animation: bd-shadow .9s ease-out 1; transform-box: view-box; transform-origin: 120px 268px; }
.badger.jump .bd-pom { animation: bd-pom .9s ease-out 1; }
@keyframes bd-wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-14deg); } 80% { transform: rotate(4deg); } }
@keyframes bd-pump-r { from { transform: rotate(6deg); } to { transform: rotate(-12deg) translateY(-3px); } }
@keyframes bd-pump-l { from { transform: rotate(-6deg); } to { transform: rotate(12deg) translateY(-3px); } }
@keyframes bd-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes bd-bob { 50% { transform: translateY(-3px); } }
@keyframes bd-walkbob { from { transform: rotate(4deg) translateY(0); } to { transform: rotate(4deg) translateY(-5px); } }
@keyframes bd-step { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes bd-swing { from { transform: rotate(14deg); } to { transform: rotate(-14deg); } }
@keyframes bd-jump { 0% { transform: scale(1, 1); } 15% { transform: scale(1.06, .9); } 45% { transform: translateY(-38px) scale(.96, 1.05); } 75% { transform: scale(1.05, .93); } 100% { transform: none; } }
@keyframes bd-shadow { 45% { transform: scale(.6); opacity: .1; } }
@keyframes bd-pom { 30% { transform: translateY(6px); } 55% { transform: translateY(-8px); } }
@keyframes bd-wag { 50% { transform: rotate(-10deg); } }
@keyframes bd-look { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 60% { transform: rotate(9deg); } }
@keyframes bd-yawn { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-6deg) translateY(-3px); } }
@keyframes bd-bang { from { transform: scale(0) rotate(-20deg); } to { transform: none; } }
@keyframes bd-steam { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: .9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .badger *, .badger.jump .bd-body { animation: none !important; } }

/* Badge's stage along the bottom of the home hero (desktop only) */
.hero-badge { position: absolute; z-index: 4; left: 0; right: 0; bottom: max(1.2vw, 10px); height: 0; display: none; pointer-events: none; }
@media (min-width: 901px) { .hero-badge { display: block; } }
.hb-actor { position: absolute; left: 0; bottom: 0; width: 150px; }
.hb-btn { display: block; background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto; transform: translateY(115%); transition: transform .9s cubic-bezier(.2,1.4,.4,1); }
.hero-badge.up .hb-btn { transform: none; }
.hb-btn:focus-visible { outline: 3px solid var(--sun); border-radius: 16px; }
.hb-face { display: block; transition: transform .18s; }
.hb-face.left { transform: scaleX(-1); }
.hb-bubble { position: absolute; right: 82%; bottom: 26%; width: 260px; background: #fffdf8; color: #1b2620; border-radius: 16px; padding: 12px 14px 10px; box-shadow: 0 10px 28px rgba(0,0,0,.28); font-size: .9rem; line-height: 1.4; opacity: 0; transform: translateY(10px) scale(.95); transform-origin: 100% 100%; transition: opacity .3s, transform .35s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
.hb-bubble::after { content: ""; position: absolute; right: -8px; bottom: 40px; border: 9px solid transparent; border-left-color: #fffdf8; border-right: 0; }
.hb-bubble.flip { right: auto; left: 82%; transform-origin: 0 100%; }
.hb-bubble.flip::after { right: auto; left: -8px; border-left: 0; border-right: 9px solid #fffdf8; }
.hb-bubble.in { opacity: 1; transform: none; pointer-events: auto; }
.hb-bubble b { display: block; font-family: var(--display); color: #d9692a; margin-bottom: 2px; }
.hb-tip { display: block; }
.hb-next { margin-top: 8px; background: none; border: 0; padding: 0; color: #1c6694; font: 600 .85rem var(--body); cursor: pointer; }
.hb-x { position: absolute; top: 4px; right: 8px; background: none; border: 0; font-size: 1.1rem; color: #5b685f; cursor: pointer; }
.critter { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.squirrel .sq-svg { width: 64px; display: block; overflow: visible; }
.squirrel.run .sq-svg { animation: sq-hop .18s ease-in-out infinite alternate; }
.squirrel .sq-tail { transform-box: fill-box; transform-origin: 90% 90%; animation: sq-tail .36s ease-in-out infinite alternate; }
@keyframes sq-hop { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-9px) rotate(3deg); } }
@keyframes sq-tail { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.swoop .bird-svg { width: 54px; fill: #1d2b24; overflow: visible; }
.swoop .bird-svg .w-near, .swoop .bird-svg .w-far { transform-box: view-box; animation: sc-flap .22s ease-in-out infinite alternate; }
.swoop .bird-svg .w-near { transform-origin: 18px 14px; }
.swoop .bird-svg .w-far { transform-origin: 22px 13px; animation-name: sc-flap-far; opacity: .7; }

/* corner cheer toast + confetti */
.badge-toast { position: fixed; z-index: 2500; left: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 8px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 8px 16px 10px 8px; box-shadow: var(--shadow); font-weight: 700; transform: translateY(140%); transition: transform .5s cubic-bezier(.2,1.4,.4,1); max-width: calc(100vw - 32px); }
.badge-toast.in { transform: none; }
.badge-toast span { padding-bottom: 8px; }
.badge-toast.big { font-family: var(--display); font-size: 1.25rem; border-color: var(--sun); }
.confetti { position: fixed; inset: 0; z-index: 2400; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: cf-fall var(--d) cubic-bezier(.3,.6,.5,1) var(--delay) forwards; }
@keyframes cf-fall { to { transform: translate(var(--x), 105vh) rotate(var(--r)); } }

/* map buddy on the season timeline */
.tl-track { position: relative; }
.tl-buddy { position: absolute; top: -50px; width: 34px; margin-left: -17px; transition: left 1.2s linear; pointer-events: none; }
.tl-buddy .badger { display: block; }
/* 404 */
.lost { position: relative; text-align: center; padding: 56px 16px 72px; display: grid; justify-items: center; gap: 10px; }
.lost .badger .bd-head { transform-box: view-box; transform-origin: 120px 120px; animation: bd-look 3.2s ease-in-out infinite; }
.wi-lost { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); width: min(360px, 90%); z-index: 0; pointer-events: none; }
.wi-lost svg { width: 100%; height: auto; fill: none; stroke: var(--line); stroke-width: 7; stroke-dasharray: 11 10; stroke-linecap: round; }
.lost > :not(.wi-lost) { position: relative; z-index: 1; }
@keyframes bd-look { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 60% { transform: rotate(9deg); } }
.mascot-row { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; }
/* Meet the team (/mascot/) and About's team row */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.tm-card { padding: 0; display: flex; flex-direction: column; }
.tm-stage { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; height: 190px; padding: 16px; background: linear-gradient(var(--bg2), color-mix(in srgb, var(--forest) 14%, var(--bg2))); }
.tm-stage:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; }
.tm-bd { padding: 16px 18px 18px; }
.tm-bd h2 { font-size: 1.3rem; margin: 0 0 2px; }
.tm-bd h3 { font-size: .95rem; margin: 14px 0 4px; }
.tm-bd ul { margin: 0; padding-left: 1.1em; }
.tm-line { color: var(--sun); font-weight: 700; margin: 0 0 8px; }
.tm-stage .squirrel .sq-svg { width: 150px; }
.tm-stage .rabbit .rb-svg { width: 130px; }
.tm-birds { display: flex; gap: 10px; align-items: center; height: 100%; }
.tm-birds .bird-svg { width: 64px; }
.tm-birds .bird-svg:nth-child(2) { width: 48px; transform: translateY(-30px); }
.tm-birds .bird-svg:nth-child(3) { width: 40px; transform: translateY(10px); }
.tm-birds .bird-svg:nth-child(2) path { animation-delay: -.1s; }
.tm-birds .bird-svg:nth-child(3) path { animation-delay: -.05s; }
.tm-stage .squirrel .sq-tail { animation-duration: .9s; }
.tm-react { animation: tm-hop .5s cubic-bezier(.3,.8,.5,1) 2; }
@keyframes tm-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-34px); } }
.team-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.tm-mini { display: grid; justify-items: center; align-content: start; text-align: center; gap: 2px; width: 150px; }
.tm-mini .tm-stage { height: 110px; width: 150px; padding: 8px; border-radius: var(--r); }
.tm-mini .squirrel .sq-svg { width: 84px; } .tm-mini .rabbit .rb-svg { width: 74px; } .tm-mini .bird-svg { width: 38px; }
.tm-mini .tm-birds .bird-svg:nth-child(2) { width: 28px; transform: translateY(-16px); } .tm-mini .tm-birds .bird-svg:nth-child(3) { width: 24px; }
@media (prefers-reduced-motion: reduce) { .tm-react, .tm-stage * { animation: none !important; } }
.mascot-row .card { padding: 20px; display: grid; justify-items: center; gap: 8px; }
.mascot-row .dark { background: #1f4d3a; color: #f6f2e8; }

.sc-front { z-index: 5; pointer-events: none; }

.rabbit .rb-svg { width: 56px; display: block; overflow: visible; }
.rabbit.hop .rb-svg { animation: rb-hop .4s cubic-bezier(.3,.8,.5,1) infinite; }
.rb-face { display: inline-block; } /* transforms are ignored on plain inline spans */
.rb-face.left { transform: scaleX(-1); }
.rabbit.sit .rb-ear { transform-box: fill-box; transform-origin: 50% 100%; animation: rb-ear 1.2s ease-in-out infinite; }
@keyframes rb-hop { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-22px) rotate(-8deg); } }
@keyframes rb-ear { 50% { transform: rotate(-10deg); } }
.swoop.perch .bird-svg { width: 46px; }
.swoop.perch.landed .bird-svg .w-near, .swoop.perch.landed .bird-svg .w-far { animation: none; transform: rotate(18deg) scaleY(.5); }
.swoop.perch.landed .bird-svg { animation: sq-hop .9s ease-in-out infinite alternate; }

/* park page extras */
.badge-tip { display: flex; gap: 12px; align-items: center; background: var(--sun-soft); border-color: color-mix(in srgb, var(--sun) 35%, var(--line)); }
.badge-tip b { font-family: var(--display); color: var(--sun); }
.bt-badge { flex: none; background: none; border: 0; padding: 0; cursor: pointer; }
.near-card .lbl { margin: 0 0 6px; }
.near-card .pcard .icons span { width: 26px; height: 26px; }
.pp-hero h1 { margin-bottom: 4px; }

/* walking details: boots point the way he's going, tail swishes behind, head bobbles */
.badger .bd-boot-go { display: none; }
.badger:is(.walking, .running) .bd-boot-go { display: inline; }
.badger:is(.walking, .running) .bd-boot-rest { display: none; }
.badger:is(.walking, .running) .bd-tail { animation: bd-swish .5s ease-in-out infinite alternate; }
.badger.running .bd-tail { animation-duration: .26s; }
.badger.walking .bd-pupils { transform: translate(3px, .4px); }
@keyframes bd-headbob { from { transform: translateX(4px) rotate(-2deg) translateY(1px); } to { transform: translateX(4px) rotate(6deg) translateY(-3px); } }
@keyframes bd-headbob-run { from { transform: translateX(6px) rotate(5deg) translateY(1px); } to { transform: translateX(6px) rotate(11deg) translateY(-4px); } }
@keyframes bd-swish { from { transform: rotate(8deg); } to { transform: rotate(-14deg); } }

/* footer + text pages */
.foot { padding-bottom: 28px; }
/* About and Privacy on the left, Wisconsin centered, the copyright on the right */
.foot-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px; }
.foot-in .foot-mark { width: 30px; justify-self: center; }
.foot-in .foot-copy { justify-self: end; text-align: right; }
@media (max-width: 600px) { .foot-in { grid-template-columns: 1fr; justify-items: center; text-align: center; } .foot-in .foot-copy { justify-self: center; text-align: center; } .foot-in .foot-mark { grid-row: 1; } }
.foot-copy { margin: 0; font-weight: 600; }
.wi-mark { width: 18px; height: auto; fill: none; stroke: var(--sun); stroke-width: 16; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.wi-solo { text-align: center; padding: 10px 0 0; }
.wi-solo svg { width: 150px; height: auto; filter: drop-shadow(var(--shadow)); }
.wi-solo p { margin: 10px 0 0; }
.foot-links { display: flex; gap: 20px; }
.foot-links a { color: var(--ink); font-weight: 600; text-decoration: none; }
.foot-links a:hover { color: var(--sun); text-decoration: underline; }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.6em; font-size: 1.4rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 6px 0; }

/* meadow: mini Badge, rabbit and squirrel playing tag, fall scene (home page) */
.meadow { --md-grass: color-mix(in srgb, var(--warn) 32%, var(--bg)); --md-tuft: color-mix(in srgb, var(--warn) 58%, var(--bg)); --md-pine: color-mix(in srgb, var(--forest) 75%, var(--bg)); position: relative; height: 150px; margin: 8px 0 -6px; overflow: hidden; }
/* Too narrow for the tag game's cast to read clearly at a readable size --
   skip it on phones rather than cram it. The game loop already no-ops when
   its IntersectionObserver reports not-visible, which display:none gives it
   for free (a hidden element can't intersect the viewport). */
@media (max-width: 760px) { .meadow { display: none; } }
.md-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; }
.md-piece, .md-leaf { position: absolute; bottom: 0; transform: translateX(-50%); overflow: visible; }
.md-leaves { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; pointer-events: none; }
.md-ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70px; }
.md-actor { position: absolute; left: 0; bottom: 18px; will-change: transform; }
.md-badge { bottom: 14px; }
.md-face { display: block; transition: transform .15s; }
.md-face.left { transform: scaleX(-1); }
.md-btn { display: block; background: none; border: 0; padding: 0; cursor: pointer; }
.md-critter .sq-svg, .md-critter .rb-svg { width: 52px; display: block; overflow: visible; }
.md-critter.moving .sq-svg { animation: sq-hop .18s ease-in-out infinite alternate; }
.md-critter.moving .rb-svg { animation: rb-hop .4s cubic-bezier(.3,.8,.5,1) infinite; }
.md-hide-wrap { transition: opacity .25s ease-in, transform .25s ease-in, clip-path .25s ease-in; }
.md-hide-wrap.hiding { transform: translateY(34px); } /* crouch down behind the foreground bush */
.md-badge .md-hide-wrap.hiding { transform: translateY(46px); } /* Badge is taller: crouch deeper, just his beanie over the leaves */
.md-front { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 2; pointer-events: none; }
.meadow .bd-shadow { display: none; }
.md-hide-wrap.peeking { opacity: 0; transform: scale(.6); } /* fully behind the tree; .md-peek shows what pokes out */
.md-peek > g { display: none; }
.md-peek[data-who="rabbit"] .pk-rabbit, .md-peek[data-who="squirrel"] .pk-squirrel, .md-peek[data-who="badge"] .pk-badge { display: inline; }
.md-peek .pk-ears { transform-box: fill-box; transform-origin: 50% 100%; animation: pk-pop .35s cubic-bezier(.2,1.5,.4,1) both, pk-twitch 1.4s ease-in-out .35s infinite; }
.md-peek .pk-tail { transform-box: fill-box; transform-origin: 100% 100%; animation: pk-pop .35s cubic-bezier(.2,1.5,.4,1) .15s both, pk-swish .7s ease-in-out .5s infinite alternate; }
.md-peek .pk-badge-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: pk-pop .35s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pk-pop { from { transform: translateY(14px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pk-twitch { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-7deg); } 86% { transform: rotate(5deg); } }
@keyframes pk-swish { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .md-peek * { animation: none !important; } }
/* Sasquatch, the tag game's guest star */
/* 112px tall, feet on the pines' baseline, so he stands as tall as the pine trees */
.md-sas { display: none; bottom: 20px; z-index: 1; }
.md-sas.on { display: block; }
.sas-svg { width: 84px; display: block; overflow: visible; }
.md-sas .sas-front, .md-sas.front .sas-side { display: none; }
.md-sas.front .sas-front { display: block; }
.sas-leg, .sas-arm { transform-box: view-box; }
.sas-leg-b { transform-origin: 34px 70px; } .sas-leg-f { transform-origin: 52px 70px; }
/* both shoulders at the top middle of his body, as in a real side view; the near arm swings opposite the near leg */
.sas-arm-b { transform-origin: 40px 36px; } .sas-arm-f { transform-origin: 43px 36px; }
.md-sas.walking .sas-leg-f, .md-sas.walking .sas-arm-b { animation: sas-swing .7s ease-in-out infinite alternate; }
.md-sas.walking .sas-leg-b, .md-sas.walking .sas-arm-f { animation: sas-swing .7s ease-in-out infinite alternate-reverse; }
.md-sas.running .sas-leg-f, .md-sas.running .sas-arm-b { animation: sas-swing .32s ease-in-out infinite alternate; }
.md-sas.running .sas-leg-b, .md-sas.running .sas-arm-f { animation: sas-swing .32s ease-in-out infinite alternate-reverse; }
.md-sas.walking .sas-side, .md-sas.running .sas-side { animation: sas-bob .35s ease-in-out infinite alternate; }
.md-sas .sas-wave { transform-box: view-box; transform-origin: 57px 40px; animation: sas-wave .5s ease-in-out infinite alternate; }
@keyframes sas-swing { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.md-sas .sas-arm { animation-name: sas-arm-swing !important; }
@keyframes sas-arm-swing { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes sas-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes sas-wave { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.md-bush { transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.md-bush.active { animation: md-bush-rustle .45s ease-in-out infinite alternate; }
@keyframes md-bush-rustle { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1.1) rotate(-3deg); } }
.md-caption { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin: 0; font: 400 1.1rem "Lilita One", var(--display); letter-spacing: .04em; color: var(--sun); opacity: 0; white-space: nowrap; }
.md-caption.show { animation: md-cap 2.2s ease-out forwards; }
@keyframes md-cap { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.adm-prices { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.access-list { margin: 0 0 8px; padding-left: 1.1em; display: grid; gap: 4px; }
.rb-foot-back { transform-box: fill-box; transform-origin: 80% 50%; }
.rabbit.hop .rb-foot-back, .md-critter.moving .rb-foot-back { animation: rb-kick .4s cubic-bezier(.3,.8,.5,1) infinite; }
@keyframes rb-kick { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-24deg) translateX(-2px); } }

/* Ask Badge chat (js/chat.js) */
/* Accent: the site's forest green, and in dark mode (where --forest turns
   light green) the deep red of the meadow's fall trees (mascot.js FALL_COLORS). */
:root { --ab-accent: var(--forest); --ab-accent-hover: color-mix(in srgb, var(--forest) 85%, #000); }
:root[data-theme="dark"] { --ab-accent: #b8392f; --ab-accent-hover: #9c2f26; }
.ab-fab { position: fixed; z-index: 2600; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--ab-lift, 0px)); transition: bottom .25s ease; display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 4px; border: 0; border-radius: 999px; background: var(--ab-accent); color: #f6f2e8; font: 700 .95rem var(--body); box-shadow: 0 6px 20px rgba(0,0,0,.22); cursor: pointer; }
.ab-fab:hover { background: var(--ab-accent-hover); }
.ab-fab:focus-visible, .ab-close:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.ab-face { display: inline-grid; place-items: center; width: 48px; height: 44px; flex: none; }
.ab-fab { align-items: flex-end; padding-left: 6px; }
.ab-fab .ab-face { width: 58px; height: 71px; margin: -38px 0 -4px; } /* sits on the button like he does on the open panel, poking up over it */
.ab-fab .ab-face svg { width: 58px; }
.ab-fab .ab-fab-txt { align-self: center; }
.ab-face svg { width: 48px; height: auto; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }

/* Badge's head (mascot.js badgerHead) and its antics (headAntics) */
.bh .bh-lid, .bh .bh-yawn, .bh .bh-tongue { opacity: 0; transition: opacity .08s; }
.bh .bh-head, .bh .bh-hat, .bh .bh-nose, .bh .bh-ear, .bh .bh-tongue { transform-box: view-box; }
.bh .bh-head { transform-origin: 120px 132px; }
.bh .bh-hat { transform-origin: 120px 64px; }
.bh .bh-nose { transform-origin: 120px 120px; }
.bh .bh-ear-l { transform-origin: 86px 82px; } .bh .bh-ear-r { transform-origin: 154px 82px; }
.bh .bh-tongue { transform-origin: 120px 129px; }
.bh.is-bobble .bh-head { animation: bh-bobble 1.3s ease-in-out; }
.bh.is-wink .bh-lid-l { opacity: 1; }
.bh.is-wink .bh-head { animation: bh-tilt .7s ease-in-out; }
.bh.is-blink2 .bh-lid { animation: bh-blink2 .6s steps(1); }
.bh.is-hat .bh-hat { animation: bh-hat 1.7s ease-in-out; }
.bh.is-yawn .bh-yawn, .bh.is-yawn .bh-lid { opacity: 1; }
.bh.is-yawn .bh-smile { opacity: 0; }
.bh.is-yawn .bh-head { animation: bh-yawnhead 2.2s ease-in-out; }
.bh.is-sniff .bh-nose { animation: bh-sniff .3s ease-in-out 3; }
.bh.is-ears .bh-ear-l { animation: bh-ear-l .3s ease-in-out 3; } .bh.is-ears .bh-ear-r { animation: bh-ear-r .3s ease-in-out 3 .1s; }
.bh .bh-back { opacity: 0; }
.bh.is-turn .bh-head { animation: bh-turn 2.6s ease-in-out; }
.bh.is-turn .bh-front { animation: bh-turn-front 2.6s steps(1); }
.bh.is-turn .bh-back { animation: bh-turn-back 2.6s steps(1); }
@keyframes bh-turn { 0%, 100% { transform: scaleX(1); } 12% { transform: scaleX(.05); } 24%, 76% { transform: scaleX(1); } 88% { transform: scaleX(.05); } 45% { transform: rotate(4deg); } 60% { transform: rotate(-4deg); } }
@keyframes bh-turn-front { 0% { opacity: 1; } 12% { opacity: 0; } 88% { opacity: 1; } }
@keyframes bh-turn-back { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 0; } }
.bh.is-tongue .bh-tongue { opacity: 1; animation: bh-tongue .25s ease-out; }
.bh.is-tongue .bh-smile { opacity: 0; }
.bh.is-tongue .bh-lid-r { opacity: 1; }
@keyframes bh-bobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 45% { transform: rotate(8deg); } 65% { transform: rotate(-5deg); } 85% { transform: rotate(2deg); } }
@keyframes bh-tilt { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(-6deg); } }
@keyframes bh-blink2 { 0%, 40% { opacity: 1; } 20%, 60%, 100% { opacity: 0; } }
@keyframes bh-hat { 0% { transform: none; } 18% { transform: rotate(-16deg) translate(-4px, 3px); } 40% { transform: rotate(-16deg) translate(-4px, 3px); } 62% { transform: rotate(6deg); } 78% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes bh-yawnhead { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(-4deg) translateY(-2px) scaleY(1.03); } }
@keyframes bh-sniff { 50% { transform: scale(1.12, .9); } }
@keyframes bh-ear-l { 50% { transform: rotate(-18deg); } }
@keyframes bh-ear-r { 50% { transform: rotate(18deg); } }
@keyframes bh-tongue { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .bh *, .ab-panel, .ab-dots i { animation: none !important; } .ab-fab { transition: none; } }
.ab-open .ab-fab { display: none; }
.ab-panel { position: fixed; z-index: 2600; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 110px)); display: flex; flex-direction: column; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.28); transform-origin: calc(100% - 40px) calc(100% - 20px); }
.ab-panel.ab-pop { animation: ab-pop .28s cubic-bezier(.2,1.3,.4,1); }
@keyframes ab-pop { from { opacity: 0; transform: scale(.5) translateY(30px); } to { opacity: 1; transform: none; } }
.ab-panel[hidden] { display: none; }
.ab-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; background: var(--ab-accent); color: #f6f2e8; border-radius: 17px 17px 0 0; }
.ab-head { position: relative; z-index: 1; align-items: flex-end; }
.ab-head .ab-face { width: 66px; height: 81px; margin: -46px 0 -10px; } /* sits on the header's bottom edge, pokes up over the top */
.ab-head > div { align-self: center; }
.ab-head .ab-close { align-self: center; }
.ab-head .ab-face svg { width: 66px; }
.ab-form { border-radius: 0 0 17px 17px; }
.ab-head div { display: grid; flex: 1; line-height: 1.2; }
.ab-head small { opacity: .8; font-size: .78rem; }
.ab-close { border: 0; background: transparent; color: inherit; font-size: 1.6rem; line-height: 1; padding: 4px 8px; cursor: pointer; border-radius: 8px; }
.ab-log { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.ab-msg { position: relative; max-width: 88%; padding: 9px 12px; border-radius: 14px; background: var(--bg2); }
.ab-msg.badge { border-top-left-radius: 4px; margin-left: 8px; }
.ab-msg.badge::before { content: ""; position: absolute; left: -8px; top: 0; border-style: solid; border-width: 0 9px 10px 0; border-color: transparent var(--bg2) transparent transparent; }
.ab-msg.you { border-top-right-radius: 4px; margin-right: 8px; }
.ab-msg.you::after { content: ""; position: absolute; right: -8px; top: 0; border-style: solid; border-width: 0 0 10px 9px; border-color: transparent transparent transparent color-mix(in srgb, var(--sun) 18%, var(--card)); }
.ab-msg p { margin: 0; white-space: pre-wrap; }
.ab-msg.you { align-self: flex-end; background: color-mix(in srgb, var(--sun) 18%, var(--card)); }
.ab-msg.err p { color: var(--warn); }
.ab-src { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ab-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .8rem; font-weight: 600; text-decoration: none; }
.ab-chip::before { content: "↗ "; color: var(--sun); }
.ab-chip:hover { border-color: var(--sun); color: var(--sun); }
.ab-msg.thinking { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }
.ab-think svg { width: 34px; height: auto; display: block; }
.ab-think .bh-head { animation: bh-bobble 1.3s ease-in-out infinite; }
.ab-think .bh-nose { animation: bh-sniff .3s ease-in-out infinite; }
.ab-dots { display: inline-flex; gap: 4px; }
.ab-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ab-dot 1s ease-in-out infinite; }
.ab-dots i:nth-child(2) { animation-delay: .15s; } .ab-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ab-dot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.ab-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ab-form input { flex: 1; min-width: 0; font: 500 1rem var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.ab-note { margin: 0; padding: 0 12px 10px; font-size: .74rem; }
.ab-ts { padding: 0 12px 8px; }
/* No room for the label (phones, short screens, on top of the Explore map):
   drop the pill and let his head be the button. */
@media (max-width: 600px), (max-height: 500px) {
  .ab-fab-txt { display: none; }
  .ab-fab, .ab-fab:hover { padding: 0; background: transparent; box-shadow: none; }
  .ab-fab .ab-face { margin: 0; }
  .ab-fab .ab-face svg { width: 62px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
}
body:has(.explore) .ab-fab-txt { display: none; }
body:has(.explore) :is(.ab-fab, .ab-fab:hover) { padding: 0; background: transparent; box-shadow: none; }
body:has(.explore) .ab-fab .ab-face { margin: 0; }
body:has(.explore) .ab-fab .ab-face svg { width: 62px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
/* Short screens: the chat takes the height there is (his head still pokes over the top). */
@media (max-height: 500px) { .ab-panel { bottom: 8px; height: calc(100dvh - 64px); } }
@media (max-width: 600px) {
  .ab-panel { right: 0; left: 0; bottom: 0; width: 100%; height: min(78dvh, 640px); border-radius: 18px 18px 0 0; }
}

/* ---- Wisconsin state symbols (js/symbols.js): scenes for Ask Badge's nudge ----
   Each piece's resting style is its final pose, so with reduced motion the
   scene is a still picture. */
.sy-scene { --sy-sky1: #cfe3ea; --sy-sky2: #eef3e6; --sy-grass: #6f9a4f; --sy-lake: #4f8fb0; --sy-shine: #9cc6da; --sy-far: #7f9c86; --sy-wood: #6b4a2e; --sy-text: #3b3a37; --sy-star: transparent;
  position: relative; height: 124px; margin-top: 8px; border-radius: 10px; overflow: hidden; background: linear-gradient(var(--sy-sky1), var(--sy-sky2)); }
:root[data-theme="dark"] .sy-scene { --sy-sky1: #14243a; --sy-sky2: #2c3f4a; --sy-grass: #3f5f37; --sy-lake: #24506a; --sy-shine: #4c7d98; --sy-far: #2f4a3d; --sy-wood: #4f3622; --sy-text: #e9e4d8; --sy-star: #fff7d6; }
.sy-scene > div, .sy-scene > span { position: absolute; }
.sy-scene > div > svg { display: block; width: 100%; height: auto; overflow: visible; }
.sy-svgscene { height: auto; } .sy-svgscene > svg { display: block; width: 100%; height: auto; }
.sy-stars { fill: var(--sy-star); }
.sy-ground { left: 0; right: 0; bottom: 0; height: 18px; background: var(--sy-grass); border-top: 2px solid #1d1d1b; }
/* muskie (SVG scene): the bobber dips, Badge pulls, the muskie leaps out on the line and hangs from the rod tip */
.sy-s-muskie .sy-far { fill: var(--sy-far); }
.sy-lake { fill: var(--sy-lake); } .sy-shine { stroke: var(--sy-shine); stroke-width: 2; stroke-linecap: round; }
.sy-ink { stroke: #1d1d1b; stroke-width: 2.2; }
.sy-bank { fill: var(--sy-grass); stroke: #1d1d1b; stroke-width: 2.2; stroke-linejoin: round; }
.sy-mud { fill: #8a6a45; } :root[data-theme="dark"] .sy-mud { fill: #5a4630; }
.sy-reeds { stroke: #4f6f3a; stroke-width: 2; stroke-linecap: round; } .sy-cattail { fill: #7a5132; stroke: #1d1d1b; stroke-width: 1.4; }
.sy-rod { stroke: #7a5132; stroke-width: 2.6; stroke-linecap: round; }
.sy-line { stroke: #f6f2e8; stroke-width: 1; } :root[data-theme="dark"] .sy-line { stroke: #cfd8d3; }
.sy-splash-line { stroke: #f6f2e8; stroke-width: 2; stroke-linecap: round; }
.sy-sparkle path { fill: #f2c641; stroke: #1d1d1b; stroke-width: 1.2; stroke-linejoin: round; }
.sy-fish-wig { transform-box: fill-box; transform-origin: 50% 0; animation: sy-swing 1.4s ease-in-out infinite alternate; }
@keyframes sy-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
/* deer: steps out of the pines, then grazes */
.sy-p1 { left: 2%; bottom: 10px; width: 40px; } .sy-p2 { left: 14%; bottom: 12px; width: 52px; } .sy-p3 { left: 70%; bottom: 10px; width: 36px; }
.sy-walker { left: 50%; bottom: 14px; width: 78px; margin-left: -39px; animation: sy-step 3.2s cubic-bezier(.2,.6,.3,1) .3s both; z-index: 1; }
@keyframes sy-step { from { transform: translateX(-210px); } to { transform: none; } }
.sy-deer-head { transform-box: view-box; transform-origin: 52px 30px; animation: sy-graze 1.6s ease-in-out 3.5s 6 alternate both; }
@keyframes sy-graze { from { transform: rotate(0); } to { transform: rotate(34deg); } }
/* the buck's life: stick legs swing in diagonal pairs while he walks out, a
   little bob, an ear twitch every few seconds, and a blink */
.sy-leg { transform-box: view-box; }
.sy-leg-a { animation: sy-stride .4s ease-in-out .3s 8 alternate; }
.sy-leg-b { animation: sy-stride .4s ease-in-out .3s 8 alternate-reverse; }
.sy-l1 { transform-origin: 18px 42px; } .sy-l2 { transform-origin: 26px 44px; } .sy-l3 { transform-origin: 50px 44px; } .sy-l4 { transform-origin: 58px 42px; }
@keyframes sy-stride { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.sy-s-deer .sy-deer { animation: sy-bob .2s ease-in-out .3s 16 alternate; }
@keyframes sy-bob { to { transform: translateY(-1.5px); } }
.sy-deer-ear { transform-box: view-box; transform-origin: 60px 4px; animation: sy-twitch 3.4s ease-in-out 1s infinite; }
@keyframes sy-twitch { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(18deg); } 94% { transform: rotate(-6deg); } 97% { transform: rotate(8deg); } }
.sy-deer-eye { transform-box: fill-box; transform-origin: center; animation: sy-blink 4.2s linear 1.6s infinite; }
@keyframes sy-blink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(.1); } }
.sy-deer-tail { transform-box: view-box; transform-origin: 14px 30px; animation: sy-flick .3s ease-in-out 2s 6 alternate; }
@keyframes sy-flick { to { transform: rotate(-22deg); } }
/* violet + bee */
.sy-v { bottom: 10px; } .sy-v1 { left: 12%; width: 46px; } .sy-v2 { left: 34%; width: 56px; } .sy-v3 { left: 58%; width: 42px; } .sy-v4 { left: 78%; width: 50px; }
.sy-v2 .sy-violet-bloom { animation-delay: -.8s; } .sy-v3 .sy-violet-bloom { animation-delay: -1.5s; } .sy-v4 .sy-violet-bloom { animation-delay: -.4s; }
.sy-violet-bloom { transform-box: view-box; transform-origin: 30px 34px; animation: sy-sway 2.4s ease-in-out infinite alternate; }
@keyframes sy-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
/* each bee hops bloom to bloom (blooms at about 20%, 44%, 65% and 87% across) and hovers at each; facing flips with direction */
.sy-flyer { width: 22px; left: -12%; top: 30%; }
.sy-b1 { animation: sy-bee1 7s ease-in-out infinite; }
.sy-b2 { animation: sy-bee2 8.5s ease-in-out -2s infinite; }
.sy-b3 { animation: sy-bee3 6.2s ease-in-out -4s infinite; }
@keyframes sy-bee1 { 0% { left: -12%; top: 22%; } 14%, 24% { left: 16%; top: 48%; } 38%, 48% { left: 40%; top: 44%; } 62%, 72% { left: 61%; top: 50%; } 86%, 94% { left: 83%; top: 47%; } 100% { left: 112%; top: 20%; } }
@keyframes sy-bee2 { 0% { left: 112%; top: 26%; transform: scaleX(-1); } 14%, 26% { left: 83%; top: 46%; transform: scaleX(-1); } 42%, 54% { left: 40%; top: 43%; transform: scaleX(-1); } 70%, 82% { left: 16%; top: 47%; transform: scaleX(-1); } 100% { left: -12%; top: 18%; transform: scaleX(-1); } }
@keyframes sy-bee3 { 0% { left: 60%; top: 8%; } 16%, 30% { left: 61%; top: 49%; } 46%, 58% { left: 16%; top: 47%; transform: scaleX(-1); } 74%, 86% { left: 83%; top: 46%; } 100% { left: 60%; top: 8%; } }
.sy-bee-wing { transform-box: view-box; transform-origin: 15px 9px; animation: sy-flutter .08s linear infinite alternate; }
@keyframes sy-flutter { to { transform: scaleY(.4); } }
/* mourning dove lands and coos */
/* dove (SVG scene): a branch from a trunk at the right edge, grass below; the dove lands on the branch and coos */
.sy-trunk, .sy-limb { fill: var(--sy-wood); stroke: #1d1d1b; stroke-width: 2.2; stroke-linejoin: round; }
.sy-leaf { fill: #5e9147; stroke: #1d1d1b; stroke-width: 1.8; stroke-linejoin: round; }
.sy-ground-s { fill: var(--sy-grass); stroke: #1d1d1b; stroke-width: 2.2; } .sy-tuft { stroke: #4f6f3a; stroke-width: 2; stroke-linecap: round; }
.sy-landing { animation: sy-land 1.8s ease-out .3s both; }
@keyframes sy-land { from { transform: translate(170px, -70px) rotate(-10deg); } 80% { transform: translate(0, -3px); } to { transform: none; } }
.sy-dove-wing { transform-box: view-box; transform-origin: 32px 22px; animation: sy-flap .18s ease-in-out .3s 10 alternate; }
@keyframes sy-flap { to { transform: rotate(-40deg); } }
/* the dove's life: chest puffs with each coo, a forward bob now and then, a blink, a tail flick */
.sy-dove-puff { transform-box: view-box; transform-origin: 28px 37px; animation: sy-puff 2.4s ease-in-out 2.2s 3 both; }
@keyframes sy-puff { 0%, 30%, 60%, 100% { transform: none; } 15%, 45% { transform: scale(1.06, 1.09); } }
.sy-dove-bob { transform-box: view-box; transform-origin: 27px 40px; animation: sy-dove-bob 3.6s ease-in-out 1.4s infinite; }
@keyframes sy-dove-bob { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-9deg); } 82% { transform: none; } 88% { transform: rotate(-6deg); } 94% { transform: none; } }
.sy-dove-eye { transform-box: fill-box; transform-origin: center; animation: sy-blink 3.8s linear 1s infinite; }
.sy-dove-tail { transform-box: view-box; transform-origin: 41px 28px; animation: sy-dove-tail 5s ease-in-out 2.6s infinite; }
@keyframes sy-dove-tail { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-12deg); } 96% { transform: rotate(4deg); } }
.sy-coo-t { font: 700 12px var(--body); fill: var(--sy-text); animation: sy-coo 2.4s ease-in-out 2.2s 3 both; } .sy-coo-t.sy-still { animation: none; }
@keyframes sy-coo { 0% { opacity: 0; transform: translateY(6px); } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
/* polka: the gang dances while Sasquatch plays the accordion */
.sy-sas { right: 6%; bottom: 4px; width: 78px; }
.sy-sas .sas-svg { width: 100%; }
.sy-acc { position: absolute; left: 8px; top: 50px; width: 62px; }
.sy-bellows { transform-box: view-box; transform-origin: 35px 17px; animation: sy-squeeze .5s ease-in-out 16 alternate; }
@keyframes sy-squeeze { to { transform: scaleX(.55); } }
.sy-n1, .sy-n2 { right: 30%; top: 30px; width: 12px; opacity: 0; animation: sy-note 2s ease-out 4; }
.sy-n2 { right: 24%; animation-delay: 1s; }
@keyframes sy-note { 0% { opacity: 0; transform: translate(0, 20px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-14px, -24px) rotate(-12deg); } }
.sy-dancer { bottom: 14px; animation: sy-polka .5s ease-in-out 16 alternate; }
.sy-d1 { left: 4%; width: 70px; } .sy-d2 { left: 30%; width: 50px; animation-delay: .25s; } .sy-d3 { left: 47%; width: 50px; animation-delay: .12s; }
@keyframes sy-polka { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-12px) rotate(8deg); } }
/* the drawings' own motion, wherever they're used: the muskie swims (body
   flexes, tail sweeps half a beat behind), the violet's leaves sway */
.sy-muskie { transform-origin: 40% 50%; animation: sy-wiggle .7s ease-in-out infinite alternate; }
@keyframes sy-wiggle { from { transform: rotate(-3deg) skewY(2deg) scaleX(1.02); } to { transform: rotate(3deg) skewY(-2deg) scaleX(.98); } }
.sy-mk-tail { transform-box: view-box; transform-origin: 88px 17px; animation: sy-tail .35s ease-in-out -.17s infinite alternate; }
@keyframes sy-tail { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.sy-leaf-l { transform-box: view-box; transform-origin: 30px 58px; animation: sy-leaf 2.2s ease-in-out infinite alternate; }
.sy-leaf-r { transform-box: view-box; transform-origin: 30px 52px; animation: sy-leaf 2.6s ease-in-out -1.1s infinite alternate-reverse; }
@keyframes sy-leaf { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .sy-scene *, .sy-scene > *, .sy-muskie, .sy-mk-tail, .sy-leaf-l, .sy-leaf-r, .sy-deer *, .sy-deer, .sy-dove *, .sy-violet *, .sy-fish-wig { animation: none !important; } }

/* hand-written park guides (content/parks/): our intro, Badge's take, best
   for, accessibility detail and a pairing. */
.guide-intro p { font-size: 1.1rem; }
.guide-intro .guide-by { font-size: .85rem; margin-top: -4px; }
.guide-take { margin: 22px 0 0; border-left: 4px solid var(--sun); background: var(--card); }
.guide-take h2 { font-size: 1.25rem; margin-bottom: .5em; }
.guide-take p:last-child, .guide-access p:last-child { margin-bottom: 0; }
.guide-best ul, .prose .guide-best ul { padding-left: 1.1em; }
.guide-best li { margin-bottom: .5em; }
.guide-access { margin-bottom: 10px; }
.guide-pair ul { margin: 0; padding-left: 1.1em; }
.guide-pair li { margin-bottom: .5em; font-size: .92rem; }
/* home page "Latest": closures from the event stream (ADR-0006 B1) */
.latest { padding-top: 0; }
.latest-list { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.latest-list li { padding: 12px 16px; border-top: 1px solid var(--line); }
.latest-list li:first-child { border-top: 0; }
.latest-list a { color: var(--ink); text-decoration: none; }
.latest-list a:hover b { text-decoration: underline; }