:root {
  /* Lokal-inspired: warm ivory + deep oxblood burgundy. No orange, no grey. */
  --paper: #F4EFE4;          /* warm ivory */
  --paper-soft: #ECE4D2;     /* slightly warmer cream — section variant */
  --shell: #F8F4EA;          /* lightest cream — surfaces */
  --burgundy: #5A1A2C;       /* deep oxblood — primary brand colour */
  --burgundy-deep: #3F1219;  /* darker — hover, occasional emphasis */
  --burgundy-light: #7A2D3F;
  --ink: #2A1418;            /* near-black, wine-tinted, used for body on cream */
  --hairline: rgba(42, 20, 24, 0.14);
  --hairline-strong: rgba(42, 20, 24, 0.24);

  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1320px;
  --pad: clamp(1.5rem, 5vw, 4rem);

  /* The single source of truth for vertical rhythm between cream-padded sections.
     Applied identically to .narrative, .portrait, generic <section>, and
     .pullquote so the whole site feels intentionally spacious in one cadence
     instead of alternating between tight and yawning gaps.
     Full-bleed components (.about-teaser, .chef-feature, .booking, .split,
     .reserve-block) stay edge-to-edge — they get their breathing from the
     neighbouring padded section's --section-pad-y. */
  --section-pad-y: clamp(4.5rem, 8vw, 7rem);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Editorial page-load fade — gives the site a deliberate, considered feel */
  animation: page-in 1.1s var(--ease) both;
}
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* Faint paper-grain layer — gives the site editorial print weight without becoming busy.
   Sits above all content as a fixed overlay, pointer-events disabled. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Atmospheric image cohesion — pull disparate stock photos toward one editorial palette */
.hero-photo,
.statement-photo,
.page-hero-photo,
.split-photo,
.about-teaser-photo,
.chef-feature-photo,
.booking-photo,
.portrait-photo,
.gallery-grid > div {
  filter: brightness(0.92) saturate(0.82) contrast(1.06);
  transition: filter 0.8s var(--ease);
}

/* Editorial selection — burgundy on cream */
::selection { background: var(--burgundy); color: var(--paper); }
::-moz-selection { background: var(--burgundy); color: var(--paper); }

/* Slim burgundy scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--burgundy); border: 3px solid var(--paper); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--burgundy-deep); }
html { scrollbar-color: var(--burgundy) var(--paper); scrollbar-width: thin; }

/* Italic swash ampersands inside titles — small editorial signature */
.statement-title .amp,
.split-title .amp,
.section-title .amp,
.footer-newsletter h3 .amp,
h1 .amp, h2 .amp, h3 .amp {
  font-style: italic;
  font-weight: 400;
  font-feature-settings: "swsh" 1, "salt" 1;
  letter-spacing: 0.01em;
}

/* ============ NAV ============ */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.5rem clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--paper);
  color: var(--burgundy);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* Page that starts with a dark hero (photo or burgundy bg) — nav transparent + cream text */
body.dark-hero .nav {
  position: absolute;
  background: transparent;
  color: var(--paper);
  border-bottom-color: transparent;
}
/* Once scrolled past hero, nav becomes a cream sticky strip */
.nav.is-fixed {
  position: fixed;
  background: var(--paper);
  color: var(--burgundy);
  border-bottom: 1px solid var(--hairline);
}
/* Nav brand — now hidden because the floating .hero-wordmark element acts as the nav brand */
.brand { display: none; }
/* Spacer so the nav-links still right-align consistently */
.nav-spacer-left { display: block; }
.nav-links {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: inherit;
  position: relative;
  padding-bottom: 4px;
  opacity: 0.95;
  transition: opacity 0.3s var(--ease);
}
/* Sliding underline reveal — left-to-right on hover, right-to-left on out */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Nav spacer for non-hero pages — pushes content below the nav */
.nav-spacer { height: 0; }
body:not(.dark-hero) main, body:not(.dark-hero) .top-section { padding-top: 5.5rem; }

/* ============ HERO (HOME) — giant wordmark over photo/video ============ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--burgundy);
  color: var(--paper);
}
.hero-photo,
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.hero-photo { animation: kenburns 36s ease-in-out infinite alternate; }
/* Subtle tonal harmonisation — pulls the video toward the warm/burgundy palette
   instead of letting raw stock footage clash with the brand colour. */
.hero video {
  filter: brightness(0.78) saturate(0.85) contrast(1.05);
  animation: video-in 1.6s var(--ease) 0.2s both;
}
@keyframes video-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.06) 24%, rgba(0,0,0,0.06) 60%, rgba(0,0,0,0.4) 100%);
}
/* The floating Mavi wordmark — used as both the nav brand AND the hero brand.
   Position: fixed. On Home, JS lerps font-size + top + left + letter-spacing as the user
   scrolls, so the giant hero wordmark visually shrinks and slides into the nav position.
   On other pages, it stays small in the nav from the start (no scroll handler runs). */
.hero-wordmark {
  position: fixed;
  top: 1.55rem;
  left: clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  z-index: 60;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--paper);
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
  display: block;
  transition: color 0.4s var(--ease);
  /* Initial fade-in on page load (opacity-only — JS handles position/size) */
  opacity: 0;
  animation: wordmark-fade-in 1.4s var(--ease) 0.25s forwards;
}
@keyframes wordmark-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* On non-dark pages and after scrolling past hero, wordmark colour matches nav */
body:not(.dark-hero) .hero-wordmark { color: var(--burgundy); }
body.scrolled-past-hero .hero-wordmark { color: var(--burgundy); }

/* Ocean-wave flourish under the retracted wordmark — a nod to the seaside theme
   AND to "Mavi" meaning blue/sea in Turkish. A single line of scalloped arches
   (Seigaiha / Anatolian wave motif), centered horizontally under MAVI at 40%
   of the wordmark width. Coloured via currentColor so it follows the wordmark
   from cream to burgundy. Hidden in the giant hero state; appears on scroll
   and on other pages. */
.hero-wordmark::after {
  content: '';
  position: absolute;
  bottom: -0.55em;
  left: 30%;
  right: 30%;
  height: 0.3em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 4' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q 3 0 6 3 Q 9 0 12 3 Q 15 0 18 3 Q 21 0 24 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 4' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q 3 0 6 3 Q 9 0 12 3 Q 15 0 18 3 Q 21 0 24 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: 1.8em 0.3em;
          mask-size: 1.8em 0.3em;
  -webkit-mask-position: 0 center;
          mask-position: 0 center;
  opacity: 0;
  transition: opacity 0.9s var(--ease) 0.3s;
  pointer-events: none;
  animation: wave-flow 7s linear infinite;
}
body:not(.is-home) .hero-wordmark::after,
body.scrolled-past-hero .hero-wordmark::after {
  opacity: 0.6;
}
@keyframes wave-flow {
  from { -webkit-mask-position:    0 center; mask-position:    0 center; }
  to   { -webkit-mask-position: -1.8em center; mask-position: -1.8em center; }
}
.hero-tagline {
  position: absolute;
  bottom: 50%;
  right: clamp(1.5rem, 5vw, 4rem);
  margin: 0;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--paper);
  letter-spacing: 0.012em;
  text-align: right;
  max-width: 34ch;
  /* Stagger the tagline behind the wordmark */
  opacity: 0;
  animation: tagline-in 1.4s var(--ease) 1.1s forwards;
}
.hero-tagline em { font-style: italic; font-weight: 300; }
@keyframes tagline-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 0.95; transform: translateY(0); }
}

/* ============ STATEMENT (full-bleed, centered) ============ */
/* Used for About hero (over photo) and for Book Now (solid burgundy) */
.statement {
  position: relative;
  width: 100%;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  background: var(--burgundy);
  color: var(--paper);
  overflow: hidden;
}
.statement.with-photo { background: var(--burgundy); }
.statement-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  animation: kenburns 38s ease-in-out infinite alternate;
}
.statement.with-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 1;
}
.statement > * { position: relative; z-index: 2; }
.statement-eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-weight: 400;
  color: var(--paper);
  margin: 0 0 2.25rem;
}
.statement-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
  line-height: 1.12;
  margin: 0;
  color: var(--paper);
  max-width: 22ch;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.statement-title em { font-style: italic; }
.statement-title strong { font-weight: 500; }

/* ============ PULLQUOTE (cream editorial pause with italic display copy) ============ */
.pullquote {
  background: var(--paper);
  padding: var(--section-pad-y) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
}
.pullquote-inner {
  max-width: 26ch;
  margin: 0 auto;
  position: relative;
}
/* Hairline rule above and below the quote — restrained editorial bookends */
.pullquote-inner::before,
.pullquote-inner::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: var(--burgundy);
  opacity: 0.45;
  margin: 0 auto;
}
.pullquote-inner::before { margin-bottom: clamp(2rem, 4vw, 3rem); }
.pullquote-inner::after  { margin-top: clamp(2rem, 4vw, 3rem); }
.pullquote-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--burgundy);
  margin: 0;
  text-wrap: balance;
}
.pullquote-title em {
  font-style: italic;
  font-weight: 500;
}
.pullquote-attribution {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--burgundy);
  opacity: 0.55;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* When a portrait follows a pullquote, treat them as one editorial spread:
   drop the bottom hairline rule, tighten the bottom padding, and let the
   italic caption under the photo become the quote's visual attribution. */
/* When a pullquote sits directly above a portrait, drop the pullquote's lower
   hairline rule — the portrait photo below already provides the visual close. */
.pullquote:has(+ .portrait) .pullquote-inner::after { display: none; }

/* ============ NARRATIVE (centered serif paragraph on cream) ============ */
.narrative {
  background: var(--paper);
  padding: var(--section-pad-y) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}
/* Homepage: a touch of extra breathing between the narrative and the
   about-teaser image immediately below — small, deliberate. */
.narrative:has(+ .about-teaser) {
  padding-bottom: clamp(5.5rem, 9vw, 8rem);
}
.narrative-inner {
  max-width: 70ch;
  margin: 0 auto;
}
.narrative p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.55;
  margin: 0 0 1rem;
  color: var(--burgundy);
  letter-spacing: 0.005em;
  text-wrap: pretty;
}
/* Subtle lettrine — first letter slightly larger for editorial weight */
.narrative-inner > p:first-child::first-letter {
  font-style: italic;
  font-weight: 400;
  font-size: 1.35em;
  letter-spacing: 0;
  padding-right: 0.04em;
}
.narrative p:last-child { margin-bottom: 0; }
.narrative p em { font-style: italic; }
.narrative-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--burgundy);
  opacity: 0.65;
  margin: 0 0 2rem;
  font-weight: 500;
}


/* ============ SPLIT (50/50 image + flat burgundy panel) ============ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 75vh;
  background: var(--burgundy);
  overflow: hidden;
}
.split-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 480px;
  transition: transform 2s var(--ease);
  will-change: transform;
}
.split:hover .split-photo { transform: scale(1.04); }
.split-text {
  background: var(--burgundy);
  color: var(--paper);
  padding: clamp(3rem, 7vw, 7rem) clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
.split-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--paper);
  opacity: 0.7;
  margin: 0 0 0.5rem;
  font-weight: 500;
}
.split-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0;
  color: var(--paper);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.split-title em { font-style: italic; }
.split-text p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--paper);
  opacity: 0.88;
  margin: 0;
  max-width: 38ch;
}
/* Refined hairline rule above the split title — restrained editorial mark */
.split-rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--paper);
  opacity: 0.5;
  margin-bottom: 0.25rem;
}
/* Reserve link — italic Cormorant, sliding underline, paper-on-burgundy */
.split-cta { margin-top: 0.75rem; }
.split-cta a {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--paper);
  position: relative;
  padding-bottom: 4px;
  display: inline-block;
  letter-spacing: 0.01em;
}
.split-cta a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--paper);
  opacity: 0.7;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.split-cta a:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}

/* ============ RESERVE BLOCK (cinematic full-bleed reservation moment) ============ */
.reserve-block {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(6rem, 14vw, 11rem) clamp(1.5rem, 5vw, 4rem);
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--burgundy);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.reserve-block-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  filter: brightness(0.55) saturate(0.85) contrast(1.08);
  animation: kenburns 38s ease-in-out infinite alternate;
}
.reserve-block::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(63, 18, 25, 0.45) 0%, rgba(63, 18, 25, 0.7) 100%);
  pointer-events: none;
}
.reserve-block > * { position: relative; z-index: 2; }
.reserve-block-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: var(--paper);
  opacity: 0.75;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-weight: 400;
}
.reserve-block-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 7.5vw, 7.5rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--paper);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.reserve-block-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--paper);
  opacity: 0.85;
  margin: clamp(2rem, 3.5vw, 2.75rem) auto 0;
  max-width: 44ch;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.reserve-block-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  padding: 1.1rem 3rem;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.5s var(--ease), color 0.5s var(--ease), letter-spacing 0.6s var(--ease);
}
.reserve-block-cta:hover {
  background: var(--paper);
  color: var(--burgundy);
  letter-spacing: 0.5em;
}

/* ============ ABOUT TEASER (50/50 image + cream burgundy text — Lokal pattern) ============ */
.about-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  align-items: stretch;
  min-height: 70vh;
  /* Override default section padding/max-width — this is a full-bleed component */
  max-width: none;
  padding: 0;
  margin: 0;
}
.about-teaser-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--paper-soft);
  min-height: 460px;
  transition: transform 2s var(--ease);
  will-change: transform;
}
.about-teaser:hover .about-teaser-photo { transform: scale(1.04); }
.about-teaser-content {
  padding: clamp(3rem, 7vw, 6.5rem) clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  max-width: 60ch;
}
.about-teaser-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.12;
  color: var(--burgundy);
  margin: 0;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.about-teaser-content p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  max-width: 48ch;
  opacity: 0.92;
}
.about-teaser-link {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--burgundy);
  border-bottom: 1px solid var(--burgundy);
  padding-bottom: 2px;
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
  position: relative;
  transition: opacity 0.4s var(--ease);
}
.about-teaser-link:hover { opacity: 0.7; }

/* ============ CHEF FEATURE (50/50 chef portrait — text left, photo right; story page) ============
   Modelled on .about-teaser but flipped, with a display name + role + pull quote treatment
   so the head chef gets a proper editorial moment instead of a text-only paragraph block. */
.chef-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  align-items: stretch;
  min-height: 62vh;
  max-width: none;
  padding: 0;
  margin: 0;
}
.chef-feature-content {
  padding: clamp(2.25rem, 4.5vw, 4rem) clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  max-width: 60ch;
}
.chef-feature-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--burgundy);
  opacity: 0.8;
  font-weight: 500;
  margin: 0 0 0.25rem;
}
.chef-feature-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.02;
  color: var(--burgundy);
  margin: 0;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.chef-feature-name em { font-style: italic; }
.chef-feature-role {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--ink);
  opacity: 0.55;
  font-weight: 400;
  margin: 0 0 0.5rem;
}
.chef-feature-content p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  max-width: 48ch;
  opacity: 0.92;
}
.chef-feature-quote {
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem) !important;
  line-height: 1.5 !important;
  color: var(--burgundy) !important;
  border-left: 1px solid var(--hairline-strong);
  padding-left: 1.25rem;
  margin-top: 0.75rem !important;
  opacity: 1 !important;
}
.chef-feature-photo {
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-color: var(--paper-soft);
  min-height: 520px;
  transition: transform 2s var(--ease);
  will-change: transform;
}
.chef-feature:hover .chef-feature-photo { transform: scale(1.04); }

/* ============ PORTRAIT (single full-bleed cinematic photo with optional caption) ============ */
.portrait {
  background: var(--paper);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--section-pad-y) 0;
}
.portrait-photo {
  width: 100%;
  /* 5:3 matches the native aspect of the source image (3800×2280) — no cropping on desktop */
  aspect-ratio: 5 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--paper-soft);
}
.portrait-caption {
  display: block;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--burgundy);
  opacity: 0.75;
  letter-spacing: 0.005em;
  padding: clamp(1.25rem, 2.5vw, 2rem) 1.5rem 0;
  margin: 0;
}

/* ============ BOOKING WIDGET (50/50 image + cream booking panel — Lokal pattern) ============ */
.booking {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  align-items: stretch;
  min-height: 78vh;
  max-width: none;
  padding: 0;
  margin: 0;
}
.booking-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--burgundy);
  min-height: 460px;
  position: relative;
  isolation: isolate;
}
/* Burgundy duotone — flattens whatever stock photo loads into the brand palette */
.booking-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--burgundy);
  mix-blend-mode: color;
  z-index: 1;
  pointer-events: none;
}
.booking-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(63, 18, 25, 0.25) 0%, rgba(63, 18, 25, 0.55) 100%);
  z-index: 2;
  pointer-events: none;
}
.booking-panel {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  max-width: 560px;
}
.booking-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: var(--burgundy);
  opacity: 0.7;
  margin: 0 0 1.5rem;
  font-weight: 400;
}
.booking-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.1;
  color: var(--burgundy);
  margin: 0 0 1.25rem;
  letter-spacing: 0.005em;
  text-wrap: balance;
  max-width: 16ch;
}
.booking-blurb {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.85;
  margin: 0 0 2.25rem;
  max-width: 38ch;
  font-style: italic;
}
.booking-contact {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--burgundy);
  border-bottom: 1px solid var(--burgundy);
  padding-bottom: 2px;
  margin-bottom: 0.6rem;
  align-self: flex-start;
}
.booking-map {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--burgundy);
  border-bottom: 1px solid var(--burgundy);
  padding-bottom: 2px;
  margin-bottom: 2.5rem;
  font-weight: 400;
  opacity: 0.75;
  align-self: flex-start;
}
.booking-rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--burgundy);
  opacity: 0.4;
  margin: 0 0 1.75rem;
}
.booking-widget {
  width: 100%;
  max-width: 420px;
  background: transparent;
}
.booking-widget-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  text-align: left;
  margin: 0 0 1.25rem;
  color: var(--burgundy);
  letter-spacing: 0.005em;
}
.booking-field {
  position: relative;
  border: 1px solid var(--hairline-strong);
  background: var(--paper);
  padding: 0.85rem 1.1rem 0.85rem 2.6rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--burgundy);
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.booking-field:hover { border-color: var(--burgundy); }
.booking-field::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.booking-field.date::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A1A2C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
.booking-field.time::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A1A2C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E");
}
.booking-field.people::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A1A2C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.booking-field::after {
  content: '';
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--burgundy);
  border-bottom: 1px solid var(--burgundy);
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.6;
}
.booking-cta {
  width: 100%;
  background: var(--burgundy);
  color: var(--paper);
  border: 0;
  padding: 1.05rem;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: pointer;
  transition: background 0.4s var(--ease), letter-spacing 0.5s var(--ease);
}
.booking-cta:hover { background: var(--burgundy-deep); letter-spacing: 0.1em; }

/* ============ PAGE HERO (photo + centered statement OR burgundy block) ============ */
.page-hero {
  position: relative;
  width: 100%;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  background: var(--burgundy);
  color: var(--paper);
  overflow: hidden;
}
.page-hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  animation: kenburns 36s ease-in-out infinite alternate;
}
.page-hero.with-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
}
.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 60ch;
}
.page-hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--paper);
  opacity: 0.85;
  margin: 0 0 2rem;
  font-weight: 500;
}
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4rem, 11vw, 10rem);
  letter-spacing: 0.04em;
  line-height: 0.9;
  margin: 0;
  color: var(--paper);
  text-transform: uppercase;
  opacity: 0;
  animation: wordmark-fade-in 1.4s var(--ease) 0.3s forwards;
}
.page-hero-eyebrow {
  opacity: 0;
  animation: tagline-in 1.2s var(--ease) 0.1s forwards;
}
.page-hero p {
  opacity: 0;
  animation: tagline-in 1.4s var(--ease) 0.85s forwards;
}
.statement-eyebrow {
  opacity: 0;
  animation: tagline-in 1.2s var(--ease) 0.15s forwards;
}
.statement-title {
  opacity: 0;
  animation: tagline-in 1.5s var(--ease) 0.4s forwards;
}
.page-hero h1 em {
  font-style: italic;
  letter-spacing: 0.005em;
  text-transform: none;
  font-weight: 400;
}
.page-hero p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--paper);
  opacity: 0.88;
  margin: 1.5rem auto 0;
  max-width: 50ch;
  line-height: 1.5;
}

/* ============ SECTION BASE ============ */
section {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--pad);
}
.section-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--burgundy);
  opacity: 0.7;
  font-weight: 500;
  margin-bottom: 1.5rem;
  display: block;
}
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--burgundy);
  text-wrap: balance;
}
.section-title em { font-style: italic; }
.section-intro {
  max-width: 60ch;
  margin: 1.6rem 0 0;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.85;
}

/* ============ MENU ============ */
.menu-section { background: var(--paper); }
.menu-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--pad);
}
.menu-head {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
}
.menu-card {
  background: transparent;
  padding: 0;
  border: 0;
}
.menu-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.85rem, 2.6vw, 2.4rem);
  margin: 0 0 1.5rem;
  line-height: 1;
  letter-spacing: 0.005em;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--burgundy);
}
.menu-card .diet {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--burgundy);
  opacity: 0.5;
  vertical-align: 0.18em;
  text-transform: uppercase;
}
.menu-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-card li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.96rem;
}
.menu-card li:last-child { border-bottom: 0; padding-bottom: 0.4rem; }
.menu-card .dish {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.005em;
  line-height: 1.3;
  color: var(--ink);
}
.menu-card .dish-desc {
  display: block;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.65;
  margin-top: 0.4rem;
  font-style: italic;
  font-family: var(--serif);
  line-height: 1.5;
}
.menu-card .price {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--burgundy);
  opacity: 0.85;
  font-weight: 400;
  font-family: var(--serif);
  font-size: 1.1rem;
  align-self: start;
  padding-top: 0.05rem;
}

/* ============ SUPPLIERS / PRIVATE DINING CARDS ============ */
.suppliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.supplier {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 1.5rem;
}
.supplier h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--burgundy);
  opacity: 0.7;
  margin: 0 0 1rem;
}
.supplier .name {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  margin: 0 0 0.4rem;
  color: var(--burgundy);
}
.supplier .where {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.96rem;
  color: var(--ink);
  opacity: 0.7;
  margin: 0 0 1rem;
}
.supplier .desc {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.82;
  margin: 0;
}

/* ============ RESERVE FORM ============ */
.reserve-section {
  background: var(--paper);
  padding: clamp(4rem, 8vw, 6.5rem) var(--pad);
}
.reserve-form-wrap {
  max-width: 580px;
  margin: 0 auto;
}
.reserve-form-wrap .section-eyebrow { text-align: center; }
.reserve-form-wrap .section-title { text-align: center; font-size: clamp(2rem, 3.6vw, 3rem); }
.reserve-form {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.45rem; }
.form-field label {
  font-family: var(--sans);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--burgundy);
  opacity: 0.7;
  font-weight: 500;
}
.form-field input, .form-field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 0.65rem 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.18rem;
  color: var(--ink);
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s var(--ease);
  width: 100%;
  letter-spacing: 0.005em;
}
.form-field input:focus, .form-field select:focus {
  border-color: var(--burgundy);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--burgundy);
  color: var(--paper);
  border: 0;
  padding: 1.15rem 2.5rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  cursor: pointer;
  width: 100%;
  transition: background 0.4s var(--ease), letter-spacing 0.5s var(--ease), color 0.4s var(--ease);
  margin-top: 1rem;
  text-decoration: none;
}
.btn:hover { background: var(--burgundy-deep); letter-spacing: 0.4em; }
.btn-outline {
  background: transparent;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
}
.btn-outline:hover { background: var(--burgundy); color: var(--paper); }

/* ============ VISIT ============ */
/* visit-section uses the unified --section-pad-y from the generic <section> rule */
.visit-head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.visit-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--burgundy);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.visit-headline em { font-style: italic; font-weight: 400; }
.visit-intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--burgundy);
  opacity: 0.8;
  margin: 0 auto;
  max-width: 50ch;
  letter-spacing: 0.005em;
}
.visit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.visit-card { scroll-margin-top: 6rem; }
.visit-card h4 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--burgundy);
  opacity: 1;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline-strong);
}
/* Subsequent h4s within the same card (Takeaway, Private dining) get more breathing room */
.visit-card h4 + .body + h4,
.visit-card .hours + .visit-note + h4,
.visit-card h4:not(:first-child) {
  margin-top: 2.75rem;
}
.visit-card .body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.6;
  margin: 0;
  color: var(--ink);
}
.visit-card .body em { color: var(--burgundy); }
.visit-address {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0;
  color: var(--burgundy);
}
.visit-address em {
  font-style: italic;
  font-weight: 500;
}
.visit-note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  margin: 1.5rem 0 0;
  color: var(--ink);
  opacity: 0.7;
}
.visit-card .body a {
  color: var(--burgundy);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--ease);
}
.visit-card .body a:hover { border-bottom-color: var(--burgundy); }
.map-embed {
  margin-top: 1.4rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  filter: grayscale(0.4) contrast(0.95);
}
.map-embed iframe { border: 0; width: 100%; height: 100%; display: block; }
.hours { display: grid; gap: 0.55rem; }
.hours div {
  display: flex;
  justify-content: space-between;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--hairline);
}
.hours div:last-child { border-bottom: 0; }
.hours div span:first-child { color: var(--burgundy); }
.hours div span:last-child { opacity: 0.7; font-variant-numeric: tabular-nums; }
.closed { opacity: 0.45; }

/* ============ GALLERY ============ */
.gallery-head { margin-bottom: clamp(3rem, 6vw, 5rem); text-align: center; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  gap: 1.25rem;
}
.gallery-grid > div {
  overflow: hidden;
  background: var(--paper-soft) center/cover no-repeat;
  position: relative;
  cursor: pointer;
  transition: opacity 0.6s var(--ease);
}
.gallery-grid > div::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(42,20,24,0.7));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: 1;
}
.gallery-grid > div .gcap {
  position: absolute;
  left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: 2;
}
.gallery-grid > div:hover::after { opacity: 1; }
.gallery-grid > div:hover .gcap { opacity: 1; }
.g1 { grid-column: span 3; grid-row: span 2; }
.g2 { grid-column: span 3; grid-row: span 1; }
.g3 { grid-column: span 3; grid-row: span 1; }
.g4 { grid-column: span 2; grid-row: span 1; }
.g5 { grid-column: span 4; grid-row: span 1; }
.g6 { display: none; }

/* ============ GALLERY ESSAY (editorial magazine-style photo essay) ============ */
.gallery-essay {
  background: var(--paper);
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 7vw, 6rem);
  max-width: none;
  margin: 0;
}
.gallery-essay-head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto clamp(3.5rem, 7vw, 5.5rem);
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.gallery-essay-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: var(--burgundy);
  opacity: 0.65;
  margin: 0 0 1.5rem;
  font-weight: 400;
}
.gallery-essay-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--burgundy);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.gallery-essay-intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--burgundy);
  opacity: 0.8;
  margin: 0 auto;
  max-width: 50ch;
  letter-spacing: 0.005em;
}
/* Section gap matches the within-section grid gap so photos sit on a single,
   consistent vertical rhythm — even when captions live between them. */
.gallery-essay > * + * { margin-top: clamp(0.75rem, 1.5vw, 1.5rem); }
/* The text-only quote moment keeps its own generous internal padding */
.gallery-essay > .gallery-quote { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.gallery-essay > .gallery-quote + * { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.gallery-feature {
  width: 100%;
  margin: 0;
}
.gallery-feature-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-soft);
}
.gallery-pair {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  padding: 0 clamp(0.75rem, 1.5vw, 1.5rem);
}
.gallery-pair figure { margin: 0; }
.gallery-pair-photo {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-soft);
}
.gallery-pair figure:nth-child(1) .gallery-pair-photo { aspect-ratio: 5 / 4; }
.gallery-pair figure:nth-child(2) .gallery-pair-photo { aspect-ratio: 4 / 5; }
.gallery-quote {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 30ch;
  margin: 0 auto;
}
.gallery-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.18;
  color: var(--burgundy);
  margin: 0;
  text-wrap: balance;
}
.gallery-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  padding: 0 clamp(0.75rem, 1.5vw, 1.5rem);
}
.gallery-triptych figure { margin: 0; }
.gallery-triptych-photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-soft);
}
.gallery-caption {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  letter-spacing: 0.005em;
  color: var(--burgundy);
  opacity: 0.75;
  text-align: center;
  padding: 0.75rem 1rem 0;
  line-height: 1.4;
}
.gallery-feature .gallery-caption { padding-top: 0.9rem; }

/* Apply the same tonal cohesion filter to all gallery-essay photos */
.gallery-feature-photo,
.gallery-pair-photo,
.gallery-triptych-photo {
  filter: brightness(0.92) saturate(0.82) contrast(1.06);
  transition: filter 0.8s var(--ease), transform 1.6s var(--ease);
}
.gallery-feature:hover .gallery-feature-photo,
.gallery-pair figure:hover .gallery-pair-photo,
.gallery-triptych figure:hover .gallery-triptych-photo {
  transform: scale(1.02);
}

/* ============ FOOTER (cream centered, big wordmark, sitemap row) ============ */
footer {
  background: var(--paper);
  color: var(--burgundy);
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) 2rem;
  text-align: center;
}
.footer-newsletter {
  max-width: 64ch;
  margin: 0 auto 3rem;
}
.footer-newsletter h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.35;
  letter-spacing: 0.005em;
  margin: 0 0 2.5rem;
  color: var(--burgundy);
}
.footer-newsletter h3 em { font-style: italic; }
.news-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
  border-bottom: 1px solid rgba(90, 26, 44, 0.45);
  padding-bottom: 0.5rem;
  transition: border-color 0.5s var(--ease);
}
.news-form:focus-within { border-bottom-color: var(--burgundy); }
.news-form input {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--burgundy);
  padding: 0.6rem 0;
  text-align: center;
  letter-spacing: 0.01em;
}
.news-form input::placeholder { color: var(--burgundy); opacity: 0.5; font-style: italic; }
.news-form button {
  background: transparent;
  border: 0;
  color: var(--burgundy);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.6rem 0;
  position: relative;
  transition: color 0.4s var(--ease);
}
.news-form button::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.4rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease);
}
.news-form button:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.footer-wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4rem, 12vw, 9rem);
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 4rem 0 2.5rem;
  color: var(--burgundy);
  text-transform: uppercase;
  display: inline-block;
  cursor: default;
  transition: letter-spacing 1.6s var(--ease), color 0.6s var(--ease);
}
.footer-wordmark:hover { letter-spacing: 0.09em; color: var(--burgundy-deep); }
.footer-sitemap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin: 0 auto 2.5rem;
  max-width: var(--max);
}
.footer-sitemap a {
  font-family: var(--sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--burgundy);
  font-weight: 400;
  position: relative;
  padding-bottom: 4px;
}
/* Sliding underline — left-to-right reveal on hover */
.footer-sitemap a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.55s var(--ease);
}
.footer-sitemap a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.footer-copyright {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--burgundy);
  opacity: 0.6;
  letter-spacing: 0.05em;
  margin-top: 2rem;
}
.footer-copyright a { border-bottom: 1px solid var(--hairline-strong); padding-bottom: 1px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 880px) {
  .nav-links a { display: none; }
  .nav-links { gap: 0; }

  .hero { height: 92vh; min-height: 540px; }
  /* Wordmark font-size on mobile is handled by JS on home; nav-sized otherwise */
  .hero-tagline { bottom: auto; top: 35%; right: 1.5rem; max-width: 18ch; font-size: 1.05rem; }

  .page-hero { min-height: 56vh; padding: 5rem 1.5rem; }
  .page-hero h1 { font-size: clamp(2.8rem, 12vw, 5rem); }

  .statement { min-height: 70vh; }

  .split { grid-template-columns: 1fr; min-height: auto; }
  .split-photo { aspect-ratio: 4/5; min-height: 0; }
  .split-text { padding: 3rem 1.75rem; }

  .about-teaser, .booking { grid-template-columns: 1fr; min-height: auto; }
  .about-teaser-photo, .booking-photo { aspect-ratio: 4/5; min-height: 0; }
  .about-teaser-content { padding: 3rem 1.75rem; }

  /* Chef feature collapses to single column with the photo on top — the chef
     leads visually on mobile, copy follows. */
  .chef-feature { grid-template-columns: 1fr; min-height: auto; }
  .chef-feature-photo { aspect-ratio: 4/5; min-height: 0; order: -1; }
  .chef-feature-content { padding: 2.75rem 1.75rem 3rem; max-width: none; }
  .chef-feature-name { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .booking-panel { padding: 3rem 1.75rem; align-items: stretch; max-width: none; }
  .booking-widget { max-width: none; }

  /* Crop to portrait on mobile — sides crop in, but the focal point stays
     centered via background-position. Vertical padding inherits from the
     unified --section-pad-y. */
  .portrait-photo { aspect-ratio: 3 / 4; background-position: center 30%; }
  .portrait-caption { padding: 1.25rem 1.25rem 0; font-size: 1rem; }

  .menu-grid { grid-template-columns: 1fr; gap: 3rem; }
  .visit-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-row { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; gap: 0.75rem; }
  .gallery-grid > div { grid-column: span 1 !important; grid-row: span 1 !important; display: block !important; }
  .gallery-grid .g1 { grid-column: span 2 !important; }

  /* Gallery essay collapses to single column on mobile */
  .gallery-pair, .gallery-triptych { grid-template-columns: 1fr; gap: 1rem; padding: 0; }
  .gallery-pair figure:nth-child(1) .gallery-pair-photo,
  .gallery-pair figure:nth-child(2) .gallery-pair-photo { aspect-ratio: 4 / 5; }
  .gallery-feature-photo { aspect-ratio: 16 / 9; }

  .footer-wordmark { font-size: clamp(3.5rem, 18vw, 6rem); }
  .footer-sitemap { gap: 1.25rem 2.5rem; }
}

/* ============ REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.menu-grid > *,
.gallery-grid > *,
.visit-grid > *,
.suppliers > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.in .menu-grid > *,
.in .gallery-grid > *,
.in .visit-grid > *,
.in .suppliers > * {
  opacity: 1;
  transform: translateY(0);
}
.in .menu-grid > *:nth-child(1)    { transition-delay: 0.06s; }
.in .menu-grid > *:nth-child(2)    { transition-delay: 0.16s; }
.in .menu-grid > *:nth-child(3)    { transition-delay: 0.26s; }
.in .menu-grid > *:nth-child(4)    { transition-delay: 0.36s; }
.in .menu-grid > *:nth-child(5)    { transition-delay: 0.46s; }
.in .menu-grid > *:nth-child(6)    { transition-delay: 0.56s; }
.in .visit-grid > *:nth-child(1)   { transition-delay: 0.06s; }
.in .visit-grid > *:nth-child(2)   { transition-delay: 0.18s; }
.in .visit-grid > *:nth-child(3)   { transition-delay: 0.30s; }
.in .suppliers > *:nth-child(1)    { transition-delay: 0.06s; }
.in .suppliers > *:nth-child(2)    { transition-delay: 0.16s; }
.in .suppliers > *:nth-child(3)    { transition-delay: 0.26s; }
.in .suppliers > *:nth-child(4)    { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .menu-grid > *, .gallery-grid > *, .visit-grid > *, .suppliers > * {
    opacity: 1; transform: none; transition: none;
  }
  body { animation: none; }
  .hero-photo, .page-hero-photo, .statement-photo { animation: none; }
  .hero video { animation: none; display: none; }
  .hero-wordmark, .hero-tagline, .page-hero h1, .page-hero p, .page-hero-eyebrow,
  .statement-eyebrow, .statement-title { opacity: 1; animation: none; }
  .split:hover .split-photo,
  .about-teaser:hover .about-teaser-photo { transform: none; }
  .reserve-block-photo { animation: none; }
  .hero-wordmark::after { animation: none; }
  .footer-wordmark:hover { letter-spacing: 0.04em; }
  html { scroll-behavior: auto; }
}