/*
 * Booth — booth.lucitech.net
 * Candlelit Las Vegas supper club. Authored to design-direction.md.
 * One warm pendant lights the whole site; the room changes by color.
 */

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  --color-primary: #1B4D3E;        /* Booth Emerald */
  --color-primary-dark: #123528;
  --color-primary-light: #2A6B54;
  --color-secondary: #6B1E1E;      /* Oxblood */
  --color-accent: #C9A84C;         /* Antique Gold */
  --color-amber: #E8A33D;          /* Pendant glow */
  --color-bg: #14110E;             /* Candlelit Charcoal */
  --color-surface: #211B15;        /* Walnut Shadow */
  --color-walnut: #A0522D;
  --color-text: #F5ECD7;           /* Bread Cream */
  --color-text-secondary: #C9B79A; /* Muted Parchment */
  --color-text-on-accent: #14110E;
  --color-border: #3A3128;
  --color-cream: #F5ECD7;
  --color-card-cream: #FBF5E6;

  --font-primary: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-secondary: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 16px;
  --spacing-base: 8px;

  --motion-duration: 360ms;
  --motion-duration-slow: 560ms;
  --motion-ease: cubic-bezier(0.33, 0.1, 0.25, 1);

  --container: 1200px;
  --measure: 62ch;
}

/* ============================================================
   Base Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--font-size-base, 16px); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-secondary, sans-serif);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  padding-bottom: 42px; /* required */
  overflow-x: clip; /* contain full-bleed sections without breaking position:sticky */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-accent); text-decoration: none; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

::selection { background: color-mix(in srgb, var(--color-accent) 40%, transparent); color: var(--color-text); }

/* ============================================================
   Typography Scale
   ============================================================ */
.display {
  font-family: var(--font-primary); font-weight: 600;
  font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.98; letter-spacing: -0.02em;
}
h1, .h1 {
  font-family: var(--font-primary); font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.015em;
}
h2, .h2 {
  font-family: var(--font-primary); font-weight: 550;
  font-size: clamp(1.9rem, 3.5vw, 2.9rem); line-height: 1.1; letter-spacing: -0.01em;
}
h3, .h3 {
  font-family: var(--font-primary); font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.15; letter-spacing: -0.005em;
}
.h4 {
  font-family: var(--font-secondary); font-weight: 600;
  font-size: 1.05rem; line-height: 1.3; letter-spacing: 0.02em;
}
.lead {
  font-family: var(--font-primary); font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.4;
}
p { font-size: 1.0625rem; line-height: 1.65; }
.aside-wit {
  font-family: var(--font-primary); font-style: italic; font-weight: 400;
  color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.5;
}
.eyebrow {
  font-family: var(--font-secondary); font-weight: 600;
  font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent); display: inline-block;
}
/* the bar's "red side of the room" register — oxblood as a chip (oxblood text on dark fails contrast) */
.eyebrow.chip-oxblood { background: var(--color-secondary); color: var(--color-cream); padding: 0.45em 0.95em; border-radius: 2px; }

/* ============================================================
   Building blocks
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
/* prevent grid/flex text columns from overflowing beside fixed/bleed media */
.feature-bleed__grid > *, .inside-green__grid > *, .premise__grid > *, .tbh-teaser__grid > *,
.venue-frame__grid > *, .contact-split__inner > *, .shop-hero__grid > *, .spirits__grid > *,
.hero__inner > *, .menu-plate > * { min-width: 0; }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.measure { max-width: var(--measure); }

/* The curved brass rail — the booth-arch / banquette lip. Never a straight rule. */
.brass-rule {
  height: 8px; width: min(220px, 42%);
  border-top: 2px solid var(--color-accent);
  border-radius: 50% / 100% 100% 0 0;
  opacity: 0.85; margin: 0;
}
.brass-rule--center { margin-inline: auto; }
.brass-rule--wide { width: min(440px, 70%); }

/* The recurring pool-of-light vignette — one moving amber pendant. */
.pool { position: relative; }
.pool > .pool__glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(280px, 42vw, 620px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--color-amber) 26%, transparent) 0%,
    color-mix(in srgb, var(--color-amber) 9%, transparent) 38%,
    transparent 68%);
  filter: blur(6px); top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.pool > * { position: relative; z-index: 1; }

/* Buttons — restrained. The design wins, not the button. */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-secondary); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.95em 1.9em; border: 1px solid var(--color-accent);
  color: var(--color-accent); background: transparent; cursor: pointer;
  transition: background var(--motion-duration) var(--motion-ease),
              color var(--motion-duration) var(--motion-ease);
}
.btn:hover, .btn:focus-visible { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn--solid { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn--solid:hover, .btn--solid:focus-visible { filter: brightness(1.07); background: var(--color-accent); color: var(--color-text-on-accent); }
.btn--on-cream { border-color: var(--color-primary); color: var(--color-primary); }
.btn--on-cream:hover, .btn--on-cream:focus-visible { background: var(--color-primary); color: var(--color-cream); }

/* Inline text link with gold underline */
.link-gold {
  font-family: var(--font-secondary); font-weight: 600; font-size: 0.9375rem;
  letter-spacing: 0.04em; color: var(--color-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  padding-bottom: 2px; transition: border-color var(--motion-duration) var(--motion-ease);
  display: inline-flex; align-items: center; gap: 0.5em;
}
.link-gold:hover, .link-gold:focus-visible { border-bottom-color: var(--color-accent); }
.link-gold i { transition: transform var(--motion-duration) var(--motion-ease); }
.link-gold:hover i { transform: translateX(3px); }

/* ============================================================
   Reveal on scroll (calm — one orchestrated reveal per band)
   ============================================================ */
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--motion-duration-slow) var(--motion-ease),
              transform var(--motion-duration-slow) var(--motion-ease);
}
html.js .reveal[data-delay="1"].is-visible { transition-delay: 110ms; }
html.js .reveal[data-delay="2"].is-visible { transition-delay: 220ms; }
html.js .reveal[data-delay="3"].is-visible { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Navigation — Centered emblem masthead, two-tier, frosted on scroll
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 200; color: var(--color-text);
  transition: background var(--motion-duration) var(--motion-ease),
              backdrop-filter var(--motion-duration) var(--motion-ease),
              box-shadow var(--motion-duration) var(--motion-ease);
}
.nav__utility {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem clamp(1.25rem, 5vw, 3rem);
  font-family: var(--font-secondary); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
}
.nav__util-left { display: inline-flex; align-items: center; gap: 0.55em; }
.nav__util-right { display: inline-flex; align-items: center; gap: 1.5rem; }
.nav__utility a { color: var(--color-text-secondary); transition: color var(--motion-duration) var(--motion-ease); }
.nav__utility a:hover { color: var(--color-text); }
.nav__reserve { color: var(--color-accent) !important; }

.nav__main {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0.7rem clamp(1.25rem, 5vw, 3rem) 0.9rem; gap: 1.5rem;
}
.nav__links { display: flex; gap: 2rem; list-style: none; }
.nav__links--right { justify-content: flex-end; }
.nav__links a {
  font-family: var(--font-secondary); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text);
  transition: color var(--motion-duration) var(--motion-ease); white-space: nowrap;
}
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a[aria-current="page"] { color: var(--color-accent); }

/* CSS-built booth-arch emblem (gold arch over the wordmark) */
.nav__brand { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--color-text); }
.brand-emblem { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.brand-emblem__arch {
  width: 58px; height: 14px;
  border: 2px solid var(--color-accent); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.brand-emblem__word {
  font-family: var(--font-primary); font-weight: 600; font-size: 1.5rem;
  letter-spacing: 0.36em; text-indent: 0.36em; text-transform: uppercase; line-height: 1;
  color: currentColor;
}
.brand-emblem--sm .brand-emblem__arch { width: 44px; height: 11px; }
.brand-emblem--sm .brand-emblem__word { font-size: 1.15rem; }

.nav.is-scrolled {
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.nav.is-scrolled .nav__utility { border-bottom-color: transparent; padding-block: 0.4rem; }

/* Always-solid nav for light-canvas pages (shop) — cream nav text needs a dark band from the top */
.nav--solid {
  background: color-mix(in srgb, var(--color-bg) 93%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.nav--solid .nav__utility { border-bottom-color: color-mix(in srgb, var(--color-text) 12%, transparent); }

/* Hamburger */
.nav__toggle {
  display: none; background: transparent; border: 0; color: var(--color-text);
  font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 0.25rem;
}
.nav__drawer { display: none; }

@media (max-width: 900px) {
  /* keep symmetric 1fr auto 1fr so the emblem stays centered; toggle in col 1 */
  .nav__links--left, .nav__links--right { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; grid-column: 1; justify-self: start; }
  .nav__brand { grid-column: 2; justify-self: center; }
  .nav__main { padding-block: 0.6rem 0.7rem; }

  .nav__drawer {
    display: block; position: fixed; inset: 0; z-index: 250;
    background: color-mix(in srgb, var(--color-bg) 97%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transform: translateY(-100%); transition: transform var(--motion-duration) var(--motion-ease);
    display: flex; flex-direction: column; padding: clamp(1.5rem, 6vw, 3rem);
  }
  .nav__drawer.is-open { transform: translateY(0); }
  .nav__drawer-head { display: flex; justify-content: flex-end; }
  .nav__drawer-close { background: transparent; border: 0; color: var(--color-text); font-size: 1.8rem; cursor: pointer; line-height: 1; }
  .nav__drawer-links { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2rem; }
  .nav__drawer-links a {
    font-family: var(--font-primary); font-size: 1.7rem; font-weight: 600; color: var(--color-text);
  }
  .nav__drawer-links a:hover { color: var(--color-accent); }
  .nav__drawer-meta { margin-top: auto; font-family: var(--font-secondary); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: 0.6rem; }
  .nav__drawer-meta a { color: var(--color-accent); }
}
body.nav-locked { overflow: hidden; }

/* ============================================================
   Footer (emerald ground)
   ============================================================ */
.footer { background: var(--color-primary); color: var(--color-cream); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; position: relative; }
.footer__inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.footer__brand .brand-emblem__word { color: var(--color-cream); }
.footer__tag { margin-top: 1.25rem; font-family: var(--font-primary); font-style: italic; font-size: 1.1rem; color: color-mix(in srgb, var(--color-cream) 88%, transparent); max-width: 32ch; }
.footer__col h2 { font-family: var(--font-secondary); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-cream); margin-bottom: 1.1rem; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a, .footer__col p { color: color-mix(in srgb, var(--color-cream) 92%, transparent); font-size: 0.95rem; }
.footer__col a:hover { color: var(--color-cream); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
/* gold-on-emerald body links fail contrast → keep cream, gold underline only */
.footer .link-gold { color: var(--color-cream); border-bottom-color: color-mix(in srgb, var(--color-accent) 70%, transparent); }
.footer .link-gold:hover { border-bottom-color: var(--color-accent); }
.footer__bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--color-cream) 18%, transparent); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: color-mix(in srgb, var(--color-cream) 78%, transparent); letter-spacing: 0.04em; }
.footer__bottom a { color: color-mix(in srgb, var(--color-cream) 90%, transparent); }

/* ============================================================
   HERO (home) — full-bleed, type lower-left, pendant indent
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: heroScale 22s ease-out both; }
}
@keyframes heroScale { from { transform: scale(1); } to { transform: scale(1.045); } }
/* Flat scrim pooled lower-left only — no decorative gradient sweep */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 22% 88%, color-mix(in srgb, var(--color-bg) 78%, transparent) 0%, color-mix(in srgb, var(--color-bg) 30%, transparent) 42%, transparent 70%);
}
.hero__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding: clamp(1.25rem,5vw,3rem); padding-bottom: clamp(3rem, 8vh, 6rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; }
.hero__type { max-width: 60ch; }
.hero__display { font-family: var(--font-primary); font-weight: 600; font-size: clamp(3rem, 9vw, 6.5rem); line-height: 0.98; letter-spacing: -0.02em; color: var(--color-text); }
.hero__display .line-2 { display: block; padding-left: clamp(2.5rem, 9vw, 8rem); } /* indent to the pendant's light */
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__aside { text-align: right; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 0.9rem; }
.hero__aside .brass-rule { margin-left: auto; }
@media (max-width: 760px) {
  .hero { align-items: flex-end; }
  .hero__inner { grid-template-columns: 1fr; padding-bottom: clamp(2.5rem, 12vh, 5rem); }
  .hero__display { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .hero__display .line-2 { padding-left: clamp(1.5rem, 12vw, 3rem); }
  .hero__aside { text-align: left; align-items: flex-start; }
  .hero__aside .brass-rule { margin-left: 0; }
}

/* ============================================================
   PREMISE band — pure type, 40% void with the vignette
   ============================================================ */
.premise { background: var(--color-bg); }
.premise__grid { display: grid; grid-template-columns: 60% 40%; align-items: center; gap: 2rem; }
.premise__lead { font-family: var(--font-primary); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--color-text); }
.premise__lead .glow-words { color: var(--color-text); }
.premise__void { position: relative; min-height: 220px; align-self: stretch; }
.premise__void .pool__glow { width: clamp(220px, 32vw, 480px); }
.premise__aside { margin-top: 1.75rem; max-width: 46ch; }
@media (max-width: 760px) {
  .premise__grid { grid-template-columns: 1fr; }
  .premise__void { display: none; }
  .premise::before { content: ""; position: absolute; top: 12%; right: -10%; width: 60vw; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--color-amber) 18%, transparent), transparent 65%); pointer-events: none; }
}

/* ============================================================
   SIGNATURE DISH — image edge-bleeds left, type in the air it leaves
   ============================================================ */
.feature-bleed { background: var(--color-bg); position: relative; overflow: visible; padding-block: 0; }
.feature-bleed__grid { display: grid; grid-template-columns: 55% 45%; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); min-height: clamp(440px, 70vh, 760px); }
.feature-bleed__media { position: relative; align-self: stretch; }
.feature-bleed__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; min-height: clamp(360px, 60vh, 760px); }
.feature-bleed--left .feature-bleed__media { margin-left: calc(-50vw + 50%); width: calc(100% + (50vw - 50%)); }
.feature-bleed--left .feature-bleed__media img { clip-path: inset(0 0 0 0); }
html.js .feature-bleed--left .feature-bleed__media.is-visible img { animation: wipeFromLeft var(--motion-duration-slow) var(--motion-ease) both; }
@keyframes wipeFromLeft { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.feature-bleed__body { padding-block: clamp(3rem, 6vw, 5rem); padding-right: clamp(0px, 2vw, 1rem); }
.feature-bleed__body .h2 { margin: 0.6rem 0 1rem; }
.feature-bleed__body p { color: var(--color-text-secondary); max-width: 46ch; margin-bottom: 1.5rem; }
@media (max-width: 820px) {
  .feature-bleed__grid { grid-template-columns: 1fr; min-height: 0; }
  .feature-bleed--left .feature-bleed__media { margin-left: calc(-50vw + 50%); width: 100vw; }
  .feature-bleed--left .feature-bleed__media img { min-height: 56vh; object-position: 60% 45%; }
  .feature-bleed__body { padding-block: clamp(2.5rem, 8vw, 3.5rem); }
}

/* feature-bleed right variant (for menu/bar) */
.feature-bleed--right .feature-bleed__grid { grid-template-columns: 45% 55%; }
.feature-bleed--right .feature-bleed__media { margin-right: calc(-50vw + 50%); width: calc(100% + (50vw - 50%)); order: 2; }
.feature-bleed--right .feature-bleed__body { order: 1; }
@media (max-width: 820px) {
  .feature-bleed--right .feature-bleed__grid { grid-template-columns: 1fr; }
  .feature-bleed--right .feature-bleed__media { margin-right: calc(-50vw + 50%); margin-left: calc(-50vw + 50%); width: 100vw; order: 2; }
  .feature-bleed--right .feature-bleed__body { order: 1; }
}

/* ============================================================
   THE BOOTH IS THE POINT — full emerald band
   ============================================================ */
.inside-green { background: var(--color-primary); color: var(--color-cream); position: relative; }
.inside-green .eyebrow { color: var(--color-cream); } /* gold fails on emerald — cream eyebrow, gold lives in the brass rule */
.inside-green__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.inside-green__body .h2 { color: var(--color-cream); margin: 0.6rem 0 1.2rem; }
.inside-green__body p { color: color-mix(in srgb, var(--color-cream) 90%, transparent); max-width: 48ch; }
.inside-green__media { position: relative; }
.inside-green__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center; box-shadow: inset 0 0 60px rgba(0,0,0,0.45), 0 24px 60px rgba(0,0,0,0.4); filter: saturate(0.92) sepia(0.12) brightness(0.96); }
.inside-green__media--stack { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.inside-green__media--stack img:nth-child(2) { aspect-ratio: 16 / 9; }
@media (max-width: 820px) { .inside-green__grid { grid-template-columns: 1fr; } }

/* ============================================================
   BAR TEASER — full-bleed frame, oxblood translucent type panel
   ============================================================ */
.bar-frame { position: relative; min-height: clamp(440px, 72vh, 720px); display: flex; align-items: center; isolation: isolate; }
.bar-frame__media { position: absolute; inset: 0; z-index: -1; }
.bar-frame__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.bar-frame__panel {
  max-width: 520px; margin-left: clamp(1.25rem, 6vw, 5rem);
  background: color-mix(in srgb, var(--color-secondary) 72%, transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  padding: clamp(2rem, 4vw, 3.25rem); border-left: 2px solid var(--color-accent);
}
.bar-frame__panel .h2 { color: var(--color-text); margin: 0.5rem 0 1.25rem; }
@media (max-width: 760px) { .bar-frame__panel { margin-inline: 1.25rem; } }

/* ============================================================
   TAKE BOOTH HOME teaser — diagonal stair-step products
   ============================================================ */
.tbh-teaser { background: var(--color-bg); }
.tbh-teaser__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.tbh-teaser__fig { position: relative; }
.tbh-teaser__fig img { width: 100%; object-fit: cover; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.tbh-teaser__fig--a { transform: translateY(-2.2rem); }
.tbh-teaser__fig--a img { aspect-ratio: 3 / 4; }
.tbh-teaser__fig--b { transform: translateY(2.2rem); }
.tbh-teaser__fig--b img { aspect-ratio: 4 / 5; }
.tbh-teaser__fig .pool__glow { width: 80%; }
.tbh-teaser__mid { text-align: center; max-width: 30ch; }
.tbh-teaser__mid .h2 { margin: 0.6rem 0 1.4rem; }
.tbh-teaser__mid p { color: var(--color-text-secondary); margin-bottom: 1.6rem; }
@media (max-width: 820px) {
  .tbh-teaser__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "mid mid"; gap: 1.25rem; }
  .tbh-teaser__fig--a { grid-area: a; transform: none; }
  .tbh-teaser__fig--b { grid-area: b; transform: translateY(1.5rem); }
  .tbh-teaser__mid { grid-area: mid; margin: 2.5rem auto 0; }
}

/* ============================================================
   CONTACT SPLIT over dimmed photo (Visit + home closing)
   ============================================================ */
.contact-split { position: relative; isolation: isolate; }
.contact-split--full { min-height: 100svh; display: flex; align-items: center; }
.contact-split--short { min-height: clamp(560px, 80vh, 760px); display: flex; align-items: center; }
.contact-split__media { position: absolute; inset: 0; z-index: -2; }
.contact-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contact-split::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--color-bg) 78%, transparent); }
.contact-split__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); width: 100%; }
.particulars { display: flex; flex-direction: column; gap: 1.8rem; }
.particulars__item .eyebrow { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.4rem; }
.particulars__item p, .particulars__item a { font-family: var(--font-secondary); font-size: 1.05rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.particulars__item a:hover { color: var(--color-accent); }
.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { text-align: left; padding: 0.35rem 0; font-family: var(--font-secondary); font-size: 1rem; font-weight: 400; color: var(--color-text); }
.hours-table td { text-align: right; color: var(--color-text-secondary); }
@media (max-width: 820px) { .contact-split__inner { grid-template-columns: 1fr; } }

/* Underline-only form floating on the photo (no container) */
.line-form { display: flex; flex-direction: column; gap: 1.6rem; }
.line-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.line-field { display: flex; flex-direction: column; gap: 0.4rem; }
.line-field label { font-family: var(--font-secondary); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-secondary); }
.line-field input, .line-field textarea, .line-field select {
  background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 35%, transparent);
  color: var(--color-text); font-family: var(--font-secondary); font-size: 1.05rem; padding: 0.5rem 0;
  transition: border-color var(--motion-duration) var(--motion-ease);
}
.line-field input::placeholder, .line-field textarea::placeholder { color: color-mix(in srgb, var(--color-text-secondary) 70%, transparent); }
.line-field input:focus, .line-field textarea:focus, .line-field select:focus { outline: none; border-bottom-color: var(--color-accent); }
.line-field textarea { resize: vertical; min-height: 90px; }
.line-field select option { background: var(--color-bg); color: var(--color-text); }
@media (max-width: 600px) { .line-form__row { grid-template-columns: 1fr; } }

/* ============================================================
   PAGE HERO band (menu / bar / events) — full-bleed establishing
   ============================================================ */
.page-hero { position: relative; min-height: clamp(440px, 70svh, 640px); display: flex; align-items: flex-end; isolation: isolate; }
.page-hero--tall { min-height: clamp(520px, 82svh, 760px); }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 88%, transparent) 0%, color-mix(in srgb, var(--color-bg) 30%, transparent) 45%, color-mix(in srgb, var(--color-bg) 55%, transparent) 100%); }
.page-hero__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding: clamp(1.25rem,5vw,3rem); padding-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.page-hero__inner h1 { margin: 0.6rem 0 0.9rem; max-width: 16ch; }
.page-hero__inner p { color: var(--color-text-secondary); max-width: 52ch; }

/* texture strip divider (leather macro) */
.texture-strip { height: clamp(120px, 18vh, 200px); overflow: hidden; }
.texture-strip img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ============================================================
   MENU CARTE — reversed-out emerald, no prices, curved rules
   ============================================================ */
.menu-list { background: var(--color-primary); color: var(--color-cream); padding-block: clamp(4rem, 9vw, 7rem); }
.menu-list + .menu-list { padding-top: 0; }
.menu-section { max-width: 70rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.menu-section + .menu-section { margin-top: clamp(3.5rem, 7vw, 6rem); }
.menu-section__head { text-align: center; position: relative; margin-bottom: clamp(2rem, 4vw, 3rem); }
.menu-section__head .eyebrow { color: var(--color-cream); } /* gold fails on emerald — cream */
.menu-section__head .pool__glow { width: clamp(220px, 30vw, 420px); opacity: 0.7; }
.menu-section__name { font-family: var(--font-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05; color: var(--color-cream); margin: 0.6rem 0 1.1rem; }
.menu-section__rule { margin: 0 auto; }
.menu-items { list-style: none; display: grid; grid-template-columns: 1fr; gap: 2.1rem; margin-top: 2.25rem; }
.menu-item__name { font-family: var(--font-primary); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.18; color: var(--color-cream); display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.menu-item__desc { font-family: var(--font-secondary); font-size: 0.98rem; line-height: 1.55; color: color-mix(in srgb, var(--color-cream) 82%, transparent); margin-top: 0.45rem; max-width: 52ch; }
.menu-item__tag { font-family: var(--font-secondary); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-cream); border: 1px solid color-mix(in srgb, var(--color-accent) 75%, transparent); padding: 0.2em 0.6em; border-radius: 2px; white-space: nowrap; align-self: center; }
@media (min-width: 960px) {
  .menu-items--two { grid-template-columns: 1fr 1fr; column-gap: 5rem; row-gap: 2.4rem; }
}
/* menu feature plate edge-bleed inside the green */
.menu-feature { background: var(--color-primary); }
.menu-plate { max-width: 70rem; margin: clamp(2rem,5vw,4rem) auto 0; padding-inline: clamp(1.25rem,5vw,3rem); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.menu-plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.menu-plate__cap .h3 { color: var(--color-cream); }
.menu-plate__cap p { color: color-mix(in srgb, var(--color-cream) 82%, transparent); margin-top: 0.5rem; }
@media (max-width: 760px) { .menu-plate { grid-template-columns: 1fr; } }
/* menu CTA bridge to shop */
.menu-cta { text-align: center; padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ============================================================
   COCKTAIL LIST (bar) — dark, single column, coaster-ring hairline
   ============================================================ */
.cocktail-list { background: var(--color-bg); }
.cocktail-list .eyebrow { color: var(--color-accent); }
.cocktail-list__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cocktails { list-style: none; max-width: 720px; }
.cocktails li { padding: 1.6rem 0; }
.cocktail__name { font-family: var(--font-primary); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--color-text); position: relative; padding-bottom: 0.7rem; }
.cocktail__name::after { content: ""; display: block; height: 8px; width: min(180px, 50%); margin-top: 0.6rem; border-top: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent); border-radius: 50% / 100% 100% 0 0; }
.cocktail__desc { font-family: var(--font-secondary); color: var(--color-text-secondary); font-size: 1rem; margin-top: 0.3rem; }

/* HOUSE SPIRITS — two bottles offset on shelves */
.spirits { background: var(--color-bg); }
.spirits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; max-width: 980px; margin-inline: auto; }
.spirit { text-align: center; }
.spirit--b { margin-top: clamp(2rem, 6vw, 5rem); } /* different shelf */
.spirit__fig { position: relative; }
.spirit__fig img { width: 100%; max-width: 360px; margin-inline: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.spirit__fig .pool__glow { width: 70%; }
.spirit .h3 { margin-top: 1.4rem; color: var(--color-text); }
.spirit__line { font-family: var(--font-primary); font-style: italic; color: var(--color-text-secondary); margin-top: 0.6rem; max-width: 34ch; margin-inline: auto; }
@media (max-width: 700px) { .spirits__grid { grid-template-columns: 1fr; gap: 3rem; } .spirit--b { margin-top: 0; } }

/* ============================================================
   PRIVATE EVENTS — sticky particulars rail (dark)
   ============================================================ */
.venue-frame { background: var(--color-bg); color: var(--color-text); }
.venue-frame__grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.venue-rail { position: sticky; top: 120px; border-left: 2px solid var(--color-accent); padding-left: 1.6rem; display: flex; flex-direction: column; gap: 1.5rem; }
.venue-rail__item .eyebrow { color: var(--color-text-secondary); display: block; margin-bottom: 0.35rem; }
.venue-rail__item p, .venue-rail__item a { font-family: var(--font-secondary); font-size: 1rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.venue-rail__item a:hover { color: var(--color-accent); }
.venue-rail .btn { margin-top: 0.5rem; }
.venue-body__media { margin-bottom: 2rem; }
.venue-body__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(0.92) sepia(0.1); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.venue-body h2 { margin: 1.4rem 0 1rem; }
.venue-body p { color: var(--color-text-secondary); max-width: 56ch; margin-bottom: 1.1rem; }
.venue-body__list { list-style: none; display: grid; gap: 1rem; margin-top: 1.5rem; }
.venue-body__list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.venue-body__list i { color: var(--color-accent); font-size: 1.3rem; margin-top: 0.1rem; }
.venue-body__list strong { font-family: var(--font-primary); font-weight: 600; display: block; color: var(--color-text); }
.venue-body__list span { color: var(--color-text-secondary); font-size: 0.97rem; }
@media (max-width: 820px) {
  .venue-frame__grid { grid-template-columns: 1fr; }
  .venue-rail { position: static; border-left: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 1.5rem 0; flex-direction: row; flex-wrap: wrap; gap: 1.5rem 2rem; }
  .venue-rail__item { flex: 1 1 40%; }
  .venue-rail .btn { flex-basis: 100%; order: -1; }
}

/* ============================================================
   EVENT INQUIRY OVERLAY — one warm cream card
   ============================================================ */
.overlay { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2rem); }
.overlay.is-open { display: flex; }
.overlay__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.overlay__card { position: relative; background: var(--color-cream); color: var(--color-bg); width: min(640px, 100%); max-height: 90vh; overflow-y: auto; padding: clamp(1.75rem, 4vw, 3rem); box-shadow: 0 40px 100px rgba(0,0,0,0.6); border-top: 3px solid var(--color-accent); }
html.js .overlay.is-open .overlay__card { animation: fadeUp var(--motion-duration-slow) var(--motion-ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .overlay.is-open .overlay__card { animation: none; } }
.overlay__close { position: absolute; top: 0.9rem; right: 1rem; background: transparent; border: 0; color: var(--color-accent); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.overlay__card .eyebrow { color: var(--color-walnut); }
.overlay__card h2 { color: var(--color-bg); margin: 0.4rem 0 0.4rem; }
.overlay__card .overlay__note { color: color-mix(in srgb, var(--color-bg) 65%, transparent); margin-bottom: 1.75rem; }
/* cream form fields */
.cream-form { display: flex; flex-direction: column; gap: 1.4rem; }
.cream-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.cream-field { display: flex; flex-direction: column; gap: 0.4rem; }
.cream-field label { font-family: var(--font-secondary); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-walnut); }
.cream-field input, .cream-field textarea, .cream-field select {
  background: #fff; border: 1px solid color-mix(in srgb, var(--color-walnut) 35%, transparent); color: var(--color-bg);
  font-family: var(--font-secondary); font-size: 1rem; padding: 0.7rem 0.85rem; border-radius: 3px;
  transition: border-color var(--motion-duration) var(--motion-ease);
}
.cream-field input:focus, .cream-field textarea:focus, .cream-field select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.cream-field textarea { resize: vertical; min-height: 110px; }
@media (max-width: 600px) { .cream-form__row { grid-template-columns: 1fr; } }

/* ============================================================
   SHOP — cream/parchment register
   ============================================================ */
.shop-page { background: var(--color-cream); color: var(--color-bg); }
.shop-hero { background: var(--color-cream); color: var(--color-bg); padding-top: clamp(7rem, 12vw, 9rem); }
.shop-hero__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.shop-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; box-shadow: 0 24px 50px color-mix(in srgb, var(--color-bg) 22%, transparent); }
.shop-hero__body .eyebrow { color: var(--color-walnut); }
.shop-hero__body h1 { color: var(--color-bg); margin: 0.5rem 0 1rem; }
.shop-hero__body .brass-rule { margin: 1.25rem 0; }
.shop-hero__body p { color: color-mix(in srgb, var(--color-bg) 72%, transparent); max-width: 44ch; }
@media (max-width: 760px) { .shop-hero__grid { grid-template-columns: 1fr; } .shop-hero__media { order: 2; } }

/* The shop section itself runs on cream */
#shop-root { display: block; background: var(--color-cream); color: var(--color-bg); max-width: 1100px; margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem) clamp(5rem, 9vw, 7rem); }

/* Category filter — underline tabs */
.shop-categories { display: flex; gap: 1.75rem; border-bottom: 1px solid color-mix(in srgb, var(--color-walnut) 28%, transparent); margin-bottom: clamp(2rem, 4vw, 3rem); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 1px; scrollbar-width: none; }
.shop-categories::-webkit-scrollbar { display: none; }
.shop-category { background: transparent; border: 0; cursor: pointer; font-family: var(--font-secondary); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #6B5A45; padding: 0 0 0.9rem; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease); }
.shop-category:hover { color: var(--color-primary); }
.shop-category.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Product grid — wide boutique cards */
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }

.shop-card { background: var(--color-card-cream); border: 1px solid color-mix(in srgb, var(--color-walnut) 30%, transparent); border-radius: 4px; overflow: hidden; position: relative; transition: transform var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease); }
/* curved brass top-rule (booth arch) */
.shop-card::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 8px; border-top: 2px solid var(--color-accent); border-radius: 50% / 100% 100% 0 0; z-index: 2; }
.shop-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px color-mix(in srgb, var(--color-bg) 20%, transparent); }
.shop-card-media { background: #211B15; aspect-ratio: 1; position: relative; }
.shop-card-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,0.25), transparent); pointer-events: none; }
.shop-card-image { width: 100%; height: 100%; object-fit: cover; }
.shop-card-body { padding: 1.1rem 1.25rem 1.4rem; gap: 0.5rem; }
.shop-card-title { font-family: var(--font-primary); font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: var(--color-bg); }
.shop-card-desc { font-family: var(--font-secondary); font-size: 0.9rem; line-height: 1.5; color: color-mix(in srgb, var(--color-bg) 62%, transparent); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.shop-card-price { font-family: var(--font-primary); font-weight: 400; font-size: 1.1rem; color: var(--color-primary); font-variant-numeric: tabular-nums; margin-top: auto; }
.shop-card-variations { font-family: var(--font-secondary); font-size: 0.9rem; padding: 0.5rem 0.6rem; border: 1px solid color-mix(in srgb, var(--color-walnut) 35%, transparent); border-radius: 3px; background: #fff; color: var(--color-bg); margin-top: 0.4rem; }
.shop-card-cta { background: var(--color-accent); color: var(--color-text-on-accent); border: 0; cursor: pointer; font-family: var(--font-secondary); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.85rem 1rem; border-radius: 4px; width: 100%; margin-top: 0.9rem; transition: filter var(--motion-duration) var(--motion-ease); }
.shop-card-cta:hover { filter: brightness(1.06); }
.shop-card--unavailable { opacity: 0.55; }
.shop-card--unavailable .shop-card-image { filter: grayscale(1) brightness(0.9); }
.shop-card--unavailable .shop-card-cta { background: color-mix(in srgb, var(--color-walnut) 30%, transparent); color: var(--color-walnut); cursor: not-allowed; }
.shop-card--unavailable::after { content: "Back Soon"; position: absolute; top: 0.75rem; left: 0.75rem; z-index: 3; font-family: var(--font-secondary); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-on-accent); background: var(--color-accent); padding: 0.25em 0.6em; border-radius: 2px; }

/* Shop states */
[data-shop-state] { min-height: 200px; }
.shop-loading, #shop-root[data-shop-state="empty"]::after, #shop-root[data-shop-state="error"]::after {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-primary); font-style: italic; font-size: 1.4rem; color: var(--color-primary);
  min-height: 240px; padding: 2rem;
}
#shop-root:not([data-shop-state="loading"]) .shop-loading { display: none; }
#shop-root[data-shop-state="empty"]::after { content: "Take Booth Home is restocking — check back soon."; }
#shop-root[data-shop-state="error"]::after { content: "We couldn't load the shop right now — call us and we'll set one aside."; }
@media (prefers-reduced-motion: no-preference) {
  #shop-root[data-shop-state="loading"] .shop-loading { animation: goldPulse 1.8s ease-in-out infinite; }
}
@keyframes goldPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ============================================================
   404
   ============================================================ */
.error-page { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6rem 1.5rem; position: relative; }
.error-page__inner { max-width: 40ch; position: relative; }
.error-page .display { font-size: clamp(3.5rem, 12vw, 7rem); }
.error-page p { color: var(--color-text-secondary); margin: 1.25rem 0 2rem; }

/* ============================================================
   Skip link
   ============================================================ */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 400; background: var(--color-accent); color: var(--color-text-on-accent); padding: 0.75rem 1.25rem; font-family: var(--font-secondary); font-weight: 600; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================================================
   Generic responsive
   ============================================================ */
@media (max-width: 700px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}