/* ==========================================================================
   VISUAL ARTS: "The Salon Wall"  (round 3)
   Object world: a lit gallery wall with track lights and a bench, frames
   hung salon style in four profiles (gilt, black, natural maple, white
   float), museum wall labels, a paint-chip strip, an art-crawl map with
   red-dot stickers, a pinned crit wall with painter's tape, and a taped-out
   empty spot on the wall for the list-your-place block.
   The one light-led section: the hero is a white wall, not a dark room.
   Loads after shell.css. Adds the object world only; never restyles shared
   components (header, footer, cards, .ev, chips, search internals).
   Contrast (measured): ultramarine #2338C2 on wall #E9E6DE 6.97, muted on
   wall 5.65, white on dot red #C63A1E 5.22, white on vermilion-dark
   #C2401F 5.19, charcoal on cobalt chip #7C90F0 6.01, white on #4A5FD8 5.36.
   ========================================================================== */

.sec-visual {
  --v-wall: #E9E6DE;        /* gallery wall, warm white under track light */
  --v-wall-lit: #F7F5EF;
  --v-char: #17181B;        /* charcoal */
  --v-ultra: #2338C2;       /* ultramarine: the section's color */
  --v-cobalt: #9DB0FF;      /* on dark only */
  --v-cad: #F2C230;         /* cadmium (art + highlight only) */
  --v-verm: #E2512D;        /* vermilion (art only; never text) */
  --v-dot: #C63A1E;         /* red-dot sticker, white numerals 5.22 */
  --v-tape: #6F8FE3;        /* painter's tape */
  --f-wall: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
}

/* the light hero: the active switcher tab takes the wall color so it opens into
   the gallery (shell draws the active tab in --sec-deep, which is charcoal here).
   REQUEST to art director: move into shell.css as a .sec-visual exception. */
.sec-visual .switcher li.sec-visual a[aria-current="page"] { background: var(--v-wall); color: var(--v-ultra); }
.sec-visual .switcher li.sec-visual a[aria-current="page"] .sw { box-shadow: 0 0 0 1px rgba(23,24,27,.35); }

/* heading flourish: a cadmium paint swipe behind the emphasized words */
.sec-visual .block-title em {
  font-style: normal; color: inherit; padding: 0 .06em;
  background: linear-gradient(100deg, transparent 0 1%, rgba(242,194,48,.85) 2% 97%, transparent 98%) 0 72% / 100% .38em no-repeat;
}
.sec-visual .block--deep .block-title em { background-image: linear-gradient(100deg, transparent 0 1%, rgba(35,56,194,.95) 2% 97%, transparent 98%); }
.sec-visual .list-cta .block-title em { background-image: linear-gradient(100deg, transparent 0 1%, rgba(23,24,27,.55) 2% 97%, transparent 98%); }

/* ==========================================================================
   FRAMES + WALL LABELS (shared by hero, kinds, heritage)
   <span class="v-fr v-fr--gilt|black|maple|float [v-fr--oval]" style="--ar:4/3">
     <span class="v-fr-in [v-mat]"> art </span></span>
   ========================================================================== */
.v-fr {
  display: block; position: relative; padding: var(--fw, 10px);
  background: var(--fr-bg, #18181A);
  box-shadow: 0 1px 1px rgba(0,0,0,.28), 4px 12px 22px rgba(36,30,18,.30), var(--fr-inset, inset 0 0 0 0 transparent);
  transition: transform .25s ease, box-shadow .25s ease;
}
.v-fr-in {
  display: block; position: relative; overflow: hidden; aspect-ratio: var(--ar, 4/3);
  background: #FBFAF6;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 2px 3px 6px rgba(0,0,0,.28);
}
.v-fr-in > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-fr-in.v-mat { background: #FBFAF6; }
.v-fr-in.v-mat > svg { inset: 11%; width: 78%; height: 78%; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.v-fr--gilt {
  --fw: clamp(9px, 1.3vw, 15px);
  --fr-bg:
    radial-gradient(circle, rgba(255,240,190,.55) 1.1px, transparent 1.6px) 0 0 / 6px 6px,
    linear-gradient(135deg, #7A5A1E 0%, #E9CB7A 20%, #A57E2E 42%, #F3DC92 60%, #8A6524 80%, #D7B460 100%);
  --fr-inset: inset 0 0 0 2px #5E4413, inset 0 0 0 4px rgba(255,236,170,.55), inset 0 0 0 calc(var(--fw) - 3px) rgba(0,0,0,0), inset 0 0 0 calc(var(--fw) - 2px) #6B4F1C;
}
.v-fr--black { --fw: clamp(6px, .7vw, 9px); --fr-bg: linear-gradient(135deg, #2A2B2F, #111214 40%, #1E1F22); --fr-inset: inset 0 0 0 1px #3A3B40; }
.v-fr--maple {
  --fw: clamp(8px, 1vw, 12px);
  --fr-bg: repeating-linear-gradient(90deg, rgba(120,80,30,.10) 0 2px, transparent 2px 7px), linear-gradient(135deg, #E2C595, #C9A066 50%, #DDBE8A);
  --fr-inset: inset 0 0 0 1px rgba(90,60,20,.45);
}
.v-fr--float { --fw: 5px; --fr-bg: #FDFCF9; --fr-inset: inset 0 0 0 1px #D9D5CA; }
.v-fr--float .v-fr-in { background: #EFECE4; }
.v-float-art { position: absolute; inset: 9%; box-shadow: 2px 4px 7px rgba(0,0,0,.22); overflow: hidden; }
.v-float-art svg { width: 100%; height: 100%; }
.v-fr--oval, .v-fr--oval .v-fr-in { border-radius: 50%; }

/* wall label (museum vinyl): title / medium / line */
.v-wl {
  display: inline-flex; flex-direction: column; gap: 1px;
  background: #FFFFFF; color: var(--v-char); padding: 7px 10px 8px;
  font: 500 11px/1.35 var(--font-ui); box-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.v-wl b { font-weight: 700; font-size: 11.5px; }
.v-wl i { color: #55595F; }
.v-wl span { color: #55595F; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

/* ==========================================================================
   [1] HERO: the gallery wall
   ========================================================================== */
.v-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 130px 340px at 50% 0, rgba(255,253,246,.9), transparent 72%) 0 0 / 20% 100% repeat-x,
    var(--v-wall);
  color: var(--v-char);
  padding: clamp(64px, 6.5vw, 92px) 0 0;
}
.v-hero::before {                         /* picture rail */
  content: ""; position: absolute; left: 0; right: 0; top: 52px; height: 6px; z-index: -1;
  background: linear-gradient(180deg, #FFFFFF 0 2px, #D6D2C7 2px 4px, #C9C4B8 4px);
  box-shadow: 0 2px 3px rgba(0,0,0,.06);
}
/* track and five light cans */
.v-track { position: absolute; left: 0; right: 0; top: 18px; height: 7px; z-index: 0; background: #3A3B40; border-radius: 0; display: flex; justify-content: space-around; padding: 0 8%; box-shadow: 0 1px 0 rgba(255,255,255,.6); }
.v-track i { position: relative; width: 20px; height: 26px; margin-top: 3px; background: linear-gradient(90deg, #1A1B1E, #45464C 60%, #222327); border-radius: 3px 3px 7px 7px; rotate: 18deg; }
.v-track i:nth-child(even) { rotate: -16deg; }
.v-track i::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -2px; height: 4px; border-radius: 50%; background: #FFF6D8; box-shadow: 0 0 10px 3px rgba(255,240,200,.8); }
/* soft beam from each can down onto the wall (user, 2026-10-11): background only, static */
.v-track i::before {
  content: ""; position: absolute; top: 24px; left: 50%; width: clamp(180px, 22vw, 320px); height: clamp(380px, 44vw, 620px);
  translate: -50% 0; pointer-events: none;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(255, 243, 210, .55), rgba(255, 243, 210, .18) 45%, rgba(255, 243, 210, 0) 85%);
  filter: blur(6px);
}
/* the drifting pool of track light (resting pose: on the big gilt frame) */
.v-pool {
  position: absolute; z-index: -1; top: -6%; left: calc(50% - 120px); width: 520px; height: 115%;
  background: radial-gradient(ellipse 50% 60% at 50% 34%, rgba(255,252,240,.95), rgba(255,250,232,.45) 45%, transparent 72%);
  animation: v-drift 12s ease-in-out infinite alternate;
}
@keyframes v-drift { from { translate: 0 0; } to { translate: 300px 0; } }

.v-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: center; position: relative; }
.v-hero-copy { padding-bottom: clamp(54px, 6vw, 92px); }
.v-hero .eyebrow { color: var(--v-ultra); }
.v-hero .hero-title {
  font-family: var(--f-wall); font-weight: 700; font-size: var(--hero-size); line-height: .98;
  letter-spacing: -.035em; color: var(--v-ultra); margin: 6px 0 20px; text-wrap: balance;
  font-variation-settings: "opsz" 96;
}
.v-hero .hero-title span { color: var(--v-char); }
.v-hero-sub { max-width: 32em; font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.55; color: #3E4146; margin-bottom: 24px; }
.v-hero .search { box-shadow: 0 0 0 1.5px var(--sec-deep), 0 10px 26px rgba(36,30,18,.12); }   /* dark edge: 14.2:1 on the gallery wall (WCAG 1.4.11) */
.v-hero .search-alt a { color: var(--v-char); }

/* the salon cluster: frames placed by --x/--y/--w inside a fixed-ratio box */
.v-salon { position: relative; width: 100%; aspect-ratio: 680 / 560; margin-bottom: clamp(64px, 7vw, 100px); }
.v-salon > .v-fr, .v-salon > .v-wl { position: absolute; left: var(--x); top: var(--y); }
.v-salon > .v-fr { width: var(--w); }
.v-salon .v-hung::before {                /* cords from the picture rail */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 100%; height: 900px; z-index: -1;
  border-left: 1px solid rgba(60,60,60,.45); border-right: 1px solid rgba(60,60,60,.45);
  -webkit-mask-image: linear-gradient(0deg, #000 70%, transparent);
  mask-image: linear-gradient(0deg, #000 70%, transparent);
}
.v-salon .v-wl--sm { max-width: 17%; }

/* floor, baseboard and a gallery bench */
.v-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(40px, 5vw, 64px); z-index: -1;
  background:
    linear-gradient(180deg, #FFFFFF 0 5px, #D3CEC2 5px 7px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 120px),
    linear-gradient(180deg, #CFC8B9, #BDB5A4);
}
.v-bench {
  position: absolute; right: 19%; bottom: calc(100% + 6px); width: clamp(150px, 18vw, 260px); height: 14px;
  background: var(--v-char); border-radius: 2px;
  box-shadow: 0 16px 18px -10px rgba(0,0,0,.4);
}
.v-bench::before, .v-bench::after { content: ""; position: absolute; top: 14px; width: 10px; height: clamp(26px, 3vw, 44px); background: var(--v-char); }
.v-bench::before { left: 12px; } .v-bench::after { right: 12px; }

.v-hplinth { position: absolute; right: 1.6%; bottom: 30%; width: clamp(64px, 5.6vw, 84px); display: flex; flex-direction: column; align-items: center; }
.v-hpot { width: 78%; height: auto; margin-bottom: -2px; filter: drop-shadow(3px 5px 4px rgba(0,0,0,.25)); }
.v-hplinth-box { display: block; width: 100%; height: clamp(84px, 7.6vw, 112px); background: linear-gradient(90deg, #FFFFFF 0 70%, #E1DDD3 70%); box-shadow: 0 1px 0 #D3CEC2, 6px 14px 18px rgba(36,30,18,.18); }

/* ==========================================================================
   [2] KINDS: the wall of eight framed pieces
   ========================================================================== */
.v-kinds { background: var(--v-wall); }
.v-kinds::before {                        /* soft scallops of light along the top of the wall */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 360px; pointer-events: none;
  background: radial-gradient(ellipse 120px 300px at 50% 0, rgba(255,253,246,.85), transparent 70%) 0 0 / 25% 100% repeat-x;
}
.v-kinds .wrap { position: relative; }
.v-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
.v-col { list-style: none; display: grid; gap: clamp(30px, 3.4vw, 48px); padding-top: var(--drop, 0); }
.v-piece { display: block; text-decoration: none; color: var(--v-char); }
.v-piece:hover .v-fr, .v-piece:focus-visible .v-fr { transform: translateY(-4px); box-shadow: 0 1px 1px rgba(0,0,0,.28), 8px 22px 30px rgba(36,30,18,.36), var(--fr-inset); }
.v-piece .v-label { margin-top: 14px; }
.v-label {
  display: flex; flex-direction: column; gap: 2px; max-width: 92%;
  background: #FFFFFF; padding: 10px 12px 11px; box-shadow: 0 1px 2px rgba(0,0,0,.12);
  font: 400 13px/1.4 var(--font-ui);
}
.v-label-no { font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--v-ultra); margin-bottom: 3px; }
.v-label b { font: 700 17px/1.15 var(--f-wall); letter-spacing: -.01em; }
.v-label i { font-style: italic; color: #4A4D52; }
.v-label span:last-child { color: #55595F; font-size: 12.5px; }
.v-label span:last-child::before { content: "e.g. "; }
.v-piece:hover .v-label b { color: var(--v-ultra); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }

/* sculpture on a plinth instead of a frame */
.v-plinth { display: block; width: 70%; margin-inline: auto; }
.v-sculpt { width: 92%; margin: 0 auto -2px; height: auto; filter: drop-shadow(4px 6px 5px rgba(0,0,0,.25)); }
.v-plinth-box {
  display: block; aspect-ratio: 1 / .62;
  background: linear-gradient(90deg, #FFFFFF 0 72%, #E1DDD3 72%);
  box-shadow: 0 1px 0 #D3CEC2, 8px 18px 22px rgba(36,30,18,.18);
  border-top: 2px solid #F3F1EB;
}
.v-piece--plinth .v-label { margin-top: 18px; }
.v-piece--plinth:hover .v-sculpt { transform: translateY(-4px); }
.v-sculpt { transition: transform .25s ease; }

/* ==========================================================================
   [3] EVENTS: opening-night invitation card
   ========================================================================== */
.v-events-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.v-invite { position: relative; display: block; text-decoration: none; color: var(--v-char); padding: 26px 26px 0 0; }
.v-env {                                    /* the envelope it came in */
  position: absolute; right: 0; top: 0; width: 82%; height: 62%;
  background: linear-gradient(160deg, #2D44D0, #1B2C9E);
  box-shadow: 0 10px 24px rgba(23,24,27,.18);
}
.v-env::before { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 49.6%, rgba(255,255,255,.18) 50%, transparent 50.6%), linear-gradient(160deg, transparent 49.6%, rgba(0,0,0,.18) 50%, transparent 50.6%); }
.v-card {
  position: relative; display: flex; flex-direction: column; background: #FFFEFA; rotate: -2deg;
  box-shadow: 0 1px 0 #E7E2D6, 0 18px 40px rgba(23,24,27,.22); transition: rotate .25s ease, translate .25s ease;
}
.v-invite:hover .v-card, .v-invite:focus-visible .v-card { rotate: 0deg; translate: 0 -4px; }
.v-card-art { display: block; aspect-ratio: 2 / 1; margin: 16px 16px 0; overflow: hidden; }
.v-card-art svg { width: 100%; height: 100%; }
.v-card-body { display: flex; flex-direction: column; padding: 18px 24px 22px; }
.v-card-kicker { font: 500 11px/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--v-ultra); }
.v-card-what { margin-top: 12px; font: italic 400 17px/1.2 var(--font-ui); color: #3E4146; }
.v-card-title { font: 800 clamp(30px, 3.2vw, 42px)/1 var(--f-wall); letter-spacing: -.035em; margin-top: 2px; text-wrap: balance; }
.v-card-when { display: flex; flex-wrap: wrap; gap: 0; margin-top: 16px; border-block: 1.5px solid var(--v-char); }
.v-card-when span { flex: 1 1 auto; padding: 9px 10px; font: 700 15px/1 var(--font-ui); text-align: center; }
.v-card-when span + span { border-left: 1.5px solid var(--v-char); }
.v-card-where { margin-top: 14px; font: 700 20px/1.15 var(--f-wall); letter-spacing: -.01em; }
.v-card-where small { display: block; font: 500 14px/1.4 var(--font-ui); color: #55595F; letter-spacing: 0; }
.v-card-foot { margin-top: 14px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .04em; color: #55595F; }

/* ==========================================================================
   [4] PLACES: card art = a mini frame on a lit wall + an EST wall label
   ========================================================================== */
.v-art {
  gap: 18px;
  background:
    radial-gradient(ellipse 46% 120% at 38% -20%, rgba(255,253,246,.95), transparent 70%),
    var(--v-wall);
  display: flex; align-items: center; gap: 16px; padding: 0 18px;
}
.v-mini {
  position: relative; width: calc(var(--mw, 82px) * .9); height: calc(var(--mh, 64px) * .9); flex: none; margin-top: 4px;
  padding: var(--fw); background: var(--fr-bg); box-shadow: 0 1px 1px rgba(0,0,0,.25), 3px 8px 12px rgba(36,30,18,.28), var(--fr-inset, inset 0 0 0 0 transparent);
  transition: transform .25s ease;
}
.v-mini svg { display: block; width: 100%; height: 100%; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.v-mini--oval, .v-mini--oval svg { border-radius: 50%; }
.v-mini--gilt { --fw: 7px; --fr-bg: linear-gradient(135deg, #7A5A1E, #E9CB7A 25%, #A57E2E 50%, #F3DC92 70%, #8A6524); --fr-inset: inset 0 0 0 1px #5E4413, inset 0 0 0 2px rgba(255,236,170,.6); }
.v-mini--black { --fw: 4px; --fr-bg: #141416; }
.v-mini--maple { --fw: 6px; --fr-bg: repeating-linear-gradient(90deg, rgba(120,80,30,.12) 0 2px, transparent 2px 6px), linear-gradient(135deg, #E2C595, #C9A066); }
.v-mini--float { --fw: 9px; --fr-bg: #FDFCF9; --fr-inset: inset 0 0 0 1px #D9D5CA; }
.v-mini--float svg { box-shadow: 1px 2px 4px rgba(0,0,0,.25); }
.card:hover .v-mini { transform: translateY(-3px) rotate(-1deg); }
.v-mini-wl {
  display: flex; flex-direction: column; background: #FFFFFF; padding: 6px 8px 7px; min-width: 0;
  font: 500 10px/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #55595F;
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.v-mini-wl b { font: 700 14px/1.1 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--v-char); margin-top: 2px; }

/* compact card: a paint chip with a punched hole */
.v-chip { display: grid; place-items: center; background: var(--chip); }
.v-chip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: #FFFFFF; border-top: 1px solid rgba(0,0,0,.08); }
.v-chip b { position: relative; top: -7px; font: 800 18px/1 var(--f-wall); letter-spacing: -.02em; color: var(--chip-fg); }

/* ==========================================================================
   [5] PEOPLE: the paint-chip strip
   ========================================================================== */
.v-people { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.v-strip {
  background: #FFFFFF; padding: 14px 14px 12px; rotate: 1.4deg;
  box-shadow: 0 1px 0 #E1DDD3, 0 18px 36px rgba(23,24,27,.16);
}
.v-strip-brand { display: flex; flex-direction: column; gap: 3px; padding: 4px 4px 14px; font: 800 22px/1.05 var(--f-wall); letter-spacing: -.02em; color: var(--v-char); }
.v-strip-brand span { font: 500 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #55595F; }
.v-strip ol { list-style: none; counter-reset: chip; display: grid; gap: 4px; }
.v-strip li {
  counter-increment: chip; position: relative; display: flex; flex-direction: column; gap: 4px;
  background: var(--c); color: var(--fg); padding: 14px 14px 12px 50px; min-height: 64px; justify-content: center;
}
.v-strip li::before {
  content: counter(chip, decimal-leading-zero); position: absolute; left: 14px; top: 15px;
  font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--fg); opacity: .85;
}
.v-strip a { color: var(--fg); font: 700 16px/1.2 var(--font-ui); text-decoration: none; }
.v-strip a:hover { text-decoration: underline; }
.v-strip li span { font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); opacity: .9; }
.v-strip-foot { padding: 12px 4px 2px; font: 500 13px/1.4 var(--font-mono); }
.v-strip-foot a { color: var(--v-ultra); }
.v-strip-foot a::after { content: " \2192"; }

/* ==========================================================================
   [6] TOWNS: art-crawl map with red-dot stickers
   ========================================================================== */
.v-crawl { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 901px) { .v-map { position: sticky; top: 24px; } }
.v-map { margin: 0; padding: clamp(14px, 2vw, 24px); background: #FFFFFF; box-shadow: 0 1px 0 #D6D9EA, 0 16px 34px rgba(23,24,27,.12); rotate: -.8deg; }
.v-map svg { width: 100%; height: auto; overflow: visible; }
.v-map-land { fill: #F4F5FB; stroke: var(--v-ultra); stroke-width: 2.5; stroke-linejoin: round; }
.v-map-regions text { font: 500 13px var(--font-mono); letter-spacing: .3em; fill: #6A6E86; }
.v-route { fill: none; stroke: #8A90A8; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.v-dot circle { fill: var(--v-dot); filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.3)); }
.v-dot .num { font: 800 16px var(--f-wall); fill: #FFFFFF; text-anchor: middle; }
.v-dot .lbl { font: 700 18px var(--f-wall); letter-spacing: .06em; fill: var(--v-char); paint-order: stroke; stroke: #F4F5FB; stroke-width: 5px; stroke-linejoin: round; }
.v-stops { list-style: none; counter-reset: stop; display: grid; gap: 2px; }
.v-stops li { counter-increment: stop; }
.v-stops a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid #C9CDE3; text-decoration: none; color: var(--v-char);
}
.v-stops a::before {
  content: counter(stop); grid-row: span 2; align-self: start; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--v-dot); color: #fff;
  font: 800 12.5px/1 var(--f-wall); box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}
.v-stops b { font: 700 19px/1.15 var(--f-wall); letter-spacing: -.01em; }
.v-stops span { font-size: 14px; line-height: 1.45; color: #4A4D52; margin-top: 1px; }
.v-stops a:hover b { color: var(--v-ultra); text-decoration: underline; }

/* ==========================================================================
   [7] PRACTICE: the crit wall
   ========================================================================== */
.v-practice { background: #E4E1D8; }
.v-practice::before {                      /* homasote: flecked board */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(circle, rgba(120,110,90,.22) 1px, transparent 1.4px) 0 0 / 11px 13px,
    radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1.4px) 5px 7px / 17px 15px;
}
.v-practice .wrap { position: relative; }
.v-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px) clamp(18px, 2.6vw, 34px); }
.v-pin {
  position: relative; background: #FFFFFF; padding: 26px 22px 20px; rotate: var(--r, 0deg);
  box-shadow: 0 1px 0 #D9D5CA, 4px 10px 18px rgba(36,30,18,.16);
  display: flex; flex-direction: column; gap: 8px;
}
.v-pin::before {                            /* push pin */
  content: ""; position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75) 0 2px, transparent 3px), var(--pin, var(--v-ultra));
  box-shadow: 1px 3px 3px rgba(0,0,0,.35);
}
.v-pin--tape::before {                      /* painter's tape instead of a pin */
  width: 92px; height: 22px; border-radius: 0; top: -11px; rotate: -3deg;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 6px), var(--v-tape);
  opacity: .9; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.v-pin-sketch { width: 100%; height: 64px; background: #F7F6F2; border: 1px solid #ECEAE3; padding: 2px; }
.v-pin h3 { font: 800 23px/1.1 var(--f-wall); letter-spacing: -.02em; color: var(--v-char); margin-top: 4px; }
.v-pin p { font-size: 15px; color: #4A4D52; }
.v-pin ul { list-style: none; border-top: 1px solid var(--line); }
.v-pin li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.v-pin li a { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 15.5px; }
.v-pin li a:hover { color: var(--v-ultra); text-decoration: underline; }
.v-pin li span { font: 500 11.5px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.v-pin .link-arrow { margin-top: auto; }

/* ==========================================================================
   [8] HERITAGE: one spotlit frame on a dark wall + the big wall label
   ========================================================================== */
.v-heritage { overflow: hidden; }
.v-spot {
  position: absolute; left: 10%; top: 0; width: 36%; height: 100%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,246,220,.16), rgba(255,246,220,.04) 80%, transparent);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}
.v-heritage-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.v-heritage-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.v-heritage-art .v-fr--lg { width: min(78%, 360px); --fw: 12px; box-shadow: 0 0 0 1px #000, 0 30px 60px rgba(0,0,0,.55), 0 0 120px rgba(255,240,200,.08); }
.v-wl--heritage { align-self: center; translate: 34% 0; }
.v-heritage-lede { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: var(--sec-mist); margin: 16px 0 24px; max-width: 40em; }
.v-biglabel { background: #FFFFFF; color: var(--v-char); padding: 20px 24px 14px; max-width: 560px; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.v-biglabel-top { font: 800 24px/1.1 var(--f-wall); letter-spacing: -.02em; padding-bottom: 12px; border-bottom: 2px solid var(--v-char); }
.v-biglabel dl { margin: 0; }
.v-biglabel dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid #DEDBD2; align-items: baseline; }
.v-biglabel dl div:last-child { border-bottom: 0; }
.v-biglabel dt { font: 800 19px/1 var(--f-wall); color: var(--v-ultra); }
.v-biglabel dd { margin: 0; font-size: 15.5px; }
.v-biglabel a { color: var(--v-char); font-weight: 600; }
.v-heritage .sample-note { margin-top: 14px; color: var(--sec-mist); }

/* ==========================================================================
   [9] LIST-YOUR-PLACE: a taped-out spot on the wall, waiting
   ========================================================================== */
.v-cta { overflow: hidden; }
.v-cta .eyebrow { color: #FFFFFF; }
.v-cta .block-intro { color: #F0F2FF; }
.v-cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.v-spotwall {
  position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 5 / 4;
  background: radial-gradient(ellipse 60% 70% at 50% 0, #FFFDF6, transparent 72%), var(--v-wall);
  box-shadow: 0 24px 50px rgba(10,16,70,.45);
}
.v-tapebox { position: absolute; left: 16%; top: 16%; width: 46%; height: 54%; }
.v-tapebox i { position: absolute; background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 6px), var(--v-tape); opacity: .9; }
.v-tapebox i:nth-child(1) { left: -6%; right: -6%; top: 0; height: 9px; rotate: -.6deg; }
.v-tapebox i:nth-child(2) { left: -6%; right: -6%; bottom: 0; height: 9px; rotate: .5deg; }
.v-tapebox i:nth-child(3) { top: -8%; bottom: -8%; left: 0; width: 9px; rotate: .8deg; }
.v-tapebox i:nth-child(4) { top: -8%; bottom: -8%; right: 0; width: 9px; rotate: -.4deg; }
.v-nail { position: absolute; left: 50%; top: 18%; width: 14px; height: 14px; translate: -50% 0; }
.v-nail::before, .v-nail::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: #4A4D52; translate: -50% -50%; rotate: 45deg; }
.v-nail::after { rotate: -45deg; }
.v-dim { position: absolute; left: 6%; top: 43%; bottom: 0; width: 1px; background: #4A4D52; }
.v-dim::before, .v-dim::after { content: ""; position: absolute; left: -5px; width: 11px; height: 1px; background: #4A4D52; }
.v-dim::before { top: 0; } .v-dim::after { bottom: 0; }
.v-dim span { position: absolute; left: 6px; top: 40%; writing-mode: vertical-rl; rotate: 180deg; font: 500 10px/1 var(--font-mono); letter-spacing: .08em; color: #3E4146; white-space: nowrap; }
.v-wl--cta { position: absolute; right: 8%; top: 40%; padding: 9px 12px 10px; }
.v-wl--cta b { font-size: 13px; }
.v-reddot { position: absolute; right: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--v-dot); box-shadow: 1px 1px 1px rgba(0,0,0,.25); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .v-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-col:nth-child(3), .v-col:nth-child(4) { padding-top: 0; }
  .v-people { grid-template-columns: minmax(0, 1fr); }
  .v-strip { max-width: 480px; }
  .v-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .v-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .v-salon { order: -1; width: min(100%, 560px); margin: 0 auto -4px; }
  .v-hero-copy { padding-bottom: 118px; }
  .v-events-grid, .v-crawl, .v-heritage-grid, .v-cta-grid { grid-template-columns: minmax(0, 1fr); }
  .v-invite { max-width: 520px; }
  .v-heritage-art .v-fr--lg { width: min(70%, 300px); }
  .v-spot { left: -6%; width: 80%; height: 60%; }
}
@media (max-width: 760px) {
  .v-hero { padding-top: 44px; }
  .v-salon .v-wl { display: none; }
  .v-salon svg text, .v-float-art svg text { display: none; }   /* pencilled edition marks, 2-6px tall at phone width (WCAG 1.4.4) */
  .v-wall { gap: 18px; }
  .v-col { gap: 26px; }
  .v-col:nth-child(2) { padding-top: 30px; }
  .v-col:nth-child(4) { padding-top: 30px; }
  .v-label { max-width: 100%; padding: 8px 9px 9px; font-size: 12px; }
  .v-label b { font-size: 15px; }
  .v-label i { display: none; }
  .v-label span:last-child { font-size: 11.5px; }
  .v-board { grid-template-columns: minmax(0, 1fr); }
  .v-map { rotate: 0deg; padding: 10px; }
  .v-dot circle { r: 24px; }
  .v-dot .num { font-size: 24px; translate: 0 4px; }
  .v-dot .lbl, .v-map-regions { display: none; }
  .v-map-land { stroke-width: 4; }
  .v-route { stroke-width: 4; stroke-dasharray: 3 10; }
  .v-strip { rotate: .6deg; }
  .v-card-when span { font-size: 14px; padding: 8px 6px; }
  .v-wl--heritage { translate: 0 0; }
  .v-bench { right: 30%; }
  .v-hplinth { right: 6%; width: 64px; }
  .v-hplinth-box { height: 70px; }
}

/* reduced motion: the light rests on the big gilt frame */
@media (prefers-reduced-motion: reduce) {
  .v-pool { animation: none; translate: 0 0; }
}

/* ==========================================================================
   HERO MOTION (shared vocabulary across all section heroes)
   - hover / :focus-within moves are one-shot and short: 0.6-1.2 s, eased,
     always ending on the resting pose (the resting pose is unchanged);
   - all of it lives inside prefers-reduced-motion: no-preference AND behind
     .motion-toggle:not(:checked), so reduced motion or the Pause chip means
     no hover motion at all (ambient loops are paused by shell.css);
   - art is aria-hidden and only moves with transform/rotate/translate/opacity:
     no layout shift; nothing moves over a link or input.
   ========================================================================== */
.v-salon > .v-fr { transform-origin: 50% 0; }               /* each frame hangs from its nail */
.v-hpot { transform-origin: 50% 100%; }
@keyframes v-wobble { 0%, 100% { rotate: 0deg; } 20% { rotate: 2.4deg; } 45% { rotate: -1.8deg; } 68% { rotate: .9deg; } 86% { rotate: -.35deg; } }
@media (prefers-reduced-motion: no-preference) {
  .motion-toggle:not(:checked) ~ * .v-salon > .v-fr:hover,
  .motion-toggle:not(:checked) ~ * .v-hplinth:hover .v-hpot { animation: v-wobble 1s ease-in-out; }
  /* typing in the search nudges the whole wall, one frame after another */
  .motion-toggle:not(:checked) ~ * .v-hero:focus-within .v-salon > .v-fr { animation: v-wobble 1s ease-in-out both; }
  .motion-toggle:not(:checked) ~ * .v-hero:focus-within .v-salon > .v-fr:nth-child(2n) { animation-delay: .12s; }
  .motion-toggle:not(:checked) ~ * .v-hero:focus-within .v-salon > .v-fr:nth-child(3n) { animation-delay: .22s; }
}

/* hero search: the WHERE field always shows the whole "Town or region" placeholder
   (>= 190px column); on mid widths the button drops to its own row so neither field is squeezed */
@media (min-width: 1201px) { .v-hero .search { grid-template-columns: minmax(0, 1.4fr) minmax(190px, 1fr) auto; } }
@media (min-width: 761px) and (max-width: 1200px) {
  .v-hero .search { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .v-hero .search-go { grid-column: 1 / -1; min-height: 52px; }
}