/* Small Batch Social — premium monochrome bar: white space, black type,
   restrained gold, wide-tracked uppercase Work Sans. */

:root {
  --radius: 2px;
  --heading-spacing: 0.14em;
  --heading-weight: 600;
  --hero-tint: rgba(12, 12, 12, 0.45);
}

.site-header nav a { letter-spacing: 0.16em; font-size: 0.9rem; }

.hero-inner h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: 0.18em; }

/* The banner is a bright bar scene — backlit spirits, white marble, glassware
   right where the copy sits — so the shared scrim alone leaves the wide-tracked
   caps washing out. Deepen it and let the text carry its own shadow. */
.hero::after {
  background:
    radial-gradient(62% 58% at 50% 46%, rgba(8, 8, 8, 0.55), transparent 76%),
    linear-gradient(180deg, rgba(12, 12, 12, 0.42), rgba(10, 10, 10, 0.72) 92%);
}

.hero-inner h1,
.page-banner-inner h1 {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.62), 0 6px 28px rgba(0, 0, 0, 0.55);
}

.hero-inner p,
.page-banner-inner p {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72), 0 3px 16px rgba(0, 0, 0, 0.55);
}

/* Wordmark centred, nav to the right. Three tracks rather than a flex row, so
   the logo sits on the page's true centre line instead of being pushed off it
   by however wide the nav happens to be. Below the burger breakpoint the
   shared flex header takes over again. */
@media (min-width: 721px) {
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .site-header .brand { grid-column: 2; justify-self: center; }
  .site-header nav { grid-column: 3; justify-self: end; }
}

.prose h2 { letter-spacing: 0.16em; font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.prose h2::after { width: 2.4rem; height: 2px; background: var(--accent); }

.menu-card span { letter-spacing: 0.12em; font-size: 1.1rem; }

.btn { background: #111; letter-spacing: 0.18em; }
.btn:hover { background: var(--accent); }
.btn-outline { border-color: #111; color: #111; background: transparent; }

.visit-card { border-top-width: 2px; }

.brand img { height: 34px; }