/* The way there (core/venue/001) — inv05_more w3 (INV-05 v1.1/v2.1, A1359, D-031/D-032 ruling A, D-035).
   The main event's venue as a painted arrival: a loose watercolour garden arch (arch-b, levelled deeper and turned
   into colour + alpha against the card, so it is drawn with normal blending: the CSS <img> and the live canvas paint
   the same pixels). A dashed ink path, drawn in code, comes in from the lower left and ends at a pin in the archway;
   it draws with the scroll both ways (--vn001-p, 0 -> 1; no script, reduced motion and lite show it whole). Then the
   venue, the address, the day, date and time, and one clear "Get directions" button (main_event.map_url). The arch
   is generic, never their real venue. Painted watercolour never moves (ruling A): it fades in once, or is painted in
   once (live). Phone and tablet: one column. Desktop: the arch on the left, the words on the right. */
.vn001 {
  --vn001-p: 1;
  position: relative; padding: var(--k-section-pad) var(--k-gutter); background: var(--k-light-ground); color: var(--k-ink);
  text-align: center; touch-action: pan-y;
}
.vn001__body { display: grid; grid-template-areas: "head" "art" "info"; justify-items: center; max-width: 880px; margin: 0 auto; }
.vn001__head { grid-area: head; }
.vn001__kicker { margin-bottom: var(--k-s-3); }
.vn001__art { grid-area: art; position: relative; width: min(78%, 330px); margin-top: 30px; aspect-ratio: 576 / 731; }
.vn001__arch { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; }
.vn001__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vn001__path { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vn001__ink { fill: none; stroke: var(--k-ink); stroke-opacity: .72; stroke-width: .62; stroke-linecap: round; stroke-dasharray: 1.6 1.7; }
.vn001__reveal { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--vn001-p)); }
.vn001__pin {
  position: absolute; z-index: 3; left: 50%; top: 76.4%; width: 26px; height: 26px; color: var(--k-ink);
  transform: translate(-50%, -91.7%); opacity: clamp(0, calc((var(--vn001-p) - .86) / .12), 1); pointer-events: none;
}
.vn001__info { grid-area: info; margin-top: 26px; max-width: 30em; }
.vn001__venue { padding-left: .16em; font: 400 1.3rem/1.35 var(--k-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--k-ink); overflow-wrap: anywhere; text-wrap: balance; }
.vn001__addr { margin-top: 6px; font: 500 .9rem/1.55 var(--k-font-body); color: var(--k-ink-soft); text-wrap: balance; }
.vn001__when { margin-top: 12px; font: 500 .74rem/1.6 var(--k-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-secondary-dark); }
.vn001__go { margin-top: 24px; }
.vn001__btn { gap: 10px; }
.vn001__ico { width: 18px; height: 18px; flex: none; }
.vn001__note { margin-top: 16px; font: 500 .8rem/1.55 var(--k-font-body); color: var(--k-ink-soft); }

/* reveal: opacity only (ruling A). The arch shows once its box arrives (.is-in, never removed); hidden only once
   section.js has added .is-anim. Live: the canvas paints it in, then the DOM arch takes over in the same frame
   (.is-painted). Scoped to .is-live, so live=fail and a lost context show the arrived arch at once (AG-T038). */
.vn001.is-anim .vn001__arch { transition: opacity 1.1s ease; }
html.kjy-fx .vn001.is-anim .vn001__art:not(.is-in) .vn001__arch { opacity: 0; }
html .vn001.is-live .vn001__art:not(.is-painted) .vn001__arch { opacity: 0; transition: none; }
html .vn001.is-live .vn001__art.is-painted .vn001__arch { opacity: 1; transition: none; }

@media (min-width: 768px) {
  .vn001__art { width: 380px; margin-top: 40px; }
  .vn001__venue { font-size: 1.5rem; }
}
@media (min-width: 1024px) {
  .vn001__body { grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "art head" "art info"; column-gap: 72px; justify-items: start; align-items: end; text-align: left; }
  .vn001__art { width: 400px; margin-top: 0; }
  .vn001__info { align-self: start; margin-top: 22px; }
  .vn001__rule { margin-left: 0; }
}