/* The venue card (core/venue/009) — INV-12 Burgundy Blossom · Premium W2 (A1498; D-062; plan rev3 A3). The last
   section of the one long card (.k-card--bottom: the card's bottom edge and shadow): "The venue", the venue in script,
   the gold swash, the address, the couple's photo as a framed print that slides out of the card with the scroll (a
   clip scrubbed in section.js; without JS it shows), or a pressed blossom when there is no photo, and Get directions.
   A sprig sits in the bottom-right corner. Premium is one venue (venue_main). cqw resolves against the card. */
.vn009 { color: var(--k-ink); text-align: center; }
.vn009 .vn009__in { position: relative; padding: calc(var(--k-cw) * .14) calc(var(--k-cw) * .09) calc(var(--k-cw) * .16); }
.vn009 .vn009__corner { width: 15cqw; right: -3cqw; bottom: 2%; rotate: 24deg; }
.vn009 .vn009__kicker { margin: 0 0 clamp(6px, 2cqw, 12px); }
.vn009 .vn009__name { margin: 0; text-wrap: balance; font: 400 clamp(28px, 8.6cqw, 44px)/1.15 var(--k-font-script); color: var(--k-wine); }
.vn009 .vn009-rule { display: block; width: clamp(90px, 30cqw, 170px); height: auto; margin: clamp(6px, 2cqw, 12px) auto clamp(10px, 3cqw, 16px);
  color: var(--k-gold); overflow: visible; }
.vn009 .vn009__addr { max-inline-size: 24em; margin: 0 auto; text-wrap: balance; font: 400 clamp(9px, 2.75cqw, 13px)/1.65 var(--k-font-caps);
  letter-spacing: .1em; text-transform: uppercase; color: var(--k-ink); }

/* the print: the shadow sits on the link so it follows the clip; the keyline is inside the clip */
.vn009 .vn009__lead { display: block; width: 78cqw; margin: clamp(18px, 6cqw, 32px) auto 0;
  filter: drop-shadow(0 1px 1px rgb(60 32 20 / .22)) drop-shadow(0 9px 12px rgb(60 32 20 / .26)); }
.vn009 .vn009__print { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; clip-path: inset(var(--vn009-cut, 0%) 0 0 0); }
.vn009 .vn009__print::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--k-gold); pointer-events: none; }
.vn009 .vn009__lead-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--vn009-pos, 50% 50%); }
.vn009 .vn009__bloom { position: relative; width: 30cqw; margin: clamp(16px, 5cqw, 28px) auto 0; }
.vn009 .vn009__go { margin: clamp(20px, 6cqw, 32px) 0 0; }
.vn009 .vn009__btn { display: inline-flex; align-items: center; gap: .6em; }
.vn009 .vn009__ico { width: 1.1em; height: 1.1em; }

/* The viewer (vn005's, forked): a modal <dialog> made on the first tap, the photo on a cream mat over wine */
.vn009__view {
  position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgb(28 6 12 / .9); color: #F4E6DA;
  overflow: hidden; overscroll-behavior: contain; touch-action: pinch-zoom;
}
.vn009__view::backdrop { background: rgb(28 6 12 / .9); }
.vn009__view[open] { animation: vn009-in .22s ease-out; }
@keyframes vn009-in { from { opacity: 0; } }
.vn009__view-in {
  height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "fig fig" "prev next"; align-items: center; gap: 16px;
  padding: calc(76px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
.vn009__view-fig {
  grid-area: fig; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; height: 100%; margin: 0;
}
.vn009__view-img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: min(80vh, calc(100vh - 220px)); max-height: min(80svh, calc(100svh - 220px));
  object-fit: contain; border: 8px solid var(--k-paper, #F4E6DA); user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / .5);
}
.vn009__view-cap {
  max-width: 60ch; margin-top: 12px; text-align: center; text-wrap: balance;
  font: 400 clamp(10px, 2.8vw, 13px)/1.6 var(--k-font-caps); letter-spacing: .1em; text-transform: uppercase; color: #F4E6DA;
}
.vn009__view-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vn009__view-btn[hidden] { display: none; }
.vn009__view-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.vn009__view-close {
  position: absolute; z-index: 2; top: calc(16px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right));
  background: transparent; color: #F4E6DA; border: 1px solid rgb(244 230 218 / .7);
}
.vn009__view-prev, .vn009__view-next { background: transparent; color: #F4E6DA; border: 1px solid rgb(244 230 218 / .5); }
.vn009__view-prev { grid-area: prev; justify-self: end; }
.vn009__view-next { grid-area: next; justify-self: start; }
.vn009__view-close:focus-visible, .vn009__view-prev:focus-visible, .vn009__view-next:focus-visible { outline: 2px solid #E9D3A1; outline-offset: 3px; }