/* Holler Guide V2 — venue page (pilot). LIGHT ONLY, scoped under `.v2`.
 *
 * Ported from the frozen design snapshot (docs/plans/venue-test-pages/design:
 * tokens/holler-v2.css, design-source/{hero,venue,v2-layout}.css). Differences
 * from the snapshot, all deliberate (venue-test-pages SPEC D-5/D-10, MANIFEST §5-6):
 *   - every rule is prefixed with `.v2`, so nothing here can touch a V1 page;
 *   - the dark-mode blocks, the V2 top nav / tab bar and the check-in sheet are
 *     NOT ported (pilot pages render inside the site header/footer, light only);
 *   - photo scrims use `rgb(var(--v2-photo-ink) / a)` rather than the literal;
 *   - colour literals live ONLY in the token block below (the test in
 *     tests/unit/venue-v2-css.test.ts fails on any other hex/rgb literal that is
 *     not on the HANDOFF §11 allowlist: text halos, glass borders, mask `#000`).
 *
 * TOKENS (guide-v2-consumer W-0): the block between @tokens-start/@tokens-end is the
 * LIGHT half of the design package's tokens/holler-v2.css (round 8, md5
 * d774ccd7be8395951a947d65aedc5584), re-scoped to `.v2`, derived rather than hand-
 * edited. tests/unit/guide-v2-tokens.test.ts holds it to that. Only three things
 * differ from r8, each deliberate: the two font-family tokens lead with the
 * next/font variables, `--v2-site-header-h` is pilot-only, and the two tab-bar colour
 * tokens are not carried (the tab bar is V2 chrome and is not ported).
 *
 * Lives in public/ (linked by VenueCardV2), NOT imported as a module: a CSS import
 * on the /venues/[id] route is bundled into the whole route and would add a
 * render-blocking <link> to every V1 venue page.
 *
 * Layout uses CONTAINER queries (breakpoint 1024px): `.v2` is the container, so
 * the page lays out by the width it is given.
 */

/* @tokens-start */
.v2 {
  color-scheme: light;

  /* ── 1. Primitives (constant) ─────────────────────────────────────────── */
  --v2-navy: var(--brand-navy, #151F29);              /* Hollow Navy */
  --v2-navy-2: var(--brand-navy-2, #1D2B37);          /* lifted navy */
  --v2-navy-3: #24333F;                               /* = Brand.swift surfaceElevated (dark); no web token yet */
  --v2-navy-deep: #0F171F;                            /* Tonight's map ground (night-native only) */
  --v2-cream: var(--brand-bg, #F6F1E6);               /* Meadow Cream */
  --v2-warm-white: var(--brand-warm-white, #FBF7EC);  /* type on photos and on navy */
  --v2-walnut: var(--brand-text-primary, #221409);    /* Walnut Ink */
  --v2-gold: var(--brand-gold, #C39A3B);              /* Ridgeline Gold: wordmark O on solid, crests, best-time bar */
  --v2-gold-soft: var(--brand-gold-soft, #D9BC77);    /* gold type on navy; wordmark O on photos (D10) */
  --v2-gold-dark: #A07828;                            /* V2-only: no --brand-gold-dark exists in globals.css (UI2-05); 3.58:1 on cream, so never body text */
  --v2-gold-glow: #F1D493;                            /* lantern / playing highlight, night screens only */
  --v2-fern: var(--brand-guide, #41594A);             /* Fern Hollow */
  --v2-fern-light: var(--brand-primary-light, #557061);
  --v2-fern-muted: var(--brand-primary-muted, #8CA394);
  --v2-plate-mid: #2F4239;
  --v2-live: #8FD19E;                                 /* live pulse dot */
  /* rgb triplets for alpha: rgb(var(--v2-x-rgb) / .5) */
  --v2-photo-ink: 12 17 22;                           /* scrims (D9: unchanged in dark) */
  --v2-navy-rgb: 21 31 41;
  --v2-navy-2-rgb: 29 43 55;
  --v2-paper-rgb: 253 251 245;                       /* --brand-surface, for a light card on a photo */
  --v2-warm-white-rgb: 251 247 236;
  --v2-gold-rgb: 195 154 59;
  --v2-gold-soft-rgb: 217 188 119;
  --v2-live-rgb: 143 209 158;
  /* the branded plate under every photo (UI-10) */
  --v2-plate: radial-gradient(110% 80% at 25% 15%, var(--v2-fern-light) 0%, var(--v2-plate-mid) 42%, var(--v2-navy) 100%);
  /* wordmark O (D10): soft gold on photos, Ridgeline Gold on solid surfaces */
  --v2-wordmark-o-photo: var(--v2-gold-soft);
  --v2-wordmark-o: var(--v2-gold);

  /* ── 2. Semantic roles — LIGHT ────────────────────────────────────────── */
  --v2-ground: var(--v2-cream);                       /* page */
  --v2-ground-rgb: 246 241 230;
  --v2-sheet: var(--v2-cream);                        /* paper sheet over a night section (Home) */
  --v2-surface: var(--brand-surface, #FDFBF5);        /* card a hair off the page */
  --v2-surface-raised: var(--brand-surface-elevated, #FEFCF6);
  --v2-ink: var(--v2-walnut);                         /* primary text, selected states (was #1E1A15) */
  --v2-ink-rgb: 34 20 9;
  --v2-body-muted: var(--brand-text-secondary, #5C5148); /* secondary paragraphs (was #5E554C) */
  --v2-muted: #736A60;                                /* labels, captions: 4.71:1 on cream. Not aliased: --brand-text-tertiary #8C8377 is 3.31:1 */
  --v2-faint: var(--brand-text-tertiary, #8C8377);    /* LARGE text only (unselected score numerals, ranks): 3.31:1 */
  --v2-line: var(--brand-border, #E4DBC8);            /* hairlines (was #E6DECD) */
  --v2-control-line: #D6CCB8;                         /* outline on unselected pills/tiles (decorative: the label identifies the control) */
  --v2-track: #DDD4C3;                                /* unselected bars, segmented track */
  --v2-track-strong: #BDB3A3;                         /* unselected meter fill */
  --v2-dashed: #B8AD9C;                               /* empty-stamp dashed ring */
  --v2-action: var(--v2-fern);                        /* links, quoted fragments, "Order" verdict */
  --v2-focus: var(--v2-action);                       /* keyboard focus ring (UX2-25): fern on paper, gold-soft in dark and on night screens */
  --v2-action-rgb: 65 89 74;
  --v2-score: #856320;                                /* scores + small gold tags: 4.90:1. Not aliased: --brand-gold-dark #A07828 is 3.58:1 */
  --v2-signature: var(--v2-gold);                     /* best-time bar, crests */
  --v2-warn: var(--brand-error, #A83C2A);             /* daylight warning (was #A3402C) */
  --v2-fill: var(--v2-ink);                           /* primary button + selected pill fill */
  --v2-on-fill: var(--v2-warm-white);                 /* text on --v2-fill */
  --v2-night-card: var(--v2-navy);                    /* a navy block sitting on paper (Ledger header, Charles avatar) */
  --v2-night-card-line: rgb(var(--v2-warm-white-rgb) / 0);
  --v2-shadow-lift: 0 18px 50px -24px rgba(19, 36, 42, .4);
  --v2-swatch-ring: rgb(var(--v2-ink-rgb) / .18);     /* ring on wine swatches (UI2-06); dark raises it so Petit Verdot / Cabernet Franc stay visible */
  /* stamps (Ledger) and type colours: V2-only values. globals.css has no --cat-* tokens (UI2-05), so these carry no var() wrapper. */
  --v2-stamp-wine: #722F37;
  --v2-stamp-farm: #5F8B4C;  --v2-stamp-farm-ink: #4A6E3B;
  --v2-stamp-food: #8B4513;
  --v2-stamp-lodging: #4D6B6B;                --v2-stamp-lodging-ink: #3E5858;
  --v2-stamp-art: #4A5568;

  /* ── Type (Cormorant display + Libre Franklin UI) — brand scale ──────── */
  --v2-font-display: var(--font-cormorant), "Cormorant Garamond", Georgia, serif;
  --v2-font-ui: var(--font-libre), "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --v2-text-label-sm: 11px;   /* floor for any text, incl. tab labels */
  --v2-text-caption: 12px;
  --v2-text-body-sm: 13px;
  --v2-text-body-md: 15px;
  --v2-text-body-lg: 17px;
  --v2-text-headline-lg: 20px;
  --v2-text-display-sm: 22px;
  --v2-text-display-md: 28px; /* section titles */
  --v2-text-display-lg: 34px;
  /* Editorial sizes kept off-scale on purpose (D11): venue name 44, hero lead 50, score numeral 60,
     countdown 56, dimension numerals 26, Holler 30 title 40/44. See HANDOFF §11. */

  /* ── Spacing — brand scale 2/4/8/12/16/24/32/48 ──────────────────────── */
  --v2-gutter: 24px;           /* was 22 */
  --v2-section-gap: 48px;      /* between major page sections (was 44) */
  --v2-section-gap-sm: 32px;   /* between related sections */
  --v2-radius-pill: 100px;
  --v2-radius-media: 12px;
  --v2-control-h: 38px;        /* pills; touch target padded to 44 */
  --v2-glass-size: 40px;
  --v2-site-header-h: 69px;    /* PILOT-ONLY (not in r8): the site header above the page; anchor jumps and the short-phone hero clear it */
  /* Desktop (D6, holler.guide): container queries at >= 1024px */
  --v2-content-max: 1120px;    /* page content width at desktop */
  --v2-rail-w: 360px;          /* venue booking + Getting there rail */
  --v2-col-gap: 64px;
}
/* @tokens-end */

/* ── Container ─────────────────────────────────────────────────────────── */
.v2 { container-type: inline-size; width: 100%; }
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
/* in-page jumps land below the sticky site header */
.v2 #getting-there, .v2 #venue-feedback, .v2 #booking { scroll-margin-top: 84px; }

/* ── Legibility system: any text on a photo (HANDOFF §4.1) ────────────────
   .lg-top -> .lg-blur -> .lg-shade (+ .lg-strong) -> text with .lg-text.
   Scrims use --v2-photo-ink and are deliberately not themed. */
.v2 .lg-top { position: absolute; left: 0; right: 0; top: 0; height: 170px; pointer-events: none; background: linear-gradient(180deg, rgb(var(--v2-photo-ink) / .78) 0%, rgb(var(--v2-photo-ink) / .6) 50%, rgb(var(--v2-photo-ink) / 0) 100%); }
.v2 .lg-blur { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%); mask-image: linear-gradient(180deg, transparent 0%, #000 42%); }
.v2 .lg-shade { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient(180deg, rgb(var(--v2-photo-ink) / 0) 0%, rgb(var(--v2-photo-ink) / .42) 24%, rgb(var(--v2-photo-ink) / .74) 48%, rgb(var(--v2-photo-ink) / .86) 72%, rgb(var(--v2-photo-ink) / .92) 100%); }
.v2 .lg-shade.lg-strong { background: linear-gradient(180deg, rgb(var(--v2-photo-ink) / 0) 0%, rgb(var(--v2-photo-ink) / .55) 20%, rgb(var(--v2-photo-ink) / .84) 42%, rgb(var(--v2-photo-ink) / .93) 100%); }
.v2 .vc-hero .lg-blur { height: max(50%, 270px); }
.v2 .vc-hero .lg-shade { height: max(64%, 346px); }
.v2 .lg-text { text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 22px rgba(0, 0, 0, .35); }

/* ── Hero media (hero.css) ─────────────────────────────────────────────── */
.v2 .hx-media { position: absolute; inset: 0; overflow: hidden; background: var(--v2-navy) var(--v2-plate); }
.v2 .hx-kb, .v2 .hx-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.v2 .hx-kb { opacity: 0; animation: v2-hxfade 18s linear infinite; }
.v2 .hx-kb.d0 { animation-delay: 0s; }
.v2 .hx-kb.d1 { animation-delay: 6s; }
.v2 .hx-kb.d2 { animation-delay: 12s; }
.v2 .hx-still { animation: v2-hxzoom 16s ease-in-out infinite alternate; }
.v2 .hx-plate { position: absolute; inset: 0; background: var(--v2-plate); display: flex; align-items: center; justify-content: center; }
.v2 .hx-plate-word { font-family: var(--v2-font-display); font-size: 34px; font-weight: 400; letter-spacing: .3em; color: rgb(var(--v2-warm-white-rgb) / .16); margin-top: -120px; padding-left: .3em; }
.v2 .hx-paused .hx-kb, .v2 .hx-paused .hx-still, .v2 .hx-paused .hx-pulse { animation-play-state: paused; }
@keyframes v2-hxfade { 0% { opacity: 0; transform: scale(1.04); } 5% { opacity: 1; } 33% { opacity: 1; } 39% { opacity: 0; transform: scale(1.16) translateX(-10px); } 100% { opacity: 0; transform: scale(1.16); } }
@keyframes v2-hxzoom { 0% { transform: scale(1.03); } 100% { transform: scale(1.15) translate(-8px, -6px); } }

/* ── VenueCard (venue.css + v2-layout.css) ─────────────────────────────── */
.v2 .vc { width: 100%; display: flex; flex-direction: column; position: relative; overflow: clip; overflow-wrap: break-word; background: var(--v2-ground); color: var(--v2-ink); font-family: var(--v2-font-ui); font-weight: 400; line-height: 1.4; }
/* Resets: NOT applied inside #venue-feedback (R3). These rules are (0,2,0) and unlayered,
   so they would beat Tailwind utilities (a single class, in @layer utilities) used by the
   feedback form W3 mounts there. Excluding the subtree keeps every current visual (the slot
   is empty today) and does not depend on stylesheet/layer load order.
   The exclusion MUST sit inside :where(): a bare :not(#venue-feedback *) contributes an ID's
   worth of specificity (1,0,0) to the whole rule, which out-ranked .vc-cta / .vc-note a and
   turned the Directions CTA ink-on-ink. Enforced by tests/unit/holler-v2-feedback-specificity.test.ts. */
.v2 .vc :where(h1, h2, p, dl, dd, ul):where(:not(#venue-feedback *)) { margin: 0; }
.v2 .vc :where(ul):where(:not(#venue-feedback *)) { padding: 0; list-style: none; }
.v2 .vc :where(a):where(:not(#venue-feedback *)) { color: inherit; }
.v2 .vc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v2 .vc-hit { position: relative; }
.v2 .vc-hit::before { content: ""; position: absolute; inset: -3px; }

.v2 .vc-hero { height: 540px; position: relative; overflow: hidden; color: var(--v2-warm-white); background: var(--v2-navy); }
.v2 .vc-ctrl { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: flex-end; }
.v2 .vc-glass { box-sizing: border-box; width: var(--v2-glass-size); height: var(--v2-glass-size); border-radius: 100px; padding: 0; background: rgb(var(--v2-photo-ink) / .46); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--v2-warm-white); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: background .2s; font: inherit; }
.v2 .vc-glass::before { content: ""; position: absolute; inset: -2px; }
.v2 .vc-glass:hover { background: rgb(var(--v2-photo-ink) / .62); }
.v2 .vc-pause { position: absolute; top: 16px; left: 16px; width: 44px; height: 44px; }
.v2 .vc-id { position: absolute; left: var(--v2-gutter); right: var(--v2-gutter); bottom: 26px; display: flex; flex-direction: column; gap: 8px; }
.v2 .vc-kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--v2-warm-white); }
.v2 .vc-name { font-family: var(--v2-font-display); font-weight: 300; font-size: 44px; line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; padding-bottom: 2px; }
.v2 .vc-idrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
/* meta separators live in the gap and are clipped at a line start, so a wrapped line never begins with "·" */
.v2 .vc-meta { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; margin-left: -16px; clip-path: inset(-40px -40px -40px 16px); font-size: 13px; color: rgb(var(--v2-warm-white-rgb) / .92); }
.v2 .vc-meta-i { position: relative; margin-left: 16px; white-space: nowrap; }
.v2 .vc-meta-i::before { content: "·"; content: "·" / ""; position: absolute; left: -10px; }
.v2 .vc-credit { position: absolute; right: var(--v2-gutter); bottom: 8px; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 500; color: rgb(var(--v2-warm-white-rgb) / .82); text-align: right; }

.v2 .vc-cols, .v2 .vc-main, .v2 .vc-rail { display: contents; }
.v2 .vc-sec { padding: var(--v2-section-gap-sm) var(--v2-gutter) 0; }
.v2 .vc-sec-lg { padding: var(--v2-section-gap) var(--v2-gutter) 0; }
.v2 .vc-pad { padding-left: var(--v2-gutter); padding-right: var(--v2-gutter); }
.v2 .vc-h2 { font-family: var(--v2-font-display); font-size: var(--v2-text-display-md); font-weight: 400; line-height: 1.15; }

/* Right now */
.v2 .vc-facts { display: grid; grid-template-columns: repeat(var(--vc-fact-cols, 3), minmax(0, 1fr)); border-bottom: 1px solid var(--v2-line); padding: 18px var(--v2-gutter); }
.v2 .vc-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 14px; }
.v2 .vc-fact + .vc-fact { padding-left: 14px; border-left: 1px solid var(--v2-line); }
.v2 .vc-fact dt { font-size: 12px; color: var(--v2-muted); }
.v2 .vc-fact dd { font-size: 14px; font-weight: 500; line-height: 1.3; }
@container (max-width: 479px) {
  .v2 .vc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .v2 .vc-fact:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--v2-line); padding-top: 12px; }
}

/* About (V2-from-payload pages only: the venue's own description) */
.v2 .vc-about { margin: 0; padding-top: 16px; font-size: 15px; line-height: 1.55; color: var(--v2-body-muted); }

/* Quick actions */
.v2 .vc-quick { display: grid; grid-template-columns: repeat(var(--vc-qa-cols, 4), minmax(0, 1fr)); gap: 8px; padding-top: 16px; }
.v2 .vc-qa { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 12px 4px 8px; border-radius: 14px; border: 1px solid var(--v2-control-line); color: var(--v2-ink); text-decoration: none; position: relative; }
.v2 .vc-qa-dead { color: var(--v2-muted); border-style: dashed; }
.v2 .vc-qa-l { font-size: 13px; font-weight: 500; white-space: nowrap; }
.v2 .vc-qa-s { font-size: 11px; line-height: 1.25; color: var(--v2-muted); text-align: center; }

/* Charles (link only) */
.v2 .vc-charles { display: flex; gap: 14px; align-items: center; }
.v2 .vc-charles-av { width: 32px; height: 32px; border-radius: 100px; background: var(--v2-night-card); color: var(--v2-gold-soft); display: flex; align-items: center; justify-content: center; font-family: var(--v2-font-display); font-size: 17px; flex: none; }
.v2 .vc-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 500; color: var(--v2-action); text-decoration: none; }
.v2 .vc-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Signature module (reduced) */
.v2 .vc-modhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.v2 .vc-modhead .vc-h2 { white-space: nowrap; flex: none; }
.v2 .vc-modsub { font-size: 12px; color: var(--v2-muted); text-align: right; flex: 1; min-width: 0; }
.v2 .vc-row { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--v2-line); }
.v2 .vc-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.v2 .vc-row-name { font-size: 15px; font-weight: 500; }
.v2 .vc-row-style { font-size: 12px; color: var(--v2-muted); text-align: right; }
.v2 .vc-row-note { font-size: 13px; line-height: 1.5; color: var(--v2-body-muted); }

/* Insider (open tips only) */
.v2 .vc-tip { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--v2-line); }
.v2 .vc-tip-k { width: 84px; flex: none; font-size: 13px; font-weight: 500; padding-top: 2px; color: var(--v2-muted); }
.v2 .vc-tip-v { font-size: 15px; line-height: 1.5; flex: 1; min-width: 0; }

/* Make a day of it */
.v2 .vc-pairs-sec { padding: var(--v2-section-gap) 0 0; }
.v2 .vc-pairs-h { margin: 0 var(--v2-gutter) 14px; }
.v2 .vc-pairs { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--v2-gutter); scrollbar-width: none; }
.v2 .vc-pairs::-webkit-scrollbar { display: none; }
.v2 .vc-pair { flex: none; width: 168px; }
.v2 .vc-pair a { display: flex; flex-direction: column; gap: 6px; color: var(--v2-ink); text-decoration: none; }
.v2 .vc-pair-img { height: 112px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-color: var(--v2-navy); }
.v2 .vc-pair-kind { font-family: var(--v2-font-display); font-size: 20px; letter-spacing: .3em; padding-left: .3em; color: rgb(var(--v2-warm-white-rgb) / .16); }
.v2 .vc-pair-when { font-size: 12px; color: var(--v2-muted); margin-top: 2px; }
.v2 .vc-pair-name { font-size: 15px; font-weight: 500; line-height: 1.3; }

/* Photos */
.v2 .vc-photos-sec { padding: var(--v2-section-gap) 0 0; }
.v2 .vc-photos-h { margin: 0 var(--v2-gutter) 12px; }
.v2 .vc-photos { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--v2-gutter) 4px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--v2-gutter); scrollbar-width: thin; }
.v2 .vc-photos > li { flex: none; width: 220px; scroll-snap-align: start; }
.v2 .vc-photos:focus-visible { outline: 2px solid var(--v2-gold); outline-offset: 2px; }
.v2 .vc-photo { margin: 0; }
.v2 .vc-photo-img { position: relative; height: 160px; border-radius: 12px; overflow: hidden; background: var(--v2-plate); }
.v2 .vc-photo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2 .vc-photo figcaption { font-size: var(--v2-text-caption); line-height: 1.35; color: var(--v2-muted); margin-top: 6px; }

/* Building modules (BuildingModules.tsx): a multi-tenant building's quick answers, "This season" and tenant cards.
   Tokens only; the cards go two-up from a 600px container (see the container block below). */
.v2 .vb-kicker { display: block; margin-bottom: 4px; font-size: var(--v2-text-caption); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-muted); }
.v2 .vb-lead { padding-top: 10px; font-size: var(--v2-text-body-md); line-height: 1.55; color: var(--v2-ink); }
.v2 .vb-intro { padding-top: 6px; font-size: var(--v2-text-body-md); line-height: 1.5; color: var(--v2-body-muted); }
.v2 .vb-note { padding-top: 8px; font-size: var(--v2-text-body-sm); line-height: 1.5; color: var(--v2-body-muted); }
.v2 .vb-notes > li { list-style: none; }
.v2 .vb-inline { color: var(--v2-action); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }
.v2 .vb-cta { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.v2 .vb-qa { margin: 0; padding-top: 6px; }
.v2 .vb-qa-row { padding: 14px 0; border-bottom: 1px solid var(--v2-line); }
.v2 .vb-qa-row dt { font-size: var(--v2-text-body-md); font-weight: 500; line-height: 1.35; }
.v2 .vb-qa-row dd { margin: 0; padding-top: 4px; font-size: var(--v2-text-body-sm); line-height: 1.55; color: var(--v2-body-muted); }
.v2 .vb-season { padding: 18px; border: 1px solid var(--v2-line); border-radius: 16px; background: var(--v2-surface); }
.v2 .vb-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 14px; }
.v2 .vb-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--v2-line); border-radius: 16px; background: var(--v2-surface); }
.v2 .vb-name { margin: 0; font-family: var(--v2-font-display); font-size: var(--v2-text-headline-lg); font-weight: 500; line-height: 1.2; }
.v2 .vb-line { font-size: var(--v2-text-body-sm); line-height: 1.55; color: var(--v2-body-muted); }
.v2 .vb-hours { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.v2 .vb-hours-k { font-size: var(--v2-text-caption); color: var(--v2-muted); }
.v2 .vb-hours-v { font-size: var(--v2-text-body-sm); font-weight: 500; line-height: 1.4; }
.v2 .vb-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* Feedback slot (W3 fills it) + the listing-state marker */
.v2 .vc-feedback { padding: var(--v2-section-gap) var(--v2-gutter) 0; }
.v2 .vc-note { font-size: 13px; line-height: 1.5; color: var(--v2-body-muted); }
.v2 .vc-note a { color: var(--v2-action); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }
.v2 .vc-note-draft { padding: 0 0 16px; }
/* the same note, directly under the hero (draft pages only) */
.v2 .vc-notice { margin: 0 var(--v2-gutter); padding: 14px 0; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.v2 .vc-notice span { font-weight: 500; }
.v2 .vc-note-checked { padding: 14px 0 0; }

/* Getting there */
.v2 .vc-gt { padding: var(--v2-section-gap) var(--v2-gutter) 32px; }
.v2 .vc-gt .vc-h2 { margin: 0 0 6px; }
.v2 .vc-gt:has(+ .vc-feedback) { padding-bottom: 0; }
.v2 .vc-gt-list { margin: 0; }
.v2 .vc-gt-row { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--v2-line); }
.v2 .vc-gt-row:last-of-type { border-bottom: 0; }
.v2 .vc-gt-k { font-size: 12px; color: var(--v2-muted); width: 88px; flex: none; margin: 0; }
.v2 .vc-gt-v { flex: 1; min-width: 0; font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.v2 .vc-gt-v address { font-style: normal; }
.v2 .vc-gt-v a.vc-under .vc-nowrap { white-space: nowrap; }
.v2 .vc-gt-v a.vc-under { display: inline-block; padding: 2px 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.v2 .vc-gt-v address a.vc-under { display: block; align-self: flex-start; }
.v2 .vc-gt-v a.vc-gt-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; overflow-wrap: anywhere; }
.v2 .vc-gt-tel { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; align-self: flex-start; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.v2 .vc-prov { font-size: 12px; line-height: 1.4; color: var(--v2-muted); text-wrap: pretty; }
.v2 .vc-hours-status { font-size: 15px; font-weight: 500; }
.v2 .vc-hours { width: 100%; border-collapse: collapse; font-size: 13px; }
.v2 .vc-hours th, .v2 .vc-hours td { padding: 3px 0; text-align: left; vertical-align: baseline; color: var(--v2-body-muted); font-weight: 400; }
.v2 .vc-hours th { width: 76px; padding-right: 12px; white-space: nowrap; }
.v2 .vc-hours tr[aria-current] th, .v2 .vc-hours tr[aria-current] td { font-weight: 600; color: var(--v2-ink); }
.v2 .vc-today { font-size: 11px; color: var(--v2-muted); font-weight: 400; }
.v2 .vc-pill { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 100px; border: 1px solid var(--v2-control-line); color: var(--v2-ink); font-size: 13px; font-weight: 500; text-decoration: none; position: relative; }

/* Action bar */
.v2 .vc-book { position: sticky; bottom: 0; margin-top: auto; z-index: 5; padding: 12px var(--v2-gutter) max(12px, env(safe-area-inset-bottom)); background: rgb(var(--v2-ground-rgb) / .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--v2-line); display: flex; align-items: center; gap: 14px; }
.v2 .vc-book-k { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 0 1 auto; max-width: 42%; font-size: 12px; color: var(--v2-muted); }
/* Directions-only bar: the Directions tile covers it below 1024px */
.v2 .vc-book.vc-book-solo { display: none; }
.v2 .vc-cta { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 6px 20px; text-align: center; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 100px; background: var(--v2-fill); color: var(--v2-on-fill); font-size: 15px; font-weight: 500; text-decoration: none; }
.v2 .vc-skip, .v2 .vc-skip-mob { display: none; }

/* Quiet draft state when a page has almost nothing: keep the layout from collapsing */
.v2 .vc-main > :last-child { margin-bottom: 0; }

/* Focus (UX2-25): one visible ring, white over photos */
.v2 :focus-visible:where(:not(#venue-feedback *)) { outline: 2px solid var(--v2-focus); outline-offset: 2px; }
.v2 .vc-hero :focus-visible, .v2 .vc-glass:focus-visible { outline-color: var(--v2-warm-white); }

/* ── Desktop (D6): container >= 1024px ─────────────────────────────────── */
@container (min-width: 1024px) {
  .v2 .vc-hero { height: 620px; }
  .v2 .vc-ctrl { top: 24px; left: max(var(--v2-gutter), calc((100% - var(--v2-content-max)) / 2 + var(--v2-gutter))); right: max(var(--v2-gutter), calc((100% - var(--v2-content-max)) / 2 + var(--v2-gutter))); }
  .v2 .vc-pause { top: auto; bottom: 56px; left: auto; right: max(var(--v2-gutter), calc((100% - var(--v2-content-max)) / 2 + var(--v2-gutter))); }
  .v2 .vc-id { left: max(var(--v2-gutter), calc((100% - var(--v2-content-max)) / 2 + var(--v2-gutter))); right: auto; width: min(760px, calc(100% - 2 * var(--v2-gutter))); bottom: 56px; gap: 12px; }
  .v2 .vc-name { font-size: 64px; }
  .v2 .vc-hero .lg-blur { height: max(52%, 270px); }
  .v2 .vc-hero .lg-shade { height: max(70%, 346px); }
  .v2 .vc-credit { right: max(var(--v2-gutter), calc((100% - var(--v2-content-max)) / 2 + var(--v2-gutter))); }
  .v2 .vc-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--v2-rail-w); column-gap: var(--v2-col-gap); align-items: start; width: 100%; max-width: var(--v2-content-max); margin: 0 auto; padding: 0 var(--v2-gutter) 96px; }
  .v2 .vc-main { display: block; min-width: 0; }
  .v2 .vc-main .vc-sec, .v2 .vc-main .vc-sec-lg, .v2 .vc-main .vc-pad, .v2 .vc-main .vc-facts { padding-left: 0; padding-right: 0; }
  .v2 .vc-main .vc-notice { margin-left: 0; margin-right: 0; }
  .v2 .vc-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; padding: 0; }
  .v2 .vc-pair { width: auto; }
  .v2 .vc-pair-img { height: 200px; }
  .v2 .vc-pairs-h { margin-left: 0; margin-right: 0; }
  .v2 .vc-pairs-sec { padding-bottom: 0; }
  .v2 .vc-photos-h { margin-left: 0; margin-right: 0; }
  .v2 .vc-photos { padding-left: 0; padding-right: 0; scroll-padding: 0; }
  .v2 .vc-photos > li { width: 280px; }
  .v2 .vc-photo-img { height: 200px; }
  .v2 .vc-skip { position: absolute; left: -9999px; top: 12px; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 100px; background: var(--v2-warm-white); color: var(--v2-walnut); font-size: var(--v2-text-body-sm); font-weight: 600; text-decoration: none; }
  .v2 .vc-skip:focus { left: var(--v2-gutter); }
  .v2 .vc-skip-mob { display: none; }
  /* the rail: the booking card first (first in the DOM too), then Getting there.
     The rail stretches to the story's height and ONLY the booking card sticks. */
  .v2 .vc-rail { display: flex; flex-direction: column; gap: 8px; padding-top: 32px; align-self: stretch; }
  .v2 .vc-book { order: -1; position: sticky; top: calc(var(--v2-site-header-h) + 24px); z-index: 2; margin: 0; flex-direction: column; align-items: stretch; gap: 16px; padding: 24px; border: 1px solid var(--v2-line); border-radius: 20px; background: var(--v2-surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--v2-shadow-lift); }
  .v2 .vc-book > a { flex: none !important; }
  .v2 .vc-book-k { max-width: none; }
  .v2 .vc-gt { padding: 16px 4px 0; }
  .v2 .vc-gt .vc-h2 { font-size: var(--v2-text-display-sm); }
  .v2 .vc-book.vc-book-solo { display: flex; }
  .v2 .vc-rail .vc-feedback { padding: var(--v2-section-gap) 4px 0; }
  /* An open feedback form is tall: do not let the sticky booking card ride over it. */
  .v2 .vc-rail:has(.vc-feedback form) .vc-book { position: static; }
}

/* ── Below desktop: short phones, and tablets ──────────────────────────── */
@container (max-width: 1023px) {
  /* never taller than the screen minus the site header and the first row of Right now */
  .v2 .vc-hero { height: clamp(360px, calc(100svh - var(--v2-site-header-h) - 92px), 540px); }
  /* Directions-only pages: #booking is display:none here, so this skip link targets #getting-there */
  .v2 .vc-skip-mob { position: absolute; left: -9999px; top: 12px; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 100px; background: var(--v2-warm-white); color: var(--v2-walnut); font-size: var(--v2-text-body-sm); font-weight: 600; text-decoration: none; }
  .v2 .vc-skip-mob:focus { left: var(--v2-gutter); }
}
@container (min-width: 600px) {
  .v2 .vb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 600px) and (max-width: 1023px) {
  .v2 .vc-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; }
  .v2 .vc-pair { width: auto; }
  .v2 .vc-pair-img { height: 150px; }
  .v2 .vc-cta { max-width: 420px; margin-left: auto; }
}

/* narrow containers (<= 359px): the longest words need the room */
@container (max-width: 359px) {
  .v2 .vc-book-k { max-width: 36%; }
  .v2 .vc-cta { padding: 6px 14px; font-size: 14px; }
  .v2 .vc-qa-l { font-size: 12px; }
  .v2 .vc-quick { gap: 6px; }
  .v2 .vc-quick > * { padding-left: 2px; padding-right: 2px; }
  .v2 .vc-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Reduced motion: a still, no zoom/crossfade/pulse ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after { animation: none !important; transition: none !important; }
  .v2 .hx-kb.d0 { opacity: 1; }
  .v2 .vc-pause, .v2 .hx-pause { display: none; }
}

/* ── HeroCard: the home cover (guide-v2-consumer H-1; r8 HeroCard.dc.html + v2-layout.css) ─────────
   Shares the media slot (.hx-media/.hx-kb/.hx-still/.hx-plate) and the legibility stack (.lg-*)
   above. No masthead and no search/profile: the site header carries them on holler.guide. */
@keyframes v2-hxp { 0% { box-shadow: 0 0 0 0 rgb(var(--v2-live-rgb) / .7); } 100% { box-shadow: 0 0 0 10px rgb(var(--v2-live-rgb) / 0); } }
.v2 .hx-root { width: 100%; height: 640px; position: relative; overflow: hidden; background: var(--v2-navy); color: var(--v2-warm-white); font-family: var(--v2-font-ui); font-weight: 300; }
.v2 .hx-root .lg-blur { height: 60%; }
.v2 .hx-root .lg-shade { height: 74%; }
.v2 .hx-root .hx-plate-word { font-size: 44px; letter-spacing: .32em; margin-top: -260px; }
.v2 .hx-root .lg-side { display: none; }
.v2 .hx-pause { position: absolute; top: 16px; left: 16px; width: 44px; height: 44px; }
.v2 .hx-copy { position: absolute; left: var(--v2-gutter); right: var(--v2-gutter); bottom: 30px; display: flex; flex-direction: column; gap: 12px; isolation: isolate; }
/* Below the desktop layout the status line sits high in the copy block, above the bottom shade's opaque part: its own
   soft scrim (a gradient from clear to photo-ink over the first 40px, then a .80 plateau) keeps the 13px line legible over a bright photo. */
@container (max-width: 1023px) {
  .v2 .hx-copy::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: calc(-1 * var(--v2-gutter)); right: calc(-1 * var(--v2-gutter)); top: -56px; bottom: -30px; background: linear-gradient(180deg, rgb(var(--v2-photo-ink) / 0) 0, rgb(var(--v2-photo-ink) / .80) 40px); }
}
.v2 .hx-status { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--v2-warm-white); }
.v2 .hx-pulse { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; width: 8px; height: 8px; border-radius: 100px; background: var(--v2-live); box-shadow: 0 0 0 0 rgb(var(--v2-live-rgb) / .7); animation: v2-hxp 1.8s ease-out infinite; }
.v2 .hx-fresh { font-size: 13px; font-weight: 400; white-space: nowrap; }
.v2 .hx-head { margin: 0; font-family: var(--v2-font-display); font-weight: 300; font-size: min(50px, calc((100cqi - 2 * var(--v2-gutter)) * 50 / 346)); line-height: .98; letter-spacing: -.005em; }
.v2 .hx-lead, .v2 .hx-ital { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2 .hx-ital { font-style: italic; }
.v2 .hx-kseg { white-space: nowrap; }
.v2 .hx-dek { margin: 0; max-width: 330px; font-size: 15px; font-weight: 400; line-height: 1.5; color: rgb(var(--v2-warm-white-rgb) / .94); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v2 .hx-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.v2 .hx-cta { display: flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: var(--v2-radius-pill); background: var(--v2-warm-white); color: var(--v2-walnut); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; text-shadow: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.v2 .hx-facts { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 500; color: rgb(var(--v2-warm-white-rgb) / .9); text-align: right; }
.v2 .hx-root :focus-visible { outline-color: var(--v2-warm-white); }

@container (min-width: 1024px) {
  .v2 .hx-root { height: 680px; }
  .v2 .hx-root .hx-plate-word { margin-top: -150px; }
  /* the copy's left edge and the pause control's right edge sit on the site container (max-w-5xl = 1024px, px-10 = 40px) */
  .v2 .hx-copy { left: max(var(--v2-gutter), calc((100% - 1024px) / 2 + 40px)); right: auto; width: min(640px, calc(100% - 2 * var(--v2-gutter))); bottom: 72px; gap: 16px; }
  .v2 .hx-head { font-size: 72px; }
  .v2 .hx-dek { font-size: var(--v2-text-body-lg); max-width: 540px; }
  .v2 .hx-pause { top: auto; left: auto; bottom: 72px; right: max(var(--v2-gutter), calc((100% - 1024px) / 2 + 40px)); }
  .v2 .hx-facts { flex: 0 1 auto; text-align: left; }
  .v2 .hx-root .lg-blur { height: 52%; }
  .v2 .hx-root .lg-shade { height: 70%; }
  /* the copy column gets a side scrim: a two-line 72px headline climbs out of the bottom shade */
  .v2 .hx-root .lg-side { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(var(--v2-photo-ink) / .82) 0%, rgb(var(--v2-photo-ink) / .74) 38%, rgb(var(--v2-photo-ink) / .3) 62%, rgb(var(--v2-photo-ink) / 0) 80%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(90deg, black 0%, black 50%, transparent 72%); mask-image: linear-gradient(90deg, black 0%, black 50%, transparent 72%); }
}