/* ============================================================
   ETHEREAL — Global Stylesheet
   Design system: Antiquarian Botanical
   ============================================================ */

/* === TOKENS ===
   Palette: "Opulent Botanical Nocturne" — warm darkness, emerald velvet,
   gold & bronze, candlelight. Sampled from the built interior. See DESIGN_SYSTEM.md. */
:root {
  /* Foundation — warm near-black */
  --ink:          #0a0807;
  --shadow:       #050403;
  --char:         #161210;

  /* Emerald — the signature velvet material */
  --emerald:      #234a3f;
  --emerald-deep: #15302a;
  --emerald-lit:  #356457;

  /* Gold & bronze — the metal */
  --brass:        #c49140;
  --brass-light:  #dcb06a;
  --brass-dark:   #8a6428;
  --bronze:       #a87b4a;

  /* Warm accents */
  --terracotta:   #a3603c;
  --mosaic-teal:  #4f8a88;
  --mosaic-rust:  #9e6040;
  --blush:        #cf9ca0;
  --amber:        #e0a85a;

  /* Text & light */
  --ivory:        #f1e8d4;
  --ivory-dark:   #dccaa2;  /* brightened for legibility on near-black */

  /* Legacy aliases (kept so older rules resolve to the new world) */
  --sage:         var(--emerald);
  --sage-dark:    var(--emerald-deep);
  --teal:         var(--mosaic-teal);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --ease:         cubic-bezier(0.25, 0.1, 0.1, 1);
  --transition:   600ms cubic-bezier(0.25, 0.1, 0.1, 1);
  --transition-fast: 400ms cubic-bezier(0.25, 0.1, 0.1, 1);

  --container:    1320px;
  /* Height of the nav bar itself (.nav-inner). #site-header sits --nav-offset-top
     below the viewport edge on top of this, so the wordmark isn't jammed against
     the top; #mobile-nav reuses both so the overlay's first link clears the logo
     by the same amount no matter which one changes. */
  --nav-height:   136px;
  --nav-offset-top: 10px;
  --section-v:    110px;
}

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

/* The [hidden] attribute is meant to always hide an element, but any author rule that
   sets its own `display` (e.g. `.contact-form { display: flex }`) silently wins over the
   browser's default [hidden] styling since both are equal-specificity author-vs-UA rules —
   author styles always beat the UA stylesheet. Without this, toggling `el.hidden = true`
   on a flex/grid element does nothing visually. */
[hidden] { display: none !important; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Mobile rubber-band/elastic overscroll let you scroll past the real end of
     the document (past the footer/copyright) into whatever's behind the page.
     overscroll-behavior-y: none stops that on Chrome/Android + desktop Safari,
     but iOS Safari/Chrome (WebKit) only honor overscroll-behavior on nested
     scroll containers, not the root html/body scroller — the bounce still gets
     through there. main.js's touchmove guard is the actual fix on iOS; this is
     defense-in-depth for everywhere else, plus what color shows if any bounce
     still slips through. */
  background: var(--ink);
  overscroll-behavior-y: none;
}

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.85;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

/* Set by opening-sequence.js for the intro's duration, and by main.js's mobile
   nav toggle — belt-and-suspenders alongside the touchmove guard above (that
   guard alone handles iOS; this covers wheel/keyboard scroll on desktop). */
body.is-scroll-locked { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
address { font-style: normal; }

/* === ACCESSIBILITY === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.1em;
  border-radius: 2px;
  z-index: 9999;
  transition: top 200ms;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 1.5px solid var(--brass);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === LAYOUT UTILITIES === */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: var(--section-v) 0;
}

/* Emerald velvet feature section — light falling across fabric */
.section--sage,
.section--emerald {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(53, 100, 87, 0.55) 0%, transparent 70%),
    linear-gradient(to bottom, var(--emerald) 0%, var(--emerald-deep) 100%);
  position: relative;
}

.section--deep {
  background: var(--shadow);
}

/* === TYPOGRAPHY UTILITIES === */
.label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--brass-light);
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.1rem;
}

.display-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.08;
  color: var(--ivory);
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 3.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  color: var(--ivory);
}

.body-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.25vw, 21px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--ivory-dark);
}

/* === ORNAMENTAL DIVIDER === */
.ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--brass-dark);
}
/* Brand ornament — echoes the dotted "ė": a ringed dot with a tittle above */
.ornament-glyph {
  position: relative;
  width: 9px;
  height: 9px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  flex-shrink: 0;
}
.ornament-glyph::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--brass);
}

/* === BUTTONS === */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 32px;
  border: 1px solid var(--brass);
  color: var(--brass);
  background: transparent;
  border-radius: 2px;
  transition: background var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast);
  cursor: pointer;
}
.btn:hover {
  background: var(--brass);
  color: var(--ink);
  box-shadow: 0 0 28px rgba(196, 145, 64, 0.28);
}
.btn--ghost {
  border-color: var(--brass-dark);
  color: var(--ivory-dark);
}
.btn--ghost:hover {
  border-color: var(--brass);
  color: var(--brass);
  background: transparent;
}
.btn--filled {
  /* Real brass doesn't read as a flat swatch — it catches light unevenly: a soft glint
     where the light source hits it, then a brushed sheen that runs light-dark-light-dark
     across the surface. Two layers: a small warm highlight (the "блик") placed upper-left
     like a light source, over a diagonal metallic gradient standing in for the brushed
     surface. Scoped to this button only; --brass itself is unchanged for nav/hairline/text. */
  background:
    radial-gradient(ellipse 55% 45% at 28% 20%, rgba(255, 250, 235, 0.55) 0%, transparent 60%),
    linear-gradient(155deg, #e2a95a 0%, #d98e26 28%, #b67820 52%, #c78323 72%, #a96f1e 100%);
  border-color: #a96f1e;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn--filled:hover {
  /* Same construction, shifted brighter — the light source reads as if it moved closer. */
  background:
    radial-gradient(ellipse 55% 45% at 28% 20%, rgba(255, 250, 235, 0.7) 0%, transparent 60%),
    linear-gradient(155deg, #eecda0 0%, #e2a95a 28%, #c78323 52%, #d98e26 72%, #b67820 100%);
  border-color: #d98e26;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.15),
              0 0 32px rgba(217, 142, 38, 0.4);
}

/* === IMAGE PLACEHOLDER === */
.img-ph {
  background: rgba(196, 145, 64, 0.04);
  border: 1px solid var(--brass-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 240px;
}
.img-ph svg {
  opacity: 0.3;
  color: var(--brass);
}
.img-ph span {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--brass-dark);
  text-transform: uppercase;
}

/* === CONTENT PLACEHOLDER === */
.content-ph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--ivory-dark);
  border-left: 2px solid var(--brass);
  padding: 0.3rem 0 0.3rem 1rem;
  margin: 0.75rem 0;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
/* Shared partials wrappers — collapse so they don't affect layout */
site-header, site-footer { display: contents; }

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above #mobile-nav (z-index 150) so the header — logo, hamburger/X toggle — stays
     exactly where it is, on top of the overlay, when the mobile menu opens. Previously
     the overlay had its own separate (left-aligned) logo, so opening the menu visibly
     jumped the wordmark from centered to the side; keeping the same header element in
     place throughout removes the jump entirely and the existing hamburger-to-X toggle
     doubles as the close control, since it's now actually visible above the overlay. */
  z-index: 160;
  /* The bar's own height is carried by .nav-inner (var(--nav-height)); the header
     itself is auto so this top padding can drop the whole nav block down off the top
     edge — the wordmark otherwise reads too close to the screen edge. Applied above a
     fixed-height nav-inner so the centered logo and the vertically-centered hamburger
     move down together. env(safe-area-inset-top) also clears the iPhone notch. */
  height: auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-offset-top));
  /* Transparent by default so the homepage hero can run edge-to-edge behind the nav.
     The solid bar comes from either .nav-solid (subpages render with it permanently —
     their content is ink-on-ink and would scroll illegibly under a transparent header)
     or .is-scrolled (added by main.js past 80px on every page). The homepage's top-of-
     hero legibility over the bright mural is handled in home.css: a top-weighted scrim
     gradient plus per-element insurance on the nav links / Reserve pill / hamburger. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
  /* iOS Safari bug: a `position: fixed` element that gains `backdrop-filter` (added
     below by .is-scrolled) can visually detach from the top of the viewport mid-scroll
     — it renders at a stale scroll offset, reading as if the header jumped down the
     page, until the compositor catches up. Forcing this onto its own GPU layer up
     front (before the blur ever applies, so there's no layer-promotion pop either)
     is the standard fix. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#site-header.nav-solid,
#site-header.is-scrolled {
  background: rgba(13, 11, 9, 0.92);
  border-bottom-color: var(--brass-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#site-header.nav-hidden {
  opacity: 0;
  pointer-events: none;
}

#site-header.nav-visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 900ms var(--ease);
}

.nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Matches .hero-title's 1.85rem margin-bottom (the catchphrase→buttons gap in
     home.css) so the nav links sit the same distance under the wordmark as the
     hero CTAs sit under the hero heading. --nav-height is sized to fit this;
     raising the gap without raising --nav-height overflows the bar. */
  gap: 1.85rem;
  height: var(--nav-height);
  padding: 0.5rem 2rem;
  max-width: var(--container);
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.nav-logo:hover { opacity: 0.8; }
.nav-logo .logo-img {
  height: auto;
  /* Sized against the fixed masthead: at the 320px cap the ~4.76:1 wordmark is
     ~67px tall — with the links row + gap that's ~109px of the 112px bar, i.e.
     the practical ceiling. Don't raise the cap without raising --nav-height. */
  width: clamp(240px, 25vw, 320px);
  display: block;
  mix-blend-mode: screen;
}

#nav-links {
  display: flex;
  align-items: center;
}

#nav-links ul {
  display: flex;
  align-items: center;
  gap: 2.75rem;
}

#nav-links a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-dark);
  transition: color var(--transition-fast);
  position: relative;
}
#nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}
#nav-links a:hover { color: var(--ivory); }
#nav-links a:hover::after { transform: scaleX(1); }

.nav-reserve {
  border: 1px solid var(--brass-dark);
  padding: 7px 18px;
  border-radius: 2px;
  color: var(--brass) !important;
  transition: background var(--transition-fast), border-color var(--transition-fast) !important;
}
.nav-reserve:hover {
  background: var(--brass) !important;
  border-color: var(--brass) !important;
  color: var(--ink) !important;
}
.nav-reserve::after { display: none !important; }

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 200;
}
.hamburger-line {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ivory);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile fullscreen nav overlay */
#mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 3, 0.98);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  /* NOT justify-content: center — see the auto margins below. */
  justify-content: flex-start;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
  /* The overlay is inset:0, but #site-header sits ON TOP of it (z-index 160 vs
     150) so the wordmark stays visible while the menu is open. Without this
     padding the links ride up underneath the logo — which they did as soon as
     the list got long or the phone short. Reserve the header's full footprint
     (offset + bar), then 1.5rem: the wordmark's glyphs stop ~8px short of the
     bar's bottom edge, so 1.5rem of bar clearance lands the first link ~2rem
     below the visible logo — matching the 2rem gap between the links. */
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-offset-top) + var(--nav-height) + 1.5rem);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
  /* Long list on a short phone: scroll rather than clip. */
  overflow-y: auto;
}
/* Centres the list when there's spare room, but collapses to 0 when there isn't,
   so the list can only ever grow downward into the scroll. `justify-content:
   center` cannot do this — a centred flex column overflows equally in BOTH
   directions, pushing the first link up under the logo and out of scroll reach
   exactly when the menu is too tall to fit. */
#mobile-nav > :first-child { margin-top: auto; }
#mobile-nav > :last-child  { margin-bottom: auto; }
#mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}
#mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ivory-dark);
  transition: color var(--transition-fast);
  text-align: center;
}
#mobile-nav a:hover { color: var(--ivory); }

#mobile-nav .mobile-reserve {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-style: normal;
  color: var(--brass) !important;
  border: 1px solid var(--brass-dark);
  padding: 12px 32px;
  /* No extra margin-top: the overlay's own gap is the single spacing rule, so
     every item in the menu is evenly spaced including this one. */
}
#mobile-nav .mobile-reserve:hover {
  background: var(--brass);
  color: var(--ink) !important;
}

/* ============================================================
   PAGE HEADER (subpages)
   ============================================================ */
.page-header {
  padding-top: calc(var(--nav-height) + 80px);
  padding-bottom: 64px;
  text-align: center;
  border-bottom: 1px solid var(--brass-dark);
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(138, 100, 40, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-header .label { justify-content: center; }
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ivory);
  margin-top: 0.5rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  background: var(--shadow);
  border-top: 1px solid var(--brass-dark);
  padding: 48px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.25rem;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 1rem;
  transition: opacity var(--transition-fast);
}
.footer-logo:hover { opacity: 0.8; }
/* logo-wordmark.png here, not logo.png — the latter is a 3:2 canvas where the wordmark
   only occupies the middle band, so it rendered as a ~190px-tall mostly-empty box that
   pushed the tagline far below the visible logo and inflated the whole footer. The
   tightly-cropped wordmark keeps the brand block compact. */
.footer-logo .logo-img {
  height: auto;
  width: clamp(170px, 18vw, 240px);
  display: block;
  mix-blend-mode: screen;
}

/* Was a flat 18px regardless of viewport — next to a wordmark that scales with the
   viewport, that read as an afterthought rather than a signature line. Scales with
   the same logic as the logo above it; letter-spacing gives it a touch more presence
   at the larger sizes. */
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.375rem);
  letter-spacing: 0.015em;
  color: var(--ivory);
  margin-bottom: 1.25rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
}
.footer-social a {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--brass-dark);
  text-transform: uppercase;
  transition: color var(--transition-fast);
}
.footer-social a:hover { color: var(--brass); }

.footer-nav h3,
.footer-visit h3,
.footer-contact h3 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.25rem;
}

.footer-nav ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav a {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  color: var(--ivory-dark);
  transition: color var(--transition-fast);
}
.footer-nav a:hover { color: var(--ivory); }

.footer-visit p,
.footer-contact p {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  color: var(--ivory-dark);
  line-height: 1.75;
}
.footer-contact a {
  transition: color var(--transition-fast);
}
/* :not() here matters — .footer-reserve-link is an <a> inside .footer-contact, so
   without this exclusion this rule's extra `a` type selector out-specifies
   .footer-reserve-link:hover's own color, silently winning and leaving brass-on-brass
   (invisible) text once the link's background also turns gold on hover. */
.footer-contact a:hover:not(.footer-reserve-link) { color: var(--brass); }

/* Same metallic brass gradient as the landing hero's primary button (.btn--filled) —
   a small warm highlight standing in for a light source, over a diagonal gradient
   that runs light-dark-light-dark like brushed metal, rather than a flat fill. */
.footer-reserve-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  background:
    radial-gradient(ellipse 55% 45% at 28% 20%, rgba(255, 250, 235, 0.55) 0%, transparent 60%),
    linear-gradient(155deg, #e2a95a 0%, #d98e26 28%, #b67820 52%, #c78323 72%, #a96f1e 100%);
  border: 1px solid #a96f1e;
  padding: 9px 22px;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition: box-shadow var(--transition-fast);
}
.footer-reserve-link:hover {
  background:
    radial-gradient(ellipse 55% 45% at 28% 20%, rgba(255, 250, 235, 0.7) 0%, transparent 60%),
    linear-gradient(155deg, #eecda0 0%, #e2a95a 28%, #c78323 52%, #d98e26 72%, #b67820 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.15),
              0 0 32px rgba(217, 142, 38, 0.4);
}

.footer-bottom {
  border-top: 1px solid rgba(138, 100, 40, 0.2);
  padding-top: 1.5rem;
  text-align: center;
}
.footer-bottom p {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--brass-dark);
  text-transform: uppercase;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1500px) {
  :root {
    --container:  1440px;
    --section-v:  128px;
    --nav-height: 144px;
  }
}

@media (max-width: 900px) {
  :root {
    --section-v: 64px;
    /* Single row here (no links under the wordmark), so the bar doesn't need the
       desktop height that the 1.85rem logo→links gap requires. */
    --nav-height: 64px;
    /* A bit more top offset than desktop so the wordmark clears the top edge /
       notch with room to spare. #site-header and #mobile-nav both read this. */
    --nav-offset-top: 13px;
  }

  /* Mobile bar reverts to a single row, logo centered — the hamburger is pulled out of
     flow and pinned to the right edge so the logo can sit truly centered in the bar
     rather than sharing a space-between row with it. */
  .nav-inner {
    position: relative;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 0 1.25rem;
  }
  /* 60vw keeps ~19px clearance to the hamburger on a 375px phone; the 250px cap
     does the same on wider phones. ~47px tall in the 64px bar. */
  .nav-logo .logo-img { width: clamp(190px, 60vw, 250px); }

  .nav-toggle {
    display: flex;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
  }
  #nav-links { display: none; }
  #mobile-nav { display: flex; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --section-v: 48px; }

  .container { padding: 0 1.25rem; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .page-header {
    padding-top: calc(var(--nav-height) + 48px);
    padding-bottom: 40px;
  }
}

/* ============================================================
   COMING SOON — links to pages that aren't live yet (Menu's
   Toast embed and Reservations' Resy widget are both still
   placeholders — see docs/DESIGN_SYSTEM.md). Reads as normal,
   inviting UI at rest; only on interaction does it reveal itself
   as not-yet-available, rather than sitting permanently greyed
   out and looking broken. The real href stays in the markup for
   direct access; main.js blocks the click. */
.is-coming-soon {
  position: relative;
  cursor: not-allowed;
}
.is-coming-soon:hover,
.is-coming-soon:focus-visible,
.is-coming-soon.is-touched {
  filter: grayscale(1) brightness(0.8);
}
.coming-soon-badge {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 6px);
  white-space: nowrap;
  background: rgba(13, 11, 9, 0.97);
  /* The badge only ever shows while its parent link is greyed out by the
     hover/touch filter above — and a filter paints the whole subtree, so the
     badge is inevitably grayscaled with it. Ivory text and a mid-brass border
     are chosen for how they look AFTER grayscale(1) brightness(0.8): light-grey
     text and a visible grey outline, legible both over the bright hero mural
     and against the near-black mobile-nav overlay (where a dark pill alone
     disappears entirely). Don't "fix" these back to brass-on-dark without
     re-checking the post-filter result. */
  color: var(--ivory);
  border: 1px solid var(--brass);
  border-radius: 3px;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  z-index: 30;
}
.coming-soon-badge::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--brass);
}
.is-coming-soon:hover .coming-soon-badge,
.is-coming-soon:focus-visible .coming-soon-badge,
.is-coming-soon.is-touched .coming-soon-badge {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* In the desktop masthead the nav row sits directly beneath the wordmark, so a
   tooltip above the link lands on the logo. Flip it below the link there —
   it drops over the mural/page instead. Footer and mobile keep the default. */
#nav-links .coming-soon-badge {
  bottom: auto;
  top: calc(100% + 12px);
  transform: translate(-50%, -6px);
}
#nav-links .coming-soon-badge::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--brass);
}
/* The ID selector above out-specifies the class-based visible-state rule's
   transform, so the settled position needs restating at the same specificity. */
#nav-links .is-coming-soon:hover .coming-soon-badge,
#nav-links .is-coming-soon:focus-visible .coming-soon-badge,
#nav-links .is-coming-soon.is-touched .coming-soon-badge {
  transform: translate(-50%, 0);
}