/* ===========================
   Chef’s Table — Carla-style hero (fixed layering + full-bleed)
   =========================== */

:root{
  --ink:#e9e2d7;             /* warm off-white text */
  --ink-dim:rgba(233,226,215,.84);
  --bg:#0c0c0b;              /* deep black */
  --overlay:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.55) 60%, rgba(0,0,0,.65));
  --green:#1e3a23;           /* book-cta green */
  --green-2:#274a2e;
  --drawer:#0f0f0f;
  --drawer-line:rgba(255,255,255,.08);
  --tracking:.2em;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header chrome */
.chrome{
  position:fixed; inset:0 0 auto 0; height:72px; z-index:100;   /* above everything */
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px;
  pointer-events:none;
}
.chrome > * { pointer-events:auto; }

.burger{
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:44px; height:44px; display:grid; place-items:center;
}
.burger span{ display:block; width:22px; height:2px; background:var(--ink); margin:3px 0; border-radius:2px; }

.cta{
  display:inline-block; padding:.7rem 1rem; background:var(--green); color:var(--ink);
  text-decoration:none; border-radius:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem;
}
.cta:hover{ background:var(--green-2); }

/* Drawer */
.drawer{
  position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter: blur(6px);
  opacity:0; visibility:hidden; transition:.25s ease; z-index:120;
}
.drawer.open{ opacity:1; visibility:visible; }
.drawer__nav{
  position:absolute; top:0; left:0; height:100%; width:min(340px, 86vw);
  background:var(--drawer); padding:24px 24px 24px 28px; border-right:1px solid var(--drawer-line);
  display:flex; flex-direction:column; gap:18px;
}
.drawer__nav a{
  color:var(--ink); text-decoration:none; letter-spacing:var(--tracking); text-transform:uppercase; font-size:.86rem; opacity:.9;
}
.drawer__nav a:hover{ opacity:1; }

/* HERO: guaranteed full viewport height across devices */
.hero{
  position:relative;
  height:100vh;            /* fallback */
  height:100svh;           /* iOS 15+ safe */
  height:100dvh;           /* modern dynamic */
  overflow:hidden;
  display:grid; place-items:center;
}

/* Proper stacking: video(0) < overlay(1) < text(2) < chrome(100) */
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__overlay{ position:absolute; inset:0; z-index:1; background:var(--overlay); }

/* Make the Vimeo iframe truly cover the hero area on any aspect ratio */
.hero__video{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  border:0; pointer-events:none;
  /* two modes depending on viewport aspect ratio */
  width:100vw; height:56.25vw;          /* 16:9 based on width */
}
@media (max-aspect-ratio: 16/9){
  .hero__video{ width:177.78vh; height:100vh; }  /* 9/16 based on height */
}

/* Text layers */
.eyebrow, .display, .edge{ position:relative; z-index:2; }

.eyebrow{
  position:absolute; top:82px; left:50%; transform:translateX(-50%);
  color:var(--ink-dim); letter-spacing:var(--tracking); text-transform:uppercase; font-size:.76rem;
}

.display{
  margin:0;
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 100, "WONK" 0;
  font-weight:600; line-height:1;
  font-size: clamp(3.4rem, 11vw, 12rem);
  letter-spacing:.04em;
  color:var(--ink);
  text-align:center;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

.edge{
  position:absolute; bottom:24px; color:var(--ink-dim);
  font-size:.82rem; letter-spacing:var(--tracking); text-transform:uppercase;
}
.edge a{ color:inherit; text-decoration:none; }
.edge--left{ left:24px; }
.edge--center{ left:50%; transform:translateX(-50%); }
.edge--right{ right:24px; }

/* Anchor placeholders */
.anchor{ height:1px; }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .hero__bg{ display:none; }
  .hero{ background:#151513; }
}
/* === Requested tweaks: hero offset + red CTA === */

/* Move the big hero title up 1 inch from its centered position */
.display{
  position: relative;   /* keep it on the same stacking context */
  top: -1in;            /* 1 inch = 96px */
}

/* Change the CTA button to red */
.cta{
  background: #B71C1C;  /* red */
  color: #e9e2d7;       /* keep the warm off‑white text */
}
.cta:hover{
  background: #8E1515;  /* darker red on hover */
}
/* === Subtle premium differentiators (not a Carla clone) === */

/* 1) Burgundy‑tinted overlay + soft vignette for a distinct mood */
.hero__overlay{
  background:
    radial-gradient(1200px 600px at 50% 80%, rgba(183, 28, 28, .14), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.62) 62%, rgba(0,0,0,.72));
}
/* Film‑like vignette without images */
.hero::before{
  content:"";
  position:absolute; inset:-20px; z-index:1;
  background: radial-gradient(80% 60% at 50% 50%, transparent 40%, rgba(0,0,0,.2) 100%);
  pointer-events:none;
}

/* 2) Display refinement + keep the 1‑inch lift */
.display{
  position:relative;
  top:-1in;                            /* your previous request */
  letter-spacing:.02em;                 /* slightly tighter */
  font-variation-settings:"opsz" 96, "SOFT" 88, "WONK" 0; /* crisper cut (Fraunces) */
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
@media (max-width: 480px){
  .display{ top:-0.6in; }              /* gentle mobile nudge */
}

/* 3) CTA theme: red + subtle border and shadow */
.cta{
  background:#B71C1C;                  /* red brand tone */
  border:1px solid rgba(255,255,255,.08);
  color:#FAF6F1;
  box-shadow:0 6px 22px rgba(183,28,28,.28);
}
.cta:hover{
  background:#8E1515;
  box-shadow:0 8px 28px rgba(183,28,28,.36);
}

/* 4) Edge links: more delicate caps + bespoke hover underline */
.edge{
  letter-spacing:.18em;                 /* slightly different rhythm */
  font-size:.78rem;
}
.edge a{ position:relative; }
.edge a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px;
  background:currentColor; opacity:.7; transition:width .25s ease, opacity .25s ease;
}
.edge a:hover::after{ width:100%; opacity:1; }

/* 5) Burger bars—more refined weight and tone */
.burger span{
  height:1.8px;
  background:rgba(233,226,215,.92);
}

/* 6) Micro composition changes so it’s not pixel-identical */
.eyebrow{ top:88px; letter-spacing:.22em; }  /* slight shift + tracking change */
.edge--left{ left:32px; }
.edge--right{ right:32px; }

/* 7) Optional: a discrete scroll dot for signature touch */
.hero::after{
  content:"";
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%;
  background:var(--ink-dim);
  box-shadow:0 0 0 6px rgba(233,226,215,.06);
  z-index:2;
}
/* === Edge links: new placement + premium styling (no text changes) === */
:root{
  /* Accent for the small dot; matches your red CTA */
  --edge-accent: #B71C1C;
}

/* Slightly tighter rhythm + subtle opacity */
.hero .edge{
  letter-spacing:.15em;
  font-size:.78rem;
  opacity:.96;
}

/* Asymmetric placement so it’s not pixel-identical */
.hero .edge--left  { left:40px; bottom:72px; }
.hero .edge--center{ left:50%; transform:translateX(-50%); bottom:36px; }
.hero .edge--right { right:40px; bottom:96px; }

/* Replace plain text with refined “ticks” + hover polish */
.hero .edge a{
  position:relative;
  text-decoration:none;
  padding:.2rem .6rem;
}
.hero .edge a::before,
.hero .edge a::after{
  content:"";
  position:absolute;
  top:50%;
  width:14px; height:1px;
  background:currentColor;
  opacity:.55;
  transform:translateY(-50%);
}
.hero .edge a::before{ left:-18px; }   /* left tick */
.hero .edge a::after { right:-18px; }  /* right tick */

/* Center link gets a signature accent dot instead of a right tick */
.hero .edge--center a::after{
  width:6px; height:6px; right:-10px; border-radius:50%;
  background:var(--edge-accent);
  box-shadow:0 0 0 6px rgba(183,28,28,.08);
  opacity:.95;
}

/* Hover refinement */
.hero .edge a:hover::before,
.hero .edge a:hover::after{ opacity:.9; }

/* Mobile tweak so spacing stays graceful */
@media (max-width: 640px){
  .hero .edge--left,
  .hero .edge--right{ bottom:56px; }
  .hero .edge--center{ bottom:22px; }
}

/* ===========================
   GLASS MOSAIC — elegant dish cards
   =========================== */

/* Ensure alternating tones exist (safe if already defined) */
.page-section.tone-b{
  --tone-bg:#11100F;
  --tone-ink:#EEE8DE;
  --tone-muted:rgba(238,232,222,.82);
  --tone-line:rgba(238,232,222,.14);
  background:var(--tone-bg);
  color:var(--tone-ink);
  border-top:1px solid var(--tone-line);
}

/* Wrapper + subtle background shapes to feed the glass blur */
.gallery{ position:relative; padding: clamp(60px, 7vw, 108px) 0; }
.gallery__wrap{ position:relative; }
.gallery__bg{
  position:absolute; inset:-80px -40px -60px -40px; z-index:0;
  background:
    radial-gradient(900px 420px at 15% 30%, rgba(183,28,28,.08), transparent 60%),
    radial-gradient(700px 380px at 85% 70%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(600px 300px at 50% 95%, rgba(255,255,255,.05), transparent 60%);
  pointer-events:none;
  filter: saturate(120%);
}

/* Grid structure: two curated rows for deliberate placement */
.gallery__grid{ position:relative; z-index:1; display:grid; gap:14px; }
.gallery__row{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; }

.row--top .card--spotlight{ grid-column: 1 / span 8; }
.row--top .card--tall:nth-of-type(2){ grid-column: 9 / span 2; }
.row--top .card--tall:nth-of-type(3){ grid-column: 11 / span 2; }

.row--bottom .card:nth-of-type(1){ grid-column: 1 / span 3; }
.row--bottom .card.card--wide{ grid-column: 4 / span 6; }
.row--bottom .card:nth-of-type(3){ grid-column: 10 / span 3; }

/* Responsive: collapse to elegant stack */
@media (max-width: 980px){
  .gallery__row{ grid-template-columns: repeat(6, 1fr); }
  .row--top .card--spotlight{ grid-column:1 / span 6; }
  .row--top .card--tall:nth-of-type(2){ grid-column:1 / span 3; }
  .row--top .card--tall:nth-of-type(3){ grid-column:4 / span 3; }

  .row--bottom .card:nth-of-type(1){ grid-column:1 / span 3; }
  .row--bottom .card.card--wide{ grid-column:1 / span 6; }
  .row--bottom .card:nth-of-type(3){ grid-column:4 / span 3; }
}
@media (max-width: 620px){
  .gallery__row{ grid-template-columns: 1fr; }
  .gallery__row .card{ grid-column: auto / span 1; }
}

/* Cards */
.card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.04) 60%, transparent),
    var(--img) center/cover no-repeat;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  transform: translateZ(0);
  will-change: transform;
  transition: transform .35s ease, box-shadow .35s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 80px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Variants for deliberate rhythm */
.card--spotlight{ aspect-ratio: 16 / 9; }
.card--wide{ aspect-ratio: 16 / 9; }
.card--tall{ aspect-ratio: 3 / 4; }

/* Glass captions (true frosted if supported) */
.glass{
  position:absolute; z-index:2;
  padding:.65rem .8rem;
  border-radius:12px;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
}
@supports not (backdrop-filter: blur(10px)){
  .glass{ background: rgba(255,255,255,.08); }
}

/* Placement presets for captions */
.glass--bottom-left{ left:14px; bottom:14px; }
.glass--bottom-right{ right:14px; bottom:14px; }
.glass--top-right{ right:14px; top:14px; }
.glass--top-left{ left:14px; top:14px; }
.glass--center{
  left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center; padding:.9rem 1.1rem;
}

/* Micro‑typography inside captions: minimal, not number‑driven */
.pill{
  display:inline-block; padding:.18rem .5rem; border-radius:999px;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18);
}
.glass h3{
  margin:.35rem 0 0; font-family:"Fraunces", Georgia, serif; font-weight:700;
  letter-spacing:.01em; line-height:1.08; font-size: clamp(1rem, 1.8vw, 1.3rem);
  text-shadow: 0 1px 16px rgba(0,0,0,.35);
}
.glass p{
  margin:.15rem 0 0; font-size:.9rem; opacity:.86;
}

/* Tiny grain for depth (only over images, not the glass) */
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 2px 2px;
  mix-blend-mode: soft-light; opacity:.6;
}
/* Top-row filler under Branzino/Radicchio */
.row--top .card--short{
  grid-column: 9 / span 4;   /* cols 9–12 in the TOP ROW */
  aspect-ratio: 16 / 9;      /* elegant, shallow rectangle */
}

/* Responsive mapping */
@media (max-width: 980px){
  .row--top .card--short{ grid-column: 1 / span 6; }
}
/* --- TOP ROW: create two tracks and place cards precisely --- */
.gallery__row.row--top{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto !important; /* row 1 (talls), row 2 (the fill card) */
  gap:14px;
}

/* Left spotlight spans BOTH tracks so the right side can use track 2 */
.row--top .card--spotlight{
  grid-column: 1 / span 8 !important;
  grid-row: 1 / span 2 !important;   /* spans rows 1 + 2 */
  aspect-ratio: auto !important;     /* let the row heights define its height */
  height: 100%;                       /* fill the two-track area */
}

/* Tall pair stay in track 1 */
.row--top .card--branzino{
  grid-column: 9 / span 2 !important;
  grid-row: 1 !important;
}
.row--top .card--radicchio{
  grid-column: 11 / span 2 !important;
  grid-row: 1 !important;
}

/* NEW fill card sits directly beneath the tall pair (INSIDE top row) */
.row--top .card--fill-top{
  grid-column: 9 / span 4 !important;    /* cols 9–12, under both talls */
  grid-row: 2 !important;                /* top-row track 2 */
  aspect-ratio: 11 / 5;                  /* tuned so total height ≈ left spotlight */
}

/* If you only want it under Branzino (not both), swap the line above for: */
/* .row--top .card--fill-top{ grid-column: 9 / span 2 !important; grid-row: 2 !important; } */

/* Responsive behavior */
@media (max-width: 980px){
  .row--top .card--spotlight{ grid-column: 1 / span 6 !important; }
  .row--top .card--branzino { grid-column: 1 / span 3 !important; }
  .row--top .card--radicchio{ grid-column: 4 / span 3 !important; }
  .row--top .card--fill-top{ grid-column: 1 / span 6 !important; grid-row: 2 !important; }
}
@media (max-width: 620px){
  /* Stack gracefully on small phones */
  .gallery__row.row--top{ grid-template-rows: auto; }
  .row--top .card--spotlight,
  .row--top .card--branzino,
  .row--top .card--radicchio,
  .row--top .card--fill-top{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: auto;
  }
}
/* =========================================================
   PRIVATE DINING (pd4) — typographic spine + single photo
   ========================================================= */

/* Deep wine field (quiet, non-banding) */
.pd4.tone-wine{
  --ink:   #F3ECE4;
  --muted: rgba(243,236,228,.84);
  --line:  rgba(243,236,228,.14);

  color: var(--ink);
  position: relative;
  padding: clamp(84px, 8vw, 132px) 0 clamp(72px, 7vw, 112px);
  border-top: 1px solid var(--line);

  background:
    radial-gradient(1000px 480px at 18% 22%, rgba(240,220,210,.05), transparent 60%),
    radial-gradient(1100px 560px at 78% 82%, rgba(183,28,28,.10), transparent 62%),
    linear-gradient(180deg, #1B0E12 0%, #0F080B 100%);
}

/* Container width */
.pd4 .wrap{ width:min(1100px, 92vw); margin-inline:auto; }

/* Grid: spine | intro/specs | photo  (photo spans two rows) */
.pd4__grid{
  display:grid;
  grid-template-columns: 56px 1.12fr .88fr;
  grid-template-areas:
    "spine intro photo"
    "spine specs photo";
  column-gap: clamp(28px, 5vw, 68px);
  row-gap: clamp(22px, 3vw, 36px);
  align-items:start;
}

/* Typographic spine (the "leading piece of typography") */
.pd4__spine{
  grid-area: spine;
  writing-mode: vertical-rl;          /* vertical type */
  transform: rotate(180deg);          /* top-to-bottom reading */
  text-orientation: mixed;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.78rem;
  color: var(--muted);
  border-left:1px solid var(--line);
  padding-left:14px;
  align-self:start;
}

/* Intro */
.pd4__intro{ grid-area:intro; }
.pd4__kicker{
  display:inline-block; text-transform:uppercase; letter-spacing:.22em;
  font-size:.78rem; color: var(--muted);
}
.pd4__title{
  margin:.35rem 0 .35rem;
  font-family:"Fraunces", Georgia, serif;
  font-weight:700; letter-spacing:.005em; line-height:1.04;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
}
.pd4__lede{ margin:0 0 .7rem; color: var(--muted); max-width: 54ch; }
.pd4__contact{ margin:.25rem 0 0; }
.pd4__contact a{
  color:inherit; text-decoration:none; border-bottom:1px solid rgba(243,236,228,.32);
}
.pd4__contact a:hover{ border-bottom-color: rgba(243,236,228,.62); }

/* Photo (single, refined) */
.pd4__photo{
  grid-area: photo;
  position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(to top, rgba(0,0,0,.50), rgba(0,0,0,.10) 60%, transparent),
    var(--img) center/cover no-repeat;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 64px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
.pd4__cap{
  position:absolute; left:12px; top:12px;
  padding:.28rem .6rem; border-radius:999px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
}

/* Specs (hairlines; restrained) */
.pd4__specs{
  grid-area: specs; margin:0;
  border-top:1px solid var(--line);
}
.pd4__row{
  display:grid; grid-template-columns: 1fr 1.2fr; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.pd4__row:last-child{ border-bottom:0; }
.pd4__row dt{
  margin:0; font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; color: var(--muted);
}
.pd4__row dd{ margin:0; color: var(--ink); }

/* Responsive */
@media (max-width: 980px){
  .pd4__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "photo"
      "specs";
  }
  .pd4__spine{ display:none; }
}
/* ===========================
   LIFE PACK — micro‑motion for Private Dining
   Targets .pd4 (spine version) and .pdx (variant)
   =========================== */

@media (prefers-reduced-motion: no-preference){

  /* Ambient candle‑glow that drifts quietly */
  #private-dining.pd4::before,
  #private-dining.pdx::before{
    content:"";
    position:absolute; inset:-24px;
    pointer-events:none; z-index:0;
    background:
      radial-gradient(900px 420px at 18% 22%, rgba(255,190,160,.06), transparent 60%),
      radial-gradient(680px 360px at 82% 84%, rgba(183,28,28,.10), transparent 62%);
    filter: blur(18px);
    opacity:.55;
    animation: pd-ambient 16s ease-in-out infinite alternate;
  }
  @keyframes pd-ambient{
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(0,-12px,0) scale(1.02); }
  }

  /* Section-level reveal: once in view, fade/settle key elements */
  #private-dining.pd4:not(.is-inview) .pd4__title,
  #private-dining.pd4:not(.is-inview) .pd4__intro,
  #private-dining.pd4:not(.is-inview) .pd4__specs,
  #private-dining.pd4:not(.is-inview) .pd4__spine,
  #private-dining.pd4:not(.is-inview) .pd4__photo,
  #private-dining.pdx:not(.is-inview) .pdx__title,
  #private-dining.pdx:not(.is-inview) .pdx__intro,
  #private-dining.pdx:not(.is-inview) .pdx__specs,
  #private-dining.pdx:not(.is-inview) .pdx__side,
  #private-dining.pdx:not(.is-inview) .pdx__photo{
    opacity:0; transform: translateY(10px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
  }
  #private-dining.pd4.is-inview .pd4__title,
  #private-dining.pd4.is-inview .pd4__intro,
  #private-dining.pd4.is-inview .pd4__specs,
  #private-dining.pd4.is-inview .pd4__spine,
  #private-dining.pd4.is-inview .pd4__photo,
  #private-dining.pdx.is-inview .pdx__title,
  #private-dining.pdx.is-inview .pdx__intro,
  #private-dining.pdx.is-inview .pdx__specs,
  #private-dining.pdx.is-inview .pdx__side,
  #private-dining.pdx.is-inview .pdx__photo{
    opacity:1; transform:none;
  }

  /* Subtle “letterpress” accent on the vertical spine when revealed */
  #private-dining.pd4.is-inview .pd4__spine,
  #private-dining.pdx.is-inview .pdx__side{
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  }

  /* Drop‑cap breathes in slightly on reveal (kept very subtle) */
  #private-dining.pd4 .pd4__intro::first-letter,
  #private-dining.pdx .pdx__intro::first-letter{
    transition: transform .7s ease, opacity .7s ease;
    transform: translateY(6px);
    opacity:.9;
  }
  #private-dining.pd4.is-inview .pd4__intro::first-letter,
  #private-dining.pdx.is-inview .pdx__intro::first-letter{
    transform: translateY(0);
    opacity:1;
  }

  /* Photo gentle parallax driven by CSS var --y (set in JS below) */
  #private-dining .pd4__photo,
  #private-dining .pdx__photo{
    transform: translate3d(0,var(--y,0),0) scale(1.002);
    transition: transform .2s linear;  /* keeps the drift smooth */
    will-change: transform;
  }

  /* Touch of light sweep on photo caption pill (hover/focus only) */
  #private-dining .pd4__tag,
  #private-dining .pdx__tag{
    position:relative; overflow:hidden;
  }
  #private-dining .pd4__tag::after,
  #private-dining .pdx__tag::after{
    content:""; position:absolute; inset:0; transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transition: transform .7s ease;
  }
  #private-dining .pd4__tag:hover::after,
  #private-dining .pdx__tag:hover::after{
    transform: translateX(120%);
  }
}
/* =========================================================
   RESERVATIONS — atelier composition (black / tone-b)
   ========================================================= */

.resv-atelier.page-section.tone-b{
  /* tone-b gives charcoal palette; refine rhythm + depth */
  padding: clamp(76px, 7.4vw, 124px) 0;
  position: relative;
}

.resv-atelier .wrap{
  width: min(1120px, 92vw);
  margin-inline:auto;
}

/* Frame: copy | card, with crown/base hairlines */
.resvA__frame{
  position:relative;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  column-gap: clamp(28px, 5vw, 68px);
  align-items:start;
}
.resvA__crown,
.resvA__base{
  position:absolute; left:0; right:0; height:1px; opacity:.9;
  background: linear-gradient(90deg, transparent, var(--tone-line, rgba(238,232,222,.14)), transparent);
}
.resvA__crown{ top:-14px; }
.resvA__base{ bottom:-14px; }

/* Editorial copy (left) */
.resvA__copy{ max-width: 60ch; }
.resvA__eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.22em;
  font-size:.78rem; color: var(--tone-muted, rgba(238,232,222,.82));
}
.resvA__title{
  margin:.35rem 0 .4rem;
  font-family:"Fraunces", Georgia, serif;
  font-weight:700; letter-spacing:.005em; line-height:1.04;
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  color: var(--tone-ink, #EEE8DE);
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.resvA__lede{
  margin:0 0 .8rem; color: var(--tone-muted, rgba(238,232,222,.82));
}
.resvA__lede a{
  color: var(--tone-ink, #EEE8DE); text-decoration:none;
  border-bottom:1px solid rgba(238,232,222,.28);
}
.resvA__lede a:hover{ border-bottom-color: rgba(238,232,222,.6); }

.resvA__notes{
  margin:.4rem 0 0; padding:0; list-style:none;
  color: var(--tone-muted, rgba(238,232,222,.82));
}
.resvA__notes li{ padding:.5rem 0; border-top:1px solid var(--tone-line, rgba(238,232,222,.14)); }
.resvA__notes li:first-child{ border-top:0; }

/* Booking card (right) */
.resvA__card{
  border:1px solid var(--tone-line, rgba(238,232,222,.14));
  border-radius:14px;
  background: rgba(255,255,255,.035);
  -webkit-backdrop-filter: blur(7px) saturate(110%);
  backdrop-filter: blur(7px) saturate(110%);
  box-shadow: 0 14px 42px rgba(0,0,0,.30);
  padding: clamp(16px, 2vw, 22px);
}
.resvA__cardHead{
  display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem;
  border-bottom:1px solid var(--tone-line, rgba(238,232,222,.14));
  padding-bottom:.6rem;
}
.resvA__cardHead .dot{
  width:8px; height:8px; border-radius:50%;
  background:#B71C1C; box-shadow: 0 0 0 6px rgba(183,28,28,.08);
}
.resvA__cardHead .label{
  text-transform:uppercase; letter-spacing:.18em; font-size:.78rem;
  color: var(--tone-muted, rgba(238,232,222,.82));
}

/* Compact, elegant grid inside the card */
.resvA__card .grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 1100px){
  /* three-across for date/guests/time on large screens */
  .resvA__card .grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .resvA__card .field:nth-child(4),
  .resvA__card .field:nth-child(5),
  .resvA__card .field:nth-child(6),
  .resvA__card .field.field--notes{
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px){
  .resvA__frame{ grid-template-columns: 1fr; row-gap: 18px; }
}

/* Fields */
.resvA__card .field{ display:grid; gap:.35rem; }
.resvA__card label{
  letter-spacing:.14em; text-transform:uppercase; font-size:.76rem;
  color: var(--tone-muted, rgba(238,232,222,.82));
}
.resvA__card input,
.resvA__card select,
.resvA__card textarea{
  width:100%;
  border:1px solid var(--tone-line, rgba(238,232,222,.14));
  border-radius:10px;
  padding:.8rem .9rem;
  font:inherit; color: var(--tone-ink, #EEE8DE);
  background: rgba(255,255,255,.02);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.resvA__card input::placeholder,
.resvA__card textarea::placeholder{ color: rgba(238,232,222,.55); }
.resvA__card input:focus,
.resvA__card select:focus,
.resvA__card textarea:focus{
  border-color:#B71C1C;
  box-shadow: 0 0 0 3px rgba(183,28,28,.22);
  background: rgba(255,255,255,.035);
}

/* Actions */
.resvA__actions{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-top:.6rem; border-top:1px solid var(--tone-line, rgba(238,232,222,.14));
  padding-top:.8rem;
}
.resvA__submit{
  appearance:none; border:1px solid rgba(238,232,222,.16);
  background:#B71C1C; color:#FAF6F1;
  border-radius:999px; padding:.85rem 1.15rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem;
  cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 22px rgba(183,28,28,.28);
}
.resvA__submit:hover{ transform: translateY(-1px); background:#8E1515; box-shadow: 0 8px 28px rgba(183,28,28,.36); }
.resvA__status{ min-height:1.2em; color: var(--tone-muted, rgba(238,232,222,.82)); }

.resvA__policy{
  margin:.4rem 0 0; color: var(--tone-muted, rgba(238,232,222,.82));
  font-size:.95rem;
}
/* === Reservations (resv-atelier) — left-column photo === */
.resv-atelier .resvA__photo{
  /* sits under the editorial copy, same left column */
  grid-column: 1;                         /* stay on the left column */
  margin-top: clamp(16px, 2.6vw, 24px);
  position: relative;
  aspect-ratio: 16 / 10;                  /* elegant, shallow landscape */
  border-radius: 14px;
  overflow: hidden;

  background:
    linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.10) 60%, transparent),
    var(--img) center/cover no-repeat;

  border: 1px solid var(--tone-line, rgba(238,232,222,.14));
  box-shadow: 0 18px 50px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Small caption pill */
.resv-atelier .resvA__tag{
  position: absolute; left: 12px; bottom: 12px;
  padding: .28rem .6rem; border-radius: 999px;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
}

/* (Optional) give the photo a breath of life: subtle micro-parallax */
@media (prefers-reduced-motion: no-preference){
  .resv-atelier .resvA__photo{
    transform: translate3d(0,var(--ry,0),0) scale(1.002);
    transition: transform .2s linear;
    will-change: transform;
  }
}

/* Responsive: keep it graceful on small screens */
@media (max-width: 700px){
  .resv-atelier .resvA__photo{ aspect-ratio: 4 / 3; }
}
/* === Reservations (resv-atelier): fix layout so card stays top-right === */
.resv-atelier .resvA__frame{
  display: grid;
  grid-template-columns: 1.08fr .92fr; /* left copy/photo | right card */
  column-gap: clamp(28px, 5vw, 68px);
  align-items: start;
}

/* Explicit placement */
.resv-atelier .resvA__copy  { grid-column: 1; grid-row: 1; }
.resv-atelier .resvA__card  { grid-column: 2; grid-row: 1; }  /* keep card top-right */
.resv-atelier .resvA__photo { grid-column: 1; grid-row: 2; }  /* photo sits under the copy */

/* Mobile/tablet stack gracefully */
@media (max-width: 700px){
  .resv-atelier .resvA__frame{ grid-template-columns: 1fr; }
  .resv-atelier .resvA__copy,
  .resv-atelier .resvA__card,
  .resv-atelier .resvA__photo{
    grid-column: 1;
    grid-row: auto;
  }
}
/* === Reservations (resv-atelier): keep card top-right, photo directly under copy === */
#reservations.resv-atelier .resvA__frame{
  display:grid;
  grid-template-columns: 1.08fr .92fr;                 /* left | right */
  grid-template-rows: auto auto;                       /* row 1: copy, row 2: photo */
  grid-template-areas:
    "copy  card"
    "photo card";
  column-gap: clamp(28px, 5vw, 68px);
  align-items:start;
}

/* Pin each piece to its area (overrides any previous grid-column/row) */
#reservations.resv-atelier .resvA__copy  { grid-area: copy  !important; align-self:start; }
#reservations.resv-atelier .resvA__photo { grid-area: photo !important; align-self:start; }
#reservations.resv-atelier .resvA__card  { grid-area: card  !important; align-self:start; }

/* Tidy spacing so the photo tucks neatly under the text */
#reservations.resv-atelier .resvA__photo{ margin-top: clamp(14px, 2.4vw, 22px); }

/* Mobile: stack copy → photo → card */
@media (max-width: 700px){
  #reservations.resv-atelier .resvA__frame{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "copy"
      "photo"
      "card";
  }
}
/* ===========================
   ABOUT — Cinematic long take
   =========================== */

.page-section.tone-wine.about-cinema{
  --ink:#F3ECE4;
  --muted:rgba(243,236,228,.86);
  --line:rgba(243,236,228,.14);

  color:var(--ink);
  position:relative;
  height:300vh;             /* enough runway for the “take” */
  padding:0;                /* no content box */
  border-top:1px solid var(--line);
  background:
    radial-gradient(1000px 460px at 22% 18%, rgba(240,220,210,.06), transparent 60%),
    radial-gradient(1100px 540px at 78% 84%, rgba(183,28,28,.10), transparent 62%),
    linear-gradient(180deg, #1A0E12 0%, #0E080A 100%);
}

.aboutC__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }

/* Frames (three “scenes”) */
.aboutC__bg, .aboutC__frame{ position:absolute; inset:0; }
.aboutC__frame{
  opacity:0;
  transform:scale(1.06);
  transition:opacity .9s ease, transform 1.6s ease;
  will-change:opacity, transform;
  background:
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.10) 60%, transparent);
  background-blend-mode:normal;
  background-size:cover, cover;
  background-position:center, center;
}
.aboutC__frame[data-act="1"]{ background-image:
  linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.10) 60%, transparent), var(--img1); }
.aboutC__frame[data-act="2"]{ background-image:
  linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.10) 60%, transparent), var(--img2); }
.aboutC__frame[data-act="3"]{ background-image:
  linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.10) 60%, transparent), var(--img3); }

.about-cinema.is-act1 .aboutC__frame[data-act="1"],
.about-cinema.is-act2 .aboutC__frame[data-act="2"],
.about-cinema.is-act3 .aboutC__frame[data-act="3"]{
  opacity:1; transform:scale(1.02);
}

/* Film grain */
.aboutC__grain{
  position:absolute; inset:-10px; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:2px 2px; mix-blend-mode:soft-light; opacity:.6;
}

/* Letterbox bars */
.aboutC__bars::before,
.aboutC__bars::after{
  content:""; position:absolute; left:0; right:0; height:11vh; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.66));
  transform:translateY(-100%); transition:transform .8s ease;
}
.aboutC__bars::after{
  top:auto; bottom:0; transform:translateY(100%);
  background:linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.66));
}
.about-cinema.is-inview .aboutC__bars::before{ top:0; transform:none; }
.about-cinema.is-inview .aboutC__bars::after{ transform:none; }

/* Eyebrow + lines (beats) */
.aboutC__eyebrow{
  position:absolute; top:76px; left:50%; transform:translateX(-50%); z-index:3;
  letter-spacing:.28em; text-transform:uppercase; font-size:.78rem; color:var(--muted);
}
.aboutC__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

.aboutC__lines{
  position:absolute; left:10vw; right:10vw; bottom:24vh; z-index:3;
  text-align:center; font-family:"Fraunces", Georgia, serif; line-height:1.04;
}
.aboutC__lines p{
  margin:0; font-size:clamp(1.6rem, 5vw, 3rem); letter-spacing:.005em;
  opacity:0; transform:translateY(12px); filter: drop-shadow(0 1px 18px rgba(0,0,0,.35));
  transition:opacity .7s ease, transform .7s ease;
}
.about-cinema.is-act1 .aboutC__lines p[data-act="1"],
.about-cinema.is-act2 .aboutC__lines p[data-act="2"],
.about-cinema.is-act3 .aboutC__lines p[data-act="3"]{ opacity:1; transform:none; }

/* Pull‑quote (only during Act II) */
.aboutC__pull{
  position:absolute; left:50%; bottom:39vh; transform:translateX(-50%); z-index:3;
  max-width:46ch; text-align:center; color:#fff;
  padding:.7rem .9rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  opacity:0; transition:opacity .6s ease;
}
.about-cinema.is-act2 .aboutC__pull{ opacity:1; }

/* Chips revealed in the final beat */
.aboutC__chips{
  position:absolute; left:50%; bottom:8vh; transform:translateX(-50%); z-index:3;
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.aboutC__chips span{
  padding:.28rem .6rem; border-radius:999px; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  letter-spacing:.12em; text-transform:uppercase; font-size:.72rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease .1s, transform .6s ease .1s;
}
.about-cinema.is-act3 .aboutC__chips span{ opacity:1; transform:none; }

/* Reduced motion: present a quiet, static essay instead of the long take */
@media (prefers-reduced-motion: reduce){
  .page-section.tone-wine.about-cinema{ height:auto; padding:clamp(72px,7vw,120px) 0; }
  .aboutC__sticky{ position:relative; height:auto; }
  .aboutC__bars, .aboutC__grain{ display:none; }
  .aboutC__frame{
    position:relative; opacity:1 !important; transform:none !important;
    aspect-ratio:4/3; border-radius:16px; overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 20px 56px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
    margin:0 10vw 2rem;
  }
  .aboutC__lines p, .aboutC__chips span{ opacity:1; transform:none; }
}
/* ========== STORY-LUXE: center the vertical spine + refine type ========== */
@media (min-width: 981px){
  .story-luxe .storyL__frame{ align-items: stretch; }             /* let items fill their areas */
  .story-luxe .storyL__spine{
    /* claim the full height of the two-row frame and center the text inside it */
    grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;

    /* existing vertical layout, now with upgraded type */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-variation-settings: "opsz" 80, "SOFT" 90, "WONK" 0;
    font-size: clamp(.82rem, .9vw, 1.05rem);
    letter-spacing: .26em;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(0,0,0,.32);

    /* keep the hairline; remove the old left padding so the centering is true */
    border-left: 1px solid var(--line);
    padding-left: 0;
  }
}
/* mobile keeps your existing horizontal treatment (no change) */

/* ========== ABOUT-CINEMA: center eyebrow inside the dark top bar ========== */
/* Only used if you replaced #story with the cinematic long-take version */
.about-cinema .aboutC__eyebrow{
  position: absolute;
  z-index: 3;
  left: 0; right: 0; top: 0;
  height: 11vh;                         /* same height as the letterbox bar */
  display: grid; place-items: center;   /* perfect vertical + horizontal centering */
  transform: none;                      /* override previous translateX */

  /* typography polish */
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-variation-settings: "opsz" 72, "SOFT" 92, "WONK" 0;
  letter-spacing: .24em;
  font-size: clamp(.78rem, .92vw, 1rem);
  color: rgba(243,236,228,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Respect reduced motion: let the eyebrow sit just above the content */
@media (prefers-reduced-motion: reduce){
  .about-cinema .aboutC__eyebrow{
    position: static;
    display: block;
    margin: 0 0 12px;
  }
}
/* =========================================================
   TYPE DIRECTION — cinematic, intentional typography
   ========================================================= */

/* Global micro‑type polish (progressive, won’t break older engines) */
:root{
  --type-measure: 62ch;   /* comfortable single-column measure */
  --type-rhythm:  .76rem; /* vertical rhythm step */
}

/* Headings and big display copy: balance rag for cinematic two‑line feels */
h1, h2, h3,
.display,
.pd4__title,
.resvA__title { text-wrap: balance; }

/* Body text: reduce widows/orphans & enable hyphenation where supported */
p, li, blockquote, figcaption {
  text-wrap: pretty;
  hyphens: auto;
}

/* Subtle optical niceties */
.story-luxe, .resv-atelier, .pd4 {
  hanging-punctuation: first allow-end; /* supported in Safari; harmless elsewhere */
  font-feature-settings: "liga" 1, "kern" 1, "calt" 1; /* keep ligatures + kerning on */
  font-variant-numeric: oldstyle-nums proportional-nums; /* friendlier numbers */
}

/* ---------------------------------------------------------
   STORY — cinematic lock for essay, pull‑quote, spine
   (keeps your existing layout, but the copy now feels *designed*)
   --------------------------------------------------------- */

/* Essay block: measure, rhythm, micro‑contrast */
.story-luxe .storyL__essay{
  max-width: var(--type-measure);
  font-size: clamp(1rem, 0.95vw, 1.08rem);
  line-height: 1.52;
  letter-spacing: .005em;
  color: var(--muted);
}
.story-luxe .storyL__essay p{
  margin: 0 0 calc(var(--type-rhythm) * 1.15);
}

/* Drop‑cap: sunk, editorial, and crisp at large sizes */
.story-luxe .storyL__essay .dropcap::first-letter{
  font-family:"Fraunces", Georgia, serif;
  font-weight:700;
  font-variation-settings:"opsz" 96, "SOFT" 90, "WONK" 0;
  font-size: clamp(3rem, 8.2vw, 5.2rem);
  line-height: .82;
  margin: .06em .34rem 0 0;
  color: var(--ink);
  text-shadow: 0 1px 20px rgba(0,0,0,.35);
}

/* Pull‑quote: float into the text column as a designed “beat” */
.story-luxe .storyL__pull{
  float: right;
  width: min(24ch, 36%);
  margin: .1rem 0 1rem 1.1rem;
  padding: .9rem 1rem;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(9px) saturate(110%);
  backdrop-filter: blur(9px) saturate(110%);
  shape-outside: inset(0 round 12px);
  box-shadow: 0 12px 32px rgba(0,0,0,.34);
  color: #fff;
}
.story-luxe .storyL__pull p{
  margin: 0;
  font-family:"Fraunces", Georgia, serif;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  letter-spacing:.005em;
  line-height: 1.16;
}
.story-luxe .storyL__pull cite{
  display:block; margin-top:.35rem; opacity:.86; font-size:.95rem;
}

/* Mobile: let the quote live inline (no float) */
@media (max-width: 980px){
  .story-luxe .storyL__pull{ float:none; width:auto; margin:.5rem 0 1rem; }
}

/* Vertical spine: give it the “letterpress” authority of a designed element */
.story-luxe .storyL__spine{
  font-family:"Fraunces", Georgia, serif;
  font-weight: 600;
  font-variation-settings:"opsz" 80, "SOFT" 90, "WONK" 0;
  letter-spacing:.26em;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

/* Chips: quieter fill + steadier tracking so they read like marginalia */
.story-luxe .storyL__chips li{
  background: rgba(255,255,255,.045);
  letter-spacing:.14em;
}

/* Cinematic reveal for the essay, cameo, and quote (ties to JS below) */
@media (prefers-reduced-motion: no-preference){
  .story-luxe .storyL__essay,
  .story-luxe .storyL__cameo,
  .story-luxe .storyL__pull{
    opacity:0; transform: translateY(10px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
  }
  .story-luxe .storyL__essay.is-inview,
  .story-luxe .storyL__cameo.is-inview,
  .story-luxe .storyL__pull.is-inview{
    opacity:1; transform:none;
  }
}

/* ---------------------------------------------------------
   If you later switch to the “about-cinema” version,
   polish the beats so they read as designed slates.
   --------------------------------------------------------- */
.about-cinema .aboutC__lines p{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"opsz" 96, "SOFT" 92, "WONK" 0;
  letter-spacing:.01em;
  text-wrap: balance;
  max-width: 22ch;
  margin-inline:auto;
  filter: drop-shadow(0 1px 18px rgba(0,0,0,.35));
}
.about-cinema .aboutC__eyebrow{ letter-spacing:.24em; }
/* =========================================================
   PRIVATE DINING — PVD (scene composition, not a layout)
   ========================================================= */

#private-dining.pvd{
  /* Palette — deep wine field with candle-edge glow */
  --ink:#F3ECE4;
  --muted:rgba(243,236,228,.86);
  --line:rgba(243,236,228,.14);

  /* Ambient lighting strength (animated by GSAP) */
  --glowA:.10;      /* top-left glow alpha */
  --glowB:.08;      /* bottom-right glow alpha */

  /* Backdrop image motion values (animated by GSAP) */
  --blur:14px;      /* start more blurred; eases down */
  --shiftX:0%;      /* subtle camera pan x */
  --shiftY:0%;      /* subtle camera pan y */

  /* Section field */
  background:
    radial-gradient(1000px 540px at 20% 16%, rgba(240,220,210,var(--glowA)), transparent 60%),
    radial-gradient(1100px 600px at 80% 86%, rgba(183,28,28,var(--glowB)), transparent 62%),
    linear-gradient(180deg, #1A0E12 0%, #0E080A 100%);
  color:var(--ink);
  position:relative;
  overflow:hidden;
  padding: clamp(120px, 12vw, 180px) 0 clamp(110px, 10vw, 160px);
  isolation:isolate; /* contain blends */
}

/* Stage: one elegant image, feathered & blurred into the field */
.pvd__stage{ position:absolute; inset:0; z-index:0; }
.pvd__img{
  position:absolute; inset:-4% -6%; /* bleed beyond edges for feather */
  background:
    radial-gradient(1200px 900px at 50% 62%, rgba(0,0,0,.35), transparent 60%),
    var(--photo) center / cover no-repeat;
  filter: blur(var(--blur)) saturate(112%);
  transform: translate3d(var(--shiftX), var(--shiftY), 0) scale(1.08);
  opacity:.55;
  will-change: filter, transform, opacity;

  /* Feathering / masking so it never looks like a box */
  -webkit-mask-image:
    radial-gradient(120% 120% at 50% 50%, #000 60%, transparent 100%);
  mask-image:
    radial-gradient(120% 120% at 50% 50%, #000 60%, transparent 100%);
}

/* Fine film grain to keep the surface from feeling flat */
.pvd__grain{
  position:absolute; inset:-10px; pointer-events:none; opacity:.6;
  background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:2px 2px; mix-blend-mode:soft-light;
}

/* Content frame */
.pvd__wrap{
  position:relative; z-index:1; /* above stage */
  width:min(1120px, 92vw);
  margin-inline:auto;
}

/* Typography system (Playfair + Inter) */
#private-dining.pvd, #private-dining.pvd p, #private-dining.pvd li, #private-dining.pvd dd, #private-dining.pvd dt{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; line-height: 1.55;
}
.pvd__title{
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: .004em;
  margin: .35rem 0 .6rem;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.pvd__eyebrow{
  display:inline-block;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .78rem;
  color: var(--muted);
}
.pvd__lede{
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  text-wrap: pretty;
}

/* Specs: architectural rhythm with hairlines */
.pvd__specs{
  margin: clamp(18px, 2.5vw, 28px) 0 0 0;
  max-width: 62ch;
  border-top: 1px solid var(--line);
}
.pvd__row{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
.pvd__row:last-child{ border-bottom:0; }
.pvd__row dt{
  margin:0;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .76rem;
  color: var(--muted);
}
.pvd__row dd{ margin:0; }

/* Contact line */
.pvd__contact{
  margin: clamp(16px, 2vw, 24px) 0 0 0;
  font-size: clamp(.98rem, 1vw, 1.08rem);
}
.pvd__contact a{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(243,236,228,.28);
}
.pvd__contact a:hover{ border-bottom-color: rgba(243,236,228,.6); }

/* In‑view motion (revealed by GSAP) */
.pvd [data-reveal]{ opacity:0; transform: translateY(14px); }
.pvd.is-static [data-reveal]{ opacity:1; transform:none; } /* reduced motion fallback */

/* Responsive: keep it text‑led; image remains background */
@media (max-width: 980px){
  .pvd__wrap{ width:min(680px, 92vw); }
  .pvd__img{ opacity:.62; filter: blur(calc(var(--blur) + 2px)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #private-dining.pvd{ --blur: 8px; --glowA:.09; --glowB:.07; }
  .pvd__img{ transform: none; }
}
/* =========================================================
   LOCATIONS — Cinematic canvas with ambient map
   ========================================================= */

.locations{
  /* Brand field — rich wine + candle-edge lighting */
  --ink:#F6EFE7;
  --muted:rgba(246,239,231,.86);
  --line:rgba(246,239,231,.14);

  /* Ambient focus (GSAP animates these) */
  --fx:46;         /* focus x%  (Toronto default) */
  --fy:52;         /* focus y%  */
  --glowA:.18;     /* glow strength */

  background:
    radial-gradient(1000px 460px at 22% 18%, rgba(240,220,210,.06), transparent 60%),
    radial-gradient(1100px 540px at 78% 84%, rgba(183,28,28,.12), transparent 62%),
    linear-gradient(180deg, #1A0E12 0%, #0E080A 100%);
  color:var(--ink);
  position:relative; overflow:hidden; isolation:isolate;
  padding: clamp(120px, 10vw, 180px) 0 clamp(110px, 9vw, 160px);
  border-top:1px solid var(--line);
}

/* --- AMBIENT LAYERS (masked; never boxed) --- */
.map-ambient{ position:absolute; inset:0; z-index:0; }
.map-ambient .contours{
  /* Subtle contour lines pattern; soft-light blend so it feels printed into the field */
  position:absolute; inset:-12%;
  opacity:.16; mix-blend-mode:soft-light; filter: blur(.2px);
  background-image: var(--contours, url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'>\
<path d='M0 30 Q30 10 60 30 T120 30' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/>\
<path d='M0 0 Q30 20 60 0 T120 0'   fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/>\
<path d='M0 60 Q30 40 60 60 T120 60' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/>\
</svg>"));
  background-size: 720px 360px; background-repeat: repeat;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 62%, transparent 92%);
          mask-image: radial-gradient(120% 100% at 50% 50%, #000 62%, transparent 92%);
}
.map-ambient .skyline{
  /* Feathered skyline / texture; blurred to avoid literal “photo-in-a-box” */
  position:absolute; inset:-8%;
  background:
    radial-gradient(1200px 900px at 50% 62%, rgba(0,0,0,.35), transparent 60%),
    var(--skyline) center/cover no-repeat;
  filter: blur(10px) saturate(112%) brightness(.9);
  opacity:.48; transform: scale(1.04);
  -webkit-mask-image: radial-gradient(110% 90% at 50% 58%, #000 50%, rgba(0,0,0,.6) 72%, transparent 90%);
          mask-image: radial-gradient(110% 90% at 50% 58%, #000 50%, rgba(0,0,0,.6) 72%, transparent 90%);
}
.map-ambient .glow{
  /* Ambient glow anchored to focused city; screen blend adds warmth without bloom */
  position:absolute; width:720px; height:720px; pointer-events:none;
  left: calc(var(--fx) * 1%); top: calc(var(--fy) * 1%);
  transform: translate(-50%,-50%); border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(224,120,120, var(--glowA)) 0%, rgba(224,120,120, 0) 70%),
    radial-gradient(closest-side, rgba(255,188,160, calc(var(--glowA)*.7)) 0%, rgba(255,188,160, 0) 75%);
  mix-blend-mode:screen;
  filter: blur(24px);
  opacity:.85;
}
.map-ambient .pin{
  position:absolute; width:20px; height:28px;
  left: calc(var(--fx) * 1%); top: calc(var(--fy) * 1%);
  transform: translate(-50%,-50%);
  z-index:2;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* Faint coordinate watermark — updated via [data-coord] */
.map-ambient::after{
  content: attr(data-coord);
  position:absolute; right:6vw; bottom:4.5vw; z-index:1;
  font: 600 clamp(18px, 6vw, 54px)/1 Inter, system-ui;
  letter-spacing:.12em; text-transform:uppercase;
  color: rgba(255,255,255,.06); white-space:nowrap;
  pointer-events:none; mix-blend-mode:soft-light;
}

/* --- COPY & TYPOGRAPHY --- */
.locations__wrap{ position:relative; z-index:3; width:min(1200px, 90vw); margin-inline:auto; }
.lead{ max-width:min(860px, 80ch); }
.title{
  margin:0 0 .5rem;
  font-family:"Playfair Display", Georgia, serif; font-weight:800;
  font-size: clamp(2.4rem, 5.8vw, 4.1rem); line-height:1.06; letter-spacing:.004em;
  text-wrap: balance; text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.sub{
  margin:0; max-width:62ch;
  font: 400 clamp(1rem, 1.1vw, 1.17rem)/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--muted); text-wrap: pretty;
}

/* --- DESIGNED CITY ROW --- */
.city-list{
  margin: clamp(22px, 3.5vw, 36px) 0 0;
  padding:0; list-style:none;
  display:flex; gap: clamp(18px, 2.4vw, 32px); flex-wrap: wrap;
  border-top:1px solid var(--line);
}
.city-item{
  /* Not a card: a micro-composition with confident lockup */
  appearance:none; background:none; border:0; text-align:left; cursor:pointer;
  padding: clamp(12px, 1.2vw, 14px) 0; border-bottom:1px solid var(--line);
  min-width: max(220px, 20ch);
  color:var(--ink);
}
.city-item:focus-visible{ outline:2px solid rgba(255,255,255,.3); outline-offset:4px; }

.city-name{
  display:flex; align-items:baseline; gap:.6ch;
  font-family:"Playfair Display", Georgia, serif; letter-spacing:.006em;
}
.city-name .name{ font-weight:700; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height:1.1; }
.city-name .area{ font: 600 .78rem/1 Inter, system-ui; letter-spacing:.18em; opacity:.9; text-transform:uppercase; }

.city-meta{
  display:flex; gap:1.2rem; align-items:center;
  margin-top:.35rem; color:var(--muted);
  font: 500 .95rem/1.5 Inter, system-ui;
}
.city-meta .coord{ letter-spacing:.04em; opacity:.9; }
.city-meta .more{
  opacity:0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  white-space:nowrap;
}

/* Hover/focus reveal: brighten glow + show micro-detail */
.city-item:hover .more,
.city-item:focus-visible .more,
.city-item.is-active .more{ opacity:1; transform:none; }

.cta{ margin: clamp(18px, 2.4vw, 26px) 0 0; }
.cta-link{
  color: var(--ink); text-decoration:none; border-bottom:1px solid rgba(246,239,231,.28);
  font: 600 1rem/1.4 Inter, system-ui; letter-spacing:.06em; text-transform:uppercase;
}
.cta-link:hover{ border-bottom-color: rgba(246,239,231,.6); }

/* --- MOTION HOOKS (revealed by GSAP) --- */
.locations [data-reveal]{ opacity:0; transform: translateY(14px); }

/* --- RESPONSIVE BREAKPOINTS (intentional rhythm) --- */
@media (min-width:1280px){
  .city-list{ gap: 2.8rem; }
  .map-ambient .glow{ width:800px; height:800px; }
}
@media (min-width:1024px) and (max-width:1279px){
  .city-list{ gap: 2.2rem; }
}
@media (min-width:768px) and (max-width:1023px){
  .locations{ padding: clamp(96px, 12vw, 140px) 0; }
  .city-item{ min-width: max(200px, 18ch); }
}
@media (max-width:767px){
  .locations{ padding: 88px 0; }
  .city-list{ gap: .6rem; }
  .city-item{ width:100%; }
  .map-ambient::after{ right:5vw; bottom:6vw; font-size: clamp(14px, 8vw, 32px); }
}

/* Reduced motion: present a quiet, static essay */
@media (prefers-reduced-motion: reduce){
  .locations [data-reveal]{ opacity:1; transform:none; }
  .map-ambient .skyline{ transform:none; filter: blur(8px) saturate(108%) brightness(.95); }
}
/* Reveal elements are hidden ONLY when the section has .is-anim */
.pvd.is-anim [data-reveal],
.locations.is-anim [data-reveal]{
  opacity: 0;
  transform: translateY(14px);
}

/* If motion is disabled or GSAP isn't ready, content remains visible */
.pvd.is-static [data-reveal],
.locations.is-static [data-reveal]{
  opacity: 1;
  transform: none;
}
/* LOCATIONS hotfix: if JS hasn't marked the section as animated, keep content visible */
.locations:not(.is-anim) [data-reveal]{
  opacity: 1;
  transform: none;
}
.hero__poster{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition: opacity .35s ease;
}

.hero__video{
  /* your sizing rules already exist; just add the fade-in */
  opacity:0;
  transition: opacity .45s ease;
}

.hero__bg.is-ready .hero__video{ opacity:1; }
.hero__bg.is-ready .hero__poster{ opacity:0; }

/* Respect reduced motion: we already hide video and show a quiet bg color */
@media (prefers-reduced-motion: reduce){
  .hero__bg{ display:block; }           /* keep the layer visible */
  .hero__video{ display:none !important; } /* skip the heavy embed */
  .hero__poster{ opacity:1 !important; }   /* show the still image */
  .hero{ background:#151513; }
}
/* ===========================
   VOUCHERS & GIFTS — premium scene (informational)
   =========================== */
#gifts.gifts-scene{
  --ink:#F3ECE4;
  --muted:rgba(243,236,228,.86);
  --line:rgba(243,236,228,.14);

  position:relative;
  color:var(--ink);
  border-top:1px solid var(--line);
  padding: clamp(96px, 10vw, 160px) 0;
  overflow: clip;
  background:
    radial-gradient(1000px 500px at 18% 18%, rgba(240,220,210,.06), transparent 60%),
    radial-gradient(1100px 600px at 82% 86%, rgba(183,28,28,.12), transparent 62%),
    linear-gradient(180deg, #1A0E12 0%, #0E080A 100%);
}
.giftsS__stage{ position:absolute; inset:0; z-index:0; }
.giftsS__grain{
  position:absolute; inset:-10px; pointer-events:none; opacity:.6;
  background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:2px 2px; mix-blend-mode:soft-light;
}

.giftsS__wrap{ position:relative; z-index:1; width:min(1120px, 92vw); margin-inline:auto; }
.giftsS__grid{
  display:grid;
  grid-template-columns: 72px 1.1fr .9fr;
  grid-template-areas:
    "spine card copy";
  column-gap: clamp(28px, 5vw, 68px);
  align-items:center;
}
@media (max-width: 920px){
  .giftsS__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "spine"
      "card"
      "copy";
    row-gap: clamp(18px, 4vw, 24px);
    align-items:start;
  }
}

/* Typographic spine (letterpress authority; not a loud H2) */
.giftsS__spine{
  grid-area: spine;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  font-variation-settings:"opsz" 80, "SOFT" 90, "WONK" 0;
  font-size:.86rem;
  color: var(--muted);
  border-left:1px solid var(--line);
  padding-left:14px;
  align-self:start;
}

/* Voucher card — foil shimmer + ribbon + seal */
.giftCard{
  grid-area: card;
  position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(300px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #231417 0%, #0F080B 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05);
  transform: translateZ(0);
}

/* soft film grain on top (depth) */
.giftCard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:2px 2px; mix-blend-mode:soft-light; opacity:.55;
}

/* “Foil” overlay — shifts with pointer; screen blend so it feels stamped */
.giftCard__foil{
  position:absolute; inset:-1px; pointer-events:none;
  background:
    conic-gradient(from var(--ang, 20deg) at 50% 50%,
      rgba(255,255,255,.00),
      rgba(255,240,210,.20) 12%,
      rgba(255,255,255,.00) 25%,
      rgba(255,224,170,.18) 38%,
      rgba(255,255,255,.00) 50%,
      rgba(255,210,150,.18) 62%,
      rgba(255,255,255,.00) 75%,
      rgba(255,235,190,.20) 88%,
      rgba(255,255,255,.00) 100%);
  mix-blend-mode:screen;
  opacity:.45;
  filter: saturate(115%) brightness(1.03);
}

/* A single diagonal ribbon — not literal, just an elegant suggestion */
.giftCard__ribbon{
  position:absolute; inset:-20%;
  background:
    repeating-linear-gradient(28deg,
      transparent 0 14px,
      rgba(255,255,255,.06) 14px 16px,
      transparent 16px 32px);
  opacity:.22; mix-blend-mode:soft-light;
}

/* Monogram seal */
.giftCard__seal{
  position:absolute; right:14px; top:14px;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02));
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  color:#fff; font-family:"Fraunces", Georgia, serif; font-weight:700; letter-spacing:.06em;
  transform: rotate(calc((var(--ang,20deg)) * .06));
}
.giftCard__seal span{ font-size:.98rem; }

/* Caption plaque (glass) */
.giftCard__cap{
  position:absolute; left:14px; bottom:14px;
  display:inline-grid; gap:.25rem;
  padding:.55rem .75rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  box-shadow: 0 10px 28px rgba(0,0,0,.26);
}
.giftCard__cap .brand{
  font-family:"Fraunces", Georgia, serif; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:.82rem;
}
.giftCard__cap .line{
  font: 500 .92rem/1.2 Inter, system-ui; opacity:.9;
}

/* Copy slab (quiet, elegant) */
.giftsS__copy{
  grid-area: copy;
  max-width: 56ch;
  align-self:center;
}
.giftsS__lede{
  margin:0 0 .6rem;
  color:var(--muted);
  font: 400 clamp(1rem, 1.06vw, 1.15rem)/1.55 Inter, system-ui;
  text-wrap: pretty;
}
.giftsS__chips{
  margin:.2rem 0 .6rem; padding:0; list-style:none;
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.giftsS__chips li{
  padding:.28rem .6rem; border-radius:999px; color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  letter-spacing:.12em; text-transform:uppercase; font-size:.72rem;
}
.giftsS__small{
  margin:.2rem 0 .6rem;
  color: rgba(243,236,228,.74);
  font-size:.95rem;
}
.giftsS__contact{
  margin:0;
  font: 500 .98rem/1.5 Inter, system-ui;
}
.giftsS__contact a{
  color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(243,236,228,.28);
}
.giftsS__contact a:hover{ border-bottom-color: rgba(243,236,228,.6); }

/* Soft reveal (ties into a tiny JS observer below) */
@media (prefers-reduced-motion: no-preference){
  #gifts [data-reveal]{ opacity:0; transform: translateY(12px);
    transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
  #gifts.is-inview [data-reveal]{ opacity:1; transform:none; }
}
/* Gifts: section title */
.giftsS__title{
  margin:.3rem 0 .4rem;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:800;
  font-size: clamp(2.2rem, 5.8vw, 3.8rem);
  line-height:1.06;
  letter-spacing:.004em;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
/* ===========================
   FOOTER — premium, informational
   =========================== */
.siteFooter{
  --ink:#F3ECE4;
  --muted:rgba(243,236,228,.84);
  --line:rgba(243,236,228,.14);

  position:relative; color:var(--ink); overflow:clip;
  padding: clamp(60px, 7vw, 100px) 0  clamp(22px, 4vw, 28px);
  border-top:1px solid var(--line);
  background:
    radial-gradient(1000px 460px at 18% 20%, rgba(240,220,210,.06), transparent 60%),
    radial-gradient(1100px 540px at 82% 86%, rgba(183,28,28,.10), transparent 62%),
    linear-gradient(180deg, #1B0E12 0%, #0F080B 100%);
}
.siteFooter .footer__stage{ position:absolute; inset:0; z-index:0; }
.siteFooter .footer__grain{
  position:absolute; inset:-10px; opacity:.6; pointer-events:none; z-index:0;
  background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:2px 2px; mix-blend-mode:soft-light;
}
.siteFooter .footer__wrap{ position:relative; z-index:1; width:min(1120px, 92vw); margin-inline:auto; }

.footer__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  column-gap: clamp(22px, 4.6vw, 56px);
  align-items:start;
}
@media (max-width: 860px){
  .footer__grid{ grid-template-columns: 1fr; row-gap: clamp(18px, 4vw, 22px); text-align:center; }
}

/* Brand lock */
.footer__brand{ align-self:center; }
.footer__seal{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  margin-bottom:.6rem;
}
.footer__seal span{
  font-family:"Fraunces", Georgia, serif; font-weight:700; letter-spacing:.06em; font-size:1.02rem;
}
.footer__tag{
  margin:.2rem 0 0;
  color:var(--muted);
  font: 400 .98rem/1.55 Inter, system-ui;
}

/* Nav */
.footer__nav ul{
  margin:0; padding:0; list-style:none; display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); gap:.35rem .9rem;
}
.footer__nav a{
  color:var(--ink); text-decoration:none;
  letter-spacing:.18em; text-transform:uppercase; font-size:.76rem; opacity:.92;
  border-bottom:1px solid transparent; padding:.25rem .1rem; display:inline-block;
}
.footer__nav a:hover{ opacity:1; border-bottom-color: rgba(243,236,228,.28); }
@media (max-width: 860px){
  .footer__nav ul{ grid-template-columns: 1fr 1fr; justify-items:center; }
}

/* Contact */
.footer__contact{ }
.footer__label{
  text-transform:uppercase; letter-spacing:.22em; font-size:.76rem; color:var(--muted);
  margin:0 0 .35rem;
}
.footer__lines a{ color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(243,236,228,.28); }
.footer__lines a:hover{ border-bottom-color: rgba(243,236,228,.6); }
.footer__hours{ margin:.5rem 0 0; color:var(--muted); }

/* Base row */
.footer__base{
  margin-top: clamp(18px, 3.6vw, 28px);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top: clamp(12px, 2.4vw, 16px);
}
@media (max-width: 640px){
  .footer__base{ justify-content:center; text-align:center; gap:10px 16px; }
}

/* Social */
.footer__social{ display:flex; gap:.6rem; }
.footer__social .ico{
  width:38px; height:38px; display:grid; place-items:center; border-radius:999px;
  color:var(--ink); border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(8px) saturate(110%); backdrop-filter: blur(8px) saturate(110%);
  text-decoration:none; opacity:.95; transition: opacity .2s ease, transform .2s ease;
}
.footer__social .ico:hover{ opacity:1; transform: translateY(-1px); }

/* Legal */
.footer__legal{ color:var(--muted); font-size:.95rem; }
.footer__legal a{ color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(243,236,228,.28); }
.footer__legal a:hover{ border-bottom-color: rgba(243,236,228,.6); }
.footer__legal .sep{ opacity:.7; margin:0 .4rem; }

/* Soft reveal (optional, handled by tiny JS below) */
@media (prefers-reduced-motion: no-preference){
  .siteFooter [data-reveal]{ opacity:0; transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
  .siteFooter.is-inview [data-reveal]{ opacity:1; transform:none; }
}
/* Vouchers & Gifts — switch background to black */
#gifts.gifts-scene{
  background: var(--bg);
}
/* --- Side-scroll fix: contain the gallery background bleed --- */
.gallery__wrap{
  position: relative;        /* ensure a containing block */
  overflow: clip;            /* modern, doesn't create scrollbars */
}

/* Fallback for older browsers that don't support overflow: clip */
@supports not (overflow: clip){
  .gallery__wrap{ overflow-x: hidden; }
}
/* =========================================
   MOBILE — Gallery as a vertical list of small cards
   (≤ 620px only; no change to tablet/desktop)
   ========================================= */
@media (max-width: 620px){
  /* tighten the section rhythm a touch on small screens */
  .gallery{ padding: clamp(36px, 6vw, 56px) 0; }

  /* one column + smaller spacing for the tiles */
  .gallery__grid{ gap: 10px; }
  .gallery__row{ grid-template-columns: 1fr; }

  /* make EVERY card a shallow "thumbnail" tile */
  .gallery__row .card{
    grid-column: 1 !important;       /* ensure single column for all variants */
    aspect-ratio: auto !important;    /* ignore the tall/wide aspect presets */
    height: clamp(120px, 28vw, 160px);/* small, elegant tiles */
    border-radius: 14px;
    background-position: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.28),
                inset 0 0 0 1px rgba(255,255,255,.06);
  }

  /* trim the caption glass so it doesn’t dominate at small sizes */
  .gallery__row .glass{
    padding: .45rem .6rem;
    border-radius: 10px;
  }
  .gallery__row .glass h3{ font-size: 1rem; }
  .gallery__row .glass p { font-size: .85rem; }
  .gallery__row .pill   { font-size: .6rem;  padding: .12rem .45rem; }
}
/* =========================================
   MOBILE FIX — show all dishes as small tiles
   (≤ 620px only)
   ========================================= */
@media (max-width: 620px){
  /* 1) One column, tighter gaps */
  .gallery{ padding: clamp(36px, 6vw, 56px) 0; }
  .gallery__grid{ gap: 10px; }
  .gallery__row{ grid-template-columns: 1fr; }

  /* 2) Make EVERY card a shallow thumbnail + neutralize the top-row spans */
  .gallery__row .card{
    grid-column: 1 / -1 !important;   /* single column for all */
    grid-row: auto !important;         /* kill any row-span rules */
    aspect-ratio: auto !important;     /* ignore tall/wide presets */
    height: clamp(120px, 28vw, 160px) !important; /* explicit height fixes % height bug */
    min-height: 120px;                 /* iOS safety */
    border-radius: 14px;
    background-position: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.28),
                inset 0 0 0 1px rgba(255,255,255,.06);
  }

  /* 3) The top row itself no longer has two tracks */
  .gallery__row.row--top{ grid-template-rows: auto !important; }

  /* 4) Trim the caption glass so it doesn’t dominate small tiles */
  .gallery__row .glass{ padding: .45rem .6rem; border-radius: 10px; }
  .gallery__row .glass h3{ font-size: 1rem; }
  .gallery__row .glass p { font-size: .85rem; }
  .gallery__row .pill   { font-size: .6rem;  padding: .12rem .45rem; }
}
/* =========================================
   GIFTS — mobile layout & elegance
   ========================================= */
@media (max-width: 920px){
  /* Put the title/copy ABOVE the card; hide the vertical spine */
  #gifts .giftsS__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "card";
    row-gap: clamp(14px, 4.5vw, 22px);
    align-items: start;
  }
  #gifts .giftsS__spine{ display: none; }

  /* Title & copy: refined, centered rhythm */
  #gifts .giftsS__copy{ text-align: center; }
  #gifts .giftsS__title{
    margin: 0 0 .25rem;
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
  #gifts .giftsS__lede{ margin: 0 auto .6rem; max-width: 48ch; }
  #gifts .giftsS__chips{ justify-content: center; }
  #gifts .giftsS__contact,
  #gifts .giftsS__small{ text-align: center; }

  /* Voucher card: graceful scale & toned shimmer */
  #gifts .giftCard{
    width: min(560px, 100%);
    margin: 0 auto;
    aspect-ratio: 15 / 10;
    border-radius: 16px;
  }
  #gifts .giftCard__seal{ width:42px; height:42px; }
  #gifts .giftCard__cap{ left:12px; bottom:12px; }
  #gifts .giftCard__foil{ opacity:.38; } /* softer glint on phones */
}

/* Tiny phones — keep plaque type legible */
@media (max-width: 420px){
  #gifts .giftCard{ aspect-ratio: 14 / 10; }
  #gifts .giftCard__cap .brand{ font-size:.76rem; }
  #gifts .giftCard__cap .line { font-size:.9rem; }
}
/* =========================================
   RESERVATIONS — tame oversize date/time
   Works across iOS Safari/Chrome/Firefox.
   ========================================= */

/* Allow grid children to actually shrink (critical for inputs in CSS Grid) */
#reservations.resv-atelier .resvA__card .field{
  min-width: 0;                           /* prevents overflow in grid tracks */
}

/* Normalize intrinsic size + vertical rhythm */
#reservations.resv-atelier .resvA__card input[type="date"],
#reservations.resv-atelier .resvA__card input[type="time"]{
  font-size: .95rem;                       /* a touch smaller reads better */
  line-height: 1.2;
  padding-block: .58rem;                   /* reduce default UA padding */
  min-height: 44px;                        /* keep an accessible tap target */
  width: 100%;
  max-width: 100%;
}

/* WebKit’s inner box adds extra padding; remove it cleanly */
#reservations.resv-atelier .resvA__card input[type="date"]::-webkit-datetime-edit,
#reservations.resv-atelier .resvA__card input[type="time"]::-webkit-datetime-edit{
  padding: 0;
}

/* Keep the calendar icon tidy (no extra margins) */
#reservations.resv-atelier .resvA__card input[type="date"]::-webkit-calendar-picker-indicator{
  margin: 0;
  opacity: .9;                             /* retains your premium contrast */
  cursor: pointer;
}

/* Remove time spinners/clear that widen the control on some Chromium builds */
#reservations.resv-atelier .resvA__card input[type="time"]::-webkit-inner-spin-button,
#reservations.resv-atelier .resvA__card input[type="time"]::-webkit-clear-button{
  display: none;
}

/* Safety: if month names/locales run long, don’t blow out the field */
#reservations.resv-atelier .resvA__card input{
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Firefox tends to sit a bit taller; tighten slightly for parity */
@-moz-document url-prefix(){
  #reservations.resv-atelier .resvA__card input[type="date"],
  #reservations.resv-atelier .resvA__card input[type="time"]{
    padding-block: .52rem;
  }
}
/* =========================================
   RESERVATIONS — fix date/time overflow
   ========================================= */

/* 1) Let the grid decide how many columns actually fit.
      (No forced 3-up on narrower desktops.) */
#reservations.resv-atelier .resvA__card .grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px;
  min-width: 0;   /* allow tracks to shrink */
}

/* Force single column on small phones so the native date control has room */
@media (max-width: 520px){
  #reservations.resv-atelier .resvA__card .grid{
    grid-template-columns: 1fr !important;
  }
}

/* 2) Allow fields + controls to shrink inside their grid tracks */
#reservations.resv-atelier .resvA__card .field{ 
  min-width: 0;
}
#reservations.resv-atelier .resvA__card input,
#reservations.resv-atelier .resvA__card select,
#reservations.resv-atelier .resvA__card textarea{
  min-width: 0;         /* critical in CSS Grid to prevent bleed */
  max-width: 100%;
  width: 100%;
  overflow: hidden;      /* if locale strings get long, don't spill */
  text-overflow: ellipsis;
}

/* 3) Normalize WebKit’s internal padding/affordances that bloat width */
#reservations.resv-atelier .resvA__card input[type="date"]::-webkit-datetime-edit,
#reservations.resv-atelier .resvA__card input[type="time"]::-webkit-datetime-edit{
  padding: 0;           /* removes extra left/right inset */
}
#reservations.resv-atelier .resvA__card input[type="date"]::-webkit-calendar-picker-indicator{
  margin: 0;
}
#reservations.resv-atelier .resvA__card input[type="time"]::-webkit-inner-spin-button,
#reservations.resv-atelier .resvA__card input[type="time"]::-webkit-clear-button{
  display: none;
}

/* 4) Keep a comfortable tap target without forcing a tall control */
#reservations.resv-atelier .resvA__card input[type="date"],
#reservations.resv-atelier .resvA__card input[type="time"]{
  line-height: 1.2;
  padding-block: .58rem;
  min-height: 44px;     /* accessible, but not oversized */
}
/* Hide the BOOK A TABLE button while #story is in view */
.chrome .cta{
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
.chrome.hide-cta .cta{
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
/* Private Dining — center the composition on mobile */
@media (max-width: 760px){
  #private-dining.pvd .pvd__wrap{
    width: min(640px, 92vw);          /* comfortable single-column measure */
  }

  /* Center the text-led pieces */
  #private-dining.pvd .pvd__header,
  #private-dining.pvd .pvd__specs,
  #private-dining.pvd .pvd__contact{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Keep the spec list readable and contained */
  #private-dining.pvd .pvd__specs{
    max-width: 46ch;                  /* gently narrows the spec list */
  }

  /* Stack each spec row (label over value) */
  #private-dining.pvd .pvd__row{
    grid-template-columns: 1fr;       /* from 1fr 1.2fr → 1fr */
    gap: .45rem;
  }
  #private-dining.pvd .pvd__row dt,
  #private-dining.pvd .pvd__row dd{
    justify-self: center;             /* center the text within the single column */
  }
}
/* Reservations — center the composition on mobile */
@media (max-width: 700px){
  /* one column already happens in your CSS; now center the items in the column */
  #reservations.resv-atelier .resvA__frame{
    justify-items: center;             /* center copy, photo, and card */
    row-gap: 18px;
  }

  /* keep a premium single-column measure */
  #reservations.resv-atelier .resvA__copy,
  #reservations.resv-atelier .resvA__photo,
  #reservations.resv-atelier .resvA__card{
    width: min(560px, 92vw);
    margin-inline: auto;
  }

  /* center the editorial text; keep the notes tidy */
  #reservations.resv-atelier .resvA__copy{ text-align: center; }
  #reservations.resv-atelier .resvA__notes{
    max-width: 46ch;
    margin-inline: auto;
    text-align: left;                  /* reads better than centered bullets */
  }

  /* center the button/status row */
  #reservations.resv-atelier .resvA__actions{ justify-content: center; }
}

/* Very small phones: make the form grid a single column */
@media (max-width: 520px){
  #reservations.resv-atelier .resvA__card .grid{
    grid-template-columns: 1fr;        /* stops inputs from cramping side‑by‑side */
  }
}
/* Reservations — center the 3 info rows on mobile */
@media (max-width: 700px){
  #reservations.resv-atelier .resvA__copy .resvA__notes{
    max-width: 46ch;          /* elegant measure */
    margin-inline: auto;      /* center the block itself */
    text-align: center;       /* center the lines */
  }
  #reservations.resv-atelier .resvA__copy .resvA__notes li{
    /* keep the hairline rhythm; just ensure it reads centered */
    padding: .5rem 0;
  }
}
/* HERO — give the big title breathing room on small phones */
@media (max-width: 480px){
  .hero{
    padding-inline: clamp(12px, 4vw, 22px);  /* side buffer */
  }
  .hero .display{
    /* was clamp(3.4rem, 11vw, 12rem) — ease the minimum for mobile */
    font-size: clamp(2.6rem, 9.8vw, 12rem);
    letter-spacing: .02em;                    /* slightly tighter fit */
  }
}
/* LOCATIONS — center the composition on small screens */
@media (max-width: 767px){
  /* Center the headline, subcopy and CTA paragraph */
  .locations .lead,
  .locations .title,
  .locations .sub,
  .locations .cta{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Each city row: center lockup and allow details to wrap cleanly */
  .locations .city-item{
    text-align: center;          /* center the text inside the button */
  }
  .locations .city-name{
    justify-content: center;     /* center “City (area)” flex row */
  }
  .locations .city-meta{
    justify-content: center;     /* center coord + micro‑copy row */
    text-align: center;
    flex-wrap: wrap;             /* avoid overflow on narrow phones */
    gap: .35rem .8rem;
  }
  .locations .city-meta .more{
    white-space: normal;         /* allow “Service radius …” to wrap */
  }
}
/* Drawer: close button */
.drawer__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border:0; background:transparent; cursor:pointer;
  color:var(--ink); opacity:.82;
}
.drawer__close:hover{ opacity:1; }
.drawer__close:before,
.drawer__close:after{
  content:""; position:absolute; left:50%; top:50%;
  width:18px; height:2px; border-radius:2px;
  background: currentColor; transform-origin:center;
}
.drawer__close:before{ transform: translate(-50%, -50%) rotate(45deg); }
.drawer__close:after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Optional: give the nav a little top padding so links don’t crowd the X */
.drawer__nav{ padding-top: 48px; }
/* ===========================
   CONTACT MODAL (private service)
   =========================== */
body.modal-open { overflow: hidden; }

.modal{
  position: fixed; inset: 0; z-index: 320;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal.is-open{ opacity: 1; visibility: visible; }

.modal__overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.modal__dialog{
  position: relative;
  width: min(640px, 92vw);
  max-height: min(84vh, 720px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(243,236,228,.14));
  background: rgba(255,255,255,.035);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  color: var(--ink);
  box-shadow: 0 22px 64px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  padding: clamp(16px, 3vw, 24px);
}

.modal__close{
  position: absolute; right: 10px; top: 10px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--ink); cursor: pointer;
}
.modal__close:hover{ background: rgba(255,255,255,.08); }

.modal__head{ margin-bottom: .6rem; }
.modal__eyebrow{
  display: inline-block; text-transform: uppercase; letter-spacing: .22em;
  font-size: .78rem; color: rgba(243,236,228,.86);
}
.modal__title{
  margin: .3rem 0 .2rem;
  font-family: "Playfair Display", Georgia, serif; font-weight: 800;
  font-size: clamp(1.5rem, 4.8vw, 2.2rem); line-height: 1.06;
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.modal__lede{ margin: 0; color: rgba(243,236,228,.82); }

.modal__grid{
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: .6rem;
}
.field{ display: grid; gap: .35rem; }
.field--full{ grid-column: 1 / -1; }
.field > span{
  letter-spacing: .14em; text-transform: uppercase; font-size: .76rem;
  color: rgba(243,236,228,.82);
}
.modal__form input,
.modal__form select,
.modal__form textarea{
  width:100%;
  border:1px solid var(--line, rgba(243,236,228,.14));
  border-radius:10px;
  padding:.8rem .9rem;
  font:inherit; color: var(--ink);
  background: rgba(255,255,255,.02);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.modal__form input::placeholder,
.modal__form textarea::placeholder{ color: rgba(238,232,222,.55); }
.modal__form input:focus,
.modal__form select:focus,
.modal__form textarea:focus{
  border-color:#B71C1C;
  box-shadow: 0 0 0 3px rgba(183,28,28,.22);
  background: rgba(255,255,255,.035);
}

.modal__actions{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-top:.6rem; border-top:1px solid var(--line, rgba(243,236,228,.14));
  padding-top:.8rem;
}
.modal__submit{
  appearance:none; border:1px solid rgba(238,232,222,.16);
  background:#B71C1C; color:#FAF6F1;
  border-radius:999px; padding:.85rem 1.15rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem;
  cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 22px rgba(183,28,28,.28);
}
.modal__submit:hover{ transform: translateY(-1px); background:#8E1515; box-shadow: 0 8px 28px rgba(183,28,28,.36); }
.modal__status{ min-height:1.2em; color: rgba(243,236,228,.82); }

@media (max-width: 620px){
  .modal__dialog{
    width: 100vw; height: 100svh; max-height: 100svh;
    border-radius: 0; padding: 16px 16px 20px;
  }
  .modal__grid{ grid-template-columns: 1fr; }
  .modal__close{ right: 12px; top: 12px; }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .modal, .modal__dialog{ transition: none !important; }
}
/* Smooth scroll + fixed-header offset (fallback to JS) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px; /* header (72) + comfort */
}
section[id] { scroll-margin-top: 86px; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}
/* ===== MENU — put descriptions below the photo on mobile ===== */
.menu__desc{ display: none; } /* hidden by default (desktop/tablet) */

@media (max-width: 620px){
  /* hide the in‑overlay description text on small screens */
  .gallery .glass p{ display: none !important; }

  /* show the new below‑image description */
  .menu__desc{
    display: block;
    grid-column: 1 / -1;                     /* full width in the menu grid */
    margin: 4px 2px 10px;
    padding: 0 2px;
    font: 400 .95rem/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--tone-muted, rgba(238,232,222,.86));
    text-wrap: pretty;
  }
}
/* ===== MENU (mobile): centered names under each photo; hide in-photo card ===== */

/* Hide any below-photo name blocks by default on desktop/tablet */
#menu .menu__desc,
#menu .menu-desc{
  display: none;
}

@media (max-width: 620px){
  /* 1) Remove the glass card inside the photo entirely on phones */
  #menu .gallery__row .glass{
    display: none !important;
  }

  /* 2) Show + center the name line you added under each photo.
        Supports either class: .menu__desc or .menu-desc */
  #menu .gallery__row .menu__desc,
  #menu .gallery__row .menu-desc{
    display: block;
    grid-column: 1 / -1;                  /* full width in the single-column grid */
    margin: 8px 6px 14px;                 /* breathe below the image */
    text-align: center;

    /* Typography to match your card titles (Fraunces) */
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 4.6vw, 1.4rem);
    letter-spacing: .01em;
    line-height: 1.12;
    color: var(--tone-ink, #EEE8DE);
    text-shadow: 0 1px 16px rgba(0,0,0,.35);  /* subtle premium pop */
  }

  /* Optional: a tiny hairline accent above the name (looks polished) */
  #menu .gallery__row .menu__desc::before,
  #menu .gallery__row .menu-desc::before{
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin: 0 auto 6px;
    background: var(--tone-line, rgba(238,232,222,.18));
    opacity: .9;
  }
}
/* ===== MENU — extend the MOBILE layout up to 1350px ===== */

/* Keep the below-photo name hidden by default on wide desktops */
#menu .menu__desc,
#menu .menu-desc{ display: none; }

@media (max-width: 1350px){
  /* 1) Remove the in-photo glass card (pill + title) */
  #menu .gallery__row .glass{
    display: none !important;
  }

  /* 2) Use the same compact mobile stack (single column of shallow tiles) */
  #menu .gallery{
    padding: clamp(36px, 6vw, 56px) 0;   /* same rhythm as mobile */
  }
  #menu .gallery__grid{ gap: 10px; }
  #menu .gallery__row{
    grid-template-columns: 1fr !important;   /* one column through 1350px */
  }

  /* Reset any special spans/rows from desktop layout */
  #menu .gallery__row .card{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: auto !important;
    height: clamp(120px, 28vw, 160px) !important; /* same tile height as mobile */
    border-radius: 14px;
    background-position: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.28),
                inset 0 0 0 1px rgba(255,255,255,.06);
  }
  #menu .gallery__row.row--top{
    grid-template-rows: auto !important;
  }

  /* 3) Center + style the below-photo name you added (support both class names) */
  #menu .gallery__row .menu__desc,
  #menu .gallery__row .menu-desc{
    display: block;
    grid-column: 1 / -1;
    margin: 8px 6px 14px;
    text-align: center;

    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 4.6vw, 1.4rem);
    line-height: 1.12;
    letter-spacing: .01em;
    color: var(--tone-ink, #EEE8DE);
    text-shadow: 0 1px 16px rgba(0,0,0,.35);
    text-wrap: balance;
  }

  /* Optional tiny hairline accent for polish */
  #menu .gallery__row .menu__desc::before,
  #menu .gallery__row .menu-desc::before{
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin: 0 auto 6px;
    background: var(--tone-line, rgba(238,232,222,.18));
    opacity: .9;
  }
}

/* On very large screens (>1350px), fall back to the designed multi-column layout */
@media (min-width: 1351px){
  #menu .menu__desc,
  #menu .menu-desc{ display: none; }
}