/* Venue pages v2 (venue-v2.body.php) and the brand Menu sheet. Fonts come from the brand's own CSS (e.g. custom.176.css). */

.uvv2 {
	--uvv2-ink: #221b18;
	--uvv2-red: #b03635;
	--uvv2-stone: #eae6e1;
	--uvv2-sage: #8e9a87;
	--uvv2-ash: #a89f96;
	--uvv2-pad: clamp(20px, 5vw, 64px);
	background: var(--uvv2-ink);
	color: var(--uvv2-stone);
	font-size: 17px;
	line-height: 1.6;
}
.uvv2 *, .uvv2 *::before, .uvv2 *::after { box-sizing: border-box; }
.uvv2 h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; font-weight: 400; margin: 0 0 .5em; color: inherit; letter-spacing: -.01em; }
.uvv2 h3 { font-size: 21px; line-height: 1.25; font-weight: 400; margin: .7em 0 .2em; color: inherit; }
.uvv2 p { margin: 0 0 1em; }
.uvv2 a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.uvv2 a:focus-visible, .uvv2 button:focus-visible, .uvv2 input:focus-visible, .uvv2 textarea:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.uvv2-muted { color: var(--uvv2-ash); font-size: 15px; }
.uvv2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Brand CSS (e.g. custom.176.css) sets the body face on every #content element at ID strength; display lettering is Ogg */
body #content .uvv2 .uvv2-city, body #content .uvv2 .uvv2-opening, body #content .uvv2-facts dt { font-family: 'ogg', Georgia, serif; }

/* The old venue sub-menu bar is replaced by .uvv2-bar, so the fixed header is just the top row */
.uvv2-page .uv-page-headervenue, .uvv2-page .uvheaderbreadcrumbs { display: none; }
body.venuepage.uvv2-page .uv-page-header { height: auto; }
body.venuepage.uvv2-page .uv-page-wrapper { padding-top: 40px; }
@media (min-width: 1297px) { body.venuepage.uvv2-page .uv-page-wrapper { padding-top: 44px; } }

/* ----- Hero: the photo, the logo, and the city set vertically like a hanging banner ----- */
.uvv2-hero { position: relative; overflow: hidden; background: #000; min-height: 520px; height: min(92svh, 125vw); }
.uvv2-hero picture, .uvv2-hero img:not(.uvv2-logo) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uvv2-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%, rgba(20, 14, 12, .15) 40%, rgba(20, 14, 12, .92) 100%); }
.uvv2-hero-text { position: absolute; z-index: 1; left: var(--uvv2-pad); right: var(--uvv2-pad); bottom: clamp(28px, 6vh, 72px); color: #fff; }
.uvv2-logo { display: block; width: min(56vw, 300px); height: auto; margin-bottom: 18px; }
.uvv2 .uvv2-name { margin: 0; font-size: 0; line-height: 0; }
.uvv2-city {
	position: absolute;
	right: calc(-1 * var(--uvv2-pad) + 6px);
	bottom: 0;
	writing-mode: vertical-rl;
	font-family: 'ogg', Georgia, serif;
	font-size: min(17vw, 13svh, 150px);
	line-height: .82;
	letter-spacing: .02em;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.uvv2-hero-text p { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.uvv2-opening { font-family: 'ogg', Georgia, serif; font-size: clamp(26px, 6.6vw, 44px); line-height: 1.05; margin: 0 0 6px; max-width: 60%; }
.uvv2-where { font-size: 16px; color: rgba(255, 255, 255, .82); margin: 0 0 20px; max-width: 62%; }

.uvv2-btn {
	display: inline-block; border: 0; border-radius: 2px; padding: 15px 26px; min-height: 48px;
	background: var(--uvv2-red); color: #fff !important; font: inherit; font-size: 16px; letter-spacing: .02em;
	text-decoration: none; cursor: pointer;
}
.uvv2-btn:hover { background: #9a2d2c; }
.uvv2-hero .uvv2-btn { margin: 0 8px 10px 0; }
.uvv2-btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.uvv2-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.uvv2-hero-text .uvv2-note { font-size: 13px; color: rgba(255, 255, 255, .75); margin: 4px 0 0; max-width: 62%; }
.uvv2-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ----- Action bar: bottom of the screen on phones (thumb reach), under the header on desktop ----- */
.uvv2-bar {
	position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
	display: flex; background: rgba(34, 27, 24, .96); border-top: 1px solid rgba(234, 230, 225, .14);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.uvv2-bar a { flex: 1; text-align: center; padding: 16px 6px; min-height: 54px; color: var(--uvv2-stone); text-decoration: none; font-size: 15px; letter-spacing: .03em; }
.uvv2-bar a:first-child { background: var(--uvv2-red); color: #fff; }
.uvv2-page { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.uvv2-page #uv-cookies, .uvv2-page .uv-cookies { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

/* ----- Facts: where, when, contact ----- */
.uvv2-facts { padding: 44px var(--uvv2-pad) 8px; }
.uvv2-facts dl { margin: 0; display: grid; gap: 26px; }
.uvv2-facts dt { font-family: 'ogg', Georgia, serif; font-size: 22px; color: var(--uvv2-sage); margin-bottom: 4px; }
.uvv2-facts dd { margin: 0; }

/* ----- About ----- */
.uvv2-about { padding: 48px var(--uvv2-pad) 24px; max-width: 900px; }
.uvv2-prose { max-width: 62ch; color: rgba(234, 230, 225, .86); }

/* ----- Rails (dishes, gallery): swipe on phones, grid on desktop ----- */
.uvv2-head { padding: 0 var(--uvv2-pad); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 24px; }
.uvv2-head p { color: var(--uvv2-ash); font-size: 15px; }
.uvv2-rail {
	list-style: none; margin: 0; padding: 4px var(--uvv2-pad) 8px;
	display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--uvv2-pad);
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.uvv2-rail::-webkit-scrollbar { display: none; }
.uvv2-rail li { scroll-snap-align: start; margin: 0; padding: 0; }
.uvv2-rail img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #2e2622; }
.uvv2-rail p { color: var(--uvv2-ash); font-size: 15px; margin: 0; }
.uvv2-dishes { padding: 56px 0 24px; }
.uvv2-gallery { padding: 28px 0 8px; }
.uvv2-gallery .uvv2-rail { grid-auto-columns: 86%; }
.uvv2-gallery .uvv2-rail img { aspect-ratio: 3 / 2; }

/* ----- Events and sign-up: the light sections ----- */
.uvv2-events, .uvv2-notify { padding: 56px var(--uvv2-pad); }
.uvv2-events { background: var(--uvv2-stone); color: var(--uvv2-ink); margin-top: 48px; }
.uvv2-events p { max-width: 60ch; color: var(--uvv2-ink); }
.uvv2-events .uvv2-muted { color: #6f655d; }
.uvv2-eventform { margin-top: 24px; max-width: 560px; display: grid; gap: 14px; }
.uvv2-eventform[hidden] { display: none; }
.uvv2-eventform label { display: grid; gap: 4px; font-size: 15px; }
.uvv2-eventform input, .uvv2-eventform textarea { font: inherit; font-size: 16px; padding: 12px; border: 1px solid #b9b0a7; border-radius: 2px; background: #fff; color: var(--uvv2-ink); width: 100%; }
.uvv2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.uvv2-notify { border-top: 1px solid rgba(234, 230, 225, .12); }
.uvv2-notify > p { color: var(--uvv2-ash); max-width: 52ch; }
.uvv2-notify .nf-form-cont { max-width: 560px; }
.uvv2-notify .nf-form-cont, .uvv2-notify .nf-form-cont label { color: var(--uvv2-stone); }
.uvv2-notify input[type=submit], .uvv2-notify input[type=button] { background: var(--uvv2-red) !important; border-color: var(--uvv2-red) !important; color: #fff !important; min-height: 48px; }

@media (min-width: 768px) {
	.uvv2-hero { height: min(86vh, 860px); min-height: 560px; }
	.uvv2-opening, .uvv2-where { max-width: 520px; }
	.uvv2-city { right: 0; font-size: min(11vw, 12vh, 150px); }

	.uvv2-bar { bottom: auto; justify-content: flex-start; padding: 0 var(--uvv2-pad); border-top: 0; border-bottom: 1px solid rgba(234, 230, 225, .14); }
	.uvv2-bar a { flex: 0 0 auto; padding: 16px 22px; }
	.uvv2-page { padding-bottom: 0; }
	.uvv2-page #uv-cookies, .uvv2-page .uv-cookies { bottom: 0; }

	.uvv2-facts dl { grid-template-columns: repeat(3, 1fr); gap: 40px; }
	.uvv2-rail { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; }
	.uvv2-gallery .uvv2-rail { grid-template-columns: repeat(3, 1fr); }
	.uvv2-events { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
	.uvv2-events h2 { grid-row: span 3; }
}
@media (min-width: 1100px) {
	.uvv2-dishes .uvv2-rail { grid-template-columns: repeat(4, 1fr); }
}

/* ----- Default look: the bar slides in once the hero's own buttons scroll away (js/venue-v2.js), so Reserve shows once ----- */
.uvv2:not(.uva) .uvv2-bar { transform: translateY(110%); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.uvv2:not(.uva) .uvv2-bar.is-on { transform: none; }
@media (min-width: 768px) {
	.uvv2:not(.uva) .uvv2-bar { position: fixed; top: var(--uvv2-top, 44px); left: 0; right: 0; bottom: auto; transform: translateY(-110%); z-index: 40; }
	.uvv2:not(.uva) .uvv2-bar.is-on { transform: none; }
}

/* ----- Events sheet: Tripleseat intake form ----- */
.uvv2-eventsheet .uvrs-panel { height: 88vh; }
.uvv2-eventsheet .uvrs-body { flex: 1; padding: 0; overflow: hidden; background: #fff; }
.uvv2-eventframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
	.uvv2-eventsheet .uvrs-panel { width: 560px; height: calc(100vh - 120px); max-height: 860px; }
}

/* ----- Brand Menu sheet: reuses the Reserve sheet panel (css/reserve-sheet.css) ----- */
.uvv2-menusheet .uvms-row-note { color: #8a8079; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.uvv2-rail { scroll-behavior: auto; }
}