/* ============================================================
   COSTA FUEGO, Ember & Oak design system (site-wide)
   Cinematic dark supper club: near-black, walnut, molten bronze,
   candlelight. Fraunces (display, italic-forward) + Jost (body).
============================================================ */

:root {
  --void:       #0C0B09;
  --coal:       #16150F;
  --walnut:     #2A1C12;
  --bronze:     #9A6530;
  --champagne:  #C9A063;
  --ember:      #E8A04A;
  --parchment:  #EDE3D2;
  --parchment-dim: rgba(237,227,210,0.60);
  --rule:       rgba(154,101,48,0.40);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;

  --max-w: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-gap: clamp(5rem, 10vw, 9rem);
}

/* ============ RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--void);
  color: var(--parchment);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* Anchor targets clear the fixed header when jumped to */
[id] { scroll-margin-top: 6rem; }

a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============ UTILITY ============ */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  display: block;
  margin-bottom: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ============ HEADER / NAV ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.site-header.scrolled,
.site-header.solid {
  background: rgba(12,11,9,0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--rule);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  letter-spacing: 0.04em;
  color: var(--parchment);
  line-height: 1;
  white-space: nowrap;
}

.wordmark span { color: var(--ember); }

.wordmark img { height: 2.1rem; width: auto; }

@media (max-width: 600px) {
  .wordmark img { height: 1.65rem; }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}

.main-nav a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  transition: color 0.2s;
}

.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--parchment); }

.btn-reserve {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--bronze);
  color: var(--parchment);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.btn-reserve:hover { background: var(--bronze); color: var(--void); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem; height: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem;
  z-index: 101;
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--parchment);
  transition: transform 0.25s, opacity 0.25s;
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12,11,9,0.98);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.25rem;
    z-index: 99;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { font-size: 1rem; letter-spacing: 0.2em; }
  .main-nav .btn-reserve { font-size: 0.875rem; padding: 0.85rem 2rem; }
}

/* ============ BUTTONS ============ */
.btn-primary {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  background: var(--bronze);
  color: var(--void);
  border: 1px solid var(--bronze);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  display: inline-block;
}

.btn-primary:hover { background: var(--ember); border-color: var(--ember); }

.btn-ghost {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border: 1px solid rgba(237,227,210,0.3);
  color: var(--parchment);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
  background: transparent;
}

.btn-ghost:hover { border-color: var(--champagne); color: var(--champagne); }

/* ============ HERO (homepage) ============ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.05);
  transition: transform 12s ease-out;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 40% 60%, rgba(232,160,74,0.12) 0%, transparent 65%),
    /* Left scrim. The hero copy sits over the lit part of the building, which
       was costing the paragraph its legibility once Scott's longer Sep 2026
       copy went in. Fades out by ~84% so the CF sign and string lights on the
       right stay clean. */
    linear-gradient(to right, rgba(12,11,9,0.88) 0%, rgba(12,11,9,0.62) 34%, rgba(12,11,9,0.15) 66%, transparent 84%),
    linear-gradient(to top, rgba(12,11,9,0.96) 0%, rgba(12,11,9,0.55) 40%, rgba(12,11,9,0.25) 100%);
}

/* Mobile framing. Portrait phones crop this landscape photo to about 31% of its
   width, and centred on 50% that window misses the CF sign entirely (it sits at
   roughly 71% across). Scott flagged it Sep 1 2026. 76% puts the whole sign just
   right of centre and still keeps the lit wood wall. The horizontal scrim also
   eases off here, because on a phone the text sits at the bottom where the
   vertical gradient is already almost opaque, so the scrim was only dimming the
   sign for no benefit. */
@media (max-width: 700px) {
  .hero__bg { background-position: 76% 40%; }
  .hero__bg::after {
    background:
      radial-gradient(ellipse 80% 60% at 40% 60%, rgba(232,160,74,0.12) 0%, transparent 65%),
      linear-gradient(to right, rgba(12,11,9,0.45) 0%, rgba(12,11,9,0.15) 45%, transparent 75%),
      linear-gradient(to top, rgba(12,11,9,0.97) 0%, rgba(12,11,9,0.72) 42%, rgba(12,11,9,0.30) 100%);
  }
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: var(--gutter);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  max-width: 900px;
}

.ember-bloom {
  position: absolute;
  left: -6vw;
  bottom: 3rem;
  width: min(110vw, 900px);
  height: min(70vh, 600px);
  background: radial-gradient(ellipse 55% 45% at 42% 55%, rgba(232,160,74,0.18) 0%, rgba(154,101,48,0.08) 40%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}

.cf-monogram {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(0.7rem, 1.5vw, 0.875rem);
  letter-spacing: 0.35em;
  color: var(--bronze);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cf-monogram::before {
  content: '';
  display: block;
  width: 2px;
  height: 2.5rem;
  background: linear-gradient(to bottom, var(--ember), var(--bronze));
  flex-shrink: 0;
}

/* Headline copy is Scott's (Sep 1 2026). It is a descriptive positioning
   statement rather than the old three-word shout, so it is set upright at a
   much smaller size: "Japanese-Influenced." is 20 characters and the old
   12vw / 10.5rem scale overflowed badly. Scott's note was that it read too
   large, so the ceiling here is deliberately about half the old one. */
.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.55rem, 6.4vw, 3.9rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--parchment);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}

.hero__headline em { color: var(--ember); font-style: italic; }

/* Sushi / Live Fire / Craft Cocktails. Carries the ember accent that used to
   live on the last word of the headline. */
.hero__tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.875rem, 2.3vw, 1.35rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: 1.6rem;
}

.hero__tagline span {
  color: var(--ember);
  margin-inline: 0.5em;
  font-size: 1.25em;
  line-height: 0;
  vertical-align: -0.02em;
}

/* "No park admission required to dine" is the single biggest objection this
   restaurant has to answer, so Scott promoting it out of body copy into its
   own badge is right. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(232, 160, 74, 0.45);
  color: var(--ember);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.6875rem, 1.5vw, 0.8125rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.25;
  background: rgba(232, 160, 74, 0.06);
  max-width: 100%;
}

.hero__badge svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
}

/* Measured, not guessed: at 320px the tagline and the badge both ran wider
   than the available 280px. Tracking is the expensive part on a 34-character
   uppercase string, so it comes down first, and the badge is allowed to wrap
   to two lines inside its border as a hard backstop against overflow. */
@media (max-width: 480px) {
  .hero__tagline { font-size: 0.8125rem; letter-spacing: 0.11em; }
  .hero__tagline span { margin-inline: 0.35em; }
  .hero__badge {
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }
  .hero__badge svg { width: 1.15rem; height: 1.15rem; }
}

/* 320px (iPhone SE 1st gen, Galaxy Fold cover). Measured: the tagline ran 284px
   against 280px available once it was enlarged for Scott. Tracking comes off
   before size does, since the wide tracking is what makes it expensive. */
@media (max-width: 360px) {
  .hero__tagline { font-size: 0.75rem; letter-spacing: 0.08em; }
  .hero__tagline span { margin-inline: 0.28em; }
}

.hero__sub {
  font-weight: 300;
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
  color: rgba(237,227,210,0.80);
  /* Widened from 38ch for Scott's longer Sep 2026 copy; 38ch ran it to seven
     lines and pushed the CTAs off a short viewport. */
  max-width: 48ch;
  line-height: 1.65;
  margin-bottom: 0;
  letter-spacing: 0.01em;
}

.hero__ctas {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  right: var(--gutter);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.scroll-cue span {
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  writing-mode: vertical-rl;
  font-weight: 500;
}

.scroll-cue::after {
  content: '';
  display: block;
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--bronze), transparent);
  animation: line-drop 1.8s ease-in-out infinite;
}

@keyframes line-drop {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ============ PAGE HERO (interior pages) ============ */
.page-hero {
  position: relative;
  min-height: clamp(20rem, 55vh, 30rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,11,9,0.97) 0%, rgba(12,11,9,0.55) 55%, rgba(12,11,9,0.35) 100%);
}

.page-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  padding-top: 8rem;
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.75rem, 8vw, 6rem);
  line-height: 0.92;
  color: var(--parchment);
}

.page-hero__title em { color: var(--ember); }

.page-hero__sub {
  margin-top: 1.25rem;
  font-size: clamp(0.9375rem, 1.8vw, 1.125rem);
  color: var(--parchment-dim);
  max-width: 52ch;
}

/* ============ SECTIONS ============ */
.section { padding-block: var(--section-gap); }
.section--coal { background: var(--coal); }
.section--void { background: var(--void); }
.section--walnut { background: var(--walnut); }

.section--ruleleft { position: relative; overflow: hidden; }
.section--ruleleft::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--bronze), transparent);
}

.section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 0.95;
  color: var(--parchment);
}

.section-title em { color: var(--ember); }

.section-sub {
  margin-top: 1.25rem;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--parchment-dim);
  max-width: 60ch;
  line-height: 1.8;
}

/* Two-column feature (text + image) */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.feature__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.05;
  color: var(--parchment);
  margin-bottom: 1.5rem;
}

.feature__body {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--parchment-dim);
  max-width: 46ch;
  line-height: 1.8;
}

.feature__body p + p { margin-top: 1em; }

.feature__body strong { color: var(--champagne); font-weight: 500; }

.feature__quote {
  border-left: 2px solid var(--bronze);
  padding-left: 1.5rem;
  margin-top: 2rem;
}

.feature__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--champagne);
  line-height: 1.5;
}

.feature__image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}

.feature__image--landscape { aspect-ratio: 4/3; }

.feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(0.92);
}

.feature__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(154,101,48,0.15), transparent 50%);
  pointer-events: none;
}

.feature__cta { margin-top: 2rem; }

@media (max-width: 720px) {
  .feature { grid-template-columns: 1fr; }
  .feature__image { aspect-ratio: 4/3; order: -1; }
}

/* ============ IMAGE BREAK BAND ============ */
.img-break {
  position: relative;
  height: clamp(20rem, 45vw, 36rem);
  overflow: hidden;
}

.img-break__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.55) saturate(1.15);
}

.img-break__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(12,11,9,0.5) 0%, rgba(12,11,9,0.2) 50%, rgba(12,11,9,0.7) 100%);
}

.img-break__headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.5rem, 8vw, 6.5rem);
  color: var(--parchment);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-align: center;
  padding-inline: var(--gutter);
}

.img-break__headline span { color: var(--ember); }

/* Video variant of the full-bleed break. Same geometry as .img-break so the
   two are interchangeable; the video carries its own grade, so it needs less
   brightness knockdown than a raw photo does. */
.img-break__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.72) saturate(1.05);
  display: block;
}

/* Inline feature videos (inside .feature__image). Kept in CSS rather than
   inline styles so the poster/loading states stay consistent everywhere. */
.feature-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--coal);
}

/* ============ CARD GRID ============ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
}

.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--coal);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: background 0.2s;
}

.card:hover { background: var(--walnut); }

.card__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  margin: calc(-1 * clamp(1.5rem, 3vw, 2.5rem));
  margin-bottom: 0;
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.88);
  transition: transform 0.5s ease, filter 0.3s;
}

.card:hover .card__img img { transform: scale(1.04); filter: brightness(0.9) saturate(1); }

.card__label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-top: 0.5rem;
}

.card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--parchment);
  line-height: 1.2;
}

.card__desc {
  font-size: 0.875rem;
  color: var(--parchment-dim);
  line-height: 1.65;
  flex: 1;
}

.card__link {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
}

.card__link:hover { color: var(--ember); }

@media (max-width: 900px) {
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
}

/* ============ MENU PAGES ============ */
.menu-intro {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--parchment-dim);
  max-width: 60ch;
  line-height: 1.8;
}

.menu-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

@media (max-width: 860px) {
  .menu-columns { grid-template-columns: 1fr; }
}

.menu-block { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.menu-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--champagne);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.menu-block__note {
  font-size: 0.8125rem;
  color: var(--parchment-dim);
  font-style: italic;
  margin: 0.5rem 0 0.75rem;
}

.menu-item {
  padding-block: 0.9rem;
  border-bottom: 1px solid rgba(154,101,48,0.18);
}

.menu-item__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.menu-item__name {
  font-size: 1rem;
  font-weight: 400;
  color: var(--parchment);
  letter-spacing: 0.02em;
}

.menu-item__tags {
  display: inline-flex;
  gap: 0.35rem;
  margin-left: 0.5rem;
  vertical-align: 0.1em;
}

.tag {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--rule);
  color: var(--champagne);
}

.tag--spicy { color: #E86A4A; border-color: rgba(232,106,74,0.5); }
.tag--veg   { color: #9EB77C; border-color: rgba(158,183,124,0.45); }

.menu-item__price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ember);
  white-space: nowrap;
  flex-shrink: 0;
}

.menu-item__dots {
  flex: 1;
  border-bottom: 1px dotted rgba(154,101,48,0.35);
  transform: translateY(-0.3em);
  min-width: 1.5rem;
}

.menu-item__desc {
  font-size: 0.8438rem;
  color: var(--parchment-dim);
  line-height: 1.6;
  margin-top: 0.3rem;
  max-width: 56ch;
}

.menu-item__addons {
  font-size: 0.7813rem;
  color: var(--champagne);
  margin-top: 0.3rem;
  letter-spacing: 0.03em;
}

.menu-note {
  font-size: 0.8125rem;
  color: var(--parchment-dim);
  font-style: italic;
  line-height: 1.7;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-top: 2rem;
}

.menu-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block: 1.5rem;
}

/* ============ HOURS ============ */
.hours-block { margin-bottom: 2rem; }

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}

.hours-day { color: var(--parchment-dim); }
.hours-time { color: var(--parchment); font-weight: 400; }
.hours-time.closed { color: var(--bronze); }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}

.status-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bronze);
}

.status-badge.is-open { color: var(--ember); }
.status-badge.is-open::before { background: var(--ember); animation: pulse-dot 2s ease-in-out infinite; }
.status-badge.is-closed { color: var(--parchment-dim); }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

.info-block { margin-bottom: 2rem; }

.info-block__label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.5rem;
}

.info-block__value {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--parchment);
  line-height: 1.6;
}

.info-block__value a { color: var(--champagne); transition: color 0.2s; }
.info-block__value a:hover { color: var(--ember); }

.tel-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--ember);
  display: inline-block;
  transition: color 0.2s;
}

.tel-link:hover { color: var(--champagne); }

/* ============ DRINK LIST ============ */
.drink-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.drink-list li {
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.drink-list li::before {
  content: '';
  display: block;
  width: 4px; height: 4px;
  background: var(--bronze);
  flex-shrink: 0;
  margin-top: 0.4em;
  border-radius: 50%;
}

.drink-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--champagne);
}

.drink-desc {
  font-size: 0.8125rem;
  color: var(--parchment-dim);
  display: block;
  margin-top: 0.15rem;
}

.callout-panel {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  background: rgba(12,11,9,0.4);
}

.callout-panel p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--champagne);
  line-height: 1.5;
}

.callout-panel span {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--parchment-dim);
  margin-top: 0.35rem;
}

/* ============ STATUS / DINNER BADGE ============ */
.pill-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.pill-status__dot {
  display: block;
  width: 7px; height: 7px;
  background: var(--ember);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.pill-status__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
}

/* ============ FULL-BLEED CTA BAND ============ */
.bleed-cta {
  position: relative;
  padding-block: var(--section-gap);
  overflow: hidden;
}

.bleed-cta__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  filter: brightness(0.35) saturate(0.75);
}

.bleed-cta__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12,11,9,0.6) 0%, rgba(12,11,9,0.3) 50%, rgba(12,11,9,0.8) 100%),
    radial-gradient(ellipse 60% 60% at 70% 50%, rgba(154,101,48,0.12), transparent 65%);
}

.bleed-cta__content {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.bleed-cta__headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.5rem, 7vw, 5rem);
  color: var(--parchment);
  line-height: 0.95;
  margin-bottom: 1.5rem;
}

.bleed-cta__body {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--parchment-dim);
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* ============ RESERVE CTA ============ */
.reserve-cta {
  background: var(--void);
  padding-block: var(--section-gap);
  text-align: center;
}

.reserve-cta__headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  color: var(--parchment);
  line-height: 0.92;
  margin-bottom: 1rem;
}

.reserve-cta__sub {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--parchment-dim);
  margin-bottom: 2.5rem;
}

.reserve-cta__tel {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  color: var(--ember);
  display: inline-block;
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}

.reserve-cta__tel:hover { color: var(--champagne); }

.reserve-cta__or {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--parchment-dim);
  text-transform: uppercase;
  margin: 1.25rem 0;
}

/* ============ LONG-FORM ARTICLE ============ */
.article {
  max-width: 68ch;
  margin-inline: auto;
}

.article__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  color: var(--parchment);
  margin-bottom: 1.75rem;
}

.article__lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.75;
  color: var(--champagne);
  margin-bottom: 1.5rem;
}

.article p {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.85;
  color: var(--parchment-dim);
  margin-bottom: 1.35rem;
}

.article h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  color: var(--parchment);
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
}

.article strong { color: var(--champagne); font-weight: 500; }

.article a { color: var(--champagne); border-bottom: 1px solid var(--rule); transition: color 0.2s, border-color 0.2s; }
.article a:hover { color: var(--ember); border-color: var(--ember); }

.article__close {
  border-left: 2px solid var(--bronze);
  padding-left: 1.5rem;
  margin-top: 2.25rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--parchment) !important;
  font-size: clamp(1rem, 2vw, 1.1875rem) !important;
}

/* ============ FAQ ============ */
.faq-list { max-width: 780px; }

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--parchment);
  transition: color 0.2s;
}

.faq-item summary:hover { color: var(--champagne); }

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--bronze);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item__answer {
  padding-bottom: 1.5rem;
  font-size: 0.9375rem;
  color: var(--parchment-dim);
  line-height: 1.8;
  max-width: 65ch;
}

.faq-item__answer a { color: var(--champagne); }
.faq-item__answer a:hover { color: var(--ember); }

/* ============ FORMS ============ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 720px;
}

.form-field { display: flex; flex-direction: column; gap: 0.4rem; }

.form-field--full { grid-column: 1 / -1; }

.form-field label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--parchment);
  background: rgba(12,11,9,0.5);
  border: 1px solid var(--rule);
  padding: 0.8rem 1rem;
  transition: border-color 0.2s;
  border-radius: 0;
  width: 100%;
}

.form-field select option { background: var(--coal); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--champagne);
}

.form-field textarea { min-height: 8rem; resize: vertical; }

.form-status {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  line-height: 1.6;
  display: none;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
}

.form-status.is-visible { display: block; }
.form-status.is-error { color: #E86A4A; border-color: rgba(232,106,74,0.5); }
.form-status.is-success { color: var(--ember); }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============ GALLERY ============ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

.gallery-grid figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--coal);
}

.gallery-grid figure.tall { grid-row: span 2; aspect-ratio: auto; }

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.88) saturate(0.95);
  transition: transform 0.5s ease, filter 0.3s;
}

.gallery-grid figure:hover img { transform: scale(1.03); filter: brightness(1) saturate(1); }

.gallery-grid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1rem 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--parchment);
  background: linear-gradient(to top, rgba(12,11,9,0.85), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}

.gallery-grid figure:hover figcaption { opacity: 1; }

@media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ============ BREADCRUMB ============ */
.crumbs {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  margin-bottom: 1rem;
}

.crumbs a { color: var(--champagne); }
.crumbs a:hover { color: var(--ember); }

/* ============ STICKY MOBILE CALL BAR ============ */
.sticky-call {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(12,11,9,0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule);
  padding: 0.6rem var(--gutter);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  gap: 0.75rem;
}

.sticky-call a {
  flex: 1;
  text-align: center;
  padding-block: 0.75rem;
}

@media (max-width: 720px) {
  .sticky-call { display: flex; }
  body { padding-bottom: 4rem; }
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--walnut);
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--parchment);
  margin-bottom: 0.5rem;
}

.footer__formerly {
  font-size: 0.75rem;
  color: var(--parchment-dim);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.footer__address {
  font-size: 0.875rem;
  color: var(--parchment-dim);
  line-height: 1.75;
  font-style: normal;
}

.footer__address a { color: var(--champagne); transition: color 0.2s; }
.footer__address a:hover { color: var(--ember); }

.footer__nav-title {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1rem;
}

.footer__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__nav a {
  font-size: 0.875rem;
  color: var(--parchment-dim);
  transition: color 0.2s;
}

.footer__nav a:hover { color: var(--parchment); }

.footer__social {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: center;
}

.social-icon {
  width: 2rem; height: 2rem;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--parchment-dim);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: border-color 0.2s, color 0.2s;
}

.social-icon:hover { border-color: var(--bronze); color: var(--champagne); }

.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer__copy { font-size: 0.75rem; color: var(--parchment-dim); }

.footer__vip-link {
  font-size: 0.75rem;
  color: var(--bronze);
  transition: color 0.2s;
}

.footer__vip-link:hover { color: var(--champagne); }

@media (max-width: 860px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* ============ REVEAL (progressive enhancement) ============ */
.reveal { opacity: 1; transform: none; }

/* Hidden state applies only when JS is running (html.js set inline in head),
   so no-JS visitors always see content */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  html.js .reveal.in-view { opacity: 1; transform: none; }
}