/*
Theme Name: Sous Terre
Theme URI: https://barsousterre.com
Description: Custom WordPress theme for Sous Terre, Crawford Hospitality's cocktail lounge beneath Jolie and Crawford & Son in Raleigh, NC.
Version: 1.0.0
Author: Crawford Hospitality
Author URI: https://crawfordhospitality.com
License: Proprietary
Text Domain: sous-terre
*/

/* Sous Terre sets everything in Sweet Sans Pro (Markanna Studios), as its old
   site did. The family names below are the ones the rest of this file already
   uses, so no selector changes: 'Sweet Sans Pro', 'Aguzzo' and 'Lexend Deca'
   (body and descriptions) get the real Regular, Medium and Bold; 'Bruna' (display
   headings) is Regular, as the old site's page headings; 'Tiller' (nav, buttons,
   labels, tabs) is Bold, as its navigation; 'LittleBosquee' (script accents, no
   script face here) is Medium. */
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('fonts/SweetSansPro-Regular.woff2') format('woff2'),
       url('fonts/SweetSansPro-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('fonts/SweetSansPro-Medium.woff2') format('woff2'),
       url('fonts/SweetSansPro-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sweet Sans Pro';
  src: url('fonts/SweetSansPro-Bold.woff2') format('woff2'),
       url('fonts/SweetSansPro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aguzzo';
  src: url('fonts/SweetSansPro-Regular.woff2') format('woff2'),
       url('fonts/SweetSansPro-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aguzzo';
  src: url('fonts/SweetSansPro-Medium.woff2') format('woff2'),
       url('fonts/SweetSansPro-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aguzzo';
  src: url('fonts/SweetSansPro-Bold.woff2') format('woff2'),
       url('fonts/SweetSansPro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lexend Deca';
  src: url('fonts/SweetSansPro-Regular.woff2') format('woff2'),
       url('fonts/SweetSansPro-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lexend Deca';
  src: url('fonts/SweetSansPro-Medium.woff2') format('woff2'),
       url('fonts/SweetSansPro-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lexend Deca';
  src: url('fonts/SweetSansPro-Bold.woff2') format('woff2'),
       url('fonts/SweetSansPro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bruna';
  src: url('fonts/SweetSansPro-Regular.woff2') format('woff2'),
       url('fonts/SweetSansPro-Regular.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tiller';
  src: url('fonts/SweetSansPro-Bold.woff2') format('woff2'),
       url('fonts/SweetSansPro-Bold.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LittleBosquee';
  src: url('fonts/SweetSansPro-Medium.woff2') format('woff2'),
       url('fonts/SweetSansPro-Medium.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Crawford Hospitality's typefaces — used only inside the restaurants modal,
   so that popup reads as part of the parent brand rather than the steakhouse. */
@font-face {
  font-family: 'Engravers Gothic';
  src: url('fonts/engravers_gothic.woff2') format('woff2'),
       url('fonts/engravers_gothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'News Gothic Std';
  src: url('fonts/NewsGothicStd.woff2') format('woff2'),
       url('fonts/NewsGothicStd.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'News Gothic Std';
  src: url('fonts/NewsGothicStd-Bold.woff2') format('woff2'),
       url('fonts/NewsGothicStd-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Sous Terre's palette (the old site's CSS and logo). The names are the theme's
   original ones, kept so no selector changes: --gold is the accent, --gold-dark the hover.
   Contrast on #000: #c29656 7.79:1, #c79a5a 8.20:1, #9a7346 4.91:1, #eeedeb 17.95:1. */
:root {
  --bg: #000000;           /* page and every section */
  --bg-alt: #1a1a1a;       /* bands, cards, form fields (the old site's field ground) */
  --gold: #c29656;         /* accent: type, nav, buttons, rules */
  --gold-light: #c79a5a;   /* the logo's light end */
  --gold-dark: #eeedeb;    /* hover: brightens on black */
  --teal: #c29656;
  --text: #c29656;         /* the old site prints all text gold */
  --text-light: #9a7346;   /* the logo's bronze, for quieter text */
  --text-muted: #9a7346;
  --text-light-band: #a47c4a; /* the bronze a shade lighter, for small print on the
                              #1a1a1a footer band: 4.61:1 there (#9a7346 is 4.07:1) */
  --white: #c29656;
  --cream: #000000;
  --divider: #554226;      /* the old site's rules */
  --footer-divider: #554226;
}

html { background: var(--bg); scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Aguzzo', 'Sweet Sans Pro', 'Lexend Deca', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p { text-wrap: pretty; }

body:after {
  background: var(--bg);
  content: " ";
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1;
}

#canvas {
  position: relative;
  z-index: 2;
}

/* ===== NAVIGATION ===== */
nav#main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  width: 100%;
  overflow: hidden;
  /* Frosted: the page shows through as it scrolls under. Below 0.8 the gold nav
     text dips under 4.5:1 over a white patch beneath (2.4:1 at 0.55); the site
     is dark, so that happens only over a bright photograph. */
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 50;
}
.nav-logo,
nav#main-nav .custom-logo,
nav#main-nav .custom-logo-link img {
  height: 56px;
  width: auto;
  max-width: 280px;
}
.nav-logo-text {
  font-family: 'Tiller', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
}
nav a {
  color: var(--gold);
  text-decoration: none;
  font-family: 'Tiller', sans-serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.3s;
}
nav#main-nav a img {
  display: block;
}
nav#main-nav .nav-logo,
nav#main-nav a:has(> img),
nav#main-nav a:has(> .nav-logo) {
  transition: opacity 0.3s;
}
nav#main-nav .nav-logo {
  height: auto;
  width: 100%;
}
nav#main-nav a:has(> img),
nav#main-nav a:has(> .nav-logo) {
  max-width: 230px;
  width: calc(100% - 50px);
}
nav#main-nav a:has(> img):hover,
nav#main-nav a:has(> .nav-logo):hover { opacity: 0.7; }
.nav-btn,
.nav-links .nav-btn {
  color: var(--gold);
  background-color: transparent;   /* the nav's frosted ground shows through */
  border: 1px solid var(--gold);
  padding: 13px 18px 12px;
  font-size: 16px;
  letter-spacing: 2px;
}
.nav-btn:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav-btn-persistent {
  display: none;
}

/* Mobile nav toggle */
.nav-toggle { display: block; cursor: pointer; margin-left: auto; padding: 6px; flex-shrink: 0; }
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Nav links — hidden until opened */
.nav-links {
  display: none;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 28px calc(100% - 640px) 0;
}
.nav-links a {
  font-size: 15px;
  letter-spacing: 0.18em;
  padding: 8px 1px 8px 2px;
}
body.nav-open .nav-links {
  display: flex;
  margin: 0 auto;
}
/* The open menu can be taller than a short phone screen, and the nav is
   sticky, so without its own scroll the bottom of it could never be reached. */
@media (max-width: 849px) {
  body.nav-open nav#main-nav {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.nav-links .nav-btn-menu { margin: 6px 0; }
@media (max-width: 499px) {
  body.nav-open nav#main-nav .menu {
    display: flex;
    position: static;
    padding: 0;
    width: 100%;
  }
}

/* Nav footer — shown inside mobile menu */
.nav-footer {
  display: block;
  width: 100%;
  text-align: center;
  padding: 24px 0 0;
  border-top: 1px solid var(--divider);
}
.nav-footer p {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}
.nav-footer p a {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
  text-decoration: none;
  font-family: 'Sweet Sans Pro', 'Lexend Deca', sans-serif;
  letter-spacing: 0px;
  text-transform: none;
  font-weight: 100;
  white-space: normal;
  transition: opacity 0.3s;
}
.nav-footer p {
  white-space: normal;
}

/* WordPress menu — hidden until opened */
nav#main-nav .menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 28px 24px 0;
}
nav#main-nav .menu li { display: block; }
nav#main-nav .menu li a,
.nav-links a:not(.nav-btn) {
  position: relative;
  color: var(--gold);
  text-decoration: none;
  font-family: 'Tiller', sans-serif;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 2px;
  transition: color 0.3s ease;
}
nav#main-nav .menu li a::after,
.nav-links a:not(.nav-btn)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
nav#main-nav .menu li a:hover::after,
.nav-links a:not(.nav-btn):hover::after {
  transform: scaleX(1);
}
nav#main-nav .menu li.current-menu-item > a::after,
nav#main-nav .menu li.current-menu-ancestor > a::after,
nav#main-nav .menu li.current-menu-parent > a::after,
.nav-links a.active::after {
  transform: scaleX(1);
}
nav#main-nav .menu li.current-menu-item > a,
nav#main-nav .menu li.current-menu-ancestor > a,
nav#main-nav .menu li.current-menu-parent > a {
  opacity: 1;
}


/* Visually hidden, still read by screen readers and indexed by search engines */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== HERO ===== */
.hero {
  width: 100%;
  /* Deliberately taller than Crawford Brothers now — this no longer tracks the
     sister site's hero height, so don't "correct" it back to match CB.
     svh is the key unit: mobile browsers resolve vh against the LARGEST viewport
     (URL bar hidden), so a plain vh hero overshoots by the height of the browser
     chrome whenever that chrome is on screen. svh resolves against the smallest
     viewport. vh stays first as the pre-Safari-15.4 fallback. max-height stops a
     tall phone stretching this past 560px. Steps up at 900px and again at 1250px. */
  height: 60vh;
  height: 60svh;
  min-height: 330px;
  max-height: 560px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
}
.hero img,
.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fall back to the poster frame for visitors who prefer reduced motion.
   --hero-poster is set on .hero by front-page.php from the Homepage Content box;
   the url() here is only a fallback should that inline style ever be missing. */
@media (prefers-reduced-motion: reduce) {
  /* '.hero .hero-video', not Brodeto's plain '.hero-video': that loses to
     '.hero video { display: block }' above, so the video never hid. */
  .hero .hero-video { display: none; }
  .hero {
    background-image: var(--hero-poster, url('images/st/home-video-poster.jpg'));
    background-size: cover;
    background-position: center;
  }
}

/* The cream feather at the bottom edge of every hero. This is the fade Paul
   flagged and then asked back: the photograph dissolving into the page instead
   of stopping on a line. It lives on ::after rather than the old .hero-overlay
   div, because it is decoration and needs no markup — and because scoping it to
   the bottom edge keeps it from doing what the overlay did, which was tint the
   whole image. Cream only, no dark vignette: the photos stay untinted.
   The height is clamped rather than a percentage on purpose. The old overlay
   ramped over a share of the hero, so now that the home hero runs to 720px that
   same 7% would be a 50px wash — the very thing that was objected to. A clamp
   keeps the feather the same physical depth whether the hero is 300px or 720px.
   Stays under .hero-content, which sits at z-index 2. */
.hero::after,
.page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(20px, 5%, 36px);
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: absolute;
  /* Only .page-hero renders hero content now — the home hero's h1 is
     screen-reader-text, which is why losing .hero-overlay cost that hero
     nothing. The inset survives the overlay's removal for a different reason:
     it keeps the type off the bottom edge of the photograph, where it would
     collide with whatever the crop happens to end on. */
  bottom: 80px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  padding: 0 20px 24px;
}
.hero-content .hero-eyebrow {
  font-family: 'Tiller', 'Sweet Sans Pro', sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
  margin: 0 0 18px;
  opacity: 1;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.95);
}
.hero-content h1 {
  font-family: 'Bruna', 'Tiller', sans-serif;
  font-size: 52px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.22em;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: pretty;
  margin: 0 0 18px;
  text-indent: 0.22em; /* offset trailing letter-spacing for true centering */
  /* Soft, atmospheric separation rather than a drop shadow: the tight 1px/2px
     layer used to sit at 0.9 alpha and read as a hard outline against the bright
     linens in the PDR hero. It stays a whisper for crispness, the mid layer is
     wider, and the ambient bloom does the legibility work.
     Stepped up now that .hero-overlay is gone and there is no dark backing under
     the type at all — the bloom is the only thing separating white letterforms
     from a white tablecloth on the PDR hero. Still soft-edged: an outline would
     read as a sticker over the photograph.
     This is as far as a shadow goes, and it is a deliberate trade, not an
     oversight: Press and Food read cleanly, while About, Drinks and Private
     Events stay low-contrast and would not pass a contrast check. Pushing the
     alphas higher does not recover them — white on a white tablecloth has no
     shadow solution — it just thickens the type into a smudge. If those three
     ever need to read properly, the fix is a scrim behind the text block, a
     darker crop where the title lands, or moving the title off the photo. */
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.70), 0 0 44px rgba(0,0,0,0.60);
}
.hero-content .hero-divider {
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto 18px;
  background: var(--gold-light, #c79a5a);
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
  opacity: 0.85;
}
.hero-content .hero-sub {
  font-family: 'Tiller', 'Sweet Sans Pro', sans-serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0,0,0,0.75);
  max-width: 640px;
  margin: 0 auto 8px;
}
.hero-content .hero-meta {
  font-family: 'Aguzzo', 'Sweet Sans Pro', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #ffffff;
  font-weight: 400;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.85);
  margin: 0;
  opacity: 0.92;
}
.hero-content .hero-sub em {
  display: block;
  height: 0;
  overflow: hidden;
  width: 0;
}


/* ===== PAGE HERO (shorter, for interior pages) ===== */
.page-hero {
  width: 100%;
  height: 35vh;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
}
.page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-hero .hero-content { bottom: 30px; }
/* Menu text is stored in normal case and printed in capitals, as the old site set it:
   names already were (.menu-item-name); descriptions and notes join them. */
.menu-page :is(.menu-item-desc, .menu-item-note) { text-transform: uppercase; }
/* Menu's header is the whole cocktails photo (3:2), framed a little high so the strip
   keeps the glasses' rims and garnishes on desktop and a phone shows all four drinks. */
.page-hero img[src$="images/st/cocktails-wide.jpg"] { object-position: center 38%; }
/* The home hero's one button (front-page.php), in its own block after the film. On a
   phone it sits below the video, on the black page. From 700px it is lifted back over
   the film's lower edge: the block takes no height and the button moves up by its own
   height plus the gap. */
.hero-cta {
  text-align: center;
  padding: 34px 20px 0;
}
@media (min-width: 700px) {
  .hero-cta {
    position: relative;
    z-index: 2;
    height: 0;
    padding: 0;
  }
  .hero-cta .cta-btn--hero {
    transform: translateY(calc(-100% - 64px));
    /* Barely there over the film: the backdrop is blurred and dimmed under a light
       wash, and the border is half-strength gold, a hairline on high-density
       screens. The gold type stays readable over all but the brightest frames. */
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(8px) brightness(0.7);
    backdrop-filter: blur(8px) brightness(0.7);
    border-color: rgba(194, 150, 86, 0.5);
    transition: color 0.35s ease, text-decoration-color 0.35s ease, border-color 0.35s ease;
  }
  .hero-cta .cta-btn--hero:hover,
  .hero-cta .cta-btn--hero:focus-visible { border-color: var(--gold); }
}
@media (min-width: 700px) and (min-resolution: 2dppx) {
  .hero-cta .cta-btn--hero { border-width: 0.5px; }
}
@media (min-width: 900px) {
  .cta-btn--hero { font-size: 14px; letter-spacing: 3px; padding: 19px 34px 18px; }
  .hero-cta .cta-btn--hero { transform: translateY(calc(-100% - 100px)); }
}
/* With motion off the film gives way to its first frame, the sign on white brick,
   where the see-through backing is too light for the gold: 80% black there. */
@media (prefers-reduced-motion: reduce) and (min-width: 700px) {
  .hero-cta .cta-btn--hero { background-color: rgba(0, 0, 0, 0.8); }
}
.page-hero .hero-content h1 { font-size: 28px; }


/* ===== TEXT SECTIONS ===== */
.text-section {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 28px 30px;
  text-align: center;
}
.text-section p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
  margin: 0 auto 24px;
  max-width: 610px;
  text-wrap: pretty;
}
.text-section.narrow p { max-width: 460px; }
.map-link { text-align: center; margin-top: 12px; }
.map-link a {
  font-family: 'Tiller', sans-serif;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
}
.map-link a:hover { opacity: 0.7; }
.text-section.main p {
  font-size: 18px;
  margin: 0 auto 28px;
}
.section-label {
  font-family: 'Tiller', sans-serif;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 600;
}
.text-section h2 {
  font-family: 'Tiller', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 20px;
  letter-spacing: 0.1em;
  text-wrap: pretty;
  text-transform: uppercase;
  line-height: 1.15;
}
.text-section p a,
.cta-section p a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(194, 150, 86, 0.4);
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.text-section p a:hover,
.cta-section p a:hover {
  color: var(--gold-dark);
  text-decoration-color: var(--gold-dark);
}
/* Links in editor-written pages (the Privacy Policy) can run a phrase long, so they
   wrap instead of pushing the page sideways on a phone, and carry a visible
   underline: they are the text's own gold, so colour alone can't mark them. */
.text-section.wp-content p a { white-space: normal; }
.text-section.wp-content :is(p, li) a {
  text-decoration: underline;
  text-decoration-color: rgba(194, 150, 86, 0.7);
  text-underline-offset: 3px;
}

/* Wide text section for content-heavy pages */
.text-section.wide {
  max-width: 840px;
  text-align: left;
}
.text-section.wide p {
  margin: 0 0 20px;
  max-width: none;
}
.text-section.wide h2 {
  text-align: left;
}
.text-section.wide h2.has-text-align-center {
  text-align: center;
}
.text-section.wide h3 {
  font-family: 'Tiller', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  margin: 40px 0 16px;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}
.text-section img, .text-section.wide img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
  margin: 30px 0;
}
.wp-block-columns {
  gap: 40px !important;
}

/* WordPress content inside text-section */
.text-section.wp-content p:empty { display: none; }
.text-section.wp-content h2,
.text-section.wide.wp-content h2 { margin: 28px auto 16px; }
.text-section.wp-content h3 {
  font-family: 'Tiller', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  margin: 40px auto 16px;
  letter-spacing: 0.125em;
  text-wrap: pretty;
  text-transform: uppercase;
}
.text-section.wp-content ul,
.text-section.wp-content ol {
  padding-left: 20px;
  margin: 0 auto 20px;
}
.text-section.wp-content li {
  font-size: 17px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 6px;
}
.text-section.wp-content a {
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.3s;
}
.text-section.wp-content a:hover { opacity: 0.7; }

.text-section.wide.wp-content {
  max-width: 920px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.text-section.wide.wp-content > *:first-child {
  margin-top: 0;
}

.text-section.wide.wp-content > *:last-child {
  margin-bottom: 0;
}

.text-section.wide.wp-content p {
  max-width: 700px;
  margin: 0 auto 28px;
}
/* Lists in an editor-written page sit in the paragraphs' column, at their size. */
.text-section.wide.wp-content ul,
.text-section.wide.wp-content ol {
  max-width: 700px;
  margin: 0 auto 28px;
}
.text-section.wide.wp-content li {
  font-size: 15px;
  text-wrap: pretty;
}

.text-section.wide.wp-content h2,
.text-section.wide.wp-content h3 {
  margin-bottom: 22px;
  max-width: 700px;
}

.text-section.wide.wp-content h2:not(:first-child),
.text-section.wide.wp-content h3:not(:first-child) {
  margin-top: 52px;
}

.text-section.wide.wp-content + .photo-section.single,
.photo-section.single + .text-section.wide.wp-content {
  margin-top: 8px;
}

.photo-section.single {
  max-width: 960px;
  margin: 0 auto 30px;
  padding: 0 28px;
}

.photo-section.single .photo-block {
  height: 340px;
}

.text-section.wp-content .wp-block-button {
  margin: 6px;
}

.text-section.wp-content .wp-block-button.has-custom-width {
  width: auto;
}

.text-section.wp-content .wp-block-button__link,
.text-section.wp-content .wp-element-button {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 0;
  color: var(--gold);
  padding: 16px 44px;
  font-family: 'Sweet Sans Pro', 'Lexend Deca', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2.5px;
  line-height: 1.2;
  min-height: 48px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.text-section.wp-content .wp-block-button__link:hover,
.text-section.wp-content .wp-block-button__link:focus,
.text-section.wp-content .wp-element-button:hover,
.text-section.wp-content .wp-element-button:focus {
  background: var(--gold);
  color: var(--bg);
  opacity: 1;
}

/* Let the drinks page image break wider than the readable copy column. */
.page-id-60 .text-section.wp-content > .wp-block-image {
  width: min(1200px, calc(100vw - 80px));
  max-width: none;
  aspect-ratio: 2.3 / 1;
  overflow: hidden;
  margin: 42px 50%;
  transform: translateX(-50%);
}

.page-id-60 .text-section.wp-content > .wp-block-image img {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center 58%;
}


/* ===== PHOTO SECTIONS ===== */
.photo-section {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 4px;
}
.photo-section.single { display: block; }
.photo-section.full-bleed { max-width: 100%; }
/* Private Events with no detail blocks: the photos follow the title, so they get
   the text sections' 30px off it rather than touching it. */
.page-title + .photo-section { margin-top: 30px; }
.photo-block {
  flex: 1;
  height: 220px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
}
.photo-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 6s ease;
}
.photo-block:hover img { transform: scale(1.03); }
.photo-block--hearth img { object-position: center 75%; }
section.photo-section.dessert .photo-block {
  height: auto;
  aspect-ratio: 0.85;
  max-width: 380px;
  margin: 0 auto;
}
.photo-section.dessert .photo-block img { object-position: center 30%; }
.photo-block.tall { height: 300px; }
.photo-section.single .photo-block { height: 280px; }
/* ===== PHOTO SPREAD (homepage gallery) =====
   One block of markup with two presentations. Below 1100px it is a horizontally
   swipeable filmstrip using CSS scroll-snap, with the last frame left partly
   visible so it reads as scrollable; the arrows are positioned against
   .photo-carousel-wrap (same max-width as the strip) so they stay pinned to the
   edges of the strip rather than the viewport. At 1100px and up it becomes a
   full-bleed mosaic - see the spread rules below. */
.photo-carousel-wrap {
  position: relative;
  max-width: 1140px;
  margin: 0 auto 40px;
}
.photo-carousel {
  display: flex;
  gap: 8px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  /* Smoothing lives here rather than in scrollBy({behavior:'smooth'}), which silently
     no-ops against a mandatory-snap container in some engines. */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.photo-carousel::-webkit-scrollbar { display: none; }
.photo-carousel:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.photo-carousel-item {
  flex: 0 0 min(78%, 420px);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
}
.photo-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 6s ease;
}
.photo-carousel-item:hover img { transform: scale(1.03); }
/* Carousel arrows. Hidden by default and shown only once the script has confirmed the
   strip overflows (.has-arrows), and only on pointer-driven widths - touch users swipe. */
.carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, opacity 0.3s;
}
.carousel-arrow.prev { left: 28px; }
.carousel-arrow.next { right: 28px; }
.carousel-arrow::before {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transition: border-color 0.3s;
}
.carousel-arrow.prev::before { transform: translateX(2px) rotate(135deg); }
.carousel-arrow.next::before { transform: translateX(-2px) rotate(-45deg); }
.carousel-arrow:hover { background: var(--gold); }
.carousel-arrow:hover::before { border-color: var(--bg); }
.carousel-arrow:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
@media (min-width: 900px) and (hover: hover) {
  .photo-carousel-wrap.has-arrows .carousel-arrow { display: flex; }
}

/* The spread. Four columns running the full width of the viewport. Which frames
   stretch is decided per photo in st_gallery_layout() (inc/gallery.php), which
   composes the gallery out of bands that each finish flush with these four columns,
   so any number of photos closes on a complete row. This end only has to describe
   the shapes: .is-hero is 2x2 and lands back at ~3:2 (so it crops nothing), .is-wide
   is two columns of one row at ~3:1, .is-full is all four at ~3:1. Each is placed by
   normal flow from its position in source order - no explicit line numbers - so the
   mosaic reflows intact. Nothing overflows here, so the script clears .has-arrows
   and the arrows retire on their own.
   This starts at 1100px rather than at the 900px arrow breakpoint because a quarter
   of anything narrower is a thumbnail - between the two the filmstrip, whose frames
   run to 420px, still shows the photography larger than the spread would. */
@media (min-width: 1100px) {
  .photo-carousel-wrap {
    max-width: none;
    margin: 0;
  }
  .photo-carousel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    max-width: none;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .photo-carousel-item.is-hero {
    grid-column: span 2;
    grid-row: span 2;
  }
  .photo-carousel-item.is-wide {
    grid-column: span 2;
  }
  .photo-carousel-item.is-full {
    grid-column: span 4;
    grid-row: span 2;
  }
  /* Every stretched frame keeps a ratio of its own. Where it shares a band with
     unstretched frames those are marginally taller and win, and the stretched one
     simply fills its area; where a band is nothing but stretched frames - two
     heroes, or one photo across all four columns - its own ratio is the only thing
     giving the rows height, and without it the band collapses to nothing.
     .is-hero inherits 3:2 from the base rule, which is what 2x2 works out to.
     Their photos come out of flow either way: left in it, a photo laid across two
     columns is wide enough that its own height grows the row it was meant to fit. */
  .photo-carousel-item.is-wide,
  .photo-carousel-item.is-full {
    aspect-ratio: 3 / 1;
  }
  .photo-carousel-item.is-hero img,
  .photo-carousel-item.is-wide img,
  .photo-carousel-item.is-full img {
    position: absolute;
    inset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-arrow, .carousel-arrow::before { transition: none; }
  .photo-carousel { scroll-behavior: auto; }
}

.photo-block .overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.0) 60%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
}


/* ===== TWO-COLUMN TEXT ===== */
.two-col {
  max-width: 1060px;
  margin: 0 auto;
  padding: 48px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  text-align: center;
}
.two-col .col .section-label {
  font-family: 'Tiller', sans-serif;
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  font-weight: 600;
  display: block;
}
.two-col .col p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 20px;
  text-wrap: pretty;
}


/* ===== GOLD DIVIDER ===== */
.gold-line {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto;
  opacity: 0.4;
}


/* ===== CTA SECTION ===== */
.cta-section {
  max-width: 740px;
  margin: 0 auto;
  padding: 64px 28px;
  text-align: center;
}
.cta-section h2 {
  font-family: 'Tiller', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 18px;
  letter-spacing: 0.125em;
  text-wrap: pretty;
  text-transform: uppercase;
}
.cta-section p {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 32px;
  line-height: 1.85;
  text-wrap: pretty;
}
.cta-btn {
  display: inline-block;
  color: var(--gold);
  background-color: var(--bg);
  border: 1px solid var(--gold);
  padding: 16px 26px 15px;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Tiller', 'Sweet Sans Pro', 'Lexend Deca', sans-serif;
  font-weight: 600;
  transition: color 0.35s ease, text-decoration-color 0.35s ease;
  text-decoration: underline solid transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.cta-btn:hover,
.cta-btn:focus-visible {
  color: var(--gold-dark);
  text-decoration-color: currentColor;
}
.cta-btn:active {
  color: var(--gold-dark);
}

/* CTA row layout */
.cta-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 32px;
}


/* ===== CREDENTIALS ROW ===== */
.credentials {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.credentials__item {
  font-family: 'Bruna', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: var(--teal);
  text-decoration: none;
  display: flex;
  align-items: center;
}
a.credentials__item:hover { opacity: 0.75; }
.credentials__logo {
  height: 20px;
  width: auto;
  display: block;
}
.credentials__logo--michelin { height: 14px; }
.credentials__logo--jbf { height: 32px; }
.credentials__sep {
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}


/* ===== HOURS BAR ===== */
.hours-bar {
  max-width: 800px;
  margin: 0 auto;
  padding: 52px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.hours-bar .col { text-align: center; }
.hours-bar .col:first-child {
  border-bottom: 1px solid var(--divider);
  padding-bottom: 32px;
}
.hours-bar .menu-btn {
  display: inline-block;
  color: var(--gold);
  background-color: var(--bg);
  border: 1px solid var(--gold);
  padding: 12px 22px 11px;
  font-family: 'Tiller', 'Sweet Sans Pro', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin: 5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.35s ease, text-decoration-color 0.35s ease;
  text-decoration: underline solid transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.hours-bar .menu-btn:hover,
.hours-bar .menu-btn:focus-visible {
  color: var(--gold-dark);
  text-decoration-color: currentColor;
}
.hours-bar .menu-btn:active {
  color: var(--gold-dark);
}
.hours-bar .label {
  font-family: 'Tiller', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 8px;
}
.hours-bar .value {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
}
.hours-bar .st-logo-img {
  /* The snake is tall and narrow where the sister sites' marks are wide. */
  height: 92px;
  width: auto;
  opacity: 1;
  display: none;
}
.hours-bar .st-logo {
  font-family: 'Tiller', sans-serif;
  font-size: 40px;
  color: var(--gold);
  opacity: 0.35;
  font-weight: 600;
}


/* ===== CONTENT CARDS (for menu, press, etc.) ===== */
.card-grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.card {
  background: var(--bg-alt);
  border: 1px solid var(--divider);
  padding: 32px;
  transition: border-color 0.3s;
}
.card:hover { border-color: var(--gold-dark); }
.card h3 {
  font-family: 'Tiller', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}
.card p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  text-wrap: pretty;
}


/* ===== INFO BLOCK (hours, contact details) ===== */
.info-grid {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.info-block .info-label {
  font-family: 'Tiller', sans-serif;
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
  font-weight: 600;
}
.info-block p + .info-label {
  margin-top: 40px;
}
.info-block p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
}
.info-block a {
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.3s;
}
.info-block a:hover { opacity: 0.7; }


/* ===== PRESS LOGOS ===== */
.press-intro,
.press-grid + .text-section {
  padding-left: 36px;
  padding-right: 36px;
}
.press-grid {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 0 60px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.press-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 28px;
  background: transparent;
  border-bottom: 1px solid var(--divider);
  border-left: 4px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s, background 0.25s;
}
.press-card:nth-of-type(odd) {
  border-right: 1px solid var(--divider);
}
.press-card:hover {
  border-left-color: var(--gold);
  background: var(--bg-alt);
}
.press-card--no-link { cursor: default; }
.press-card--no-link:hover {
  border-left-color: transparent;
  background: var(--bg);
}
.press-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.press-card__pub {
  font-family: 'Tiller', sans-serif;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.press-card__date {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  white-space: nowrap;
}
.press-card__excerpt {
  font-size: 14px;
  color: var(--white);
  line-height: 1.7;
  margin: 0;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.press-card__cta {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
  transition: opacity 0.2s;
}
.press-card:hover .press-card__cta { opacity: 1; }
.press-grid + .text-section a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ===== BLOG LISTING ===== */
.blog-grid {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
}
.blog-card {
  text-decoration: none;
  display: block;
  padding: 60px 0;
  border-bottom: 1px solid var(--divider);
}
.blog-card:first-child { border-top: 1px solid var(--divider); }
.blog-card:hover .blog-card-title { color: var(--gold-dark); }
.blog-card-body { }
.blog-card-title {
  font-family: 'Tiller', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  transition: color 0.2s;
}
.blog-card-category {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted, #9a7346);
  margin-bottom: 8px;
  font-family: 'Tiller', sans-serif;
}
.blog-card-date {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted, #9a7346);
  margin-bottom: 20px;
  font-family: 'Tiller', sans-serif;
}
.blog-card-excerpt {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}


/* ===== SINGLE POST ===== */
.post-hero {
  height: 55vh;
  min-height: 320px;
  max-height: 600px;
}
.post-hero .hero-content {
  bottom: 40px;
}
.post-hero .hero-content .post-date {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  font-family: 'Tiller', sans-serif;
}
.post-hero .hero-content h1 {
  font-size: 30px;
  text-wrap: pretty;
  margin-bottom: 0;
}
.post-intro-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 36px 24px 0;
  text-align: center;
}
.post-intro {
  font-size: 17px;
  line-height: 1.9;
  color: var(--text);
}
/* Fallback header for single posts without a featured image.
   Keeps a visible H1 so the document structure doesn't jump
   from <title> straight to H2. */
.post-header {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 28px 0;
  text-align: center;
}
.post-header .post-title {
  font-family: 'Bruna', 'Tiller', sans-serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.18em;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: pretty;
  margin: 0;
  text-indent: 0.18em;
}
.post-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 28px 60px;
}
.post-content p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.post-content h2 {
  font-family: 'Tiller', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--gold);
  margin: 40px 0 16px;
  letter-spacing: 0.125em;
  text-wrap: pretty;
  text-transform: uppercase;
}
.post-content h3 {
  font-family: 'Tiller', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
  margin: 30px 0 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-content a {
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.3s;
}
.post-content a:hover { opacity: 0.7; }
.post-content ul, .post-content ol {
  padding-left: 24px;
  margin-bottom: 22px;
}
.post-content li {
  font-size: 17px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 6px;
}
.post-content img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--divider);
}
.post-nav {
  max-width: 700px;
  margin: 0 auto;
/*  display: flex;*/
/*  justify-content: space-between;*/
  border-top: 1px solid var(--divider);
  padding: 20px 24px 40px;
}
.post-nav a {
  display: block;
}
.post-nav a:last-of-type {
  text-align: right;
}
.post-nav a:first-of-type {
  text-align: left;
  margin-bottom: 10px;
}
.post-nav a {
  color: var(--gold);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Tiller', sans-serif;
  transition: opacity 0.3s;
}
.post-nav a:hover { opacity: 0.7; }


/* ===== MAP EMBED ===== */
.map-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 24px;
}
.map-wrapper iframe {
  width: 100%;
  height: 400px;
  border: 1px solid var(--divider);
}


/* ===== FOOTER ===== */
footer {
  text-align: center;
  padding: 40px 24px;
  background-color: var(--bg-alt);
  border-top: 1px solid var(--footer-divider);
}
.footer-hours { display: block; margin-top: 2px; }
.footer-logo {
  height: 70px;
  width: auto;
  margin-bottom: 18px;
}
footer p {
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-wrap: pretty;
}
footer a {
  color: var(--text);
  text-decoration: none;
}
.footer-address,
.footer-phone {
  color: inherit;
  opacity: 1;
  transition: opacity 0.2s;
}
.footer-address:hover,
.footer-phone:hover { opacity: 0.8; }
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 14px;
}
.footer-links a {
  position: relative;
  display: inline-block;
  font-family: 'Bruna', 'Aguzzo', serif;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold);
  opacity: 1;
  transition: color 0.25s ease;
}
.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.footer-links a:hover { color: var(--gold-dark); }
.footer-links a:hover::after {
  transform: scaleX(1);
  background: var(--gold-dark);
}
.footer-copy {
  font-size: 11px;
  color: var(--text-light-band);
  opacity: 1;
  margin-top: 12px;
}
.footer-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-copy a:hover { color: var(--gold); }
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 14px 0;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  transition: background 0.3s, color 0.3s;
}
.footer-social a:hover {
  background: var(--gold);
  color: var(--bg);
}
.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
/* Inside the phone menu these are also nav links, so they pick up the link
   padding (which pushes the glyph off-center) and the hover underline. */
.nav-links .nav-footer .footer-social a { padding: 0; }
.nav-links .nav-footer .footer-social a::after { content: none; }


/* ===== FOOTER: CRAWFORD HOSPITALITY ===== */
.footer-hospitality {
  border-top: 1px solid var(--footer-divider);
  margin-top: 28px;
  padding-top: 22px;
}
.footer-hospitality p {
  color: var(--text-light-band);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.footer-hospitality p a {
  color: var(--text-light-band);
  border-bottom: 1px solid var(--footer-divider);
  padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}
.footer-hospitality p a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.footer-hospitality-link {
  background: transparent;
  border: 1px solid var(--footer-divider);
  color: var(--gold);
  cursor: pointer;
  display: inline-block;
  font-family: 'Tiller', 'Sweet Sans Pro', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 10px 20px;
  text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.footer-hospitality-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}


/* ===== LEGAL NOTICES =====
   Fine-print band at the end of page content, just above the footer —
   shown only on the menu and contact page templates (see footer.php). */
.footer-legal {
  margin-top: 48px;
  padding: 0 24px 30px;
  text-align: center;
}
.footer-legal p {
  color: var(--text);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 58ch;
  text-wrap: balance;
}
.footer-legal p + p {
  margin-top: 7px;
}

/* ===== RESTAURANTS MODAL ===== */
.restaurant-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
}
.restaurant-modal[hidden] { display: none; }
.restaurant-modal .modal-overlay {
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.restaurant-modal .modal-content {
  background: #ccc;
  border: 2px solid #555;
  max-width: 380px;
  width: calc(100% - 20px);
  position: relative;
  margin: calc(10px + env(safe-area-inset-top, 0px)) auto calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 15px 10px;
  z-index: 1;
}
.restaurant-modal .modal-close {
  background: transparent;
  border: none;
  color: #2a2a2a;
  cursor: pointer;
  font-size: 40px;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 15px;
  top: 5px;
  transition: color 0.3s;
}
.restaurant-modal .modal-close:hover { color: #555; }
.restaurant-modal h2,
.restaurant-modal h3 {
  font-family: 'Engravers Gothic', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}
.restaurant-modal h2 {
  color: #2a2a2a;
  font-size: 24px;
  line-height: 24px;
  margin: 0 auto 15px;
  text-align: center;
  letter-spacing: 2px;
  width: calc(100% - 80px);
}
.restaurant-modal h3 {
  color: #2a2a2a;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 2px;
  text-align: center;
}
.restaurant-modal p {
  color: #2a2a2a;
  font-family: 'News Gothic Std', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 24px;
  margin: 0 auto 5px;
  max-width: 320px;
  text-align: center;
}
/* Borrows the grid's 1px #555 so the button reads as part of the tile system. */
.restaurant-modal .modal-cta {
  border: 1px solid #555;
  color: #2a2a2a;
  display: block;
  font-family: 'Engravers Gothic', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 14px auto 4px;
  max-width: 300px;
  padding: 11px 24px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}
.restaurant-modal .modal-cta:hover {
  background: #555;
  color: #d9d9d9;
}
.restaurant-modal p a { color: var(--gold-dark); }
.restaurant-grid {
  display: grid;
  margin: 0 auto 15px;
  max-width: 300px;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  border: 1px solid #555;
  border-bottom: 0;
  border-right: 0;
}
.restaurant-grid a {
  background-position: center center;
  background-size: auto 85%;
  background-repeat: no-repeat;
  border-bottom: 1px solid #555;
  border-right: 1px solid #555;
  display: block;
  height: 140px;
  opacity: 0.8;
  transition: opacity 0.3s, background-size 0.3s;
}
.restaurant-grid a:hover {
  opacity: 1;
  background-size: auto 90%;
}
.restaurant-grid .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.restaurant-grid li.cns {
  background-color: #252728;
}
.restaurant-grid li.cns a { background-image: url('images/hospitality/cns.webp'); }
.restaurant-grid li.jl { background: #fff; }
.restaurant-grid li.jl a { background-image: url('images/hospitality/jolie.webp'); }
.restaurant-grid li.bdt { background-color: #f2ecdd; }
.restaurant-grid li.bdt a {
  background-image: url('images/hospitality/brodeto.webp');
  background-size: auto 95%;
}
.restaurant-grid li.bdt a:hover { background-size: auto 100%; }
.restaurant-grid li.st { background-color: #000; }
.restaurant-grid li.st a { background-image: url('images/hospitality/bst.webp'); }
/* Matches the grey baked into cg.webp so the logo panel blends into the tile. */
.restaurant-grid li.cg { background: #d9d9d9; }
.restaurant-grid li.cg a { background-image: url('images/hospitality/cg.webp'); }
.restaurant-grid li.cb {
  background-image: url('images/hospitality/cb-bg.webp');
  background-size: 800px auto;
}
.restaurant-grid li.cb a { background-image: url('images/hospitality/cb-logo.webp'); }

/* Two columns — the first tile in each row carries the left border. */
@media (min-width: 500px) and (max-width: 749px) {
  .restaurant-modal .modal-content { max-width: 620px; }
  .restaurant-grid {
    max-width: 540px;
    border-left: 0;
    grid-template-columns: 1fr 1fr;
  }
  .restaurant-grid li:nth-child(2n + 1) a { border-left: 1px solid #555; }
}

/* Three columns */
@media (min-width: 750px) {
  .restaurant-modal .modal-content { max-width: 800px; }
  .restaurant-grid {
    max-width: 740px;
    border-left: 0;
    grid-template-columns: repeat(3, 1fr);
  }
  .restaurant-grid li:nth-child(3n + 1) a { border-left: 1px solid #555; }
  .restaurant-modal p { max-width: 620px; }
}


/* ===== MENU PAGE ===== */
/* ===== MENU PAGE (drinks + spirits) =====
   The menu layout the sister sites share:
   - Page background and text from the colour tokens, Aguzzo body font
   - Section titles: Bruna, uppercase, gold, LEFT-aligned, no rule
   - Items rendered inline: plain name + italic <em> wrapping desc+price
   - Two-column grid on desktop
*/
/* Centred under the centred page title. */
.menu-tabs-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}
.menu-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.menu-tab {
  font-family: 'Bruna', 'Aguzzo', sans-serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1.5px solid var(--gold);
  padding: 10px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.menu-tab.active {
  background: var(--gold);
  color: var(--bg);
}
.menu-tab:hover:not(.active) {
  background: rgba(194, 150, 86, 0.08);
}
.menu-panel {
  display: none;
  padding: 32px 0 24px;
}
.menu-panel.active {
  display: block;
}
.menu-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}
.menu-section {
  display: block;
  width: 100%;
  margin: 0 0 44px;
  border: 0;
  border-image: none;
}
.menu-section-title {
  font-family: 'Bruna', 'Aguzzo', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.195em; /* ~3.5px at 18px */
  text-transform: uppercase;
  text-align: left;
  margin: 0 0 12px;
  line-height: 1.2;
}
.menu-section-note {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--text-light);
  text-transform: uppercase;
  margin: -4px 0 14px;
}
.menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 56px;
  row-gap: 0;
}
.menu-item-note {
  display: block;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  color: var(--text-light);
}
.menu-item {
  list-style: none;
  padding: 4px 0;
  border-bottom: none;
  font-family: 'Aguzzo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  text-wrap: pretty;
}
.menu-item-name {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.menu-item-meta {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-style: italic;
}
.menu-item-price {
  margin-left: 10px;
}
.menu-section--inline .menu-item-name {
  display: inline;
}

/* Breads "Name, description price" — all italic, single line, case preserved */
.menu-section--bread .menu-item-name {
  display: inline;
  font-style: italic;
}
.menu-section--bread .menu-item:not(.menu-item--no-desc) .menu-item-name::after {
  content: ', ';
}

/* Sides "name, description price" — all italic, single line */
.menu-section--inline-italic .menu-item-name {
  display: inline;
  font-style: italic;
  text-transform: lowercase;
}
.menu-section--inline-italic .menu-item-name::after {
  content: ', ';
}

/* 2-col row: two menu columns side by side */
.menu-row-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.menu-col {
  min-width: 0;
}


/* Wine sections — mixed-case names, italic region/vintage */
.menu-section--wine {
  margin: 0 0 44px;
}
.wine-styles-grid {
  columns: 1;
}
.wine-style-group {
  break-inside: avoid;
  margin-bottom: 28px;
}
.wine-style-group:last-child {
  margin-bottom: 0;
}
.menu-subsection-title {
  text-align: left;
  font-family: 'Bruna', 'Aguzzo', sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
  margin: 18px 0 8px;
}
.wine-style-group:first-child .menu-subsection-title {
  margin-top: 0;
}
.menu-section--wine .menu-items {
  grid-template-columns: 1fr;
}
.menu-section--wine .menu-item-name {
  font-family: inherit;
  font-style: italic;
}

/* Drinks page — two column layout (wines left, cocktails/beer/NA right) */
.drinks-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.drinks-col { min-width: 0; }
.drinks-two-col .menu-items { grid-template-columns: 1fr !important; column-gap: 0 !important; }
.drinks-two-col .wine-styles-grid { columns: 1 !important; }

/* Wines: one inline italic line per bottle */
.drinks-col--wines .menu-item--wine {
  padding: 2px 0;
  font-size: 15px;
  line-height: 1.55;
}
.drinks-col--wines .menu-item-line {
  font-style: italic;
}
.drinks-col--wines .menu-item--wine .menu-item-price {
  margin-left: 6px;
  font-style: normal;
}
.drinks-col--wines .menu-subsection-title {
  font-family: 'LittleBosquee', 'Bruna', 'Aguzzo', sans-serif;
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0.18em;
  font-weight: 400;
  text-transform: uppercase;
  margin: 18px 0 6px;
}

/* Featured Pour rendered as a small italic sub-block, not a major gold heading */
.drinks-col--wines .menu-section--wine-featured {
  margin: 4px 0 28px;
}
.drinks-col--wines .menu-section--wine-featured .menu-section-title {
  font-family: 'Aguzzo', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 2px;
}
.drinks-col--wines .menu-section--wine-featured .menu-section-rule { display: none; }
.drinks-col--wines .menu-section--wine-featured .menu-item--wine .menu-item-price {
  display: block;
  margin: 0;
}

/* Right column shared: centered sections */
.drinks-col--other .menu-section { text-align: center; margin: 0 0 32px; }
.drinks-col--other .menu-section-title { text-align: center; }
.drinks-col--other .menu-items { justify-items: center; }
.drinks-col--other .menu-item {
  padding: 6px 0 10px;
  text-align: center;
  max-width: 320px;
}
.drinks-col--other .menu-item-meta {
  display: block;
  font-style: italic;
  line-height: 1.5;
}
.drinks-col--other .menu-item-price {
  display: block;
  margin: 2px 0 0;
  font-style: normal;
}

/* Cocktails-only: Little Bosquee uppercase name */
.menu-section--cocktail .menu-item-name {
  display: block;
  font-family: 'LittleBosquee', 'Bruna', 'Aguzzo', sans-serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}

/* ===== MENU PAGE: NAME-AND-PRICE ROWS =====
   Every drink on the Menu page reads in three steps: the name and its price on
   one line, joined by a dotted leader; the ingredients (or, for a wine, the wine
   and its region) beneath, smaller, upright and in the quieter bronze; then any
   note. Cocktails lead, full width in columns (one on phones, two from 700px,
   three from 1000px) under a heading set between hairline rules; the wines and
   the shorter lists follow in two columns, each heading carrying a rule to its
   right. */
.drinks-feature { margin: 0 0 8px; }
.drinks-feature-rule { margin: 8px auto 48px; }
.menu-section--cocktail-grid .menu-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 22px;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* balances the tracking after the last letter */
  text-align: center;
  margin: 8px 0 40px;
}
.menu-section--cocktail-grid .menu-section-title::before,
.menu-section--cocktail-grid .menu-section-title::after {
  content: '';
  flex: 1 1 0;
  max-width: 200px;
  height: 1px;
  background: var(--divider);
}
/* Two classes, so these win over the single-column list rule below. */
.menu-section--leader.menu-section--cocktail-grid .menu-items {
  column-gap: 56px;
  row-gap: 30px;
}
@media (min-width: 700px) {
  .menu-section--leader.menu-section--cocktail-grid .menu-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .menu-section--leader.menu-section--cocktail-grid .menu-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Headings below the cocktails: left-aligned, a hairline running to the right. */
:is(.menu-page--drinks, .menu-page--fine-wine) .drinks-two-col .menu-section-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  text-align: left;
  margin: 0 0 22px;
}
:is(.menu-page--drinks, .menu-page--fine-wine) .drinks-two-col .menu-section-title::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: var(--divider);
}
:is(.menu-page--drinks, .menu-page--fine-wine) .drinks-two-col .menu-section { text-align: left; margin: 0 0 44px; }
/* Spirits are a name and a price, no description, so their rows sit closer. */
.menu-page--fine-wine .menu-section--leader .menu-items { row-gap: 12px; }
.menu-page--drinks .drinks-col--wines .menu-subsection-title {
  font-family: 'Sweet Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--gold-light);
  text-align: left;
  margin: 26px 0 14px;
}
.menu-page--drinks .drinks-col--wines .wine-style-group:first-child .menu-subsection-title { margin-top: 0; }

.menu-section--leader .menu-items,
.menu-page--drinks .menu-section--wine .menu-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  row-gap: 22px;
}
.menu-page .menu-items .menu-item--leader {
  padding: 0;
  text-align: left;
  max-width: none;
  line-height: 1.35;
}
.menu-item--leader .menu-item-head {
  display: flex;
  align-items: baseline;
  align-items: last baseline; /* a name on two lines keeps its price on the last */
  gap: 10px;
}
.menu-page .menu-item--leader .menu-item-name {
  display: block;
  flex: 0 1 auto;
  font-family: 'Sweet Sans Pro', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.menu-item--leader .menu-item-leader {
  flex: 1 1 16px;
  min-width: 16px;
  border-bottom: 1px dotted var(--divider);
  transform: translateY(-4px);
}
.menu-page .menu-item--leader .menu-item-price {
  display: inline;
  flex: 0 0 auto;
  margin: 0;
  font-family: 'Sweet Sans Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}
.menu-item--leader .menu-item-desc {
  margin: 7px 0 0;
  font-family: 'Sweet Sans Pro', sans-serif;
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.07em;
  line-height: 1.65;
  color: var(--text-light);
  text-wrap: pretty;
}
.menu-item--leader .menu-item-note {
  margin: 5px 0 0;
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* Inline parenthetical tag (e.g. "(spirit free)") next to the name */
.menu-item-name .menu-item-tag {
  font-family: 'Aguzzo', sans-serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--gold);
  margin-left: 4px;
}

/* On Tap / Cans & Bottles: plain centered name */
.menu-section--plain-centered .menu-item-name {
  display: block;
  font-family: 'Aguzzo', sans-serif;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}

/* Non-Alcoholic: price inline with name */
.menu-section--inline-price .menu-item-name { display: inline; margin: 0; }
.menu-section--inline-price .menu-item-meta {
  display: inline;
  font-style: normal;
}
.menu-section--inline-price .menu-item-price {
  display: inline;
  margin: 0 0 0 6px;
}

@media (min-width: 900px) {
  .drinks-two-col {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }
}

/* "Explore Fine Wine & Spirits" — closes the Drinks page's right column */
.menu-explore-wrap {
  text-align: center;
  padding: 20px 0 0;
}

/* Fine Wine & Spirits page — the Drinks layout carrying much longer lists:
   a wider bottle column and closer rows on the right keep the two columns
   ending near each other */
.menu-page--fine-wine .drinks-col--other .menu-item:not(.menu-item--leader) {
  padding: 3px 0 6px;
}
.menu-page--fine-wine .menu-section-note {
  max-width: 300px;
  margin: -4px auto 10px;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  text-wrap: pretty;
}
@media (min-width: 900px) {
  /* Sous Terre's Spirits list fills both columns with the same centred style,
     so they share the width equally. */
  .menu-page--fine-wine .drinks-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* Its built-in header photo is cropped to the labels (the default centered crop).
   Wide screens scale the photo up, which lifts the heading onto the wine names,
   so there the photo moves up a little to keep the heading just below them */
@media (min-width: 1400px) {
  .page-hero img[src$="images/wine.jpg"] {
    object-position: center 55%;
  }
}

/* Compact sections (Sauces & Additions, Accompaniments) */
.menu-section--compact .menu-item {
  padding: 9px 0;
  border-bottom: none;
}
.menu-section--compact.sauces .menu-items {
  margin: 0 auto;
  max-width: 300px;
}
.menu-section--compact .menu-item-name {
  font-family: 'Sweet Sans Pro', 'Lexend Deca', sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--text);
}
.menu-section--compact .menu-item-price {
  font-size: 12px;
}
.menu-disclaimer {
  padding: 0 0 24px;
  text-align: center;
}
.menu-disclaimer p {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-light);
  line-height: 1.7;
  text-wrap: pretty;
}
.menu-reservation-wrap {
  text-align: center;
  padding: 8px 0 32px;
}

/* Phones (single column): centered, as the sister sites' mobile menus.
   Each item reads as a pair — name on its own line, smaller italic
   description + price beneath — and the gap between items is wider than the
   gap inside one, so the list doesn't run together as a block of text. */
@media (max-width: 699px) {
  .menu-section-title,
  .menu-section-note,
  .menu-subsection-title {
    text-align: center;
  }
  .menu-section-title { margin-bottom: 16px; }

  .menu-item {
    padding: 0 0 10px;
    text-align: center;
  }
  .menu-item-name,
  .menu-section--inline .menu-item-name {
    display: block;
  }
  .menu-item-meta {
    display: block;
    font-size: 14px;
  }
  .menu-item-price { margin-left: 6px; }

  /* Breads + Sides stay one italic line per item, at the description size */
  .menu-section--bread .menu-item,
  .menu-section--inline-italic .menu-item {
    font-size: 14px;
    line-height: 1.45;
  }
  .menu-section--bread .menu-item-meta,
  .menu-section--inline-italic .menu-item-meta {
    display: inline;
    font-size: inherit;
  }

  /* Wines wrap to two centered lines, so separate the bottles a little */
  .drinks-col--wines .menu-item--wine {
    padding: 0 0 8px;
    line-height: 1.45;
  }
}


/* ===== 404 PAGE ===== */
.error-404 {
  max-width: 600px;
  margin: 0 auto;
  padding: 120px 40px;
  text-align: center;
}
.error-404 h1 {
  font-family: 'Tiller', sans-serif;
  font-size: 100px;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 20px;
}
.error-404 h2 {
  font-family: 'Tiller', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.125em;
  text-transform: uppercase;
  text-wrap: pretty;
  margin-bottom: 16px;
}
.error-404 p {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 32px;
  line-height: 1.8;
  text-wrap: pretty;
}


/* ===== RESPONSIVE ===== */

/* Mobile-only refinements (below desktop nav breakpoint) */
@media (max-width: 899px) {

  /* Photo modules: force equal heights for all blocks in a row */
  .photo-block,
  .photo-block.tall {
    height: 300px;
  }
  .photo-section.single {
    padding: 0 24px;
  }
  .photo-section.single .photo-block { height: 320px; }
  .photo-section { gap: 2px; }

  /* Text sections: give content-heavy pages more room to breathe */
/*  .text-section { padding: 56px 0; }*/
/*  .text-section h2 { font-size: 24px; }
  .two-col .col p { line-height: 1.9; }
  .text-section.wide.wp-content {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .text-section.wide.wp-content p {
    max-width: calc(100% - 50px);
    margin-bottom: 30px;
  }
  .text-section.wide.wp-content h2,
  .text-section.wide.wp-content h3 {
    max-width: calc(100% - 50px);
    margin-bottom: 24px;
  }
  .text-section.wide.wp-content h2:not(:first-child),
  .text-section.wide.wp-content h3:not(:first-child) {
    margin-top: 56px;
  }*/

  /* CTAs */
  .cta-section h2 { font-size: 26px; }

  /* Credentials: stack vertically on mobile with bullets as their own line between items */
  .credentials {
    flex-direction: column;
    gap: 10px;
    padding: 0 24px 40px;
  }
  .credentials__item {
    font-size: 12px;
    letter-spacing: 1.8px;
    text-align: center;
  }
  .credentials__sep {
    font-size: 20px;
    line-height: 1;
  }
  .credentials__logo { height: 18px; }
  .credentials__logo--michelin { height: 12px; }
  .credentials__logo--jbf { height: 28px; }

  /* Hours bar */
  .hours-bar .label { letter-spacing: 0.2em; }

  /* Footer: more air between groups */
  footer { padding: 40px 24px 32px; }
}


@media (min-width: 400px) {
  .nav-footer {
    margin-top: 4px;
  }
  .nav-links {
    gap: 22px 36px;
/*    margin-right: 20px;*/
    padding: 28px calc(100% - 640px) 0;
  }
}

@media (min-width: 500px) {
  .nav-btn-persistent {
    display: inline-block; flex-shrink: 0;
    position: relative;
    margin: 0 0 0 auto;
    top: auto; left: auto; right: auto;
  }
  .nav-toggle { margin-left: 20px; }
  .nav-btn-menu { display: none; }
}

@media (min-width: 450px) {
  .hours-bar { grid-template-columns: 1fr 1fr; gap: 0; }
  .hours-bar .col:first-child {
    border-bottom: none;
    border-right: 1px solid var(--divider);
    padding-bottom: 0;
    padding-right: 24px;
  }
  .hours-bar .col:last-child { padding-left: 24px; }  
  
  .hero-content .hero-sub em {
    display: inline;
    height: auto;
    overflow: visible;
    width: auto;
  }
}

.footer-links-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.footer-links-pair a + a::before {
  content: "|";
  position: absolute;
  left: -13px;
  top: 0;
  color: var(--gold);
  opacity: 0.75;
  pointer-events: none;
}
.footer-links-pair--lg {
  flex-direction: column;
  gap: 10px;
}
.footer-links-pair--lg a + a::before {
  display: none;
}

@media (min-width: 480px) {
  .press-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { padding: 40px 24px; }
  .nav-logo,
  nav#main-nav .custom-logo,
  nav#main-nav .custom-logo-link img { height: 44px; }
  .hours-bar .col { max-width: 164px; }
  /* Sous Terre's hours are three long lines; this column takes them unbroken. */
  .hours-bar .col:last-child { max-width: 250px; }
  .hours-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 30px 0px;
    max-width: 680px;
    margin: 0 auto;
  }
  .hours-bar .st-logo-img { display: block; }
  .hours-bar .col:first-child { border-right: none; border-bottom: none; padding-right: 0; padding-bottom: 0; }
  .hours-bar .col:last-child { padding-left: 0; }

  
}

@media (min-width: 650px) {
  .footer-links-pair--lg {
    flex-direction: row;
    gap: 20px;
  }
  .footer-links-pair--lg a + a::before {
    display: inline;
  }
  .hours-bar {
    gap: 60px;
  }
}

@media (min-width: 900px) {
  footer {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-areas:
      "logo  info    links"
      "logo  social  links"
      "hosp  hosp    hosp "
      "copy  copy    copy ";
    justify-content: center;
    align-items: start;
    column-gap: 30px;
    row-gap: 0;
    padding: 52px 80px;
  }
  .footer-logo {
    grid-area: logo;
    height: 100px;
    align-self: start;
    margin-bottom: 0;
  }
  .footer-info {
    grid-area: info;
    text-align: left;
  }
  .footer-info p {
    font-size: 13px;
    margin-bottom: 4px;
    white-space: nowrap;
  }
  .footer-social {
    grid-area: social;
    justify-content: flex-start;
    margin: 10px 0 0;
  }
  .footer-links {
    grid-area: links;
    align-self: start;
    align-items: flex-end;
    gap: 4px;
    margin: 0 0 0 40px;
    text-align: right;
  }
  .footer-links-pair {
    justify-content: flex-end;
    width: 100%;
  }
  .footer-links-pair--lg {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .footer-links-pair--lg a + a::before {
    display: none;
  }
  .footer-hospitality {
    grid-area: hosp;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 26px;
  }
  .footer-hospitality p {
    margin-bottom: 0;
  }
  .footer-legal p {
    max-width: 84ch;
  }
  .footer-copy {
    grid-area: copy;
    margin-top: 20px;
    text-align: center;
  }
}

@media (min-width: 500px) and (max-width: 899px) {
  body.nav-open .nav-links,
  body.nav-open nav .menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
  }
  body.nav-open .nav-links > span:last-of-type:nth-of-type(odd),
  body.nav-open .nav-links > a:last-of-type:nth-of-type(odd),
  body.nav-open nav .menu li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .nav-footer { grid-column: 1 / -1; }
}

@media (min-width: 700px) {

  .info-grid { grid-template-columns: 1fr 1fr; gap: 50px; padding: 40px; }
  
  .menu-tabs {
    gap: 12px;
  }
  .menu-tab {
    font-size: 20px;
    letter-spacing: 0.1em;
    padding: 10px 28px;
  }

  .menu-page { padding: 8px 60px 64px; }

  .menu-items { grid-template-columns: 1fr 1fr; }
  .menu-item { padding: 4px 0; }
  .menu-row-2col {
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    align-items: start;
  }
  .menu-row-2col .menu-items {
    grid-template-columns: 1fr;
  }
  .wine-styles-grid {
    columns: 1;
  }
  .wine-style-group:first-child .menu-subsection-title:first-child {
    margin-top: 0;
  }
  .menu-section--compact.sauces .menu-items {
      column-gap: 60px;
      margin: 0 auto;
      max-width: 600px;
  }
  .menu-disclaimer { padding: 0 0 24px; }
}

@media (min-width: 850px) {
  nav#main-nav {
    flex-wrap: nowrap;
    gap: 20px;
    min-width: 360px;
    padding: 14px 40px;
  }
  body.nav-open .nav-links {
    display: flex;
    margin: 0 0 0 auto;
  }
  .nav-logo,
  nav#main-nav .custom-logo,
  nav#main-nav .custom-logo-link img {
    height: 52px;
  }
  .nav-toggle { display: none; }
  .nav-links {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0 32px;
    padding: 0;
    margin-left: auto;
    top: auto;
    left: auto;
    right: auto;
    max-width: 360px;
  }
  .nav-links a { font-size: 13px; letter-spacing: 2.5px; padding-top: 4px; padding-bottom: 4px; }
  .nav-btn-persistent { margin-left: 0; order: 99; }
  .nav-btn-menu { display: none; }
  .nav-footer { display: none; }
  nav .menu {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0 36px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }
  nav .menu li a { font-size: 13px; letter-spacing: 2.5px; }

  .menu-items { grid-template-columns: 1fr 1fr; column-gap: 80px; }
  .menu-item { padding: 4px 0; }
  .menu-row-2col { gap: 0 80px; }
  .menu-row-2col .menu-items { grid-template-columns: 1fr; column-gap: 0; }
  .menu-section--compact.sauces .menu-items {
    grid-template-columns: 1fr 1fr 1fr;
      margin: 0 auto;
      max-width: 900px;
  }
  .hero-content h1 { font-size: 76px; letter-spacing: 0.28em; text-indent: 0.28em; }
  .hero-content .hero-eyebrow { font-size: 14px; letter-spacing: 0.4em; margin-bottom: 24px; }
  .hero-content .hero-divider { width: 72px; margin-bottom: 22px; }
  .hero-content .hero-sub { font-size: 18px; }
  .hero-content .hero-meta { font-size: 16px; }

  /* Taller on desktop than Brodeto's 45vh / 450px (your call, 2026-11-07). */
  .page-hero { height: 55vh; min-height: 340px; max-height: 560px; }
  .page-hero .hero-content { bottom: 40px; }
  .page-hero .hero-content h1 { font-size: 42px; }

/*  .text-section { padding: 40px; }*/
  .text-section h2 { font-size: 28px; }

  .page-id-60 .text-section.wp-content > .wp-block-image {
    width: min(1320px, calc(100vw - 120px));
  }

  .photo-block { height: 420px; }
  .photo-block.tall { height: 500px; }
  .photo-section.single .photo-block { height: 400px; }

  .two-col { grid-template-columns: 1fr 1fr; gap: 80px; padding: 70px 40px; }
  .two-col .col .section-label { font-size: 16px; }

  .cta-section { padding: 60px 40px; }


  .card-grid { grid-template-columns: 1fr 1fr; padding: 40px; }

  .press-grid { grid-template-columns: 1fr 1fr; }

  .blog-grid { padding: 80px 40px; }

  .post-hero { height: 60vh; min-height: 380px; }
  .post-hero .hero-content h1 { font-size: 42px; }
  .post-intro-wrap { padding: 50px 40px 0; }
  .post-content { padding: 0 0 70px; }
  .post-nav { padding: 30px 40px 60px; }

  .map-wrapper { padding: 0 40px 40px; }
}

@media (max-width: 767px) {
  .page-id-60 .text-section.wp-content > .wp-block-image {
    width: 100%;
    aspect-ratio: 1.7 / 1;
    margin: 30px 0;
    transform: none;
  }
}

@media (min-width: 900px) {
  /* Hero steps up here rather than at 850px — the breakpoint still follows
     Crawford Brothers even though the heights no longer do. */
  .hero { height: 80vh; min-height: 500px; max-height: 720px; }
  .hero-content { bottom: 130px; }
}


@media (min-width: 1180px) {
  .nav-links { flex-wrap: nowrap; max-width: 660px; }
  nav#main-nav .menu { flex-wrap: nowrap; }
}

@media (min-width: 1250px) {
  /* Second step up. At 900px a hero this tall is nearly square, so the full
     height is held back until there is width to justify it. min-height stays at
     the 500px set by the 900px step.
     Both numbers have to move together to change this visibly: on a 900px-tall
     laptop 87vh resolves to 783px, under the 810px cap, so vh is what binds
     there and max-height only matters on tall desktop monitors.
     Known consequence, chosen deliberately: at this height the video still
     effectively fills a laptop viewport, leaving only a few pixels of the copy
     beneath it showing. If that ever needs softening, add a scroll cue rather
     than shrinking the hero — the height is the point. */
  .hero { height: 87vh; max-height: 810px; }
}

@media (min-width: 1350px) {
  nav#main-nav {
    padding: 14px calc(50% - 660px);
  }
  .nav-links {
     max-width: 730px;
  }
  .nav-links a:not(.nav-btn) {
      font-size: 17px;
      letter-spacing: 3px;
  }
}
/* ── OpenTable widget ──────────────────────────────────────────────────────── */
.opentable-widget { max-width: 100%; }
.opentable-widget > div { max-width: 100%; }
.opentable-widget iframe { max-width: 100%; border: 0; display: block; }

/* ===== PAGE TITLE (interior pages' h1, matching Crawford Brothers: below the hero
   photograph on Menu, Spirits and Private Events, on its own on Location) ===== */
.page-title {
  text-align: center;
  padding: 48px 20px 0;
}
.page-title h1 {
  font-family: 'Tiller', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.125em;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: pretty;
}
@media (min-width: 900px) {
  .page-title { padding-top: 64px; }
  .page-title h1 { font-size: 42px; }
}
.menu-disclaimer p + p { margin-top: 8px; }
.payment-disclaimer {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 32px;
}

/* ===== CONTACT: VISIT GRID (matching Crawford Brothers) ===== */
.visit-grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  justify-items: center;
}
.visit-book { width: 100%; }
.visit-book--photo img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
}
.visit-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  width: 100%;
}
.opentable-widget-reservation { display: flex; justify-content: center; }
.visit-book noscript p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
  padding: 20px;
  text-align: center;
}
.visit-book a { color: var(--gold); }
/* 224px is the widget iframe's fixed width. */
@media (min-width: 750px) {
  .visit-grid {
    grid-template-columns: 1fr 224px;
    gap: 48px;
    padding: 32px 24px 48px;
    justify-items: stretch;
    align-items: start;
  }
}
@media (min-width: 900px) {
  .visit-info { grid-template-columns: 1fr 1fr; gap: 44px; }
}
.opentable-widget-private-dining { margin: 30px auto 0; max-width: 700px; }