/* Art in the Park 2026 — site styles. Section 1: shared components. Section 2: page layout (header, tabs, waves, drawer, mobile menu). */
[hidden]{display:none!important}

/* Shared components for the Art in the Park 2026 concepts. Single committed brand look (the printed program). */
@font-face{font-family:"Swag Urbano";src:url(assets/fonts/swag-urbano-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Swag Urbano Outlined";src:url(assets/fonts/swag-urbano-outlined.woff2) format("woff2");font-display:swap}
/* Swag Urbano's lowercase letters are joined caps (th, ch, ga, lk… run together), which is hard to
   read small: ligatures off everywhere, and every display-font line uses the separated uppercase
   forms. Only the brand wordmark keeps its mixed-case logo styling. */
html{font-variant-ligatures:none;-webkit-font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"dlig" 0,"hlig" 0}
.map-tip b,.pg-title,.card-title,.art-noimg,.art-n,.act h3,.food-code,.food-name,
.park-rules h2,.v-big,.tier-range,.member-initials,.ex-list h3,.d-tile,.d-name,
.d-noimg,.d-dot,.hcal-d,.hcal-h,.ex-plain a,.act h3,.food-name,.park-rules h2,
.pm-card-code,.v-big,.member-initials,.ex-list h3,.map-tip b,.strip-l,.mr-at,.pm-lede b,
.c-reach-item b,.tier-name,.tier-note,.d-award,.art-award{text-transform:uppercase}
:root{
  --cdbar:0px;
  --navy:#0D4E79;--ink:#231C4C;--hill:#336380;--hill-2:#2C526A;--hill-3:#27475A;
  --park:#8FAC67;--map-edge:#8FAB66;--meadow:#A9C877;--road:#F9F9DC;--paper:#FDFDF4;--white:#FFFFFF;
  --coral:#E96D5E;--mustard:#EDBD4B;--sky:#6CC4E3;--green:#7FAE48;--wine:#AA4057;--coral-soft:#F6AEA4;
  --on-coral:#56140C;--on-mustard:#674B0A;--on-sky:#135065;--on-green:#2C3C19;--on-navy:#F9F9DC;
  --olive:#968A29;--forest:#466A46;--rust:#7B3A31;--bark:#734F3B;
  --muted:#5E5A7E;--line:rgba(35,28,76,.13);--on-dark:#F9F9DC;--on-dark-soft:#C6D6E0;
  --display:"Swag Urbano","Bebas Neue","Arial Narrow",Impact,sans-serif;
  --outline:"Swag Urbano Outlined","Swag Urbano",Impact,sans-serif;
  --body:"Figtree","Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;
  --c:var(--navy);--on-c:var(--on-dark);
  --wave-h:clamp(54px,8.44vw,135px)
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-head:has(>.m-tile.c-coral),.pg-title:has(>.m-tile.c-coral),summary:has(>.m-tile.c-coral){--c:var(--coral);--on-c:var(--on-coral)}
.m-head:has(>.m-tile.c-mustard),.pg-title:has(>.m-tile.c-mustard),summary:has(>.m-tile.c-mustard){--c:var(--mustard);--on-c:var(--on-mustard)}
.m-head:has(>.m-tile.c-sky),.pg-title:has(>.m-tile.c-sky),summary:has(>.m-tile.c-sky){--c:var(--sky);--on-c:var(--on-sky)}
.m-head:has(>.m-tile.c-green),.pg-title:has(>.m-tile.c-green),summary:has(>.m-tile.c-green){--c:var(--green);--on-c:var(--on-green)}
.c-coral{--c:var(--coral);--on-c:var(--on-coral)}.c-mustard{--c:var(--mustard);--on-c:var(--on-mustard)}
.c-sky{--c:var(--sky);--on-c:var(--on-sky)}.c-green{--c:var(--green);--on-c:var(--on-green)}
.c-navy{--c:var(--navy);--on-c:var(--on-navy)}.c-cream{--c:var(--on-dark);--on-c:var(--ink)}

/* wordmark */
.wm{font-family:var(--display);font-weight:700;letter-spacing:.01em;white-space:nowrap;line-height:.9}
.wm-1{color:var(--coral)}.wm-2{color:var(--mustard)}.wm-3{color:var(--green)}.wm-4{color:var(--sky)}

/* the opening screen: the 2026 painting with the name over it, held until the
   page behind it has actually drawn, then faded out */
.splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;
  background:#C2BD93;transition:opacity .45s ease,visibility .45s}
.splash-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.splash::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 58% at 50% 46%,rgba(18,26,24,.5),rgba(18,26,24,0) 70%),
  linear-gradient(180deg,rgba(18,26,24,.18),rgba(18,26,24,.46))}
.splash-in{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(14px,2vw,22px);padding:24px;text-align:center}
.splash-in .wm{font-size:clamp(44px,11vw,132px);line-height:.88;color:#fff}
.splash-in .wm-w{color:#fff}
.splash-when{margin:0;font:700 clamp(13px,1.6vw,19px)/1.2 var(--display);letter-spacing:.1em;
  text-transform:uppercase;color:#fff}
/* the two days as the calendar cards the menu uses, sized up for the opening */
.splash-dates{gap:clamp(12px,2vw,22px)}
.splash .hcal{width:clamp(118px,15vw,188px);border-width:4px;padding:clamp(12px,1.5vw,20px) 8px clamp(7px,.9vw,12px)}
.splash .hcal::before,.splash .hcal::after{background:transparent}
.splash .hcal-m{font-size:clamp(13px,1.35vw,18px)}
.splash .hcal-d{font-size:clamp(31px,4vw,52px)}
.splash .hcal-h{font-size:clamp(15px,1.7vw,22px)}
.splash-bar{display:block;width:clamp(120px,22vw,240px);height:6px;overflow:hidden;background:rgba(255,255,255,.4)}
.splash-bar i{display:block;width:40%;height:100%;background:var(--mustard);
  animation:splash-run 1.1s cubic-bezier(.5,0,.5,1) infinite}
@keyframes splash-run{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.splash.is-done{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .splash{transition:none}
  .splash-bar i{animation:none;width:100%}
}
.socials{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.socials a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:currentColor;transition:background .15s}
.socials a:hover{color:var(--mustard)}
/* the big pair that signs off a page: a ring that fills on hover, like the
   other controls. Declared after the base rule so the glyph does not take the
   fill's own color and disappear into it. */
.socials-lg{gap:10px;margin-top:14px}
.socials-lg a{width:50px;height:50px;border:2px solid var(--navy);color:var(--navy)}
.socials-lg svg{width:26px;height:26px}
.socials-lg a:hover,.socials-lg a:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--road)}
.socials-lg a:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
.socials svg{width:20px;height:20px}

/* strip */
.strip{display:flex;width:100%}
.strip-seg{position:relative;flex:1;display:flex;align-items:baseline;justify-content:center;gap:10px;min-width:0;padding:9px 12px 7px;border:0;background:var(--c);color:var(--on-c);cursor:pointer;transition:opacity .2s,filter .2s}
.strip-l{font:700 20px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-seg:hover{filter:brightness(1.06)}
body.has-cat .strip-seg[aria-pressed="false"]{opacity:.42}
.strip-seg[aria-pressed="true"]{box-shadow:inset 0 -5px 0 var(--ink)}
@media (max-width:700px){.strip-seg{flex-direction:column;align-items:center;gap:0;padding:6px 4px}.strip-l{font-size:12px}}

/* map */
/* The frame holds the map clear of the waves so its top row stays readable. The SVG
   itself reaches back up over that strip, and panzoom widens the view box to match,
   so what fills it is the map's own ground carried past its top edge — it pans and
   zooms with everything else, and the river flows over the park rather than over a
   band stuck to the page. */
.map-host{position:relative;flex:1;min-height:0;padding-top:calc(var(--wave-h) - 8px);touch-action:none;cursor:grab;background:var(--map-edge)}
.map-host.dragging{cursor:grabbing}
.aitp-map{display:block;width:100%;height:calc(100% + var(--wave-h) - 8px);margin-top:calc(8px - var(--wave-h));
  user-select:none;-webkit-user-select:none}
.map-ground{fill:var(--map-edge)}
.hs{cursor:pointer;outline:none}
.hs-shape{fill:transparent;stroke:transparent;stroke-width:3;vector-effect:non-scaling-stroke}
.hs:hover .hs-shape,.hs:focus-visible .hs-shape{stroke:var(--ink);fill:rgba(255,255,255,.2)}
.hs-place:hover .hs-shape,.hs-place:focus-visible .hs-shape{stroke-dasharray:8 6}
.sel-layer,.marker-layer{pointer-events:none}
.sel-outline{fill:none;stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sel-halo{fill:none;stroke:#fff;stroke-width:12;vector-effect:non-scaling-stroke;stroke-linejoin:round;animation:halo 1.8s ease-out infinite}
@keyframes halo{0%{stroke-opacity:1}100%{stroke-opacity:.1}}
.dim-layer{fill:var(--ink);opacity:.42;pointer-events:none}
.map-tip{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 10px));padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--road);font:600 13px/1.2 var(--body);white-space:nowrap;pointer-events:none}
.map-tip b{font:700 16px var(--display);color:var(--mustard);margin-right:6px}
.map-tip i{font-style:normal;color:var(--on-dark-soft);margin-left:6px}
.zoom{display:grid;gap:6px}
.zoom button{width:42px;height:42px;border:0;border-radius:0;background:var(--navy);color:#fff;font:700 22px/1 var(--body);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.zoom button:hover{background:var(--hill)}

/* page scaffolding */
.pg-head{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:end;justify-content:center;text-align:center;margin-bottom:18px}
.pg-head .pg-lede{margin-left:auto;margin-right:auto}
/* the artists page keeps its head split: the search box and view switch live in it */
.page[data-page="artists"] .pg-head{align-items:center;justify-content:center;text-align:center}
.page[data-page="artists"] .pg-titles{width:100%}
.pg-kicker{margin:0 0 2px;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pg-title{margin:0;font:700 clamp(30px,3.4vw,46px)/1 var(--display);color:var(--c,var(--navy));text-wrap:balance}
.pg-lede{margin:8px 0 0;max-width:60ch;font-size:16px}
.pg-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pg-search input{width:250px;max-width:100%;padding:9px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper)}
@media (max-width:1024px),(max-width:1400px) and (pointer:coarse){
  .pg-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%}
  .pg-search,.pg-search input{width:100%}
  .pg-tools .seg{display:flex}
}
/* on a phone there is not room for both, so they take a row each */
@media (max-width:560px){
  .pg-tools{grid-template-columns:1fr}
  .pg-tools .seg{width:100%}
  .pg-tools .seg button{flex:1;text-align:center}
}
/* Segmented control. The filled part is one block that slides between the segments
   rather than a background switching off one button and on to another — the movement
   is what tells you the two are the same control. site.js measures the open segment
   and hands the width and offset over as --tw/--tx. */
.seg{position:relative;isolation:isolate;display:inline-flex;padding:3px;border:2px solid var(--ink);border-radius:999px}
.seg::before{content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:var(--tw,0);
  border-radius:999px;background:var(--ink);transform:translateX(var(--tx,0));
  transition:transform .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1)}
.seg:not(.is-set)::before{opacity:0}
.seg button{position:relative;z-index:1;padding:6px 16px;border:0;border-radius:999px;background:none;font-weight:700;cursor:pointer;transition:color .2s}
.seg button[aria-pressed="true"]{color:var(--road)}
@media (prefers-reduced-motion:reduce){.seg::before{transition:none}}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px;scrollbar-width:thin}
/* the medium filters share the row edge to edge; they scroll instead on phones */
.chip{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;padding:10px 18px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:700;font-size:16px;cursor:pointer}
.chip small{font-weight:600;font-size:.85em;opacity:.7}
.chip{transition:background .15s,color .15s,filter .15s}
.chip[aria-pressed="false"]:hover{background:color-mix(in srgb,var(--c) 34%,var(--paper));color:var(--on-c)}
.chip[aria-pressed="false"]:hover small{opacity:.85}
.chip[aria-pressed="true"]:hover{filter:brightness(1.07)}
.chip:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
@media (max-width:760px){.chip{flex:none;font-size:14px;padding:8px 14px}}
.chip[aria-pressed="true"]{background:var(--c);border-color:var(--c)}
.chip:not(.c-coral):not(.c-mustard):not(.c-sky):not(.c-green)[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--road)}
.empty{padding:30px 0;font-weight:600;color:var(--muted)}
.card{background:var(--paper);border-top:8px solid var(--c);padding:18px 20px 20px;box-shadow:0 1px 0 var(--line)}
.card-title{margin:0;font:700 clamp(30px,3.4vw,46px)/1 var(--display);color:var(--c,var(--navy));letter-spacing:.01em}

.sched{margin:10px 0 14px;padding:0;list-style:none}
.sched li,.d-sched li{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.sched li.has-photo,.d-sched li.has-photo{grid-template-columns:154px 1fr;gap:14px;align-items:center;padding:12px 0}
.sched li.has-photo>div time,.d-sched li.has-photo>div time{display:block;margin-bottom:3px}
.sched li.has-photo>div b,.d-sched li.has-photo>div b{display:block}
.act-photo{width:154px;height:104px;object-fit:cover}
.sched time,.d-sched time{font-weight:700;color:var(--muted);font-size:14px}
.sched b,.d-sched b{font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:14px}
.sched small,.d-sched small{display:block;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
/* One button, three weights. Actions are square blocks in the map's language; the
   things that filter or switch a view stay pills, so shape tells you what a control
   does before you read it. 44px min so every one is thumb-sized. */
.d-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:11px 18px;
  border:2px solid var(--mustard);border-radius:0;background:var(--mustard);color:var(--ink);
  font:700 15px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.d-btn svg{width:17px;height:17px}
.d-btn:hover{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.d-ghost{background:var(--road);border-color:var(--navy);color:var(--navy)}
.d-ghost:hover{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
/* on the one dark panel the block is already mustard; it hovers to cream{background:var(--on-dark);border-color:var(--on-dark);color:var(--navy)}
.d-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* artists */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px 22px;margin:0;padding:0;list-style:none}
.art-card{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.art-img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--c)}
.art-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.art-card:hover .art-img img{transform:scale(1.04)}
.art-noimg{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;font:700 28px/.95 var(--display);color:var(--ink)}
.art-n{position:absolute;top:8px;left:8px;display:grid;place-items:center;min-width:36px;height:36px;padding:0 5px;background:var(--coral);color:var(--on-coral);font:700 20px/1 var(--display);transform:rotate(-8deg)}
.art-count{position:absolute;right:8px;top:8px;padding:3px 8px;border-radius:999px;background:rgba(35,28,76,.82);color:#fff;font-size:11px;font-weight:700}
/* a past award rides on the picture and repeats in the panel */
.art-award{position:absolute;left:0;bottom:12px;max-width:85%;padding:5px 12px 4px;background:var(--mustard);color:var(--ink);font:700 13px/1.15 var(--body);letter-spacing:.02em}
.d-award{margin:var(--dgap) 0 0;padding:8px 12px;background:var(--mustard);color:var(--ink);font-weight:700}
.art-name{display:block;margin-top:8px;font:700 22px/.95 var(--display);color:var(--navy);text-transform:uppercase}
.art-meta{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--muted)}
.art-cols{column-width:330px;column-gap:44px;padding:6px 0 10px;color:var(--ink)}
/* lists and grids read better across the whole screen, so these pages run wider than the rest */
.page[data-page="artists"] .pg-wrap,
.page[data-page="music"] .pg-wrap,
.page[data-page="visit"] .pg-wrap,
.page[data-page="sponsors"] .pg-wrap,
.page[data-page="team"] .pg-wrap,
/* the two pages that are mostly one big picture run wider than the reading pages */
.page[data-page="merch"] .pg-wrap,
.page[data-page="contact"] .pg-wrap{max-width:1800px}
.art-col{break-inside:avoid;margin:0 0 22px}
.art-col h2{margin:0 0 8px;padding:7px 12px 6px;font:800 17px/1.1 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--c)}
.art-col ul{margin:0;padding:0;list-style:none}
.art-col button{display:block;width:100%;padding:5px 0;border:0;background:none;text-align:left;cursor:pointer;text-transform:uppercase;font-size:14px;letter-spacing:.02em;color:var(--ink)}
.art-col .n{display:inline-block;min-width:2em;font-weight:800;color:var(--c)}
.art-col b{font-weight:800}
.art-col .city{color:var(--muted);font-weight:500}
.art-col .city::before{content:", "}
.art-col button:hover b{color:var(--c);text-decoration:underline;text-underline-offset:3px}

/* music & demo */
.music-page{display:grid;gap:0;margin-top:4px}
.set-panel{padding:26px clamp(18px,2vw,32px) 30px;border:2px solid var(--navy);background:var(--navy)}
/* what sits straight on the navy gets light type; blocks with their own background keep theirs */
.set-panel .act h3{color:var(--road)}
.set-panel .act-by{color:var(--on-dark-soft)}
.set-panel .act time{color:var(--mustard)}
.set-panel .act-img{background:rgba(249,249,220,.14)}
.set-panel .act-note{color:var(--road)}
/* page sections shown inside a panel: their own heads sit straight on the navy */
.set-panel .pg-head{margin-bottom:20px}
.set-panel .pg-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.set-panel .pg-kicker{color:var(--mustard);font-size:15px;letter-spacing:.12em}
.set-panel .pg-lede,.set-panel>.pg-section>p{color:var(--on-dark-soft)}
.set-panel .pg-section,.set-panel .pg-section+.pg-section{margin:0;padding:0;border:0}
.set-panel .pg-body{margin-top:0}
.set-panel .ex-credit{color:var(--on-dark-soft)}
.set-panel .ex-credit a{color:var(--mustard)}
.set-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-height:44px;margin-bottom:18px;padding-bottom:12px;border-bottom:5px solid var(--c)}
.set-where{display:inline-flex;align-items:center;gap:0;margin:0;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-soft)}
.set-where svg{width:17px;height:17px;flex:none;color:var(--c)}
.act-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:20px;margin:0;padding:0;list-style:none}
@media (max-width:1100px){.act-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.act-grid{grid-template-columns:1fr}}
.act-img{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--road)}
.act-img img{width:100%;height:100%;object-fit:cover}
.act-note{position:absolute;inset:0;display:grid;place-items:center;font-size:56px;color:var(--sky)}
/* the card body is the way into the place it happens in */
.act-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.act-open:hover h3{text-decoration:underline;text-underline-offset:4px}
.act-open:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.sl-open{display:contents;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.sl-open:hover b{text-decoration:underline;text-underline-offset:4px}
.act time{display:block;margin-top:10px;font-weight:800;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--coral);font-variant-numeric:tabular-nums}
.act h3{margin:3px 0 0;font:700 clamp(22px,2vw,28px)/.95 var(--display);color:var(--navy);text-wrap:balance}
.act-by{margin:4px 0 0;color:var(--muted);font-size:15px}
.act .act-img img{transition:transform .4s}
.act:hover .act-img img{transform:scale(1.03)}

/* food */
.food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:0;padding:0;list-style:none}
/* a stand reads like an act card: its code square, what it serves, where it stands */
.food-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 18px 16px;background:var(--paper);border-top:6px solid var(--mustard)}
.food-card.k-beer{border-top-color:var(--navy)}
.food-card.k-wine{border-top-color:var(--wine)}
.food-grid .food-card .d-btn{margin-top:auto;align-self:flex-start;min-height:38px;padding:8px 14px 6px;font-size:13px}
.food-card .act-img{margin:-18px -18px 0;aspect-ratio:4/3}
.food-code{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;margin:4px 4px 10px;transform:rotate(-8deg);background:var(--green);font:700 28px/1 var(--display);color:var(--on-green)}
.food-card .act-img+.food-code{margin-top:-28px}
.k-beer .food-code{background:var(--navy);color:#fff;font-size:22px}
.k-wine .food-code{background:var(--wine);color:#fff;font-size:22px}
.food-name{margin:0;font:700 28px/.95 var(--display);color:var(--navy)}
.food-serves{margin:0;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--coral)}
.food-where{margin:0 0 10px;color:var(--muted);flex:1}

/* parking */
.park-body{display:grid;gap:22px}
/* downtown parking map — drawn in the festival map's colors */
.pmap{margin:0}
.pmap .card-title{margin:0 0 12px}
.pmap-wrap{position:relative;background:var(--park);overflow:hidden}
.pmap-svg{display:block;width:100%;height:auto}
.pm-ground{fill:var(--park)}
.pm-park{fill:var(--meadow)}
.pm-water{fill:#7cc3dd}
.pm-river{fill:none;stroke:#7cc3dd;stroke-width:52;stroke-linecap:round;stroke-linejoin:round}
.pm-building{fill:#c4c6c1}
.pm-road{fill:none;stroke:var(--road);stroke-linecap:round;stroke-linejoin:round}
.pm-label{font:700 19px var(--display);letter-spacing:.03em;fill:var(--navy);text-anchor:middle;dominant-baseline:central;text-transform:uppercase}
.pm-lot{fill:var(--mustard);opacity:.5}
.pm-pin{cursor:pointer}
.pm-tile{fill:var(--mustard)}
.pm-pin:hover .pm-tile,.pm-pin:focus .pm-tile{fill:#f7d071}
.pm-pin.is-on .pm-tile{fill:var(--navy)}
.pm-pin.is-on .pm-code{fill:var(--mustard)}
.pm-tile-mark{fill:var(--navy)}
.pm-mark .pm-code{fill:#fff}
.pm-mark:hover .pm-tile,.pm-mark:focus .pm-tile{fill:var(--hill)}
.pm-code{font:700 30px var(--display);fill:var(--navy);text-anchor:middle;pointer-events:none}
.pm-river-label{font:700 26px var(--display);letter-spacing:.06em;fill:#fff;opacity:.85;text-anchor:middle;dominant-baseline:central}

.pm-glyph{font:700 28px var(--body)}
.pmap-pop{position:absolute;z-index:3;display:flex;gap:12px;align-items:center;width:min(300px,64%);
  padding:12px 34px 12px 12px;background:var(--paper);border-left:8px solid var(--mustard);color:var(--ink);
  box-shadow:0 14px 30px rgba(13,78,121,.28);transform:translate(18px,-50%)}
.pmap-pop.to-left{transform:translate(calc(-100% - 18px),-50%)}
.pm-card-code{flex:none;display:grid;place-items:center;width:46px;height:46px;background:var(--mustard);color:var(--on-mustard);font:700 24px/1 var(--display);letter-spacing:.02em}
.pmap-pop b{display:block;font:700 20px/1 var(--display);color:var(--navy);text-transform:uppercase}
.pmap-pop>div span{display:block;margin-top:3px;font-size:14px}
.pmap-pop .pm-note{display:block;margin-top:5px;font-size:13px;color:var(--ink)}
.pmap-pop>div em{display:block;margin-top:3px;font-style:normal;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pm-pop-x{position:absolute;top:4px;right:6px;width:26px;height:26px;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.pm-pop-x:hover{color:var(--mustard)}
@media (max-width:640px){.pmap-pop,.pmap-pop.to-left{position:fixed;z-index:30;left:10px!important;right:10px;top:auto!important;bottom:calc(var(--cdbar) + 70px);width:auto;max-width:none;transform:none}}

.park-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:0 0 18px;padding:0;list-style:none}
.park-rules li{padding:14px 16px;background:var(--paper);border-left:8px solid var(--mustard)}
.park-rules h2{margin:0;font:700 24px/1 var(--display);color:var(--navy)}
.park-rules p{margin:6px 0 0}
.park-rules p+p{margin-top:6px}
.park-rules .d-btn{margin-top:12px}

/* visit */
/* the film and the crowd photos are siblings of the two-column block, not items in it,
   so the sticky aerial can never travel over them */
.visit-page{display:grid;gap:16px}
/* the films are one block three columns wide, the text in the fourth */
.v-reel{margin:0;min-width:0}
.v-reel video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
.v-reel video[hidden]{display:none}
.v-reel-by{margin:10px 0 0;font:700 clamp(13px,1.15vw,15px)/1.3 var(--body);letter-spacing:.02em;color:var(--muted)}
.v-reel-by:empty{display:none}
.visit-grid{display:grid;grid-template-columns:3fr 1fr;gap:16px;align-items:start}
/* merch: the whole line-up, with the buy button beside it */
.merch-page{display:grid;gap:clamp(24px,3vw,44px)}
.mr-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:clamp(20px,2.4vw,36px);align-items:center;padding:clamp(18px,2vw,28px) 0;background:none}
.mr-hero-shot{margin:0}
.mr-hero-shot img{display:block;width:100%;height:auto}
.mr-hero-buy{display:grid;justify-items:start;gap:12px}
/* the page heading now lives in this column, so it reads left like the rest of it */
.mr-hero-buy .pg-head{display:block;margin:0 0 4px}
.mr-hero-buy .pg-titles{text-align:left}
.mr-hero-buy .pg-title:has(.m-tile){justify-content:flex-start}
.mr-hero-buy .pg-lede{margin:8px 0 0;max-width:34ch}
.mr-at{margin:0;font:700 clamp(21px,2vw,29px)/1.05 var(--display);color:var(--navy);text-transform:uppercase;letter-spacing:.01em}
.mr-hero-buy .v-small{margin:0;color:var(--muted)}
/* the buy button is the loudest thing on the page, and it appears twice */
.d-btn.mr-cta{padding:15px 26px;font-size:clamp(17px,1.5vw,21px)}
.d-btn.mr-cta svg{width:.62em;height:.62em;margin-left:9px}

@media (max-width:820px){.mr-hero{grid-template-columns:1fr;gap:14px;justify-items:center;text-align:center}
  .mr-hero-buy{display:contents}
  .mr-hero-buy .pg-head{order:-1;margin:0}
  .mr-hero-buy .pg-titles{text-align:center}.mr-hero-buy .pg-title:has(.m-tile){justify-content:center}.mr-hero-buy .pg-lede{max-width:none}}
.v-cards{display:grid;gap:16px;align-content:start}
/* on desktop the Where card matches the video beside it; below 980px they stack, so it doesn't apply */
@media (min-width:981px){.v-cards{align-content:stretch}}
@media (max-width:980px){.visit-grid{grid-template-columns:1fr}}
/* the 2024 festival film: click to play, it has sound — unlike the silent aerial loop above */
/* this block sits straight on the navy panel, so its type must be light */
/* the contact form has its own tab now; a full-width form field is unusable */
.contact-body{max-width:none}
/* wide enough to ask on one side and see who you are asking on the other */
@media (min-width:900px){
  .contact-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3vw,48px);align-items:start}
  /* the photo leads on a wide screen; stacked, the form still comes first */
  .c-side{order:-1}
  .c-shot{margin:0}
  .c-reach{margin-top:0}
}
/* the photo strip under Plan Your Visit: two at a time, arrows, drifts on its own */
.shots{position:relative;grid-column:1/-1}
.sc-track{display:flex;gap:16px;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.sc-track::-webkit-scrollbar{display:none}
.sc-track li{flex:0 0 calc(50% - 8px);scroll-snap-align:start}
.sc-track img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:46px;height:46px;padding:0 0 4px;border:0;border-radius:50%;background:rgba(35,28,76,.78);color:#fff;font:700 30px/1 var(--body);cursor:pointer}
.sc-arrow:hover{background:var(--ink)}
.sc-prev{left:10px}.sc-next{right:10px}
@media (max-width:760px){.sc-track li{flex-basis:100%}.sc-arrow{width:38px;height:38px;font-size:24px}}
.v-big{margin:6px 0 0;font:700 26px/1 var(--display);color:var(--navy)}

.v-small{font-size:14px;color:var(--muted)}

.v-photos{position:sticky;top:12px;align-self:start;height:min(74vh,620px);min-height:380px;overflow:hidden}
.v-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.v-photos img.is-on{opacity:1}
@media (max-width:980px){.v-photos{position:relative;top:0;height:auto;min-height:0;aspect-ratio:16/9}}
@media (max-width:640px){.v-photos{aspect-ratio:4/3}}

/* sponsors */
.sp{display:grid;gap:10px}
/* the sponsor wall is meant to be read in one look, so it is measured against
   the window height rather than a fixed scale */
.page[data-page="sponsors"] .pg-wrap{padding-bottom:clamp(12px,2.4vh,44px)}
.page[data-page="sponsors"] .pg-head{margin-bottom:clamp(8px,1.4vh,20px)}
.sp-row{display:grid;gap:10px}
.sp-1{grid-template-columns:1fr 1fr 1.6fr}
.sp-2{grid-template-columns:1fr 1.7fr 2fr}
.sp-right{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:stretch}
.support-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.28)}
.support-logos img{height:38px;width:auto}
/* no boxes behind the sponsors: each tier is a heading and a row of marks on the page */
.tier{padding:clamp(9px,1.7vh,20px) 22px;color:var(--navy);text-align:center}
/* the tier headings run through the festival's four colors */
.tier-name{color:var(--navy)}
.t-coral .tier-name{color:var(--coral)}
.t-mustard .tier-name{color:var(--mustard)}
.t-sky .tier-name{color:var(--sky)}
.t-green .tier-name{color:var(--green)}
.tier-range{color:var(--muted)}
.tier-note,.tier-word,.tier-names{color:var(--ink)}
.support-logos{border-top-color:var(--line)}
.tier-name{margin:0;font:700 clamp(19px,2.5vh,26px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.tier-range{margin:2px 0 0;font:700 clamp(15px,1.95vh,20px)/1 var(--display);opacity:.85}
.tier-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(8px,1.4vh,18px) 34px;min-height:clamp(72px,12.5vh,120px);margin:clamp(7px,1.3vh,16px) 0 4px}
.tier-logos img{height:auto;max-height:clamp(54px,9.6vh,92px);width:auto;max-width:100%}

.tier-word{font-weight:700;font-size:15px;line-height:1.25;max-width:42%}
.tier-note{margin:5px 0 0;font-weight:600;font-size:clamp(12.5px,1.5vh,14px)}
.tier-names{margin:clamp(5px,1vh,10px) 0 0;padding:0;list-style:none;font-size:clamp(12.5px,1.55vh,14px);line-height:1.4}
.tier-names.cols{column-width:135px;column-gap:14px}
.committee{padding:20px 22px 22px;background:var(--hill-3);color:#fff}
.committee .tier-name{text-align:center;margin-bottom:14px}
.team{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;margin:0;padding:0;list-style:none}
.member{position:relative;margin:0}
.member-photo{aspect-ratio:3/4;overflow:hidden;background:var(--hill)}
.member-photo img{width:100%;height:100%;object-fit:cover}
/* a stand-in until the portrait arrives: the festival painting with the wordmark on it */
.member-art{position:relative;display:grid;place-items:center;height:100%;padding:14% 12%;
  background:url("assets/event/festival-artwork.jpg") center/cover no-repeat}
.member-art::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,26,24,.28),rgba(18,26,24,.55))}
.member-art .wm-tile{position:relative;display:block;width:100%;text-align:center;line-height:.94;color:var(--road)}
.member-art .wm-tile .wm-w{font-size:clamp(13px,2.1vw,22px)}
.member-name{margin:6px 0 0;font:700 17px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.member-role{margin:2px 0 0;font-size:11px;line-height:1.25;color:var(--on-dark-soft)}
.team-page .team{grid-template-columns:repeat(var(--cw,8),1fr);gap:18px 14px}
.team-vol{margin-bottom:0}
@media (max-width:1100px){.team-page .team{grid-template-columns:repeat(var(--cm,4),1fr)}}
@media (max-width:640px){.team-page .team{grid-template-columns:repeat(var(--cn,2),1fr)}}
.team-page .member-photo{background:var(--road)}
.team-page .member-name{margin-top:8px;font-size:19px;color:var(--navy)}
.team-page .member-role{color:var(--muted);font-size:12px}
.team-page .member-initials{color:var(--navy)}
.team-note{margin:26px 0 0;font-weight:600}
@media (max-width:1100px){.team{grid-template-columns:repeat(6,1fr)}.sp-1,.sp-2{grid-template-columns:1fr 1fr}.sp-right{grid-column:1 / span 2}
  .sp-1>.tier:nth-child(3){grid-column:1 / -1}}
@media (max-width:640px){.team{grid-template-columns:repeat(3,1fr)}.sp-1,.sp-2,.sp-right{grid-template-columns:1fr}.sp-right{grid-column:auto}}

/* explore */
.ex-hero{position:relative;min-height:clamp(300px,32vw,520px);padding:26px 28px;align-items:end;background:var(--hill) var(--img) center/cover;color:#fff}
.ex-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,26,24,.86),rgba(18,26,24,.2))}
.ex-shots{position:absolute;inset:0;overflow:hidden}
.ex-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.ex-shots img.is-on{opacity:1}
.ex-credit-shot{margin:10px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(249,249,220,.72)}
.ex-hero .pg-titles{position:relative;z-index:2}
.ex-hero .pg-title{color:var(--c)}.ex-hero .pg-kicker{color:var(--mustard)}
.ex{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
/* top of Explore: the photo beside the three color blocks, both sides the same height */
.ex-top{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
.ex-top .ex-hero{height:clamp(340px,50vh,560px);min-height:0}

/* the photo and the folds share a row */
.ex-split{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1.5fr);gap:clamp(20px,2.4vw,36px);align-items:stretch}
.ex-split>.ex-top{align-self:start}
.pv[data-page="visit"]:has(.pg-section[data-section="explore"]:not([hidden])) .pg-wrap{overflow:hidden;padding-top:0;padding-bottom:0}
.ex-split>.ex-top{margin-top:calc(var(--wave-h) + 8px)}
.ex-folds{padding-top:calc(var(--wave-h) + 8px)}
.pv[data-page="visit"]:has(.pg-section[data-section="explore"]:not([hidden])) .set-panel{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);align-content:stretch;background:transparent;padding-bottom:0}
.pg-section[data-section="explore"]{height:100%;min-height:0;display:flex;flex-direction:column}
.pg-body.ex{flex:1;min-height:0;display:flex;flex-direction:column}
.pg-body.ex>.ex-split{flex:1;min-height:0;align-self:stretch;width:100%}
.ex-folds{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.ex-folds::-webkit-scrollbar{display:none}
@media (max-width:980px){.ex-split{grid-template-columns:1fr}
  .ex-split>.ex-top{margin-top:0}.ex-folds{padding-top:0}
  .pg-section[data-section="explore"],.pg-body.ex{display:block;height:auto}
  .ex-folds{overflow:visible;padding-right:0}
  .pv[data-page="visit"]:has(.pg-section[data-section="explore"]:not([hidden])) .pg-wrap{overflow-y:auto}}

/* Explore is a long page, so each block folds away behind its own title. Native
   <details>, so it opens with a click or the keyboard and needs no script. No panel
   and no bar: the title carries the block's color and a rule separates one from the next. */
.ex-fold{background:none;border-top:0;padding:0}
.ex-fold+.ex-fold{border-top:2px solid var(--line)}
.ex-fold>summary{list-style:none;display:flex;align-items:center;gap:14px;
  padding:8px 2px;background:none;cursor:pointer}
.ex-fold>summary::-webkit-details-marker{display:none}
.ex-fold>summary>.card-title{margin:0;color:var(--c)}
/* the fold headings share a narrow column, so they drop a size before they wrap */
@media (max-width:1400px){.ex-fold>summary>.card-title{font-size:clamp(24px,2.6vw,34px)}}
@media (max-width:1150px){.ex-fold>summary>.card-title{font-size:clamp(21px,2.3vw,28px)}}
.ex-fold>summary::after{content:"";flex:none;margin-left:auto;width:12px;height:12px;border-right:3px solid var(--c);border-bottom:3px solid var(--c);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.ex-fold[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.ex-fold>summary:hover>.card-title{text-decoration:underline;text-underline-offset:5px}
.ex-fold>summary .m-tile{width:44px;height:44px}
.ex-fold>summary .m-tile svg{width:23px;height:23px}
.ex-fold>summary:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.fold-body{padding:0 2px 20px}
/* the weekend's two events read as a pair rather than a list */
.v-also-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px);align-items:start}
.v-also-grid .v-event+.v-event{margin-top:0;padding-top:0;border-top:0}
@media (max-width:1100px){.v-also-grid{grid-template-columns:1fr}}
/* in a half-width column the inner lists run as one column */
.ex-split .ex-list{column-width:auto;column-count:2;column-gap:22px}
@media (max-width:980px){.ex-split .ex-list{column-count:auto;column-width:330px}}
/* the directory folds run two abreast so the open one does not outrun the photo */
.ex-split .ex-plain{column-width:auto;column-count:2;column-gap:22px}
@media (max-width:980px){.ex-split .ex-plain{column-count:auto;column-width:280px}}
.ex-list{margin:10px 0 0;padding:0;list-style:none;column-width:360px;column-gap:26px}
.ex-list li{break-inside:avoid;padding:0 0 18px}
.ex-list h3{margin:0;font:700 22px/1 var(--display)}
.ex-list h3 a{color:var(--navy);text-decoration:none}
.ex-list h3 a:hover{text-decoration:underline}
.ex-list p{margin:3px 0 0;font-size:14px}
.ex-where{display:flex;gap:4px;align-items:center;color:var(--muted);font-weight:700;font-size:12px!important}
.ex-where svg{width:13px;height:13px;flex:none}

.alley-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 4px;padding:0;list-style:none}
@media (max-width:900px){.alley-shots{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.alley-shots{grid-template-columns:1fr}}
.alley-shots li{margin:0}
.alley-shots img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.alley-shots b{display:block;margin-top:7px;font-weight:800;font-size:15px;color:var(--ink)}
.alley-shots b a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.alley-shots b a:hover{color:var(--mustard)}
.alley-shots small{display:block;margin-top:1px;font-size:13px;color:var(--muted)}
/* Eat & drink, Shop and Stay: a plain list of names, each one a link to the map */
.ex-plain{margin:0;padding:0;list-style:none;column-width:280px;column-gap:32px}
.ex-plain li{break-inside:avoid;padding:0 0 12px}
.ex-plain a{font:700 22px/1 var(--display);color:var(--navy);text-decoration:none}
.ex-plain a:hover{text-decoration:underline;text-underline-offset:3px}
.ex-plain .ex-where{margin:3px 0 0}
.ex-credit{margin:0;font-size:13px;color:var(--muted)}
.ex-top .ex-credit{margin-top:2px}
@media (max-width:980px){.ex,.ex-top{grid-template-columns:1fr}}

/* countdown — chip in the header{flex-basis:100%;margin:2px 0 0;text-align:center;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mustard)}
.count{display:flex;gap:10px;margin:10px 0 12px}
.count span{flex:1;display:grid;place-items:center;gap:2px;padding:10px 4px 8px;background:var(--road)}
.count b{font:700 30px/1 var(--display);color:var(--navy);font-variant-numeric:tabular-nums}
.count small{font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* the two direct ways to reach someone, before the form */
.c-reach{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
@media (max-width:620px){.c-reach{grid-template-columns:1fr}}
.c-reach-item{display:grid;gap:3px;padding:14px 16px;background:var(--road);text-decoration:none;color:var(--navy)}
.c-reach-item span{font:800 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.c-reach-item b{font:700 clamp(17px,1.5vw,21px)/1.15 var(--display);letter-spacing:.02em;word-break:break-word}
.c-reach-item:hover{background:var(--mustard);color:var(--ink)}
.c-reach-item:hover span{color:var(--ink)}
.c-shot{margin:26px 0 0}
.c-shot img{display:block;width:100%;height:auto}
.c-credit{margin:10px 0 0;font:700 clamp(13px,1.15vw,15px)/1.3 var(--body);letter-spacing:.02em;color:var(--muted)}
.c-org{margin:22px 0 10px;color:var(--muted);font-size:14px}

/* volunteers, on the Team page */
.vol{margin:0 0 30px;padding:22px 24px 24px;background:var(--paper);border-top:8px solid var(--c)}
/* the heading and the sign-up share a row; the button drops under the text on a phone */
.vol-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.vol-head>div{flex:1 1 320px;min-width:0}
.vol-head .d-actions{flex:none;margin:0}
.vol-lede{margin:6px 0 0;font-size:17px}
.vol-perk{margin:6px 0 0;color:var(--muted)}
/* volunteers at work, under the pitch */
/* flex, not grid: the last row stretches to fill the width, so an odd count
   (five photos in three columns) never leaves a ragged gap */
.vol-shots{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 0;padding:0;list-style:none}
/* the last row stretches to fill, but max-width stops a lone leftover ballooning
   to the full width; justify-content then centers it under the rows above */
.vol-shots li{flex:1 1 200px;max-width:340px;min-width:0}
.vol-shots img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:640px){.vol-shots li{flex-basis:140px}}
.vol-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 24px;margin:20px 0 0;padding:0;list-style:none}
.vol-roles h3{margin:0 0 2px;font:700 22px/1 var(--display);color:var(--navy);text-transform:uppercase}
.vol-roles p{margin:0;font-size:15px;color:var(--muted)}

/* Art in the Alley + press, on Explore Elkader */
.ex-alley{grid-column:1/-1}
.ex-alley-lede{margin:6px 0 0;max-width:70ch}

/* detail */
/* one rhythm down a card: every block sits the same clear step below the one
   above, except a heading that is meant to hug its own paragraph */
.d{--dgap:18px}
.d-head{display:flex;gap:14px;align-items:center;margin-bottom:var(--dgap);padding-right:40px}
.d-tile{flex:none;display:grid;place-items:center;width:58px;height:58px;margin:5px;padding:0;border:0;background:var(--coral);color:var(--on-coral);font:700 30px/1 var(--display);transform:rotate(-8deg)}
.d-round{background:var(--green);color:var(--on-green)}
.act-btn{margin-top:10px}
.set-head .view-seg{margin-left:auto}
.set-head .view-seg+.set-btn{margin:0}
.set-btn{margin:0 0 0 auto;align-self:center}
/* the day and the view sit side by side under the panel title */
.set-toggles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);margin:0 0 20px}
.set-toggles .jump{margin:0}
/* the same run of things, read as rows instead of cards */
.set-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.set-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 14px;background:var(--paper);
  border-left:5px solid var(--c,var(--navy))}
.set-list li+li{margin-top:4px}
.set-list .sl-mark{flex:none;display:grid;place-items:center;min-width:44px;padding:4px 8px 2px;
  background:var(--c,var(--navy));color:var(--on-c,#fff);font:700 15px/1.1 var(--display);text-align:center}
.set-list .sl-when{min-width:116px;background:none;color:var(--muted);font-size:13px;letter-spacing:.03em;text-align:left;place-items:center start}
.set-list b{flex:1;min-width:160px;font:700 20px/1.15 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--navy)}
.set-list .sl-by{flex:2;min-width:180px;color:var(--ink);font-size:14px}
.set-list .d-btn{flex:none;min-height:38px;padding:8px 14px 6px;font-size:13px}
.food-list li.k-food .sl-mark{background:var(--green);color:var(--on-green)}
.food-list li.k-beer .sl-mark{background:var(--navy);color:#fff}
.food-list li.k-wine .sl-mark{background:var(--wine);color:#fff}
.food-list li.k-food{border-left-color:var(--mustard)}
.food-list li.k-beer{border-left-color:var(--navy)}
.food-list li.k-wine{border-left-color:var(--wine)}
@media (max-width:760px){.set-list b{min-width:100%}.set-list .sl-by{min-width:100%}}
.food-card .d-btn{align-self:flex-start}
.d-round.k-beer{background:var(--navy);color:#fff;font-size:22px}.d-round.k-wine{background:var(--wine);color:#fff;font-size:22px}
.d-soft{background:var(--meadow);color:var(--on-green);font-size:24px}
.d-eyebrow{margin:0;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.d-name{margin:2px 0 0;font:700 clamp(32px,3.4vw,44px)/.92 var(--display);color:var(--navy);text-wrap:balance}
.d-city{margin:4px 0 0;font-weight:600;color:var(--muted)}
.d-gallery{margin:var(--dgap) 0 0}
.d-gallery .d-stage{max-height:min(62vh,540px)}
.d-photo{margin:var(--dgap) 0 0}
.d-photo>img{display:block;width:100%;aspect-ratio:7/5;object-fit:cover}
/* a photo slider crops to fill one fixed frame; artwork gets a frame per picture,
   capped by --cap and shaped by --ar, so nothing floats in space around it */
.d-shots .d-main{object-fit:cover}
.d-gallery:not(.d-shots) .d-stage{--cap:min(62vh,540px);aspect-ratio:var(--ar,1);max-height:none;width:min(100%,calc(var(--cap) * var(--ar,1)));margin-inline:auto}
/* numbered steps on a place card: what to do here, at a glance */
.d-steps{counter-reset:step;margin:var(--dgap) 0 0;padding:0;list-style:none}
.d-steps li{counter-increment:step;position:relative;padding:0 0 12px 46px}
.d-steps li::before{content:counter(step);position:absolute;left:0;top:-2px;display:grid;place-items:center;
  width:32px;height:32px;background:var(--c,var(--green));color:var(--on-c,var(--on-green));
  font:700 19px/1 var(--display);transform:rotate(-8deg)}
.d-steps b{display:block;font:700 20px/1.15 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--navy)}
.d-steps span{display:block;margin-top:2px;color:var(--ink)}
.d-others .is-here button{background:var(--road);padding:10px 12px}
.d-others .is-here b{font:700 24px/1 var(--display);text-transform:uppercase;color:var(--navy)}
.d-others .is-here small{font-size:14px}
.d-others .is-here .d-dot{width:38px;height:38px;font-size:17px}

.d-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1}
.d-main{display:block;width:100%;height:100%;object-fit:contain}
.d-step{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:rgba(35,28,76,.78);color:#fff;font:700 26px/1 var(--body);cursor:pointer}
.d-prev{left:8px}.d-next{right:8px}
.d-step:hover{background:var(--ink)}
.d-count{position:absolute;right:10px;bottom:10px;padding:2px 9px;border-radius:999px;background:rgba(35,28,76,.82);color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.d-thumbs{display:flex;gap:6px;margin-top:8px;overflow-x:auto;padding-bottom:4px}
.d-thumbs button{flex:none;width:62px;height:62px;padding:0;border:0;background:none;opacity:.55;transition:opacity .15s;cursor:pointer}
.d-thumbs button:hover{opacity:.85}
.d-thumbs button[aria-pressed="true"]{opacity:1;box-shadow:inset 0 -4px 0 var(--coral)}
.d-thumbs img{width:100%;height:100%;object-fit:cover}
.d-noimg{display:grid;place-items:center;aspect-ratio:3/2;background:var(--c);font:700 34px/1 var(--display);color:var(--ink);text-align:center;padding:20px}
.d-label{margin:var(--dgap) 0 4px;font:700 20px/1 var(--display);color:var(--navy);letter-spacing:.02em;text-transform:uppercase}
.d-text{margin:0;max-width:62ch}
.d-note{margin:var(--dgap) 0 0;padding:10px 12px;background:var(--road);font-weight:600;font-size:14px}
.d-links{display:flex;flex-wrap:wrap;gap:6px;margin:var(--dgap) 0 0;padding:0;list-style:none}
.d-links a,.d-links span{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--road);font-weight:700;font-size:13px;text-decoration:none}
.d-links a:hover{background:var(--line)}
.d-links em{font-style:normal;margin-right:5px;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.d-walk{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--dgap);padding-top:14px;border-top:1px solid var(--line)}
.d-walk button{padding:9px 11px;border:0;border-radius:0;background:var(--road);cursor:pointer;text-align:left;font-weight:700;font-size:13px;line-height:1.25}
.d-walk button:last-child{text-align:right}
.d-walk button:hover{background:var(--line)}
.d-walk small{display:block;color:var(--muted);font-weight:600}
.d-sched{margin:6px 0 0;padding:0;list-style:none}
.d-mini{margin:var(--dgap) 0 0;padding:0;list-style:none}
.d-mini button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;width:100%;padding:7px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer}
.d-dot{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;margin:3px;transform:rotate(-8deg);background:var(--green);color:var(--on-green);font:700 14px var(--display)}
.d-mini small{color:var(--muted)}
.d-dot.k-beer{background:var(--navy);color:#fff;font-size:12px}
.d-dot.k-wine{background:var(--wine);color:#fff;font-size:12px}
.d-others b{font-weight:700}
.d-others button:hover b{text-decoration:underline;text-underline-offset:3px}
.v-event+.v-event{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.v-event p{margin:4px 0 0}
.v-link{display:inline-block;margin-top:6px;font-weight:800;color:var(--navy)}
/* People's Choice */
.vote{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 18px;border-left:6px solid var(--mustard);background:var(--paper)}
.vote-star{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:4px;transform:rotate(-8deg);background:var(--mustard);color:var(--on-mustard);font-size:22px}
.vote b{display:block;font:700 24px/1 var(--display);color:var(--navy);text-transform:uppercase}
.vote-t{display:block;margin-top:3px;font-size:14px}
.vote .d-btn{flex:none;margin-left:auto}
@media (max-width:640px){.vote{flex-wrap:wrap}.vote .d-btn{margin-left:0}}
.d-vote{margin:var(--dgap) 0 0;padding:10px 12px;border-left:5px solid var(--mustard);background:var(--road);font-size:14px;font-weight:600}
/* the ballot note answers the question it raises: a chip that goes to the tent on the map */
.vote-go{display:inline-flex;align-items:center;gap:7px;margin:8px 0 0;padding:8px 14px 6px;
  border:2px solid var(--mustard);background:none;color:var(--ink);cursor:pointer;
  font:700 15px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;transition:background .15s}
.vote-go svg{flex:none;width:17px;height:17px;fill:currentColor}
.vote-go:hover{background:var(--mustard)}
.vote-go:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.v-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.v-links .v-link{margin-top:2px}

/* ---------- page layout ---------- */
/* Concept A — the printed program: centered wordmark + calendar dates, one row of five tabs, filters on the water waves, map below */
body{display:grid;grid-template-rows:auto auto 1fr;height:100dvh;background:var(--hill)}

/* header */
.hdr{position:relative;z-index:40;display:flex;align-items:center;gap:clamp(10px,1.1vw,22px);padding:9px clamp(12px,2vw,28px) 7px;background:var(--hill);color:var(--on-dark)}
.hdr-social{flex:none;display:flex;align-items:center;margin-left:clamp(10px,1.1vw,22px)}
/* the studio credit: quiet in the header corner on a desktop, at the foot of the
   menu on a phone. The mark inherits the cream it sits on. */
.hdr-pwr{flex:none;display:flex;align-items:center}
.pwr{display:grid;justify-items:end;gap:4px;text-decoration:none;color:inherit;opacity:.8;transition:opacity .15s}
.pwr:hover{opacity:1}
.pwr:focus-visible{outline:3px solid var(--mustard);outline-offset:4px}
.pwr-by{font:800 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.pwr-mark{display:block;width:112px;height:auto}
.mnav-pwr{display:flex;justify-content:center}
/* the ownership line, small and quiet in both places it appears */
.copy{margin:16px 0 0;font:600 clamp(12px,.95vw,14px)/1.55 var(--body);letter-spacing:.02em;color:var(--muted)}
.copy-sep{display:inline-block;padding:0 7px;opacity:.55}
.contact-copy{margin-top:clamp(20px,3vh,36px);padding-top:16px;border-top:2px solid var(--line)}
.copy-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s}
.copy-link:hover,.copy-link:focus-visible{color:var(--navy)}
.mnav-copy{margin:14px 0 0;text-align:center;color:var(--on-dark-soft)}
@media (max-width:420px){.copy-sep{display:block;height:0;overflow:hidden;padding:0}}
.mnav .pwr{justify-items:center;gap:6px}
.mnav .pwr-by{font-size:12px;letter-spacing:.18em}
.mnav .pwr-mark{width:clamp(110px,34vw,150px)}
@media (max-width:1024px){.hdr-pwr{display:none}}
/* the same mustard dot the tabs are separated by, before the icons and between them */
.hdr-social .socials{gap:11px;color:var(--on-dark)}
.hdr-social .socials a{width:27px;height:27px}
.hdr-social .socials svg{width:17px;height:17px}
.hdr-main{flex:none;display:flex;align-items:center}
.brand{position:relative;display:flex;align-items:center;gap:0;text-decoration:none;min-width:0}
.brand-stack{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:min-content}
/* the place and the two days share the line under the name */
.brand-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px clamp(9px,1vw,16px);min-width:0}
.brand-where{font:700 clamp(13px,1.05vw,19px)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--on-dark-soft);white-space:nowrap}
.hd-days{display:flex;gap:6px}
.hd-day{display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px 3px;border:2px solid rgba(249,249,220,.3);font:700 clamp(13px,1.05vw,19px)/1 var(--display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.hd-day b{font-weight:700;color:var(--on-dark)}
.hd-day i{font-style:normal;color:var(--mustard)}
.kicker{display:block;font-weight:700;font-size:clamp(10px,.78vw,14px);letter-spacing:.34em;text-transform:uppercase;color:var(--mustard);white-space:nowrap}
.brand .wm{font-size:clamp(32px,3.9vw,68px);line-height:.86}
.dates{display:flex;gap:14px;flex:none}
.hcal{position:relative;width:118px;border:3px solid var(--on-dark);border-radius:14px;padding:12px 6px 5px;text-align:center;color:var(--on-dark)}
.hcal::before,.hcal::after{content:"";position:absolute;top:-11px;width:8px;height:17px;border:3px solid var(--on-dark);border-radius:6px;background:var(--hill)}
.hcal::before{left:22px}.hcal::after{right:22px}
.hcal-m{display:block;margin:0 -6px 4px;padding-bottom:5px;border-bottom:3px solid var(--on-dark);font:700 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.hcal-d{display:block;font:700 31px/1 var(--display)}
.hcal-h{display:block;margin-top:2px;font:700 15px/1.15 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}

/* one row of five tabs */
.tab-row{display:contents}
.tabs{flex:1;min-width:0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;margin:0;padding:0}
.tab{position:relative;flex:none;padding:5px 2px 4px;color:var(--on-dark);font:700 clamp(13px,1.05vw,18px)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:7px;transition:color .15s,text-decoration-color .15s}

.tab+.tab{margin-left:clamp(8px,1vw,18px)}
.tab{text-decoration:none}
.tab:hover{color:var(--mustard)}
.tab[aria-current="page"]{color:var(--sky)}
.tab[aria-current="page"]:hover{color:var(--mustard)}

/* the festival dates, under the wordmark */
.brand .mdate{display:none;width:100%;font:700 clamp(13px,1.15vw,19px)/1.15 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark)}
.brand .mdate>span{display:block;white-space:nowrap;text-align:justify;text-align-last:justify}
@media (max-width:760px){.brand .mdate-sm{display:block}}

/* countdown, inside the calendar graphic */
/* no calendar frame — just the label and the ticking numbers */
/* the number size, the gap and the colon all come off one pair of values so the
   block stays tight at every width */
.hcal-count{--cdnum:clamp(44px,4vw,66px);--cdgap:clamp(9px,1vw,20px);
  flex:none;width:auto;padding:0;border:0;border-radius:0;display:inline-flex;flex-direction:column;align-items:center}
.hcal-count::before,.hcal-count::after{display:none}
.hcal-count .hcal-m{display:block;width:auto!important;margin:0 0 1px;padding:0;border:0;font:800 14px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--mustard)}
.cd-cells{display:flex;gap:var(--cdgap);margin-top:0}
.cd-cells>span{position:relative;flex:none;display:grid;gap:0;place-items:center;min-width:calc(var(--cdnum) * .95)}
/* the clock colon sits in the gap, on the numbers' own center line */
.cd-cells>span+span::before{content:":";position:absolute;top:0;left:calc(-.5 * var(--cdgap));transform:translate(-50%,-8%);font:700 var(--cdnum)/1 var(--display);color:var(--mustard)}
.cd-cells b{min-width:2ch;text-align:center;font:700 var(--cdnum)/.88 var(--display);color:var(--mustard);font-variant-numeric:tabular-nums}
.cd-cells small{margin-top:0;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mustard)}
.cd-note{display:block;margin-top:6px;font:700 17px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--mustard)}
.hcal-count.is-open .hcal-m{font:700 17px/1.1 var(--display);letter-spacing:.06em;color:var(--green);border-color:var(--green)}
@media (max-width:900px){.hcal-count{min-width:0}}
@media (max-width:760px){
  .hcal-count{position:fixed;left:0;right:0;bottom:0;z-index:35;display:block;margin-top:0;padding:6px 12px calc(7px + env(safe-area-inset-bottom,0px));background:var(--hill);box-shadow:0 -8px 20px rgba(20,32,58,.3)}
  .hcal-count{--cdnum:clamp(38px,10.5vw,50px);--cdgap:clamp(12px,3.6vw,18px)}
  .hcal-count .hcal-m{margin:0 auto 3px;font-size:12px}
  .cd-cells{justify-content:center}
  .cd-cells>span{flex:none}
  .cd-cells small{font-size:11px}
  .cd-note{margin-top:0}
}

/* a tab that leaves the site */
.tab.is-out svg,.mnav-link.is-out svg{width:.62em;height:.62em;margin-left:5px;vertical-align:baseline}

/* filter row on the water waves */
.band{position:relative;z-index:3;background:none;margin-bottom:calc(8px - var(--wave-h))}
.filters .strip-seg{justify-content:center;align-items:center;gap:10px;padding:9px 12px 7px;background:transparent;color:var(--on-c);box-shadow:none}
.filters .strip-seg+.strip-seg{border-left:2px solid rgba(249,249,220,.16)}
.filters .strip-i{width:26px;height:26px;font-size:18px;background:var(--c);color:var(--on-c)}
.filters .strip-i svg{width:15px;height:15px;fill:currentColor}
.filters .c-coral::before{transform:rotate(-12deg);border-radius:2px}
.filters .c-mustard::before{border-radius:50%}
.filters .c-sky::before{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.filters .c-green::before{border-radius:5px}
.filters .strip-l{color:var(--c);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:6px;transition:text-decoration-color .15s}
.filters .strip-seg:hover{filter:none}
.filters .strip-seg:hover .strip-l{text-decoration-color:var(--c)}
.filters .strip-seg[aria-pressed="true"]{box-shadow:none}
.filters .strip-seg[aria-pressed="true"] .strip-l{text-decoration-color:var(--c);text-decoration-thickness:4px}
/* 96/1600 keeps the wave at the shape it was drawn at instead of squashing it flat */
.waves{position:relative;height:var(--wave-h);margin-top:-8px;line-height:0;overflow:hidden;pointer-events:none}
.waves svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.waves .w0{fill:var(--hill)}.waves .w1{fill:var(--hill-2)}.waves .w2{fill:var(--hill-3)}

.map-credit{cursor:pointer}
.map-bank{font:700 38px/1 var(--display);fill:var(--navy);text-transform:uppercase;letter-spacing:.02em}
.map-credit text{fill:#fff;font:700 23px var(--display);letter-spacing:.05em;text-transform:uppercase}
.map-credit .mc-small{font-size:18px;fill:#fff;text-decoration:underline;text-underline-offset:3px}
.map-credit:hover .mc-small{fill:var(--ink)}
.map-credit:focus-visible{outline:none}
.map-credit:focus-visible text{fill:var(--ink)}

/* stage */
.stage{position:relative;overflow:hidden;background:var(--paper)}
.page{position:absolute;inset:0;overflow:auto;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s}
.page.is-active{opacity:1;visibility:visible;transition:opacity .22s ease}
.page-map{overflow:hidden;background:none}
.pg-wrap{max-width:1500px;margin:0 auto;padding:calc(var(--wave-h) + 18px) clamp(16px,3vw,40px) 44px}
.map-ctl{position:absolute;right:16px;bottom:16px;z-index:6;display:flex;align-items:flex-end;gap:10px;pointer-events:none}
.map-ctl>*,.map-ctl-stack>*{pointer-events:auto}
.map-ctl-stack{display:grid;justify-items:end;gap:10px}
.map-zoom{position:static}
.map-hint{position:static;margin:0;padding:7px 14px;border-radius:999px;background:rgba(35,28,76,.84);color:#fff;font-size:12px;font-weight:600}
/* combined pages: sections with a jump bar */
.jump{display:flex;justify-content:center;margin:0 0 18px}
.page[data-page="music"] .jump{border-bottom:0;margin-bottom:12px}
.pg-section{scroll-margin-top:62px}
.pg-section+.pg-section{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}

/* the map's own toolbar: view switch on the left, category filters beside it */
.page-map{display:flex;flex-direction:column}
/* the view switch floats over the top-right corner of the map */
.map-bottom{flex:none;display:flex;align-items:stretch;background:var(--paper)}
.view-seg{flex:none;border-color:var(--navy);background:var(--paper)}
/* The day picks which program you are reading; the view picks how it is drawn.
   Two different jobs, so the day is a pair of the festival's calendar cards and
   the view keeps the rounded pill. */
.day-cals{display:flex;justify-content:center;gap:clamp(12px,1.8vw,24px)}
.day-cal{width:126px;padding:12px 6px 7px;border-color:var(--navy);background:var(--paper);color:var(--navy);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.day-cal::before,.day-cal::after{border-color:inherit;background:var(--paper)}
.day-cal .hcal-m{border-bottom-color:currentColor}
.day-cal .hcal-d{font-size:27px}
.day-cal .hcal-h{font-size:13px}
.day-cal[aria-pressed="true"]{background:var(--navy);color:var(--road)}
.day-cal[aria-pressed="true"]::before,.day-cal[aria-pressed="true"]::after{background:var(--navy)}
.day-cal[aria-pressed="false"]{border-color:color-mix(in srgb,var(--muted) 40%,var(--paper));color:var(--muted)}
.day-cal:hover{border-color:var(--mustard)}
.day-cal:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
@media (max-width:760px){.day-cal{width:112px;padding:10px 5px 6px}.day-cal .hcal-d{font-size:23px}.day-cal .hcal-h{font-size:12px}}
.view-seg{box-shadow:0 6px 18px rgba(20,32,58,.28)}
.view-seg button{font:700 15px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;padding:8px 16px 6px;color:var(--navy);white-space:nowrap}
/* each view says what it shows: a folded map, a wall of pictures, a list of names */
.view-seg button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding-top:7px;padding-bottom:7px}
.view-seg button svg{flex:none;width:17px;height:17px;fill:currentColor}
.view-seg::before{background:var(--navy)}
.view-seg button[aria-pressed="true"]{color:var(--road)}
.view-seg button:hover{background:var(--mustard);color:var(--ink)}
.map-tools{flex:1;min-width:0;display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none}
.map-tools::-webkit-scrollbar{display:none}
.map-filters{flex:1;min-width:0;display:flex;padding:0}
.map-filters .strip{flex:1;display:flex}
.map-filters::-webkit-scrollbar{display:none}
.map-filters .strip{display:flex;gap:8px}
.map-filters .strip-seg{flex:1;justify-content:center;gap:9px;padding:18px 14px 16px;border-radius:0;background:var(--c);color:var(--on-c)}
.map-filters .strip-seg+.strip-seg{border-left:0}
.map-filters .strip-seg::before{display:none}
.map-filters .strip-i{width:auto;height:auto;font-size:clamp(24px,2.2vw,31px);background:none;color:var(--on-c)}
.map-filters .strip-i svg{width:1em;height:1em;fill:currentColor}
.map-filters .strip-l{font-size:clamp(24px,2.2vw,31px);color:var(--on-c);text-decoration:none}
.map-filters .strip-seg:hover{opacity:1;filter:brightness(1.06);box-shadow:inset 0 -6px 0 rgba(35,28,76,.32)}
/* no underline — the other categories simply step back when one is chosen */
body.has-cat .map-filters .strip-seg{opacity:.42;transition:opacity .15s,filter .15s,box-shadow .15s}
body.has-cat .map-filters .strip-seg:hover{opacity:1}
body.has-cat .map-filters .strip-seg[aria-pressed="true"]{opacity:1}
.map-filters .strip-seg[aria-pressed="true"] .strip-l{color:var(--on-c)}
.map-filters .strip-seg[aria-pressed="true"]::before{background:var(--ink)}
@media (max-width:760px){
    .map-bottom{padding:0}
  .view-seg button{font-size:13px;padding:7px 12px 5px}
  .map-filters .strip-seg{flex-direction:column;gap:1px;padding:11px 4px 10px}
  .map-filters .strip-l{font-size:17px}
}

/* drawer framed like the program's Food • Beer • Wine box */
/* a closed drawer is parked off-screen; hide it outright so nothing of it shows on other pages */
.drawer{position:absolute;z-index:10;top:12px;right:12px;bottom:12px;width:min(450px,calc(100% - 24px));transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s}
.drawer.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dr-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--paper);box-shadow:0 18px 44px rgba(35,28,76,.28)}
.dr-close{position:absolute;z-index:3;top:6px;right:8px;flex:none;width:40px;height:40px;margin:0;border:0;border-radius:50%;background:transparent;color:var(--ink);font:700 22px/1 var(--body);cursor:pointer;transition:background .15s;
  /* the card scrolls beneath it, so it carries its own halo to stay legible over a picture */
  text-shadow:0 0 5px var(--paper),0 0 9px var(--paper)}
.dr-close:hover{background:var(--line)}
.dr-close:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.dr-scroll{flex:1;overflow:auto;padding:14px 24px 24px}

/* between the menu button's breakpoint and 1400px the header is tight: the wordmark
   and the countdown taper off so the nav never has to break into a second row. Both
   curves meet their full-size values exactly at 1400px, so nothing jumps. */
@media (min-width:1025px) and (max-width:1500px) and (pointer:fine){
  .hdr .brand .wm{font-size:clamp(28px,calc(6.06vw - 32.4px),68px)}
  .hdr .hcal-count{--cdnum:clamp(30px,calc(6.38vw - 35.7px),66px)}
}
/* mobile menu (hamburger) */
.burger,.mdate{display:none}
.burger{flex:none;align-items:center;justify-content:center;padding:6px;border:0;background:transparent;color:var(--on-dark);cursor:pointer}
.burger svg{width:34px;height:34px}
/* a tablet gets the menu button whichever way it is held. Landscape is as wide as
   a laptop, so the coarse pointer is what tells the two apart. */
@media (max-width:1024px),(max-width:1400px) and (pointer:coarse){
  .hdr .tabs,.hdr-social{display:none}
  .hdr-main{flex:1}
  .burger{display:inline-flex}
}
.mnav{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;gap:22px;padding:16px 20px 28px;background:var(--hill);color:var(--on-dark);overflow:auto}
.mnav[hidden]{display:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mnav-top .wm{font-size:clamp(30px,10.6vw,54px)}
.mnav-close{flex:none;width:44px;height:44px;border:3px solid var(--on-dark);border-radius:50%;background:transparent;color:var(--on-dark);font:700 24px/1 var(--body);cursor:pointer}
.mnav-links{display:flex;flex-direction:column}
.mnav-link{display:flex;align-items:center;gap:16px;padding:18px 2px 14px;border-bottom:2px solid rgba(249,249,220,.14);color:var(--on-dark);font:700 clamp(38px,11vw,54px)/1 var(--display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none}
.mnav-i{flex:none;display:grid;place-items:center;width:clamp(34px,9vw,44px);height:clamp(34px,9vw,44px);background:var(--mk,var(--coral));color:#fff;font:700 clamp(20px,5.4vw,26px)/1 var(--display);transform:rotate(-10deg)}
.mnav-i svg{width:58%;height:58%;fill:#fff}
.mnav-link{--mk:var(--coral);--mk-t:var(--coral-soft)}
.mnav-link:nth-child(4n+2){--mk:var(--mustard);--mk-t:var(--mustard)}
.mnav-link:nth-child(4n+3){--mk:var(--sky);--mk-t:var(--sky)}
.mnav-link:nth-child(4n+4){--mk:var(--green);--mk-t:var(--meadow)}
.mnav-link[aria-current="page"]{color:var(--mk-t,var(--mk))}
.mnav .dates{flex-wrap:wrap;justify-content:center;gap:12px;padding-top:10px}
.mnav .hcal{flex:1 1 0;width:auto;max-width:230px;padding:18px 6px 12px}
.mnav .hcal-m{margin-inline:-6px;font-size:clamp(15px,4.4vw,19px)}
.mnav .hcal-d{font-size:clamp(44px,13vw,56px)}
.mnav .hcal-h{margin-top:4px;font-size:clamp(16px,5vw,22px)}
.mnav-where{margin:12px 0 0;text-align:center;font:700 clamp(20px,6vw,27px)/1.2 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--on-dark)}
.mnav>[data-socials-slot]{padding-top:8px}
.mnav .socials{justify-content:center;gap:18px}
.mnav .socials a{width:66px;height:66px}
.mnav .socials svg{width:36px;height:36px}
@media (max-width:760px){
  :root{--cdbar:84px;--filterbar:0px}   /* the countdown bar along the bottom */
  .hdr{align-items:center;gap:12px;padding:12px 14px 6px}
  .hdr-social,.hdr .tabs,.hdr .dates,.kicker,.brand-foot{display:none}
  .hdr-main{flex:1}
  .hdr-main{flex:1;justify-content:flex-start}
  .brand{flex-direction:column;align-items:flex-start;gap:4px}
  .brand-stack{width:100%}
  .brand .wm{font-size:clamp(30px,10.6vw,54px)}
  .mdate{display:block;font:700 clamp(15px,4.6vw,21px)/1.15 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark-soft)}
  .burger{display:inline-flex}
  .burger svg{width:38px;height:38px}
  .hdr{gap:8px;padding:12px 12px 6px}
  .filters .strip-seg::before{display:none}
  .waves{height:62px}

  .drawer{z-index:60;top:0;left:0;right:0;bottom:0;width:auto;height:auto;transform:translateY(calc(100% + 24px))}
  .band{z-index:70}
  .dr-card{box-shadow:none}
  .dr-scroll{padding-top:calc(var(--wave-h) + 6px)}
  .dr-close{top:calc(var(--wave-h) - 4px);right:9px;width:44px;height:44px;font-size:26px}
  /* the card is the whole screen while it is open: nothing peeks out under it */
  body:has(.drawer.open) .hcal-count:not(.mnav-count){visibility:hidden}
  .d-gallery .d-stage{max-height:min(44vh,400px)}
  .d-gallery:not(.d-shots) .d-stage{--cap:min(52vh,460px)}
  .d-thumbs button{width:52px;height:52px}
  .map-hint{display:none}
  .map-zoom{bottom:14px}
  .page{padding-bottom:var(--cdbar)}
  .page-map{padding-bottom:var(--cdbar)}
}

/* ---------- Plan Your Visit: the map's own aesthetic (option F2) ----------
   The park-green ground carries the page, so the navy panel, the white card and
   the cream page behind them all go: content sits straight on the green with a
   drawn meadow patch and a road across it, hard ink offset shadows and no radii.
   Everything here is scoped to this page; Music & Demos keeps the navy panel. */
/* the panel IS the page ground, so it runs edge to edge: the wrap's side padding
   moves onto the panel, and the drawn road and meadow then reach the window edges */
/* the parking section is green the whole way out: the drawn map's own park color
   runs straight into the page, so the map has no edge */
.pv[data-page="visit"]:has(.pg-section[data-section="parking"]:not([hidden])) .pg-wrap,
.pv[data-page="visit"]:has(.pg-section[data-section="parking"]:not([hidden])) .set-panel{background:var(--park)}
/* the map IS the section, so the panel's padding comes off and it runs to the edges */
.pv[data-page="visit"]:has(.pg-section[data-section="parking"]:not([hidden])) .pg-wrap{overflow:hidden;padding:var(--wave-h) 0 0}
.pv[data-page="visit"]:has(.pg-section[data-section="parking"]:not([hidden])) .set-panel{padding:0;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);align-content:stretch}
/* the section has to carry the panel height down, or the map falls back to
   its own aspect and pushes the heading under the foot strip */
.pg-section[data-section="parking"]{height:100%;min-height:0}
/* the map takes the room that is left; its heading sits under it on the green */
/* the map takes what is left after the heading, so both fit the frame */
.park-body{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:start;gap:0;height:100%;min-height:0}
.pm-lede{display:flex;align-items:center;gap:16px;padding:12px clamp(18px,3vw,44px) 18px}
.pm-lede>div{min-width:0}
.pm-lede>div b{display:block;font:700 clamp(30px,3.4vw,46px)/1 var(--display);letter-spacing:.01em;color:var(--on-dark)}
.pm-lede>div span{display:block;margin-top:3px;font-size:clamp(15px,1.3vw,17px);color:var(--on-dark)}
/* the drawing is sized by the frame, not the other way round, so a short window
   scales it down instead of pushing it past the foot of the screen */
.pmap{width:100%;aspect-ratio:1600/607;height:auto;max-height:100%;min-height:0}
.pmap-wrap{min-height:0;height:100%}
.pmap-svg{width:100%;height:100%}
/* while the map takes drag and pinch it needs the gestures to itself */
.pmap-wrap.is-live{touch-action:none;cursor:grab}
.pmap-wrap.is-live.dragging{cursor:grabbing}
/* the wave crest is filled with the ground it sits on: park green over the two maps,
   cream over the pages that sit on the cream ground */

/* less air between the river and the film */
.pv[data-page="visit"] .pg-wrap{padding:calc(var(--wave-h) + 8px) 0 32px}
.pv[data-page="visit"] .set-panel{position:relative;border:0;background:var(--paper);padding:14px clamp(20px,4vw,76px) 44px}

/* the sections are chosen from a strip along the foot of the screen, built exactly
   like the map's category filters: solid color cells on a cream ground, an 8px
   cream gap between each, ink type, no underline — the open one simply stays at
   full strength while the rest step back to .42 */
.pv{display:flex;flex-direction:column;overflow:hidden}
/* a flex item with auto side margins never stretches, so the wrap shrank to its
   content and the parking map collapsed to the SVG's own 300px */
.page.pv .pg-wrap{flex:1;min-height:0;width:100%;max-width:none;margin-inline:0;overflow-y:auto}
.pv-bottom{flex:none;display:flex;align-items:stretch;background:var(--paper)}
.pv-bottom .strip{flex:1;min-width:0;gap:8px}
.pv-bottom .strip-seg{gap:9px;padding:18px 14px 16px;align-items:center;box-shadow:none}
.pv-bottom .strip-l{font-size:clamp(24px,2.2vw,31px);color:var(--on-c);text-decoration:none}
/* each cell carries its section's own mark, sized off the label beside it */
.strip-i{flex:none;display:grid;place-items:center;width:1em;height:1em;font-size:clamp(24px,2.2vw,31px);line-height:1;color:var(--on-c)}
.strip-i svg{width:100%;height:100%;fill:currentColor}

@media (max-width:760px){.strip-i{font-size:17px}}
@media (max-width:460px){.strip-i{display:none}}
.pv-bottom .strip-seg:hover{opacity:1;filter:brightness(1.06);box-shadow:inset 0 -6px 0 rgba(35,28,76,.32)}
.pv-bottom .strip-seg[aria-pressed="false"]{opacity:.42;transition:opacity .15s,filter .15s,box-shadow .15s}
.pv-bottom .strip-seg[aria-pressed="false"]:hover{opacity:1}
.pv-bottom .strip-seg[aria-pressed="true"]{opacity:1;box-shadow:none}
@media (max-width:760px){
  .pv-bottom .strip{gap:6px}
  /* equal cells crowd a long label next to a short one, so each takes the room its
     own text needs and they share what is left over */
  .pv-bottom .strip-seg{flex:1 1 auto;padding:15px 8px 14px}
  .map-filters .strip-seg{flex:1 1 auto}
  .pv-bottom .strip-l{font-size:17px}
}

/* type reads dark on green — undo the light-on-navy rules.
   Navy clears 3:1 on green only at display sizes; small text takes ink (6.2:1). */
.pv .set-panel .pg-kicker{color:var(--ink)}
.pv .set-panel .pg-lede,.pv .set-panel>.pg-section>p{color:var(--ink)}
/* ...except inside Explore's hero, which carries its own dark blue and keeps light type */
.pv .ex-hero .pg-title{position:static;width:auto;height:auto;margin:6px 0 0;padding:0;overflow:visible;clip-path:none;white-space:normal;color:var(--c);display:flex;align-items:center;gap:14px}
.pv .ex-hero .pg-kicker{color:var(--mustard)}
.pv .ex-hero .pg-lede{color:var(--on-dark-soft)}
.pv .set-panel .ex-credit{color:var(--ink)}
.pv .set-panel .ex-credit a{color:var(--ink);text-decoration:underline}

/* the video's 5px shadow ate most of the 16px gutter, so the column gets real air */
.pv .visit-grid{column-gap:clamp(24px,2.6vw,40px)}

/* the Where card loses its card */
.pv .v-where{background:none;border:0;padding:0;box-shadow:none}
.pv .v-where .v-big{color:var(--navy)}
/* the whole address line reads beside the pin, so it is set smaller than a card head */
.pv .v-where .card-title{font-size:clamp(20px,1.9vw,26px)}
.pv .v-where p,.pv .v-where .v-small{color:var(--ink)}

/* pictures become map tiles: square corners */

/* buttons the same way */

/* the marker tiles that label a section, tilted like a booth number */
.m-tile{flex:none;display:grid;place-items:center;width:52px;height:52px;margin:4px;background:var(--c,var(--coral));color:var(--on-c,var(--on-coral));transform:rotate(-8deg)}
.m-tile svg{width:27px;height:27px;fill:var(--on-c,var(--on-coral))}
.m-head{display:flex;align-items:center;gap:13px;margin:0 0 10px}
.m-head .card-title{margin:0}

@media (max-width:760px){
  .m-tile{width:44px;height:44px}.m-tile svg{width:23px;height:23px}
}

/* the ground is cream again: secondary type keeps --muted and the list view's booth
   numbers go back to carrying their medium's color, both from the base rules above */

/* ---------- Music & Demos and Sponsors / Team wear the same treatment ----------
   the navy box comes off, the sets and the sponsors/team pair move to the color
   strip along the foot, and what is left sits straight on the green with the
   map's hard ink shadows and square corners. */
.pv[data-page="music"] .set-panel{padding:0;border:0;background:none}
.pv[data-page="music"] .music-page{margin-top:0}
/* type that was tuned for the navy goes back to reading dark on the green */
.pv[data-page="music"] .act h3{color:var(--navy)}
.pv[data-page="music"] .act time,.pv[data-page="music"] .act-by,.pv[data-page="music"] .set-where{color:var(--ink)}
.pv[data-page="music"] .set-where svg{color:var(--ink)}
.pv[data-page="music"] .act-img{background:var(--road)}
.pv[data-page="music"] .act-note{color:var(--navy)}
/* no rule under the set head or over the volunteer card — the tiles and the
   color carry the section break on their own */
.page[data-page="music"] .set-head{border-bottom:0;padding-bottom:0}
.vol{border-top:0}
/* the set's own marker tile, the way Plan Your Visit heads its cards */
.pv[data-page="music"] .m-head{justify-content:center;margin-bottom:14px}
.pv[data-page="music"] .card-title{color:var(--c,var(--navy))}
.m-tile{font:700 30px/1 var(--display);color:var(--on-c,var(--on-coral))}
/* one mark color, so the tiles and the strip read as the same family and nothing
   washes out: ink is 4.75:1 on coral and 6–9:1 on the rest */

/* the day switch, drawn like the strip along the foot */
.pv .jump{margin:0 0 20px}

/* buttons on the green, drawn like the ones on Plan Your Visit */

/* sponsors and team: the tiles and photos become map tiles */
.pv[data-page="team"] .team-page .member-name{color:var(--navy)}
.pv[data-page="team"] .team-note,.pv[data-page="team"] .team-note a{color:var(--ink)}
.pv[data-page="sponsors"] .pg-title,.pv[data-page="team"] .pg-title{color:var(--c,var(--navy))}
/* a heading that carries a marker tile lays out as a row, centered with the rest */
.pg-title:has(.m-tile){display:flex;align-items:center;justify-content:center;gap:14px}
@media (max-width:560px){.pg-title:has(.m-tile){gap:10px}}

/* Phones: the fixed desktop frame left the map about 140px tall, too small to read
   and too wide-and-short for panZoom to fill. Here the parking page scrolls — a map
   you can pinch and drag, with the text wrapping underneath it. */
@media (max-width:760px){
  .pv[data-page="visit"]:has(.pg-section[data-section="parking"]:not([hidden])) .pg-wrap{overflow-y:auto}
  .pg-section[data-section="parking"]{height:auto;min-height:0}
  .park-body{display:block;height:auto}
  .pmap{aspect-ratio:auto;max-height:none;height:auto}
  .pmap-wrap{height:46vh;min-height:260px}
  .pm-lede{align-items:flex-start;gap:10px;padding:12px 14px 18px}
  .pm-lede .m-tile{width:40px;height:40px}
  .pm-lede .m-tile svg{width:21px;height:21px}
  .pm-lede>div b{font-size:clamp(19px,5.4vw,30px)}
  .pm-lede>div span{font-size:clamp(13px,3.6vw,16px)}
}

/* the dismiss cross on the phone countdown bar, and the copy that lives in the menu */
.cd-x{display:none}
.mnav .hcal.mnav-count{flex:none;position:static;width:fit-content;max-width:100%;min-width:0;align-self:center;margin:14px auto 0;padding:0;border:0;background:none;box-shadow:none;text-align:center}
.mnav .mnav-count::before,.mnav .mnav-count::after{display:none}
.mnav .mnav-count .hcal-m{margin:0 0 4px;padding:0;border:0;text-align:center}
.mnav .mnav-count .cd-cells{display:flex;width:100%;justify-content:center}
@media (max-width:760px){
  .hcal-count:not(.mnav-count){padding-right:44px}
  .hcal-count:not(.mnav-count) .cd-x{position:absolute;top:6px;right:8px;display:grid;place-items:center;
    width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--on-dark);
    font:700 22px/1 var(--body);cursor:pointer}
  .hcal-count:not(.mnav-count) .cd-x:hover{background:rgba(249,249,220,.16)}
  html.cd-off .hcal-count:not(.mnav-count){display:none}
}

/* The menu is sized against the phone's own height so everything — links, countdown,
   dates, place and socials — lands on one screen with nothing to scroll. */
@media (max-width:760px){
  .mnav{gap:clamp(6px,1.4vh,20px);padding:clamp(8px,1.4vh,16px) 20px clamp(10px,1.8vh,24px);overflow:hidden;justify-content:space-between}
  .mnav-top .wm{font-size:clamp(24px,min(10.2vw,7.4vh),54px)}
  .mnav-close{width:clamp(34px,4.6vh,44px);height:clamp(34px,4.6vh,44px);font-size:clamp(17px,2.6vh,24px)}
  .mnav-link{padding:clamp(5px,1.1vh,18px) 2px;font:700 clamp(21px,min(9.4vw,4.6vh),54px)/1 var(--display)}
  .mnav-i{width:clamp(26px,3.9vh,44px);height:clamp(26px,3.9vh,44px);font-size:clamp(15px,2.3vh,26px)}
  .mnav .hcal.mnav-count{margin-top:0}
  .mnav .mnav-count{--cdnum:clamp(24px,min(11vw,5vh),50px);--cdgap:clamp(8px,min(3vw,1.8vh),18px)}
  .mnav .mnav-count .hcal-m{margin-bottom:2px;font-size:clamp(10px,1.5vh,14px)}
  .mnav .mnav-count .cd-cells small{font-size:clamp(9px,1.3vh,12px)}
  .mnav .mnav-count .cd-cells{width:100%;max-width:100%;flex-wrap:nowrap;justify-content:center}
  .mnav .mnav-count .cd-cells>span{min-width:0}
  .mnav .dates{gap:clamp(8px,1.6vh,14px);padding-top:0}
  .mnav .hcal:not(.mnav-count){padding:clamp(8px,1.6vh,18px) 6px clamp(5px,1vh,10px)}
  .mnav .hcal-m{font-size:clamp(10px,1.6vh,19px)}
  .mnav .hcal-d{font-size:clamp(24px,min(10vw,4.8vh),56px)}
  .mnav .hcal-h{margin-top:2px;font-size:clamp(12px,2vh,22px)}
  .mnav-where{margin-top:0;font-size:clamp(14px,2.2vh,27px)}
  .mnav .socials a{width:clamp(40px,6vh,66px);height:clamp(40px,6vh,66px)}
  .mnav .socials svg{width:clamp(21px,3.2vh,36px);height:clamp(21px,3.2vh,36px)}
  .mnav>[data-socials-slot]{padding-top:0;margin-top:0}
}

/* Touch screens: the map controls run as one row along the bottom instead of a
   stack, so they cover a strip of the map rather than a column of it. */
@media (max-width:1024px),(max-width:1400px) and (pointer:coarse){
  .map-ctl{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px}
  .map-ctl-stack{display:flex;flex-direction:row;align-items:center;gap:8px}
  .map-zoom{grid-auto-flow:column;gap:8px}
}
@media (max-width:760px){
  .map-ctl{left:12px;right:12px;bottom:12px;justify-content:center}
  .map-ctl-stack{flex:1;min-width:0}
  .map-ctl .seg{flex:1;min-width:0}
  .map-ctl .seg button{flex:1;min-width:0;padding:7px 6px 5px;font-size:13px}
  .map-zoom button{width:38px;height:38px}
}

/* the way to a place on the map, on the card that describes it: off to the side,
   level with the name rather than blocking the run down the card. On the map page
   there is nowhere to go — the reader is already looking at it. */
.d .d-actions:has(>[data-map]){justify-content:flex-end;margin:0 0 var(--dgap)}
body[data-page="map"] .d-goto{display:none}