@font-face{font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/karla-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/karla-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Karla';font-style:italic;font-weight:200 800;font-display:swap;src:url('fonts/karla-latin-wght-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Karla';font-style:italic;font-weight:200 800;font-display:swap;src:url('fonts/karla-latin-ext-wght-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/newsreader-latin-opsz-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/newsreader-latin-ext-opsz-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url('fonts/newsreader-latin-opsz-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url('fonts/newsreader-latin-ext-opsz-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@view-transition{ navigation: auto; }

:root{
  --font-display:'Newsreader', 'Georgia', 'Times New Roman', serif;
  --font-body:'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Olive ramp: hue 90, ~20% saturation — a material colour, not a screen
     one. Vary lightness only; keep hue and saturation locked. */
  --green-deep:#1e2418;    /* olive-900: primary dark ground */
  --green-mid:#2a3322;     /* olive-800: raised surfaces     */
  --olive-950:#14180f;     /* deepest ground, scrims          */
  --olive-700:#3a452f;     /* borders/hover on dark           */
  --olive-600:#55654a;     /* dividers ONLY — never text      */
  --cream:#efe7d9;         /* cream-100: primary light ground */
  --cream-2:#e5dac6;       /* cream-200: alternate band       */
  --cream-300:#d6c8ae;     /* borders on light                */
  /* Ember is the accent and never a background. --gold keeps its name so
     hairlines/eyebrows keep working; --ember-ink is the darkened step that
     passes 4.5:1 as small text on the cream grounds. */
  --gold:#c9a24b;
  --gold-deep:#8e753d;     /* gold dark enough for marks ON LIGHT (3.2:1+ on both creams);
                              plain gold is 1.7-2.0:1 there and is for dark grounds only */
  --gold-soft:#d6c8ae;
  --ember:#c9a24b;
  --ember-ink:#8c1d3b;
  --wash:radial-gradient(90% 70% at 22% 8%, rgba(201,162,75,0.14) 0%, rgba(201,162,75,0) 62%);
  /* The mark's own ink, taken from the restaurant's logo. Kept separate
     from --gold, which stays the colour of hairlines and eyebrows. */
  /* Night palette — the brand green taken almost to black, for pages that
     want a darker room rather than a different brand. */
  --night:#14180f;
  --night-2:#1e2418;
  /* Mounts: the colour revealed around a photograph during the inset-frame
     hover. Always a DARKER step of the section's own ground — a darker beige
     on cream, a darker green on the green, near-black on the night pages —
     so the reveal reads as depth behind the picture, not a lighter halo. */
  --mount-light:#ddcfb2;
  --mount-green:#10140c;
  --mount-night:#0b0e08;
  --rosette-ink:var(--gold);
  --pomegranate:#8c1d3b;
  --pomegranate-deep:#5c1329;
  --ink:#191c13;           /* never pure black */
  --ink-soft:#49493a;
  --maxw:1180px;
  /* .wrap's gutter, and the padding a full-bleed section needs so that text
     sitting on the image lines up with the content column above and below it.
     Redefining --gutter in a media query updates --bleed-pad automatically. */
  --gutter:32px;
  /* Photo-frame hover: the frame closes in by this much on all four sides.
     A fixed length, not a scale: scaling a portrait photo leaves a deeper
     margin top and bottom than at the sides. */
  --frame-inset:clamp(10px, 1.1vw, 16px);
  /* Type scale for everything below heading size, used by name. The
     stylesheet had drifted to 30-odd sizes between 0.68rem and 1.06rem,
     most of them a pixel apart. Headings keep their own clamp()s. */
  --fs-label:0.72rem;    /* uppercase labels, eyebrows, tags, table heads */
  --fs-small:0.86rem;    /* notes, captions, footer detail, dish lines */
  --fs-body-sm:0.94rem;  /* secondary copy: cards, lists, descriptions */
  --fs-body:0.97rem;     /* running copy */
  --fs-lede:1rem;  /* Tracking for small uppercase labels. The eyebrow keeps its wider
     0.24em; buttons and nav links keep their own. */
  --track-label:0.16em;
  /* Vertical rhythm. Every padded section uses --section-y, so an adjacent
     pair always yields the same gap; before this the values ranged 64-130px
     and stacked to anywhere between 144px and 208px. */
  --section-y:88px;
  --section-y-lg:112px;
  --bleed-pad:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --scrim-copy:linear-gradient(to top, rgba(20,24,15,0.93) 0%, rgba(20,24,15,0.86) 30%, rgba(20,24,15,0.68) 52%, rgba(20,24,15,0.34) 72%, rgba(20,24,15,0.08) 90%, rgba(20,24,15,0) 100%);
  --scrim-corner:linear-gradient(to top right, rgba(20,24,15,0.6) 0%, rgba(20,24,15,0.2) 50%, rgba(20,24,15,0) 74%);
  --scrim-corner-left:linear-gradient(to top left, rgba(20,24,15,0.6) 0%, rgba(20,24,15,0.2) 50%, rgba(20,24,15,0) 74%);
  --scrim-copy-top:linear-gradient(to bottom, rgba(20,24,15,0.9) 0%, rgba(20,24,15,0.78) 30%, rgba(20,24,15,0.44) 55%, rgba(20,24,15,0.1) 82%, rgba(20,24,15,0) 100%);
}
@media (max-width:720px){ :root{ --section-y:60px; --section-y-lg:76px; } }
@media (max-width:640px){ :root{ --gutter:20px; } }
*{box-sizing:border-box;}
::selection{ background:rgba(140,29,59,0.22); color:var(--ink); }
html{scroll-behavior:smooth; font-optical-sizing:auto;}
body{
  font-synthesis:none; -webkit-font-synthesis:none;
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:0.97rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{
  font-family:var(--font-display);
  font-weight:400;   /* stay light on a contrast serif — hierarchy is size and space */
  margin:0;
  letter-spacing:-0.008em;
}
h1{ font-weight:300; letter-spacing:-0.015em; }
h1 em, h2 em, .display em{ font-style:italic; font-weight:400; }

.eyebrow{
  font-family:var(--font-body);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.24em;
  font-size:var(--fs-label);
  font-weight:500;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap-narrow{padding:0 20px;} }

/* ---------- Reveal ---------- */
/* Start state only. The animation is the GSAP tween in script.js; a CSS
   transition on the same properties turned every per-frame value GSAP
   wrote into the target of a second 0.9s interpolation, so reveals ran
   about twice as long as intended and lost their easing. Nothing adds an
   `.in` class anywhere, so the rules keyed off it were dead as well. */
.js .reveal{opacity:0; transform:translateY(18px);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important;}
}

/* Firelight wash + grain for large dark sections. One rule, reused. */
.hero-scrim::after, .screen-hero::before, .stack__quote::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    var(--wash),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
.screen-hero::before, .stack__quote::before{ z-index:1; }
.screen-hero-inner{ z-index:2; }

/* ---------- Brand mark ---------- */
/* A 12-fold rosette in two densities: the full mark, and a reduced one used
   at 30px and below, where the petal ring closes up into a smudge. Colour,
   fill and stroke are set here rather than on the SVGs, so every instance is
   identical and the ink is a single line to change. fill/stroke/stroke-width
   all inherit into the polygons, which is why the markup carries none.
   Named .brandmark, not .mark: wine.html already uses .mark for the
   serving-size bullets, and display:block would break that row. */
.brandmark{
  display:block; color:var(--rosette-ink);
  fill:none; stroke:currentColor; stroke-width:1; stroke-linejoin:round;
}
.rosette{ display:block; }
.rosette-spin{ animation: spin 140s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* Stroke width is in viewBox units, so a single value cannot serve every
   size: the rendered weight is stroke-width x (display size / 100). These
   land each context on roughly the same hairline. */
.logotype .brandmark{ stroke-width:2.6; }
.hero-rosette{ stroke-width:0.25; }
.page-hero .hero-rosette{ stroke-width:0.3; }
.footer-rosette .brandmark{ stroke-width:0.4; }

/* ---------- Nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:22px 0;
  transition:background 0.4s ease, padding 0.4s ease, box-shadow .4s ease;
  background:rgba(30,36,24,0.0);
}
/* The solid bar's green lives on header::before (see "Liquid gloss" at the
   end of this file), not here. backdrop-filter on the header itself would
   make it the containing block for the fixed mobile menu inside it, which
   then collapses to the bar's height once the page has scrolled. */
header.solid{
  background:transparent;
  padding:14px 0;
  box-shadow:0 6px 24px rgba(0,0,0,0.18);
}
nav{display:flex; align-items:center; justify-content:space-between;}
.logotype{
  color:var(--cream);
  display:flex; align-items:center; gap:12px; min-height:44px;
}
.logotype svg{width:30px; height:30px; flex:none;}
.brand-text{
  display:flex; flex-direction:column; line-height:1;
  font-family:var(--font-body); font-weight:600;
  font-size:1.2rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--cream);
}
/* The sub-line is justified to exactly the width of the wordmark above it.
   width:0 stops it driving the lockup's intrinsic width (so the wordmark
   sets that), min-width:100% then stretches it back to fill, and
   text-align-last spreads the words across that measure. */
.brand-sub{
  font-family:var(--font-body); font-weight:400;
  /* 9px: the widest it can go and still justify inside the wordmark's
     measure. It was 7.7px, which nobody could read. */
  font-size:0.5625rem; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--gold-soft); margin-top:6px;
  width:0; min-width:100%;
  text-align:justify; text-align-last:justify;
}
.navlinks{display:flex; gap:34px; align-items:center;}
.navlinks a{
  color:var(--cream);
  font-size:0.82rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
  opacity:0.92;
}
.navlinks a.current{ opacity:1; color:var(--gold-soft); }
.navlinks a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .35s ease;
}
.navlinks a:hover::after{ right:0; }
.navlinks .cta{ border:1px solid var(--gold-soft); padding:9px 18px; border-radius:0; }
.navlinks .cta::after{ display:none; }
.navlinks .cta:hover{ background:var(--gold-soft); color:var(--green-deep); }
.navtoggle{
  display:none; background:none; border:none; color:var(--cream);
  font-size:1.6rem; z-index:70; position:relative; cursor:pointer;
  min-width:44px; min-height:44px; padding:0; margin-right:-6px;
  align-items:center; justify-content:center;
}
/* Three drawn bars rather than the ☰ character, which every platform
   renders from a different fallback font, at a different weight. Opening
   the menu folds them into an X (script.js sets aria-expanded). */
.navtoggle-bars, .navtoggle-bars::before, .navtoggle-bars::after{
  display:block; width:22px; height:1.5px; background:currentColor; border-radius:1px;
  transition:transform .3s ease, background .2s ease;
}
.navtoggle-bars{ position:relative; }
.navtoggle-bars::before, .navtoggle-bars::after{ content:""; position:absolute; left:0; }
.navtoggle-bars::before{ top:-7px; }
.navtoggle-bars::after{ top:7px; }
.navtoggle[aria-expanded="true"] .navtoggle-bars{ background:transparent; }
.navtoggle[aria-expanded="true"] .navtoggle-bars::before{ transform:translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle-bars::after{ transform:translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .navtoggle-bars, .navtoggle-bars::before, .navtoggle-bars::after{ transition:none; } }
@media (max-width:860px){
  .navlinks{ position:fixed; inset:0; height:100dvh; width:100%; max-width:none;
    background:var(--green-deep); flex-direction:column; justify-content:center; gap:34px;
    opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:60;}
  .navlinks.open{ opacity:1; pointer-events:auto; }
  .navlinks a{ font-size:1.3rem; letter-spacing:0.08em; }
  .navlinks .cta{ padding:14px 34px; }
  .navtoggle{ display:flex; }
  body.nav-open{ overflow:hidden; }
  /* The open menu covers the header; the logo stays above it, beside the
     close button, so the overlay still says whose site it is. */
  .logotype{ position:relative; z-index:70; }
}

/* ---------- Page hero (subpages) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 15%, #2a3322 0%, #1e2418 55%, #14180f 100%);
  color:var(--cream); text-align:center;
  padding:170px 20px 90px;
}
.page-hero .hero-rosette{
  position:absolute; top:50%; left:50%; width:min(760px,130vw); height:min(760px,130vw);
  transform:translate(-50%,-50%); opacity:0.14;
}
.page-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.page-hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,24,15,0.5) 0%, rgba(20,24,15,0.68) 55%, rgba(20,24,15,0.88) 100%);
}
.page-hero .inner{ position:relative; z-index:2; }
.page-hero .eyebrow{ color:var(--gold-soft); margin-bottom:18px; }
.page-hero h1{ font-size:clamp(2.4rem,6.4vw,4rem); color:var(--cream); font-weight:300; }
.page-hero .sub{
  margin-top:16px; font-family:var(--font-body); font-style:italic;
  font-size:clamp(1rem,2vw,1.25rem); color:rgba(239,231,217,0.82); max-width:560px;
  margin-left:auto; margin-right:auto;
}

/* ---------- Full hero (home only) ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:100vh;
  min-height:100svh;   /* must match the fixed intro overlay, not the
                          chrome-retracted viewport, or the intro wordmark
                          and the hero wordmark centre at different heights */
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  color:var(--cream); padding:140px 20px 100px;
}
.hero-bg{
  position:absolute; top:-6%; left:0; right:0; height:112%; width:100%; object-fit:cover; z-index:0;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(20,24,15,0.35) 0%, rgba(20,24,15,0.55) 45%, rgba(20,24,15,0.82) 100%),
    linear-gradient(90deg, rgba(20,24,15,0.35) 0%, transparent 30%, transparent 70%, rgba(20,24,15,0.35) 100%);
}
.hero-rosette{
  position:absolute; top:42%; left:50%; width:min(920px, 130vw); height:min(920px,130vw);
  transform:translate(-50%,-50%); opacity:0.12; z-index:1;
}
/* Home: the rosette sits off to the left, its centre near the left edge
   of the content, and stays there. Placed with left/top (no centring
   transform), so the motion can use the individual rotate and translate
   properties: a very slow turn and a gentle rise and fall, which never
   overwrite each other or the position. */
.hero .hero-rosette{
  --rs:min(860px, 120vw);
  width:var(--rs); height:var(--rs);
  left:calc(14% - var(--rs) / 2); top:calc(50% - var(--rs) / 2);
  transform:none;
  animation:heroRoseTurn 200s linear infinite, heroRoseDrift 24s ease-in-out infinite alternate;
}
@keyframes heroRoseTurn{ to{ rotate:360deg; } }
@keyframes heroRoseDrift{
  from{ translate:0 -16px; opacity:0.10; }
  to{ translate:0 16px; opacity:0.15; }
}
@media (max-width:640px){
  .hero .hero-rosette{ --rs:125vw; left:calc(4% - var(--rs) / 2); }
}
/* The intro overlay shares the hero's type and layout rules rather than
   restating them, so the two can never drift apart and the hand-off at
   the end of the intro lands on exactly the same glyphs in the same
   place. See the intro block near the end of this file. */
.hero-inner, .intro-inner{position:relative; z-index:2; max-width:760px;}
.hero .eyebrow, .site-intro .eyebrow{ color:var(--gold-soft); margin-bottom:22px; }
.hero h1, .site-intro .wordmark{ font-size:clamp(2.6rem, 7vw, 5.6rem); color:var(--cream); line-height:0.98; letter-spacing:-0.02em; font-weight:300; }
/* Sized to hold a longer title on one line at every width. */
.hero h1.one-line, .screen-hero h1.one-line{ font-size:clamp(1.7rem, 6.2vw, 3.7rem); }
/* Phones: holding it to one line left Menu's and Private Dining's page
   titles at 27px, smaller than their own section headings. Two balanced
   lines at the size of the other pages' titles instead. */
@media (max-width:640px){
  .hero h1.one-line, .screen-hero h1.one-line{ font-size:clamp(2.3rem, 10.5vw, 2.9rem); text-wrap:balance; }
}
.hero .sub{
  margin-top:20px; font-family:var(--font-body); font-style:italic;
  font-size:clamp(1.1rem,2vw,1.4rem); color:var(--gold-soft); letter-spacing:0.04em;
}
.brand-lockup{ display:inline-flex; flex-direction:column; align-items:center; margin:0 auto; }
.brand-lockup h1, .brand-lockup .wordmark{
  font-family:var(--font-display); font-weight:300; letter-spacing:-0.02em; white-space:nowrap; margin:0;
  animation:heroTitleReveal 1.8s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes heroTitleReveal{
  0%{ opacity:0; letter-spacing:0.5em; filter:blur(8px); }
  100%{ opacity:1; letter-spacing:-0.02em; filter:blur(0); }
}
@media (prefers-reduced-motion: reduce){
  .brand-lockup h1, .brand-lockup .wordmark{ animation:none; }
}
.brand-lockup-sub{
  margin-top:14px; font-family:var(--font-body); font-style:italic;
  font-size:clamp(1.1rem,2vw,1.4rem); color:var(--gold-soft); letter-spacing:0.04em;
}
.hero .lede, .site-intro .lede{ margin:28px auto 0; max-width:520px; color:rgba(239,231,217,0.82); font-size:var(--fs-lede); }
.hero-ctas{ margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:14px 30px; font-size:0.84rem; font-weight:500; letter-spacing:0.12em;
  text-transform:uppercase; border-radius:0;
  transition:transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  cursor:pointer; font-family:var(--font-body);
  border:1px solid transparent;
}
/* Hover empties the fill and leaves the outline, with a cream label: right
   on the dark grounds (hero, promo band, weekly banner, reserve panels, the
   mobile bar). Groups on cream carry .on-light, see below. */
.btn-primary{ background:var(--pomegranate); border-color:var(--pomegranate); color:var(--cream); }
.btn-primary:hover{ background:transparent; color:var(--cream); transform:translateY(-2px); }
/* Ghost is only ever used on dark grounds, dark only on light ones — checked
   against every instance, which is what makes these hover colours safe. */
.btn-ghost{ background:var(--gold-soft); border-color:var(--gold-soft); color:var(--green-deep); }
.btn-ghost:hover{ background:transparent; color:var(--gold-soft); transform:translateY(-2px); }
.btn-dark{ background:var(--green-deep); border-color:var(--green-deep); color:var(--cream); }
.on-light .btn-primary:hover{ color:var(--pomegranate); border-color:var(--pomegranate); }
.on-light .btn-ghost:hover{ color:var(--ink); border-color:var(--gold-deep); }
.btn-dark:hover{ background:transparent; color:var(--green-deep); }

/* Phones: a lighter button. 45px tall rather than 53, still above the 44px
   thumb minimum, so a stacked pair no longer fills a third of the screen. */
@media (max-width:640px){
  .btn{ padding:13px 22px; font-size:0.78rem; letter-spacing:0.1em; line-height:1.4; }
}

.scroll-cue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  color:var(--gold-soft); font-size:var(--fs-label); letter-spacing:0.3em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0.8;
}
.scroll-cue .line{width:1px; height:34px; background:var(--gold-soft); animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ---------- Booking widget (floating card) ---------- */
.booking-widget{
  position:relative; z-index:3; margin:48px auto 0; width:100%; max-width:920px;
  background:rgba(30,36,24,0.9); border:1px solid rgba(217,189,126,0.4);
  box-shadow:0 30px 70px rgba(0,0,0,0.35); backdrop-filter:blur(8px);
}
.booking-tabs{ display:flex; border-bottom:1px solid rgba(217,189,126,0.25); }
.booking-tabs button{
  flex:1; background:none; border:none; padding:18px 20px; font-family:var(--font-body);
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:rgba(239,231,217,0.78);
  cursor:pointer; transition:color .25s ease, background .25s ease; border-bottom:2px solid transparent;
}
.booking-tabs button.active{ color:var(--gold-soft); border-bottom-color:var(--gold); background:rgba(201,162,75,0.08); }
.booking-panel{ display:none; padding:28px 30px 30px; }
.booking-panel.active{ display:block; }

/* ---------- Generic sections ---------- */
section{ position:relative; }
.section-pad{ padding:var(--section-y) 0; }
.section-pad-sm{ padding:var(--section-y) 0; }
.dark{ background:var(--green-deep); color:var(--cream); }
.dark .ink-soft{ color:rgba(239,231,217,0.82); }

.section-head{ text-align:center; margin-bottom:60px; }
.house-note{ max-width:40ch; margin:18px auto 0; color:var(--ink-soft); font-size:var(--fs-body); }
.section-head h2{ font-size:clamp(2rem,4vw,2.8rem); margin-top:14px; }

/* ---------- Highlight teaser cards (home) ---------- */

/* ---------- Menu listings ---------- */

.dish{ background:var(--green-deep); padding:38px 40px; }

.dish p{ margin:0; color:rgba(239,231,217,0.82); font-size:var(--fs-body-sm); }

/* Menu thumbnail list — small square photo + name + description per item */

/* Light listing rows (used on wine page) */

/* Jump nav for long pages */
.jumpnav{ position:sticky; top:0; z-index:20; background:var(--cream); border-bottom:1px solid rgba(25,28,19,0.1);
  padding:18px 0;
  /* block, not the bare nav{} rule's flex: as a flex item the .wrap shrank
     to its links and centred itself, off the content column's left edge */
  display:block; }
.jumpnav .wrap{ display:flex; gap:26px; flex-wrap:wrap; overflow-x:auto; }
.jumpnav a{ font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.jumpnav a:hover{ color:var(--pomegranate); }

.wine-tabs, .menu-tabs{ top:71px; cursor:pointer; }
@media (min-width:861px) and (max-width:884px){ .wine-tabs, .menu-tabs{ top:75px; } }
.wine-tabs a{ padding-bottom:6px; border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease; }
.wine-tabs a.active{ color:var(--pomegranate); font-weight:600; border-bottom-color:var(--pomegranate); }
/* Phones: one row that scrolls sideways, like the Menu's tabs, rather than
   wrapping to three lines of a sticky bar (it was 175px tall at 390px). */
@media (max-width:860px){
  .wine-tabs{ padding:14px 0 12px; }
  .wine-tabs .wrap{ position:relative; flex-wrap:nowrap; gap:24px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .wine-tabs .wrap::-webkit-scrollbar{ display:none; }
  .wine-tabs a{ flex:none; }
}
.wine-panel{ display:none; }
.wine-panel.active{ display:block; }

/* ---------- Wine ---------- */

.bottle{ border-top:1px solid rgba(25,28,19,0.15); padding-top:24px; color:var(--ink); }
.bottle .name{ font-size:1.2rem; margin-bottom:2px; }

.bottle p{ color:var(--ink-soft); font-size:var(--fs-body-sm); margin:0 0 12px; }

/* Wine table rows */
.wine-table{ width:100%; border-collapse:collapse; }
.wine-table th{ text-align:left; font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; padding:0 0 12px; border-bottom:1px solid rgba(25,28,19,0.2); }
.dark .wine-table th{ color:rgba(239,231,217,0.85); border-bottom-color:rgba(239,231,217,0.25); }
.wine-table th.num, .wine-table td.num{ text-align:center; }
.wine-table td.num{ color:var(--ink); font-size:1.1rem; }
.dark .wine-table td.num{ color:var(--gold-soft); }
.wine-table td{ padding:16px 0; border-bottom:1px dotted rgba(25,28,19,0.15); vertical-align:top; }
.wine-table .wname{ font-weight:500; font-size:var(--fs-lede); }
.wine-table .wmaker{ font-size:var(--fs-label); text-transform:uppercase; letter-spacing:0.06em; color:var(--pomegranate); margin-top:2px; }
.wine-table .wdesc{ font-family:var(--font-body); font-style:italic; color:var(--ink-soft); font-size:var(--fs-body-sm); margin-top:6px; max-width:480px; }
.wine-table td.num{ font-family:var(--font-body); font-size:0.92rem; white-space:nowrap; }
@media (max-width:720px){
  .wine-table thead{ display:none; }
  .wine-table tr{ display:flex; flex-direction:column; padding:16px 0; }
  .wine-table td{ border:none; padding:2px 0; }
  .wine-table td.num{ font-size:0.85rem; }
}

.banquet{ background:var(--cream); padding:40px 36px; color:var(--ink); }
.banquet .eyebrow{ color:var(--pomegranate); }
.banquet h3{ font-size:1.5rem; margin:14px 0 6px; }

.banquet ul{ list-style:none; margin:0; padding:0; color:var(--ink-soft); font-size:var(--fs-body-sm); }
.banquet li{ padding:5px 0; border-top:1px dotted rgba(25,28,19,0.18); }
.banquet li:first-child{ border-top:none; }

/* ---------- Visit / contact ---------- */
.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
@media (max-width:860px){ .visit-grid{grid-template-columns:1fr; gap:40px;} }
.info-block{ margin-bottom:36px; }
.info-block h2{ font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--pomegranate); margin-bottom:10px; }
.info-block p{ color:var(--ink-soft); margin:0; }
.info-block .hours-row{ display:flex; justify-content:space-between; padding:6px 0; border-top:1px dotted rgba(25,28,19,0.15); }
.info-block .hours-row:first-of-type{ border-top:none; }

/* ---------- Reserve CTA band ---------- */
.reserve{ background:var(--green-deep); color:var(--cream); text-align:center; padding:var(--section-y-lg) 0; }
.reserve h2{ font-size:clamp(2.2rem,5vw,3.4rem); color:var(--cream); }
.reserve p{ color:rgba(239,231,217,0.85); max-width:480px; margin:20px auto 36px; }

.reserve.maroon{ background:var(--pomegranate-deep); }
.reserve.maroon .btn-primary{ background:var(--gold); border-color:var(--gold); color:var(--green-deep); }
.reserve.maroon .btn-primary:hover{ background:transparent; color:var(--gold); }

/* ---------- Footer ----------
   The real footer content is .footer-split further down; this bare
   <footer> rule must match its background exactly and carry no padding
   of its own, or the two different greens show as a visible seam. ---------- */
footer{ background:var(--green-deep); color:rgba(239,231,217,0.85); padding:0; }

footer h4{ color:var(--cream); font-family:var(--font-body); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; margin-bottom:16px; font-weight:600; }
footer p, footer a{ font-size:var(--fs-body-sm); line-height:1.9; }

/* ---------- Sticky mobile reserve bar ---------- */
.mobile-reserve-bar{ display:none; }
@media (max-width:860px){
  .mobile-reserve-bar{
    display:block; position:fixed; bottom:0; left:0; right:0; z-index:55;
    background:var(--green-deep); padding:10px 16px;
    box-shadow:0 -8px 24px rgba(0,0,0,0.28);
  }
  .mobile-reserve-bar .btn{ width:100%; text-align:center; padding:12px 22px; line-height:1.4; }
  body{ padding-bottom:66px; }
}

/* ---------- Bottle grid: horizontal scroll on mobile ---------- */
@media (max-width:720px){
  
  .bottle{ flex:0 0 82%; scroll-snap-align:start; }
}

/* ---------- Gallery — bento mosaic ---------- */

/* ---------- Press / testimonial quotes ---------- */

/* ---------- Promo band ---------- */

/* ---------- Room cards (Explore section, full-bleed image + overlay text) ---------- */

/* ---------- Editorial mosaic (asymmetric, image-overlay captions) ---------- */

/* Inset-frame hover. The card is the frame: its box never changes size, so a
   hover cannot nudge its neighbours or overflow. Only the contents scale down,
   revealing the card's own background as an even margin — the picture settling
   into a mount. The mount is a darker step of the section's own
   ground (--mount-light); white would read as a gap. */

/* The scrim lives on the inner, not the card, so it scales with the image
   instead of spilling across the revealed mount. */

/* ---------- PDF menu access buttons ---------- */

/* ---------- Dish showcase (photographed hero dishes) ---------- */

/* ---------- Reviews stat (used above the review marquee) ----------
   Deliberately on a light background: the section above (58-years dark-green
   band, or the custom testimonial section) and this one need a clean,
   obvious seam rather than blending into one long dark block. ---------- */
.reviews-band{ background:var(--cream); padding:var(--section-y) 0; border-top:1px solid rgba(201,162,75,0.4); }
.reviews-band-head{ text-align:center; margin-bottom:0; }
.reviews-stat{ display:inline-flex; align-items:baseline; gap:10px; color:var(--ink); }
.reviews-stat .num{ font-family:var(--font-body); font-size:2.2rem; color:var(--pomegranate); }
.reviews-stat .stars{ color:var(--gold-deep); letter-spacing:2px; }

/* ---------- Review marquee: a continuous, infinitely-looping single line
   of short review snippets. Built from one set of chips duplicated once —
   animating exactly -50% loops seamlessly back to the start. ---------- */
.review-marquee{ position:relative; overflow:hidden; margin-top:44px; }
.review-marquee::before, .review-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.review-marquee::before{ left:0; background:linear-gradient(90deg, var(--cream) 0%, transparent 100%); }
.review-marquee::after{ right:0; background:linear-gradient(270deg, var(--cream) 0%, transparent 100%); }
.review-marquee-track{
  display:flex; gap:28px; width:max-content;
  animation:reviewMarquee 46s linear infinite;
}
.review-marquee:hover .review-marquee-track{ animation-play-state:paused; }
@keyframes reviewMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.review-chip{
  flex:0 0 auto; width:320px; padding:26px 28px; background:var(--cream-2);
  border-top:2px solid var(--gold);
}
.review-chip .stars{ color:var(--gold-deep); font-size:0.85rem; letter-spacing:2px; }
.review-chip p{
  font-family:var(--font-body); font-style:italic; color:var(--ink); font-size:var(--fs-body-sm);
  line-height:1.55; margin:14px 0 0;
}
.review-chip .attrib{
  margin-top:16px; font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--pomegranate);
}
@media (max-width:640px){ .review-chip{ width:260px; padding:22px 22px; } .review-marquee::before, .review-marquee::after{ width:36px; } }
@media (prefers-reduced-motion: reduce){ .review-marquee-track{ animation:none; } }

/* ---------- Real map embed ---------- */

/* ---------- Full-screen map (Visit page closer) ---------- */
.map-embed-xl{ width:100%; min-height:80vh; filter:grayscale(0.15) contrast(1.05); }
.map-embed-xl iframe{ width:100%; height:100%; min-height:80vh; border:0; display:block; }
@media (max-width:720px){
  .map-embed-xl, .map-embed-xl iframe{ min-height:56vh; }
}
/* Click-to-load: Google's iframe sets cookies, so nothing is fetched from
   Google until the guest asks. script.js unhides the button and swaps in
   the iframe; without JavaScript the directions link still works. */
.map-facade{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--green-deep); color:var(--cream); filter:none; padding:56px 20px;
}
.map-facade.is-loaded{ display:block; padding:0; position:relative; }
.map-facade.is-loaded iframe{
  position:relative; z-index:1; opacity:0; pointer-events:none;
  filter:grayscale(0.15) contrast(1.05); transition:opacity .4s ease;
}
.map-facade.is-loaded iframe.is-ready{ opacity:1; pointer-events:auto; }
.map-facade.is-loaded::before{
  content:"Loading the map\2026"; position:absolute; inset:0 0 44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--cream); font-size:var(--fs-small);
}
.map-facade-status{
  margin:0; padding:12px 20px; text-align:center;
  background:var(--green-deep); color:rgba(239,231,217,0.78); font-size:var(--fs-small);
}
.map-facade-status a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px; }
/* Before the map loads, the facade holds an address and two buttons; at the
   map's full 80vh that was mostly empty green. It takes the map's height
   only once there is a map in it. */
.map-facade:not(.is-loaded){ min-height:clamp(360px, 52vh, 520px); }
/* The Find Us heading belongs to the map below it, so it sits closer to it
   than a section's full bottom padding. */
.map-head{ padding-bottom:clamp(32px, 4vw, 48px); }
.map-facade-inner{ max-width:460px; }
.map-facade-mark{
  display:block; width:64px; aspect-ratio:1; margin:0 auto 26px; background:var(--gold);
  -webkit-mask:var(--mark-mask) center / contain no-repeat;
          mask:var(--mark-mask) center / contain no-repeat;
}
.map-facade-address{ font-family:var(--font-display); font-weight:300; font-size:1.6rem; line-height:1.3; color:var(--cream); margin:0 0 28px; }
.map-facade-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
/* a <button> does not inherit line-height as the <a> beside it does; phones
   set the .btn line-height outright, so this is only needed above that */
@media (min-width:641px){ .map-facade-load{ line-height:inherit; } }
.map-facade-load[hidden]{ display:none; }
.map-facade-note{ font-size:var(--fs-small); line-height:1.6; color:rgba(239,231,217,0.78); margin:0; }

/* ---------- Modern polish: scroll targets, skip link, progress bar, back-to-top ---------- */
[id]{ scroll-margin-top: 100px; }

/* Read by screen readers and search engines, never shown. */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-60px; left:16px; z-index:100; background:var(--gold); color:var(--green-deep);
  padding:12px 20px; font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  transition:top .25s ease;
}
.skip-link:focus{ top:16px; }
/* The skip link's target takes focus programmatically; no ring round the whole page. */
main:focus{ outline:none; }

.scroll-progress{
  /* Scaled, not resized: animating width forced a layout on every scroll
     frame; a transform stays on the compositor. */
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:90;
  background:linear-gradient(90deg, var(--gold-soft), var(--gold));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .1s linear;
}

.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:55; width:48px; height:48px;
  background:var(--green-deep); border:1px solid var(--gold); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; padding:0;
  cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, background .3s ease;
}
.back-to-top svg{ width:18px; height:18px; display:block; }
.back-to-top.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ background:var(--gold); color:var(--green-deep); }
@media (max-width:860px){ .back-to-top{ bottom:84px; } }

.jumpnav a.active{ color:var(--pomegranate); font-weight:600; }

/* Refined premium hover on interactive cards */
.bottle, .banquet{
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, background .3s ease;
}

.bottle:hover{ transform:translateY(-3px); }

/* Focus visibility for a11y */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* ============================================================
   Luxury design system — ornament labels, split-feature sections,
   arrow-controlled galleries, testimonial carousel, card rows.
   Used across every page for a consistent (not identical) feel.
   ============================================================ */

/* ---------- Ornament label: eyebrow + thin crossed mark ---------- */
.ornament-label{ text-align:center; margin-bottom:28px; }
.ornament-label.align-left{ text-align:left; }
.ornament-label .eyebrow{ display:block; color:var(--pomegranate); margin-bottom:4px; }
.dark .ornament-label .eyebrow{ color:var(--gold-soft); }
.ornament-mark{ display:inline-block; width:15px; height:15px; color:var(--gold); opacity:0.9; }

/* ---------- Arrow nav (rotated-diamond prev/next buttons) ---------- */
.arrow-nav{ display:flex; gap:14px; margin-top:8px; }
.arrow-btn{
  position:relative; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--gold); background:none; padding:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
  flex:none; color:var(--gold);
}
.arrow-btn::before{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(201,162,75,0.35);
  transition:inset .3s ease, opacity .3s ease;
}
.arrow-btn svg{ width:16px; height:16px; display:block; position:relative; z-index:1; }
.arrow-btn:hover{ background:var(--gold); color:var(--green-deep); transform:scale(1.05); }
.arrow-btn:hover::before{ inset:-8px; opacity:0.6; }
.dark .arrow-btn{ border-color:var(--gold-soft); color:var(--gold-soft); }
.dark .arrow-btn::before{ border-color:rgba(217,189,126,0.35); }
.dark .arrow-btn:hover{ background:var(--gold-soft); color:var(--green-deep); }

/* ---------- Split-feature: large image one side, copy the other ---------- */
.split-feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:600px; }
@media (max-width:900px){ .split-feature{ grid-template-columns:1fr; min-height:0; } }
.split-feature-media{ position:relative; overflow:hidden; background:var(--cream-2); }
.split-feature-media img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.13); will-change:transform; }
@media (max-width:900px){ .split-feature-media{ aspect-ratio:4/5; } }

.split-feature-media.framed{
  background:radial-gradient(120% 90% at 30% 20%, rgba(201,162,75,0.16), transparent 60%), var(--green-deep);
  display:flex; align-items:center; justify-content:center; padding:56px;
}

.split-feature-media.framed img{
  position:relative; z-index:1; width:100%; height:100%; max-height:520px;
  box-shadow:0 30px 70px rgba(0,0,0,0.4);
}
@media (max-width:900px){ .split-feature-media.framed{ aspect-ratio:4/5; padding:32px; } }

/* ---------- Promo hero: shorter full-bleed photo band with centered copy ---------- */
.promo-hero{
  position:relative; overflow:hidden; min-height:480px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--cream); padding:80px 20px;
}
.promo-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.promo-hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,24,15,0.55) 0%, rgba(20,24,15,0.72) 100%); }
.promo-hero-inner{ position:relative; z-index:2; max-width:620px; }
.promo-hero .eyebrow{ color:var(--gold-soft); }
.promo-hero h2{ font-size:clamp(2rem,4.5vw,3.2rem); color:var(--cream); margin-top:16px; }
.promo-hero p{ margin-top:18px; color:rgba(239,231,217,0.85); font-size:var(--fs-lede); }
.promo-hero .btn{ margin-top:30px; }
.promo-hero.framed{ min-height:540px; padding:72px 20px; }
/* Same settle as the mosaic, but outline only: the gold hairline draws inward
   from the edges on hover. Nothing scales and nothing fills. */
.promo-hero.framed::after{
  content:""; position:absolute; inset:20px; z-index:2; pointer-events:none;
  border:1px solid rgba(217,189,126,0.45);
  transition:inset 0.7s cubic-bezier(.22,.61,.36,1), border-color 0.7s cubic-bezier(.22,.61,.36,1);
}
.promo-hero.framed:hover::after{ inset:30px; border-color:rgba(217,189,126,0.72); }
.promo-hero.framed .promo-hero-inner{ z-index:3; }
@media (max-width:640px){
  .promo-hero.framed{ min-height:440px; padding:56px 18px; }
  .promo-hero.framed::after{ inset:12px; }
  .promo-hero.framed:hover::after{ inset:22px; }
}

/* ---------- Card row: image + caption below, evenly spaced ---------- */

.card-row-item{ display:block; perspective:900px; }
.card-row-item .card-row-img-wrap{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.card-row-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Arrow gallery: scroll-snap strip driven by arrow buttons ---------- */
.arrow-gallery-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  /* Deliberately NOT scroll-behavior:smooth — it makes the browser animate
     every scrollLeft write, which fights the eased rAF scroll in script.js. */
  scroll-behavior:auto;
}
.arrow-gallery-track::-webkit-scrollbar{ display:none; }
.arrow-gallery-track:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.tile-row--house:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:6px; }
.gallery-slide{ flex:0 0 auto; scroll-snap-align:start; }
.arrow-gallery-track.slides-3 .gallery-slide{ width:calc((100% - 48px)/3); }

@media (max-width:860px){
  .arrow-gallery-track.slides-3 .gallery-slide{ width:80%; }
}
/* height:auto is required: the width/height attributes on <img> act as
   presentational hints, and without this the height attribute wins over
   aspect-ratio and every slide renders at its intrinsic proportions. */
.gallery-slide img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; }
.arrow-gallery-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:28px; }
.arrow-gallery-foot > .arrow-nav:only-child{ margin-left:auto; }

/* ---------- Testimonial carousel ---------- */
/* Stretch, not center: the heading top-aligns with the photograph and the
   quote + arrows sit on its bottom edge, so the whole column reads as one
   block set against the image. */
.testimonial-feature{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:64px; align-items:stretch; }
@media (max-width:900px){ .testimonial-feature{ grid-template-columns:1fr; gap:32px; } }
.testimonial-text{ display:flex; flex-direction:column; }
.testimonial-head{ text-align:left; }
.testimonial-head .ornament-label{ text-align:left; margin-bottom:16px; }
.testimonial-head h2{ font-size:clamp(2rem,4vw,2.8rem); }
/* margin-top:auto pushes the active quote (and the arrows after it) to the
   floor of the column, level with the photograph's bottom edge. */
.testimonial-text [data-slide-group="quote"].tslide-active{ margin-top:auto; }
.testimonial-text .arrow-nav{ margin-top:30px; }
@media (max-width:900px){
  .testimonial-text [data-slide-group="quote"].tslide-active{ margin-top:28px; }
}
.testimonial-text [data-slide-group="quote"]{ display:none; }
.testimonial-text [data-slide-group="quote"].tslide-active{ display:block; }
.testimonial-media [data-slide-group="media"]{ display:none; }
.testimonial-media [data-slide-group="media"].tslide-active{ display:block; }
.testimonial-quote{
  font-family:var(--font-body); font-style:italic;
  font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.45; color:var(--ink);
}
.dark .testimonial-quote{ color:var(--cream); }
/* Reserve consistent vertical space regardless of which quote is active,
   so the arrow buttons land in the same spot on every click. */
.testimonial-quote.tslide-active{ min-height:150px; }
@media (max-width:640px){ .testimonial-quote.tslide-active{ min-height:190px; } }

.testimonial-media{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.testimonial-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Ghost banner: big centred title with faint repeated
   watermark text either side, on a solid brand-colour band ---------- */

/* ---------- Full-screen photo hero with giant wordmark (Story page) ---------- */
.screen-hero{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--cream);
}
.screen-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.screen-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,24,15,0.55) 0%, rgba(20,24,15,0.35) 40%, rgba(20,24,15,0.7) 100%);
}
.screen-hero-inner{ position:relative; z-index:2; padding:20px; }
.screen-hero h1{ font-size:clamp(2.7rem,8.4vw,6rem); color:var(--cream); line-height:0.98; letter-spacing:-0.02em; font-weight:300; }
.screen-hero .sub{
  margin-top:20px; font-family:var(--font-body); font-style:italic; font-weight:400;
  font-size:clamp(1rem,2vw,1.3rem); color:rgba(239,231,217,0.88);
  max-width:620px; margin-left:auto; margin-right:auto;
}
.screen-hero .hero-ctas{ justify-content:center; margin-top:30px; }

/* ---------- Contact band: heading + horizontal info row + social ---------- */
.contact-band-head{ text-align:center; padding-bottom:44px; }
.contact-band-head h2{ font-size:clamp(2.2rem,5vw,3.6rem); }

/* ---------- Footer: split info / newsletter / full-bleed image ---------- */
.footer-split{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr);
  background:var(--green-deep); color:rgba(239,231,217,0.85); overflow:hidden;
}
@media (max-width:900px){ .footer-split{ grid-template-columns:minmax(0,1fr); } }
.footer-split-info{ position:relative; padding:76px 64px 34px; display:flex; flex-direction:column; }
@media (max-width:640px){ .footer-split-info{ padding:52px 24px 28px; } }
/* Brand mark watermark — sits behind the footer content, turning very
   slowly. Decorative only, so it's aria-hidden in the markup. */
/* The wrapper owns the centring transform and the inner SVG owns the
   rotation — one element can't do both, since the animation's transform
   would overwrite the translate. */
.footer-rosette{
  position:absolute; right:-90px; top:50%; transform:translateY(-50%);
  width:min(460px, 52%); opacity:0.06; z-index:0; pointer-events:none;
}
.footer-rosette svg{ width:100%; height:auto; display:block; }
.footer-split-info > *:not(.footer-rosette){ position:relative; z-index:1; }
@media (max-width:900px){ .footer-rosette{ right:-120px; width:340px; } }
/* Footer lockup mirrors the header's: wordmark with the descriptor
   justified to exactly the wordmark's width beneath it. */
.footer-split-brand{
  display:inline-flex; flex-direction:column; line-height:1; margin-bottom:40px;
  /* the footer info column is a flex column, so without this the lockup
     stretches full-width and the justified sub-line stretches with it */
  align-self:flex-start;
  font-family:var(--font-body); font-weight:600;
  font-size:1.95rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--cream);
}
.footer-brand-sub{
  font-family:var(--font-body); font-weight:400;
  font-size:var(--fs-label); letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gold-soft); margin-top:10px;
  width:0; min-width:100%;
  text-align:justify; text-align-last:justify;
}
/* Grid rather than flex so the three columns spread across the full
   width of the footer instead of bunching against the left edge. */
.footer-info-cols{
  /* the contacts column is a touch wider, so on desktop the email address
     fits one line instead of breaking after the @ */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);
  gap:32px; margin-bottom:52px; max-width:740px;
}
@media (max-width:560px){
  .footer-info-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
  /* contacts last, holding a 32-character email: give it the whole row so
     the address breaks between words rather than mid-token */
  .footer-info-cols > div:last-child{ grid-column:1 / -1; }
}
.footer-info-cols .foot-h{ font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; font-weight:400; }
.footer-info-cols p{ font-size:var(--fs-small); margin:0; color:rgba(239,231,217,0.78); line-height:1.7; }
/* Below 360px even 'armenianrestaurant.co.uk' on its own line overflows; only then
   allow a break inside the word. Above that the <wbr> after the @ takes it. */
@media (max-width:360px){ .footer-info-cols p{ overflow-wrap:anywhere; } }
/* An email address is one long word: let it break anywhere rather than push
   the page sideways on a narrow screen or at large text sizes. */
a[href^="mailto:"]{ overflow-wrap:anywhere; }
.footer-newsletter .foot-h{ font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; font-weight:400; }
.footer-newsletter .foot-note{ font-size:var(--fs-small); color:rgba(239,231,217,0.6); margin:-6px 0 16px; max-width:340px; }
.footer-newsletter-row{ display:flex; max-width:520px; }
.footer-newsletter-row input{
  flex:1; min-width:0; background:rgba(239,231,217,0.05); border:1px solid rgba(217,189,126,0.3); border-right:none;
  padding:13px 16px; color:var(--cream); font-family:var(--font-body); font-size:var(--fs-small);
}
.footer-newsletter-row input::placeholder{ color:rgba(239,231,217,0.4); }
.footer-newsletter-row button{
  background:none; border:1px solid var(--gold-soft); color:var(--gold-soft); padding:0 22px; flex:none;
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; cursor:pointer; transition:background .3s ease, color .3s ease;
}
.footer-newsletter-row button:hover{ background:var(--gold-soft); color:var(--green-deep); }
.footer-social-row{ display:flex; gap:12px; margin-top:26px; }
.footer-social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(217,189,126,0.4); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease;
}
.footer-social-row a svg{ width:15px; height:15px; }
.footer-social-row a:hover{ background:var(--gold-soft); color:var(--green-deep); }
.footer-bottom-bar{
  margin-top:auto; padding-top:24px; border-top:1px solid rgba(239,231,217,0.1);
  font-size:0.74rem; color:rgba(239,231,217,0.6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-split-media{ position:relative; overflow:hidden; min-height:340px; }
.footer-split-media img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
@media (max-width:900px){ .footer-split-media{ min-height:260px; } }

/* ---------- Team feature: single portrait flanked by arrow nav ---------- */

.price-list-title{
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; margin-bottom:22px; color:var(--gold-soft);
}
.price-list-title .diamond{ width:6px; height:6px; border:1px solid var(--gold-soft); transform:rotate(45deg); flex:none; }
.price-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:13px 0; border-bottom:1px dotted rgba(239,231,217,0.25); }
.price-row:last-child{ border-bottom:none; }
.price-row .item-name{ font-size:var(--fs-body-sm); color:var(--cream); }
.price-row .item-tag{ font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--gold-soft); white-space:nowrap; }

/* ---------- Category row: sidebar label + image grid (menu/bar style) ---------- */

/* ---------- Wide strip: one large full-bleed horizontal image at a time.
   Section wrapping this has no .wrap, so the track runs edge to edge. A
   hairline rule top and bottom keeps the whole module reading as a
   distinct inserted band, even against a neighbouring dark section. The
   caption and arrow nav both sit directly on the image, so it's obvious
   at a glance that it's a scrollable strip. ---------- */
.wide-strip{
  position:relative; display:block;
  box-shadow:0 -1px 0 rgba(201,162,75,0.3), 0 1px 0 rgba(201,162,75,0.3);
}
.wide-strip .gallery-slide{ width:100%; position:relative; }
.wide-strip .gallery-slide img{ width:100%; aspect-ratio:21/8; object-fit:cover; }
.wide-strip .gallery-slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(20,24,15,0.72) 0%, rgba(20,24,15,0.05) 40%, transparent 62%);
}
.wide-strip-nav{ position:absolute; right:var(--bleed-pad); bottom:26px; z-index:3; display:flex; gap:12px; }
.wide-strip-nav .arrow-btn{ border-color:var(--gold-soft); color:var(--gold-soft); background:rgba(20,24,15,0.4); }
.wide-strip-nav .arrow-btn:hover{ background:var(--gold-soft); color:var(--green-deep); }
@media (max-width:720px){ .wide-strip-nav{ bottom:16px; } }
.wide-slide-caption{
  position:absolute; left:var(--bleed-pad); bottom:26px; z-index:2; color:var(--cream);
  font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,2rem);
  text-shadow:0 2px 14px rgba(0,0,0,0.5);
}
.wide-slide-caption .rule{ display:block; width:28px; height:2px; background:var(--gold); margin-bottom:10px; }
.hero .eyebrow, .vista .eyebrow, .screen-hero .eyebrow, .wide-slide-caption{
  text-shadow:0 1px 2px rgba(20,24,15,0.85), 0 0 14px rgba(20,24,15,0.7), 0 2px 22px rgba(20,24,15,0.55);
}
@media (max-width:720px){
  .wide-strip .gallery-slide img{ aspect-ratio:4/3; }
  .wide-slide-caption{ bottom:20px; font-size:1.15rem; }
}

.image-title-banner{
  position:relative; min-height:58vh; overflow:hidden; display:flex; align-items:center;
  color:var(--cream); padding-left:var(--bleed-pad); padding-right:var(--bleed-pad);
}
.image-title-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.image-title-banner::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(20,24,15,0.82) 0%, rgba(20,24,15,0.42) 55%, rgba(20,24,15,0.12) 100%);
}
.image-title-banner-inner{ position:relative; z-index:2; padding:0; max-width:620px; }
.image-title-banner.center{ justify-content:center; text-align:center; }
.image-title-banner.center::after{ background:linear-gradient(180deg, rgba(20,24,15,0.45) 0%, rgba(20,24,15,0.8) 100%); }
.image-title-banner.center .image-title-banner-inner{ max-width:640px; padding:0; margin:0 auto; }
.image-title-banner-inner .eyebrow{ color:var(--gold-soft); margin-bottom:16px; display:block; }
.image-title-banner-inner h2{ font-size:clamp(2.4rem,5.5vw,4rem); color:var(--cream); }
.image-title-banner-inner p{ margin-top:16px; color:rgba(239,231,217,0.85); font-size:var(--fs-lede); max-width:480px; }
.image-title-banner.center .image-title-banner-inner p{ margin-left:auto; margin-right:auto; }
@media (max-width:720px){
  .image-title-banner{ min-height:48vh; }
  .image-title-banner-inner{ padding:0; }
}

.wide-banner{
  position:relative; width:100%; aspect-ratio:21/8; overflow:hidden; background:var(--green-deep);
  box-shadow:0 -1px 0 rgba(201,162,75,0.3), 0 1px 0 rgba(201,162,75,0.3);
}
.wide-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:720px){ .wide-banner{ aspect-ratio:4/3; } }

/* ---------- Founders banner: full-bleed portrait, names set large directly
   on the photo, short line beneath — followed by a separate longer-copy
   section underneath rather than an overlapping card ---------- */

.founders-banner-inner{ position:relative; z-index:2; padding:0 40px 36px; max-width:560px; }
.founders-banner-inner .eyebrow{ color:var(--gold-soft); margin-bottom:14px; display:block; }
.founders-banner-inner h2{ font-size:clamp(2rem,4.2vw,3rem); color:var(--cream); line-height:1.05; }
.founders-banner-inner .sub{
  margin-top:14px; font-family:var(--font-body); font-style:italic; font-weight:400;
  font-size:clamp(0.95rem,1.6vw,1.15rem); color:rgba(239,231,217,0.88); max-width:480px;
}
@media (max-width:720px){
  
  .founders-banner-inner{ padding:0 22px 26px; }
}

/* ---------- Weekly feature: full-bleed banner whose content is swapped
   each week. Accepts either an <img> or a <video> as the backdrop —
   both are absolutely positioned and cover the same box, so swapping
   one for the other needs no CSS change. ---------- */
.weekly-banner{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:flex-end; color:var(--cream);
  padding-left:var(--bleed-pad); padding-right:var(--bleed-pad);
  box-shadow:0 -1px 0 rgba(201,162,75,0.3), 0 1px 0 rgba(201,162,75,0.3);
}
.weekly-banner img, .weekly-banner video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.weekly-banner::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--scrim-copy), var(--scrim-corner);
}
.weekly-banner-inner{ position:relative; z-index:2; padding:0 0 var(--section-y); }
.weekly-banner-inner p{ text-wrap:pretty; }
.weekly-tag{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
  padding:8px 18px; border:1px solid var(--gold-soft); color:var(--gold-soft);
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase;
}
.weekly-tag .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }
.weekly-banner-inner h2{
  font-size:clamp(2.8rem,6.6vw,5.4rem); font-weight:300; color:var(--cream);
  line-height:0.98; letter-spacing:-0.02em; text-wrap:balance;
  text-shadow:0 1px 3px rgba(20,24,15,0.5), 0 2px 24px rgba(20,24,15,0.45);
}
.weekly-banner-inner h2.one-line-title{ white-space:nowrap; font-size:clamp(2.4rem,6vw,5rem); }
.weekly-banner-inner p{
  margin-top:18px; color:var(--cream); opacity:0.94; font-size:var(--fs-body); max-width:46ch;
}
.weekly-banner-inner .btn{ margin-top:28px; }

/* One guest's words, set quietly on cream: stars, the quote, who said it,
   and the way to read the rest. */
.guest-word{ background:var(--cream); color:var(--ink); text-align:center; }
.guest-word-inner{ margin:0 auto; max-width:680px; }
.guest-word .stars{ display:block; color:var(--gold-deep); letter-spacing:0.22em; font-size:0.95rem; }
.guest-quote{ margin:20px 0 0; }
.guest-quote p{
  margin:0; color:var(--ink);
  font-family:var(--font-display); font-weight:300; font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.2rem); line-height:1.3; text-wrap:balance;
}
.guest-attrib{
  margin-top:20px; color:var(--ink-soft);
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase;
}
.guest-word .contact-link{ display:inline-block; margin-top:14px; }

/* ============================================================
   Home page intro
   ------------------------------------------------------------
   SAFETY: the overlay is display:none by default and only becomes
   visible when assets/intro-init.js adds .intro-play to <html>. If
   scripting is off or that file fails to load, the overlay never
   appears at all. Its exit is a CSS animation with fill-mode:forwards,
   so it removes itself without needing any JS to finish the job — no
   failure here can leave the site covered.

   The layout deliberately mirrors the hero exactly: same padding, same
   max-width, and the eyebrow / lede / CTA blocks are present but
   invisible so they still occupy their space. That puts the wordmark
   at precisely the hero's wordmark position, so the closing dissolve
   has no movement in it — the intro appears to *become* the page.

   Composition is type-led: brand green ground, a pomegranate bloom for
   depth, and two gold hairlines bracketing the wordmark. No logo mark.
   ============================================================ */
.site-intro{ display:none; }
.intro-play .site-intro{
  display:flex; position:fixed; inset:0; z-index:200; overflow:hidden;
  flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:140px 20px 100px; color:var(--cream);
  /* SAFETY NET, and the reason this is a CSS animation rather than a JS
     timeout: it fires after the flight has landed and hides the overlay
     whatever else did or did not run. The flight below is an enhancement
     layered on top; if script.js never executes, this still clears. */
  animation:introOut 0.6s cubic-bezier(.4,0,.2,1) 3.5s forwards;
}
/* Short viewports — a tablet with the tab strip and URL bar showing. The
   copy block would otherwise outgrow the hero's min-height, making the hero
   taller than the fixed overlay and pulling the two wordmarks apart again.
   Both boxes take the same padding, so they stay in lockstep. */
@media (max-height:760px){
  .hero, .intro-play .site-intro{ padding-top:96px; padding-bottom:64px; }
}

body.intro-lock{ overflow:hidden; }
@keyframes introOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* Backdrop on its own layer, fading on its own timer once .go lands. */
.splash-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(78% 56% at 50% 40%, rgba(201,162,75,0.14), transparent 62%),
    radial-gradient(90% 60% at 20% 10%, rgba(140,29,59,0.24), transparent 62%),
    linear-gradient(168deg, #232b1c 0%, #1e2418 58%, #10140c 100%);
  opacity:1;
  transition:opacity .72s cubic-bezier(.4,0,.25,1) .12s;
}
.site-intro.go .splash-bg{ opacity:0; }

/* The mark. Positioned with left/top rather than a centring transform, so
   the inline flight transform set by JS has the property to itself. */
.splash-mark{
  --mk:clamp(104px, 22vw, 190px);
  --mk:clamp(92px, min(22vw, 17svh), 190px);
  position:absolute; z-index:1;
  width:var(--mk); height:var(--mk);
  left:calc(50% - var(--mk) / 2);
  top:clamp(48px, 11vh, 132px);
  top:clamp(34px, 8svh, 118px);
  transform-origin:50% 50%;
  transition:transform 1.10s cubic-bezier(.38,.2,.15,1);
}
.mk-rise{
  width:100%; height:100%; transform-origin:50% 50%;
  /* `backwards`, with the resting state in the base rule: a `forwards` fill
     would pin opacity above the cascade and nothing could hide it later. */
  animation:markRise 1.1s cubic-bezier(.2,.85,.3,1) .02s backwards;
}
@keyframes markRise{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }
.splash-mark .mk{ width:100%; height:100%; display:block; }

/* Draw-in. Every shape carries pathLength="1", so one rule covers polygons
   of wildly different perimeters and the stagger is the only variable. */
.site-intro .mk .rz-spin > g > *{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:introDraw var(--dur, 1s) cubic-bezier(.36,.02,.16,1) var(--del, 0s) forwards;
}
@keyframes introDraw{ to{ stroke-dashoffset:0; } }
/* Outside in: frame, then the petal ring one at a time, then the core. */
.site-intro .mk .rz-frm{ --del:.10s; --dur:.95s; }
.site-intro .mk .rz-pet{ --del:calc(.46s + var(--i) * .038s); --dur:.80s; }
.site-intro .mk .rz-cor{ --del:1.34s; --dur:.56s; }
.rz-spin{ transform-origin:50% 50%; animation:markSpin 96s linear infinite; }
@keyframes markSpin{ to{ transform:rotate(360deg); } }

/* Two densities cut from the same geometry. The full mark carries the
   splash; the reduced one is what the header shows at 30px, where the petal
   ring closes into a smudge. They cross-fade during the flight. */
.site-intro .mk .rz-lg, .site-intro .mk .rz-sm{ transition:opacity .42s ease .12s; }
.site-intro .mk .rz-sm{ opacity:0; }
.site-intro.to-sm.go .mk .rz-lg{ opacity:0; }
.site-intro.to-sm.go .mk .rz-sm{ opacity:1; }

/* Two soft blooms drifting outward — the only non-type elements.
   Pure gradients, no blur filter, so they stay cheap to composite. */
.intro-veil{
  position:absolute; left:50%; top:44%; z-index:0; pointer-events:none;
  border-radius:50%; opacity:0;
  transform:translate(-50%,-50%) scale(0.72);
}
.intro-veil-a{
  width:min(760px,104vw); height:min(760px,104vw);
  background:radial-gradient(circle, rgba(140,29,59,0.42) 0%, rgba(140,29,59,0.12) 42%, transparent 68%);
  animation:introVeil 3.1s cubic-bezier(.22,.61,.36,1) forwards;
}
.intro-veil-b{
  width:min(420px,64vw); height:min(420px,64vw);
  background:radial-gradient(circle, rgba(201,162,75,0.26) 0%, rgba(201,162,75,0.07) 45%, transparent 70%);
  animation:introVeil 3.1s cubic-bezier(.22,.61,.36,1) 0.18s forwards;
}
@keyframes introVeil{
  0%  { opacity:0;    transform:translate(-50%,-50%) scale(0.72); }
  38% { opacity:1;    transform:translate(-50%,-50%) scale(1.00); }
  100%{ opacity:0.55; transform:translate(-50%,-50%) scale(1.16); }
}

.intro-ghost{ opacity:0 !important; pointer-events:none; }

/* Hairlines bracketing the wordmark. Anchored to the lockup itself
   rather than to fixed offsets, so they track the type at any size.
   They're pseudo-elements, so they add no layout of their own. */
.site-intro .brand-lockup{ position:relative; }
.site-intro .brand-lockup::before,
.site-intro .brand-lockup::after{
  content:""; position:absolute; left:50%;
  width:min(240px,52vw); height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--gold-soft) 50%, transparent 100%);
  transform:translateX(-50%) scaleX(0);
  animation:introRule 1.35s cubic-bezier(.16,.84,.44,1) forwards;
}
.site-intro .brand-lockup::before{ top:-44px; animation-delay:0.15s; }
.site-intro .brand-lockup::after{ bottom:-48px; animation-delay:1.30s; }
@keyframes introRule{ to{ transform:translateX(-50%) scaleX(1); } }
@media (max-width:640px){
  .site-intro .brand-lockup::before{ top:-30px; }
  .site-intro .brand-lockup::after{ bottom:-32px; }
}

/* Wordmark: wipes up behind a mask while the letter-spacing settles.
   The clip-path does the heavy lifting so the reveal reads as a
   deliberate draw rather than a fade. Overrides the hero's own
   entrance animation on this element. */
.site-intro .brand-lockup .wordmark{
  animation:introWord 1.5s cubic-bezier(.16,.84,.44,1) 0.40s both;
}
@keyframes introWord{
  0%  { opacity:0; letter-spacing:0.34em; clip-path:inset(0 0 108% 0); transform:translateY(14px); }
  55% { opacity:1; }
  100%{ opacity:1; letter-spacing:-0.02em; clip-path:inset(0 0 -10% 0);  transform:translateY(0); }
}

/* Descriptor words rise one after another */
.site-intro .brand-lockup-sub span{
  display:inline-block; opacity:0; transform:translateY(16px);
  animation:introSubWord 0.75s cubic-bezier(.16,.84,.44,1) forwards;
}
.site-intro .brand-lockup-sub span:nth-child(1){ animation-delay:1.42s; }
.site-intro .brand-lockup-sub span:nth-child(2){ animation-delay:1.50s; }
.site-intro .brand-lockup-sub span:nth-child(3){ animation-delay:1.58s; }
.site-intro .brand-lockup-sub span:nth-child(4){ animation-delay:1.66s; }
.site-intro .brand-lockup-sub span:nth-child(5){ animation-delay:1.74s; }
@keyframes introSubWord{ to{ opacity:1; transform:translateY(0); } }

/* Belt and braces: anyone who prefers reduced motion never sees it. */
@media (prefers-reduced-motion: reduce){
  .intro-play .site-intro{ display:none; }
  .site-intro .mk .rz-spin > g > *{ stroke-dashoffset:0; animation:none; }
  .mk-rise{ opacity:1; transform:none; animation:none; }
}

/* ---------- Tappable phone / email ---------- */
/* These sit on the dark footer and on light contact sections, so colour is
   inherited rather than declared (rule 5 applies to the block that owns the
   ground; this link deliberately takes whatever its parent set). The underline
   is what signals "tappable" — a bare tel: link that looks like plain text
   reads as unclickable, which defeats the point of adding it. */
.contact-link{
  display:inline-block; padding-block:4px;
  color:inherit; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
  transition:text-decoration-color 0.2s ease;
}
.contact-link:hover,
.contact-link:focus-visible{ text-decoration-color:currentColor; }

/* The review icons sit in the existing .footer-social-row, so they inherit its
   38px gold-hairline circles. This label separates "leave a review" from
   "follow us" — the two sit together but ask for different things. */
.foot-h-review{ margin-top:30px; margin-bottom:-14px; }
/* While the sign-up above it is hidden, the review heading leads the block. */
.footer-signup[hidden] + .foot-h-review{ margin-top:0; }

/* Deliberately quieter than the rest of the bottom bar: a credit, not a claim. */
.footer-credit{ color:rgba(239,231,217,0.55); letter-spacing:0.08em; }

/* ---------- Explore row: three cards, side by side ----------
   Three items do not need a carousel — there is nothing to scroll to — so
   this is a plain grid. It keeps the inset-frame hover used by the mosaic:
   the frame holds its size and only the photograph scales, settling into a
   mount a darker step of the section ground. */
.explore-head{ text-align:center; margin-bottom:2.6rem; }
.explore-head h2{ font-size:clamp(2rem,4vw,2.8rem); }
.explore-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1rem, 2.4vw, 2rem); }
.explore-card{ display:flex; flex-direction:column; }
.explore-frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--mount-light); display:block;
}
.explore-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  clip-path:inset(0); transition:clip-path 0.7s cubic-bezier(.22,.61,.36,1);
}
.explore-card:hover .explore-frame img,
.explore-card:focus-within .explore-frame img{ clip-path:inset(var(--frame-inset)); }
.explore-body{ display:flex; flex-direction:column; flex:1 1 auto; padding-top:20px; }
.explore-body h3{ font-size:1.35rem; color:var(--ink); }
.explore-body p{
  margin-top:10px; font-style:italic; color:var(--ink-soft);
  font-size:var(--fs-body-sm); line-height:1.55;
}
/* margin-top:auto pins every link to the bottom of its card, so they line up
   across the row even though the descriptions run to different lengths. */
.explore-link{
  margin-top:auto; padding-top:18px; align-self:flex-start;
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--pomegranate); text-decoration:underline;
  text-underline-offset:5px; text-decoration-thickness:1px;
  text-decoration-color:rgba(140,29,59,0.4); transition:text-decoration-color .3s ease;
}
.explore-card:hover .explore-link,
.explore-link:focus-visible{ text-decoration-color:currentColor; }
@media (max-width:820px){
  .explore-grid{ grid-template-columns:1fr; gap:36px; max-width:420px; margin:0 auto; }
}

.tile-head{ margin-bottom:2.2rem; }
.tile-head h2{ font-size:clamp(1.5rem,2.8vw,2rem); color:var(--ink); }
.tile-head h2 .accent{
  font-style:italic; font-weight:400;
  font-size:0.92em; color:var(--ink-soft);
}
.tile-row{
  display:grid; grid-template-columns:repeat(var(--cols,4), minmax(0,1fr));
  gap:clamp(0.7rem, 1.4vw, 1.15rem);
}
.tile{ display:flex; flex-direction:column; }
.tile-frame{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:var(--mount-light); display:block;
}
.tile-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  clip-path:inset(0); transition:clip-path 0.7s cubic-bezier(.22,.61,.36,1);
}
.tile:hover .tile-frame img,
.tile:focus-within .tile-frame img{ clip-path:inset(var(--frame-inset)); }
.tile-body{ padding-top:16px; display:flex; flex-direction:column; flex:1 1 auto; }
.tile-body h3{ font-size:1.25rem; color:var(--ink); line-height:1.25; }
.tile-body p{
  margin-top:7px; font-family:var(--font-body); font-style:italic;
  color:var(--ink-soft); font-size:var(--fs-small); line-height:1.5;
}
/* Dark grounds: the component sets its own colours rather than inheriting. */

@media (max-width:860px){
  .tile-row{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
}
@media (max-width:520px){
  .tile-row{ grid-template-columns:1fr; gap:28px; max-width:340px; margin:0 auto; }
}
/* House wines (Wine): three across down to tablet width. On phones, one
   row that swipes sideways, a card and a bit showing, instead of three
   portrait photographs stacked to two screens tall. */
.tile-row--house{ max-width:1000px; margin-left:auto; margin-right:auto; }
.tile-row--house .tile-body{ text-align:center; }
@media (max-width:860px){ .tile-row--house{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } }
@media (max-width:520px){
  .tile-row--house{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:74%;
    max-width:none; margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter);
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tile-row--house::-webkit-scrollbar{ display:none; }
  .tile-row--house .tile{ scroll-snap-align:start; }
}
@media (max-width:520px){
  .tile-row--pair{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 14px; max-width:none; }
  .tile-row--pair .tile-body{ padding-top:12px; }
  .tile-row--pair .tile-body h3{ font-size:1.125rem; }
  .tile-row--pair .tile-body p{ font-size:0.82rem; }
}

:root{
  --mark-mask:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'><path d='M 50 3 L 61.4 7.4 L 73.5 9.3 L 81.2 18.8 L 90.7 26.5 L 92.6 38.6 L 97 50 L 92.6 61.4 L 90.7 73.5 L 81.2 81.2 L 73.5 90.7 L 61.4 92.6 L 50 97 L 38.6 92.6 L 26.5 90.7 L 18.8 81.2 L 9.3 73.5 L 7.4 61.4 L 3 50 L 7.4 38.6 L 9.3 26.5 L 18.8 18.8 L 26.5 9.3 L 38.6 7.4 Z'/><path d='M 40.4 47.4 L 38 46.8 L 30.6 50 L 32.5 51.1 L 36.8 52.3 L 38 53.2 L 30.6 50 L 28.6 48.9 L 22.6 47.1 L 21.5 43.6 L 20 43.9 M 52.6 59.6 L 53.2 62 L 52.3 63.2 L 51.1 67.5 L 50 69.4 L 53.2 62 L 59.7 66.8 L 61.7 67.9 L 66.3 72.3 L 69.8 71.4 L 70.3 72.9 M 59.6 47.4 L 62 46.8 L 62.6 45.4 L 65.7 42.2 L 66.8 40.3 L 62 46.8 L 63.2 47.7 L 67.5 48.9 L 69.4 50 L 62 46.8 M 56.1 20 L 56.4 21.5 L 52.9 22.6 L 51.1 28.6 L 50 30.6 L 46.8 38 L 40.3 33.2 L 38.3 32.1 L 33.7 27.7 L 30.2 28.6 L 29.7 27.1 M 40.4 52.6 L 38 53.2 L 33.2 59.7 L 35.4 59.7 L 39.7 58.6 L 41.2 58.8 L 40.3 66.8 L 40.3 69.1 L 38.8 75.2 L 41.3 77.9 L 40.3 79 M 52.6 40.4 L 53.2 38 L 50 30.6 L 48.9 32.5 L 47.7 36.8 L 46.8 38 L 47.4 40.4 M 59.7 79 L 58.7 77.9 L 61.2 75.2 L 59.7 69.1 L 59.7 66.8 L 59.7 64.6 L 58.6 60.3 L 58.8 58.8 L 59.7 66.8 L 57.8 65.7 L 54.6 62.6 L 53.2 62 M 21 40.3 L 22.1 41.3 L 24.8 38.8 L 30.9 40.3 L 33.2 40.3 L 38 46.8 L 37.4 45.4 L 34.3 42.2 L 33.2 40.3 L 41.2 41.2 L 40.3 33.2 L 40.3 30.9 L 38.8 24.8 L 41.3 22.1 L 40.3 21 M 59.6 52.6 L 62 53.2 L 62.6 54.6 L 65.7 57.8 L 66.8 59.7 L 58.8 58.8 L 57 57 M 72.9 29.7 L 71.4 30.2 L 72.3 33.7 L 67.9 38.3 L 66.8 40.3 L 69.1 40.3 L 75.2 38.8 L 77.9 41.3 L 79 40.3 M 27.1 70.3 L 28.6 69.8 L 27.7 66.3 L 32.1 61.7 L 33.2 59.7 L 41.2 58.8 L 43 57 M 43.9 20 L 43.6 21.5 L 47.1 22.6 L 48.9 28.6 L 50 30.6 L 51.1 32.5 L 52.3 36.8 L 53.2 38 L 54.6 37.4 L 57.8 34.3 L 59.7 33.2 L 53.2 38 M 47.4 59.6 L 46.8 62 L 40.3 66.8 L 40.3 64.6 L 41.4 60.3 L 41.2 58.8 M 43 43 L 41.2 41.2 L 41.4 39.7 L 40.3 35.4 L 40.3 33.2 L 42.2 34.3 L 45.4 37.4 L 46.8 38 M 20 56.1 L 21.5 56.4 L 22.6 52.9 L 28.6 51.1 L 30.6 50 L 32.5 48.9 L 36.8 47.7 L 38 46.8 M 27.1 29.7 L 28.6 30.2 L 27.7 33.7 L 32.1 38.3 L 33.2 40.3 L 35.4 40.3 L 39.7 41.4 L 41.2 41.2 M 70.3 27.1 L 69.8 28.6 L 66.3 27.7 L 61.7 32.1 L 59.7 33.2 L 58.8 41.2 L 66.8 40.3 L 64.6 40.3 L 60.3 41.4 L 58.8 41.2 L 57 43 M 21 59.7 L 22.1 58.7 L 24.8 61.2 L 30.9 59.7 L 33.2 59.7 L 34.3 57.8 L 37.4 54.6 L 38 53.2 M 80 43.9 L 78.5 43.6 L 77.4 47.1 L 71.4 48.9 L 69.4 50 L 67.5 51.1 L 63.2 52.3 L 62 53.2 L 66.8 59.7 L 69.1 59.7 L 75.2 61.2 L 77.9 58.7 L 79 59.7 M 56.1 80 L 56.4 78.5 L 52.9 77.4 L 51.1 71.4 L 50 69.4 L 46.8 62 L 45.4 62.6 L 42.2 65.7 L 40.3 66.8 L 38.3 67.9 L 33.7 72.3 L 30.2 71.4 L 29.7 72.9 M 72.9 70.3 L 71.4 69.8 L 72.3 66.3 L 67.9 61.7 L 66.8 59.7 L 64.6 59.7 L 60.3 58.6 L 58.8 58.8 M 59.7 21 L 58.7 22.1 L 61.2 24.8 L 59.7 30.9 L 59.7 33.2 L 59.7 35.4 L 58.6 39.7 L 58.8 41.2 M 43.9 80 L 43.6 78.5 L 47.1 77.4 L 48.9 71.4 L 50 69.4 L 48.9 67.5 L 47.7 63.2 L 46.8 62 M 80 56.1 L 78.5 56.4 L 77.4 52.9 L 71.4 51.1 L 69.4 50 L 62 53.2'/><path d='M 40.4 47.4 L 42.3 50 L 40.4 52.6 L 43.3 53.8 L 43 57 L 46.2 56.7 L 47.4 59.6 L 50 57.7 L 52.6 59.6 L 53.8 56.7 L 57 57 L 56.7 53.8 L 59.6 52.6 L 57.7 50 L 59.6 47.4 L 56.7 46.2 L 57 43 L 53.8 43.3 L 52.6 40.4 L 50 42.3 L 47.4 40.4 L 46.2 43.3 L 43 43 L 43.3 46.2 Z'/></g></svg>");
  --mark-mask-sm:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='black' stroke-width='3.4' stroke-linejoin='round'><path d='M 50 3 L 61.4 7.4 L 73.5 9.3 L 81.2 18.8 L 90.7 26.5 L 92.6 38.6 L 97 50 L 92.6 61.4 L 90.7 73.5 L 81.2 81.2 L 73.5 90.7 L 61.4 92.6 L 50 97 L 38.6 92.6 L 26.5 90.7 L 18.8 81.2 L 9.3 73.5 L 7.4 61.4 L 3 50 L 7.4 38.6 L 9.3 26.5 L 18.8 18.8 L 26.5 9.3 L 38.6 7.4 Z'/><path d='M 40.4 47.4 L 38 46.8 L 30.6 50 L 32.5 51.1 L 36.8 52.3 L 38 53.2 L 30.6 50 L 28.6 48.9 L 22.6 47.1 L 21.5 43.6 L 20 43.9 M 52.6 59.6 L 53.2 62 L 52.3 63.2 L 51.1 67.5 L 50 69.4 L 53.2 62 L 59.7 66.8 L 61.7 67.9 L 66.3 72.3 L 69.8 71.4 L 70.3 72.9 M 59.6 47.4 L 62 46.8 L 62.6 45.4 L 65.7 42.2 L 66.8 40.3 L 62 46.8 L 63.2 47.7 L 67.5 48.9 L 69.4 50 L 62 46.8 M 56.1 20 L 56.4 21.5 L 52.9 22.6 L 51.1 28.6 L 50 30.6 L 46.8 38 L 40.3 33.2 L 38.3 32.1 L 33.7 27.7 L 30.2 28.6 L 29.7 27.1 M 40.4 52.6 L 38 53.2 L 33.2 59.7 L 35.4 59.7 L 39.7 58.6 L 41.2 58.8 L 40.3 66.8 L 40.3 69.1 L 38.8 75.2 L 41.3 77.9 L 40.3 79 M 52.6 40.4 L 53.2 38 L 50 30.6 L 48.9 32.5 L 47.7 36.8 L 46.8 38 L 47.4 40.4 M 59.7 79 L 58.7 77.9 L 61.2 75.2 L 59.7 69.1 L 59.7 66.8 L 59.7 64.6 L 58.6 60.3 L 58.8 58.8 L 59.7 66.8 L 57.8 65.7 L 54.6 62.6 L 53.2 62 M 21 40.3 L 22.1 41.3 L 24.8 38.8 L 30.9 40.3 L 33.2 40.3 L 38 46.8 L 37.4 45.4 L 34.3 42.2 L 33.2 40.3 L 41.2 41.2 L 40.3 33.2 L 40.3 30.9 L 38.8 24.8 L 41.3 22.1 L 40.3 21 M 59.6 52.6 L 62 53.2 L 62.6 54.6 L 65.7 57.8 L 66.8 59.7 L 58.8 58.8 L 57 57 M 72.9 29.7 L 71.4 30.2 L 72.3 33.7 L 67.9 38.3 L 66.8 40.3 L 69.1 40.3 L 75.2 38.8 L 77.9 41.3 L 79 40.3 M 27.1 70.3 L 28.6 69.8 L 27.7 66.3 L 32.1 61.7 L 33.2 59.7 L 41.2 58.8 L 43 57 M 43.9 20 L 43.6 21.5 L 47.1 22.6 L 48.9 28.6 L 50 30.6 L 51.1 32.5 L 52.3 36.8 L 53.2 38 L 54.6 37.4 L 57.8 34.3 L 59.7 33.2 L 53.2 38 M 47.4 59.6 L 46.8 62 L 40.3 66.8 L 40.3 64.6 L 41.4 60.3 L 41.2 58.8 M 43 43 L 41.2 41.2 L 41.4 39.7 L 40.3 35.4 L 40.3 33.2 L 42.2 34.3 L 45.4 37.4 L 46.8 38 M 20 56.1 L 21.5 56.4 L 22.6 52.9 L 28.6 51.1 L 30.6 50 L 32.5 48.9 L 36.8 47.7 L 38 46.8 M 27.1 29.7 L 28.6 30.2 L 27.7 33.7 L 32.1 38.3 L 33.2 40.3 L 35.4 40.3 L 39.7 41.4 L 41.2 41.2 M 70.3 27.1 L 69.8 28.6 L 66.3 27.7 L 61.7 32.1 L 59.7 33.2 L 58.8 41.2 L 66.8 40.3 L 64.6 40.3 L 60.3 41.4 L 58.8 41.2 L 57 43 M 21 59.7 L 22.1 58.7 L 24.8 61.2 L 30.9 59.7 L 33.2 59.7 L 34.3 57.8 L 37.4 54.6 L 38 53.2 M 80 43.9 L 78.5 43.6 L 77.4 47.1 L 71.4 48.9 L 69.4 50 L 67.5 51.1 L 63.2 52.3 L 62 53.2 L 66.8 59.7 L 69.1 59.7 L 75.2 61.2 L 77.9 58.7 L 79 59.7 M 56.1 80 L 56.4 78.5 L 52.9 77.4 L 51.1 71.4 L 50 69.4 L 46.8 62 L 45.4 62.6 L 42.2 65.7 L 40.3 66.8 L 38.3 67.9 L 33.7 72.3 L 30.2 71.4 L 29.7 72.9 M 72.9 70.3 L 71.4 69.8 L 72.3 66.3 L 67.9 61.7 L 66.8 59.7 L 64.6 59.7 L 60.3 58.6 L 58.8 58.8 M 59.7 21 L 58.7 22.1 L 61.2 24.8 L 59.7 30.9 L 59.7 33.2 L 59.7 35.4 L 58.6 39.7 L 58.8 41.2 M 43.9 80 L 43.6 78.5 L 47.1 77.4 L 48.9 71.4 L 50 69.4 L 48.9 67.5 L 47.7 63.2 L 46.8 62 M 80 56.1 L 78.5 56.4 L 77.4 52.9 L 71.4 51.1 L 69.4 50 L 62 53.2'/><path d='M 40.4 47.4 L 42.3 50 L 40.4 52.6 L 43.3 53.8 L 43 57 L 46.2 56.7 L 47.4 59.6 L 50 57.7 L 52.6 59.6 L 53.8 56.7 L 57 57 L 56.7 53.8 L 59.6 52.6 L 57.7 50 L 59.6 47.4 L 56.7 46.2 L 57 43 L 53.8 43.3 L 52.6 40.4 L 50 42.3 L 47.4 40.4 L 46.2 43.3 L 43 43 L 43.3 46.2 Z'/></g></svg>");
}
.tile-frame--mark{
  display:flex; align-items:center; justify-content:center;
  background:var(--cream-2); box-shadow:inset 0 0 0 1px rgba(142,117,61,0.28);
}
.tile-frame--mark::before{
  content:""; width:34%; aspect-ratio:1; background:var(--gold-deep);
  -webkit-mask:var(--mark-mask) center / contain no-repeat;
          mask:var(--mark-mask) center / contain no-repeat;
}
body.theme-dark .tile-frame--mark{ background:var(--mount-night); box-shadow:inset 0 0 0 1px rgba(217,189,124,0.18); }
body.theme-dark .tile-frame--mark::before{ background:var(--gold); }
.tile-row--text .tile{ border-top:1px solid rgba(142,117,61,0.45); padding-top:18px; }
.tile-row--text .tile::before{
  content:""; display:block; width:28px; height:28px; margin-bottom:6px;
  background:var(--gold-deep);
  -webkit-mask:var(--mark-mask-sm) center / contain no-repeat;
          mask:var(--mark-mask-sm) center / contain no-repeat;
}
.tile-row--after{ margin-top:clamp(2.2rem,4vw,3.2rem); }
.tile-row--text .tile-body{ padding-top:8px; }
@media (max-width:520px){ .tile-row--text{ gap:22px; } }

.full-menu{ background:var(--cream); color:var(--ink); }
.fm-intro{ max-width:620px; margin:14px auto 0; color:var(--ink-soft); }
/* The tab bar: the Wine page's sticky jump-nav, full width inside the
   section, so it stops sticking once the menu has scrolled past. Eight
   tabs do not fit a phone, so there it is one row that scrolls sideways
   (script.js keeps the active tab in view) instead of wrapping to four. */
.menu-tabs{ margin:clamp(28px,4vw,40px) 0 clamp(36px,5vw,52px); padding:0; }
.menu-tabs .wrap{
  flex-wrap:nowrap; justify-content:flex-start; gap:28px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.menu-tabs .wrap::-webkit-scrollbar{ display:none; }
.menu-tabs a{
  display:inline-flex; align-items:center; min-height:52px; flex:none;
  padding-bottom:0; border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.menu-tabs a.active{ color:var(--pomegranate); font-weight:600; border-bottom-color:var(--pomegranate); }
/* One category at a time. Hidden only when JavaScript is running (.js),
   so with it off every category shows and the tabs are plain jump links.
   The open category flows into two columns on wide screens. */
.js .fm-group:not(.active){ display:none; }
.fm-group{ scroll-margin-top:140px; }
@media (min-width:861px){
  .fm-group{ columns:2; column-gap:clamp(40px,6vw,88px); }
  .fm-group h3{ column-span:all; margin-bottom:20px; }
  .fm-sub h4, .fm-note{ break-after:avoid; }
  .fm-item{ break-inside:avoid; }
  /* A column that starts on a label loses that label's top margin, so the
     first label drops its margin too and both columns start level. */
  .fm-sub:first-of-type h4{ margin-top:0; }
}
.fm-group h3{
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,2.2vw,1.7rem);
  color:var(--ink); padding-bottom:12px; border-bottom:1px solid rgba(142,117,61,0.45);
}
.fm-sub h4{
  margin:22px 0 2px; font-family:var(--font-body); font-weight:600;
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--pomegranate);
}
.fm-note{ margin:6px 0 2px; font-size:var(--fs-small); font-style:italic; color:var(--ink-soft); }
.fm-list{ list-style:none; margin:0; padding:0; }
.fm-item{ padding:13px 0; border-bottom:1px dotted rgba(25,28,19,0.18); }
.fm-item:last-child{ border-bottom:none; }
.fm-line{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.fm-name{ font-size:var(--fs-lede); font-weight:500; color:var(--ink); }
.fm-price{
  flex:none; font-size:var(--fs-lede); color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.fm-desc{ margin:4px 0 0; max-width:48ch; font-size:var(--fs-small); line-height:1.5; color:var(--ink-soft); }
.fm-diet{
  display:inline-block; margin-left:8px; padding:1px 5px; vertical-align:2px;
  font-size:0.7rem; font-weight:500; letter-spacing:0.08em; line-height:1.3;
  color:var(--pomegranate); border:1px solid rgba(140,29,59,0.35);
  text-decoration:none; cursor:help;
}
.fm-legend{ margin-top:clamp(40px,5vw,56px); font-size:var(--fs-small); color:var(--ink-soft); }
.fm-legend .fm-diet{ margin:0 4px 0 0; }

/* Cocktail strip tiles get the same settle as everything else. */
.arrow-gallery:not(.wide-strip) .gallery-slide img{
  clip-path:inset(0); transition:clip-path 0.7s cubic-bezier(.22,.61,.36,1);
}
.arrow-gallery:not(.wide-strip) .gallery-slide{
  overflow:hidden; background:var(--mount-green);
}
.arrow-gallery:not(.wide-strip) .gallery-slide:hover img{ clip-path:inset(var(--frame-inset)); }

/* ---------- Screen feature: a full-viewport photograph carrying its own
   copy and CTA, with supporting detail parked along the bottom of the same
   image. Grid rather than flex so the copy centres in the space above and
   the detail row sits on the floor without the two fighting over margins. */

/* Sized to hold the title on one line at every width. */

/* ---------- Dark page theme ----------
   Applied on <body>, so a whole page can sit on the night palette while
   still using the same components. Each rule restates a colour rather than
   relying on inheritance, which is how the light/dark reuse stays safe. */
body.theme-dark{ background:var(--night); color:var(--cream); }
body.theme-dark .section-head h2,
body.theme-dark .tile-head h2,
body.theme-dark h2,
body.theme-dark h3{ color:var(--cream); }
body.theme-dark .tile-head h2 .accent{ color:var(--gold-soft); }
body.theme-dark .ornament-label .eyebrow{ color:var(--gold-soft); }
body.theme-dark .ornament-mark{ color:var(--gold); }
body.theme-dark .tile-frame{ background:var(--mount-night); }
body.theme-dark .tile-body h3{ color:var(--cream); }
body.theme-dark .tile-body p{ color:rgba(239,231,217,0.7); }
body.theme-dark p{ color:rgba(239,231,217,0.82); }
body.theme-dark .btn-dark{ background:var(--gold-soft); border-color:var(--gold-soft); color:var(--night); }
body.theme-dark .btn-dark:hover{ background:transparent; color:var(--gold-soft); }

/* ---------- Showcase: one large image at a time, with a thumbnail rail ----------
   Copy and thumbnails on the left, the stage on the right. Slides and captions
   are stacked in a single grid cell so the container is as tall as the tallest
   of them and nothing shifts as they cross-fade. The first slide is visible in
   CSS, so a JS failure leaves a normal image and caption rather than a blank. */
.showcase{
  display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:clamp(28px, 5vw, 72px); align-items:center;
}
@media (max-width:900px){ .showcase{ grid-template-columns:1fr; gap:32px; } }
.showcase-copy{ display:flex; flex-direction:column; }
.showcase-captions{ display:grid; }
.js .showcase-caption{ opacity:0; visibility:hidden; }
.showcase-caption{
  grid-area:1/1;
  transition:opacity .7s ease, visibility .7s;
}
.showcase-caption.is-active{ opacity:1; visibility:visible; }
.showcase-caption .num{
  font-family:var(--font-body); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--gold-soft); display:block; margin-bottom:14px;
}
.showcase-caption h3{ font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.15; }
.showcase-caption p{ margin-top:14px; font-size:var(--fs-lede); max-width:420px; }
.showcase-thumbs{ display:flex; gap:14px; margin-top:38px; }
.showcase-thumb{
  position:relative; width:84px; padding:0; background:none; cursor:pointer;
  border:none; text-align:left; flex:none;
}
.showcase-thumb .num{
  display:block; font-family:var(--font-body); font-size:var(--fs-label);
  letter-spacing:var(--track-label); color:rgba(239,231,217,0.74); margin-bottom:7px;
  transition:color .3s ease;
}
.showcase-thumb img{
  width:84px; height:84px; object-fit:cover; display:block;
  opacity:0.45; transition:opacity .45s ease, outline-color .45s ease;
  outline:1px solid transparent; outline-offset:3px;
}
.showcase-thumb.is-active img,
.showcase-thumb:hover img,
.showcase-thumb:focus-visible img{ opacity:1; outline-color:var(--gold); }
.showcase-thumb.is-active .num,
.showcase-thumb:hover .num{ color:var(--gold-soft); }
.showcase-stage{ display:grid; aspect-ratio:4/5; position:relative; overflow:hidden; }
@media (max-width:900px){ .showcase-stage{ aspect-ratio:4/3; } }
.js .showcase-img{ opacity:0; }
.showcase-img{
  grid-area:1/1; width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity 1.1s ease;
}
.showcase-img.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .showcase-img, .showcase-caption{ transition:none; }
}

/* ---------- Story page: light-ground showcase ---------- */
/* The showcase was built on the night palette; these keep its small
   labels legible when the component sits on cream. */
.showcase-light .showcase-caption .num{ color:var(--pomegranate); }
.showcase-light .showcase-thumb .num{ color:rgba(25,28,19,0.7); }
.showcase-light .showcase-thumb.is-active .num,
.showcase-light .showcase-thumb:hover .num{ color:var(--pomegranate); }
.showcase-light .showcase-caption p{ color:var(--ink-soft); }

/* ---------- Sticky stack (Our Story only) ----------
   Two panels. The first pins (position:sticky, top:0); the second is a later
   sibling, so it simply paints over the first as it arrives — the pinned
   panel never moves, which is what separates this from parallax. Both panels
   carry opaque grounds so nothing shows through mid-cover. 100svh, not vh:
   on phones vh includes the browser chrome and the panels overflow. */
.stack{ position:relative; }
.stack__panel{
  position:sticky; top:0; min-height:100svh;
  display:flex; align-items:center; overflow:hidden;
}
/* The rounded lip and leading-edge shadow are what make the arrival read as
   a physical layer sliding over rather than a jump cut. */
.stack__panel + .stack__panel{
  border-radius:28px 28px 0 0;
  box-shadow:0 -40px 80px rgba(0,0,0,0.55);
}
.quote-solo{ position:relative; }
.stack__quote{
  justify-content:flex-start; align-items:flex-end; text-align:left;
  background:radial-gradient(90% 70% at 50% 36%, #2b331e 0%, #202717 55%, #161b0f 100%);
}
.stack__quote > img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(0.72) saturate(0.9);
}
.stack__quote::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--scrim-copy), var(--scrim-corner);
}
.stack__inner{
  position:relative; z-index:2; width:100%;
  padding:0 var(--bleed-pad) var(--section-y);
}
.stack__quote .eyebrow{ color:var(--gold-soft); display:block; margin-bottom:18px; }
.stack__line{
  font-size:clamp(3rem, 7.5vw, 6.2rem); font-weight:300; line-height:0.98;
  color:var(--cream); letter-spacing:-0.02em; text-wrap:balance;
  text-shadow:0 1px 3px rgba(20,24,15,0.5), 0 2px 24px rgba(20,24,15,0.45); margin:0;
}
.stack__sub{
  margin-top:18px; max-width:46ch; font-size:var(--fs-body);
  color:var(--cream); opacity:0.94;
}
@media (prefers-reduced-motion: reduce){
  .stack__panel{ position:relative; }
  .stack__panel + .stack__panel{ border-radius:0; box-shadow:none; }
}

/* ---------- Slats: the four elements as one composition ----------
   Full-height image columns inside the second stack panel. One slat is
   open at a time (flex-grow 3.2 vs 1); the rest collapse to a numeral and
   a vertical name over a dimmed photograph. Hover, focus or tap switches —
   the interaction JS lives behind [data-slats] in script.js, and without it
   the first slat simply stands open as a finished composition. */

/* Directional scrim from the corner the copy occupies, on the open slat only */

/* Phones: the slats turn into a vertical accordion — closed rows are a
   numeral and a horizontal name; the open one grows to carry its copy. */

/* ---------- Folio: the couple, deliberately unbalanced ----------
   Landscape photograph inside the content column. The names sit
   right-of-centre and low in oversized light serif, one name per line,
   full stops doing rhythm work; the copy card at bottom-left is the
   counterweight, overhanging the photo's bottom edge for depth. */
.folio{ position:relative; margin-bottom:64px; }
.folio > img{ width:100%; height:auto; aspect-ratio:16/8.6; object-fit:cover; display:block; }
.folio::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top left, rgba(20,24,15,0.62) 0%, rgba(20,24,15,0.18) 38%, transparent 62%);
}
.folio-name{
  position:absolute; left:56%; bottom:7%; z-index:2;
  font-size:clamp(2.4rem, 5.6vw, 4.8rem); font-weight:300; line-height:0.98;
  color:var(--cream); letter-spacing:-0.02em;
  text-shadow:0 2px 22px rgba(20,24,15,0.45);
}
.folio-card{
  position:absolute; left:clamp(16px, 4%, 48px); bottom:-44px; z-index:3;
  max-width:360px; padding:26px 28px 28px;
  background:var(--green-deep); color:var(--cream);
  box-shadow:0 24px 60px rgba(20,24,15,0.35);
}
.folio-card .eyebrow{ color:var(--gold-soft); display:block; margin-bottom:12px; }
.folio-card p{ margin:0; font-size:var(--fs-body-sm); color:rgba(239,231,217,0.88); }
/* Phones: the card drops below the photograph. The names and the shade are
   laid into the photo's own grid cell, so they sit on the photo's bottom
   edge. Positioned against the whole block, as they were, the names landed
   on the card's text instead. */
@media (max-width:760px){
  .folio{ margin-bottom:0; display:grid; }
  .folio > img{ aspect-ratio:4/3; }
  .folio > img, .folio::after, .folio-name{ grid-area:1 / 1; }
  .folio::after{ position:relative; inset:auto; }
  .folio-name{
    position:relative; left:auto; bottom:auto; align-self:end; justify-self:end;
    margin:0 16px 14px 0; font-size:clamp(2rem,9vw,2.8rem);
  }
  .folio-card{ grid-row:2; position:static; max-width:none; box-shadow:none; }
}

.vista{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:flex-end;
}
.vista > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.vista{ --vista-corner:var(--scrim-corner); }
.vista::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--scrim-copy), var(--vista-corner);
}
.vista-inner{
  position:relative; z-index:1;
  padding:var(--section-y) var(--bleed-pad);
}
/* On phones the fixed reserve bar overlays the last ~56px of the
   viewport, so copy needs extra clearance to stay readable at the
   section's natural stop. */
@media (max-width:720px){
  .vista-inner, .weekly-banner-inner, .stack__inner{
    padding-bottom:calc(var(--section-y) + 56px);
  }
  /* Copy climbs much higher on a phone, so the corner scrim becomes a
     straight vertical one that keeps the whole column readable. */
  .vista::after, .weekly-banner::after, .stack__quote::after, .edit-feature-media::after{
    background:linear-gradient(to top, rgba(20,24,15,0.94) 0%, rgba(20,24,15,0.89) 42%, rgba(20,24,15,0.73) 68%, rgba(20,24,15,0.34) 88%, rgba(20,24,15,0.14) 100%);
  }
}
.vista .eyebrow{ color:var(--gold-soft); display:block; margin-bottom:18px; }
.vista h2{
  font-size:clamp(3rem, 7.5vw, 6.2rem); font-weight:300; line-height:0.98;
  color:var(--cream); letter-spacing:-0.02em; text-wrap:balance;
  text-shadow:0 1px 3px rgba(20,24,15,0.5), 0 2px 24px rgba(20,24,15,0.45);
}
/* One-word headlines (the year) go a size up */
.vista-xl h2{ font-size:clamp(4rem, 11vw, 8.5rem); line-height:0.95; }
.vista p{
  margin-top:18px; max-width:46ch; font-size:var(--fs-body);
  color:var(--cream); opacity:0.94;
}
.vista p + p{ margin-top:14px; }
.vista .btn{ margin-top:28px; }
/* Copy in the right half instead of the left. The blocks move; the text
   inside them stays left-aligned, and the corner scrim mirrors so the
   dark corner is still the one the copy sits in. */
.vista-right .vista-inner{
  /* the inner is a flex item of .vista, so without this it shrinks to its
     content and there is nothing to push the copy across */
  width:100%;
  display:flex; flex-direction:column; align-items:flex-end;
}
.vista-right .vista-inner > *{ max-width:46ch; }
.vista-right{ --vista-corner:var(--scrim-corner-left); }
@media (min-width:721px){
  .vista-lit::after{
    background:
      linear-gradient(90deg, rgba(20,24,15,0) 28%, rgba(20,24,15,0.5) 52%, rgba(20,24,15,0.8) 100%),
      linear-gradient(to top, rgba(20,24,15,0.5) 0%, rgba(20,24,15,0) 38%);
  }
}
/* Narrower desktops put the copy further left, over brighter wall. */
@media (min-width:721px) and (max-width:1200px){
  .vista-lit::after{
    background:
      linear-gradient(90deg, rgba(20,24,15,0) 14%, rgba(20,24,15,0.66) 40%, rgba(20,24,15,0.86) 100%),
      linear-gradient(to top, rgba(20,24,15,0.5) 0%, rgba(20,24,15,0) 38%);
  }
}

/* ---------- Editorial feature (Private Dining) ----------
   The vista language at a contained, quieter scale: the photograph
   keeps its banner size but shifts right inside the column, and the
   headline breaks its left edge — half on the page ground, half on
   the image. Copy and CTA sit on the photograph, over its scrim. */
.edit-feature{ position:relative; }
.edit-feature-media{ position:relative; width:88%; margin-left:auto; }
.edit-feature-media img{
  display:block; width:100%; height:auto; aspect-ratio:16/8.6; object-fit:cover;
}
.edit-feature-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--scrim-copy), var(--scrim-corner);
}
.edit-feature-copy{ position:absolute; left:0; bottom:clamp(28px,6vw,56px); width:100%; z-index:2; }
.edit-feature-copy .eyebrow{ color:var(--gold-soft); display:block; margin-bottom:16px; }
.edit-feature-copy h2{
  font-size:clamp(2.6rem,5.2vw,4.4rem); font-weight:300; line-height:0.98;
  color:var(--cream); letter-spacing:-0.02em; max-width:12ch;
  text-shadow:0 1px 3px rgba(20,24,15,0.5), 0 2px 24px rgba(20,24,15,0.45);
}
.edit-feature-copy p{
  margin-top:18px; margin-left:16%; max-width:38ch;
  font-size:var(--fs-body); color:var(--cream); opacity:0.94;
}
.edit-feature-copy .btn{ margin-top:26px; margin-left:16%; }
@media (max-width:1024px){
  /* The sideways overlap needs a wide column; below that the headline
     straddles the image's bottom edge instead and the copy rests on the
     page ground, which stays legible whatever the photograph does. */
  .edit-feature-media{ width:100%; }
  .edit-feature-copy{ position:relative; z-index:2; margin-top:-1.4rem; }   /* keeps painting above the image it straddles */
  .edit-feature-copy .eyebrow{ display:none; }
  .edit-feature-copy p, .edit-feature-copy .btn{ margin-left:0; }
}

/* ============================================================
   DINING — the first scroll after the hero. One photograph that opens
   from the width of the content column to the full width of the screen
   as it scrolls in, with the title and the two CTAs. The title is set
   like the bar section's: a small label, then two lines, the second in
   italic. On desktop it sits on the photograph, top left; on phones,
   above it.
   ============================================================ */
.ff{ padding:calc(var(--section-y) * 0.8) 0; text-align:center; }
.ff-head{ margin-bottom:clamp(20px, 3vw, 36px); text-align:left; }
.ff-head .eyebrow{ display:block; margin-bottom:12px; color:var(--pomegranate); }
.ff-head h2{
  max-width:16ch; font-size:clamp(2rem, 4.6vw, 3.6rem); font-weight:300;
  line-height:1.02; letter-spacing:-0.02em; color:var(--ink);
}
.ff-head h2 em{ display:block; }

/* The frame is always full width and full height; only its clip-path
   changes, so nothing around it moves while it opens (no layout shift).
   --p runs 0 to 1: at 0 the visible window is the content column at the
   photo's own proportions, at 1 it is the whole frame. The default is 1,
   so without script.js the photograph simply sits at full width. The
   variables live on .ff-stage so the overlaid CTAs can follow the
   window's bottom edge as it opens. */
.ff-stage{
  --p:1; --r:0.5625;
  --colw:calc(min(100vw, var(--maxw)) - 2 * var(--gutter));
  --ffh:min(calc(100vw * var(--r)), 92svh, 960px);
  --iy:max(0px, calc((var(--ffh) - var(--colw) * var(--r)) / 2));
  position:relative;
}
.ff-frame{
  position:relative; overflow:hidden; height:var(--ffh);
  background:var(--olive-950);
  clip-path:inset(calc(var(--iy) * (1 - var(--p))) calc(var(--bleed-pad) * (1 - var(--p))));
}
.ff-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(calc(1.06 - 0.06 * var(--p)));
}
@media (max-width:860px){ .ff-stage{ --r:0.75; } }

/* inline-grid shrinks to the widest button, and every track takes that
   width, so the two buttons always match: side by side on wider screens,
   stacked on phones. */
.ff-ctas{
  display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:14px; margin-top:clamp(28px, 4vw, 44px);
}
.ff-ctas .btn{ text-align:center; }
@media (max-width:520px){ .ff-ctas{ grid-auto-flow:row; } }

/* Desktop: the CTAs sit over the foot of the photograph, on a shade deep
   enough to carry the site's usual dark-ground hover (the fill empties,
   the label stays cream or gold). Over the photo this is a dark ground,
   so the .on-light hover the group needs on phones is undone here. */
/* Desktop: with the CTAs on the photograph, nothing sits below it, so the
   section drops its bottom padding and the fully opened photograph meets
   the dark section after it directly: no band of cream between them, and
   no highlight line along that section's top edge. The opening animation
   is unchanged; mid-scroll the cream shows only beside and below the
   still-closing window, as before. */
@media (min-width:861px){
  .ff{ padding-bottom:0; }
  .ff + .bar-section{ margin-top:-1px; }
  .ff + .bar-section::after{ box-shadow:none; }
}
@media (min-width:861px){
  .ff-cta-wrap{
    position:absolute; left:0; right:0; z-index:2;
    bottom:calc(var(--iy) * (1 - var(--p)) + clamp(28px, 4.5vh, 52px));
  }
  .ff-ctas{ margin-top:0; }
  .ff-frame::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(20,24,15,0.82) 0%, rgba(20,24,15,0.66) 16%, rgba(20,24,15,0.2) 32%, rgba(20,24,15,0) 46%);
  }
  .ff-stage .ff-ctas .btn-primary:hover{ color:var(--cream); border-color:var(--pomegranate); }
  .ff-stage .ff-ctas .btn-ghost:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }

  /* The title on the photograph: it rides the window's top edge the way
     the CTAs ride its bottom one, over a shade that keeps cream text
     readable whatever the photograph does up there. */
  .ff-head-wrap{
    position:absolute; left:0; right:0; z-index:2; pointer-events:none;
    top:calc(var(--iy) * (1 - var(--p)) + clamp(36px, 6vh, 72px));
  }
  .ff-head{ margin:0 0 0 3%; }
  .ff-head .eyebrow{ color:var(--gold-soft); }
  .ff-head h2{ color:var(--cream); text-shadow:0 2px 24px rgba(10,12,8,.6); }
  .ff-frame::before{
    content:""; position:absolute; inset:0 0 auto 0; height:45%; z-index:1; pointer-events:none;
    background:linear-gradient(to bottom, rgba(20,24,15,0.55), rgba(20,24,15,0));
  }
}

/* ============================================================
   THE ROOMS — one stage, four thumbnails, auto-advancing.
   Mounted from a <template> by script.js only when the flag is on,
   so nothing renders while it is off. The heading deliberately
   straddles the top edge of the stage: the band that crosses the
   photograph is a second, clipped copy carrying its own colour and
   shadow, so the shadow exists only where it is needed.
   ============================================================ */
.rooms{
  padding:calc(var(--section-y) * 0.9) 0; overflow:hidden;
  /* One number drives three things: the heading size, how far the stage
     rides up over it, and the band of the heading that gets the shadow.
     They have to agree or the overlap stops landing. */
  --rooms-title:clamp(2.2rem, 5.4vw, 4.2rem);
  --rooms-overlap:0.46;
}
.rooms-head{ position:relative; z-index:2; }
.rooms-head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:14px 40px; align-items:start;
}
.rooms-head .eyebrow{
  grid-column:1; grid-row:1; display:block; color:var(--pomegranate);
}
/* Spans both rows on the right so the heading below it stays the last
   element before the stage — the overlap depends on that. */
.rooms-aside{
  grid-column:2; grid-row:1 / span 2; justify-self:end; align-self:start;
  max-width:40ch; color:var(--ink-soft); font-size:var(--fs-body-sm); margin:0;
}
.rooms-title{ grid-column:1; grid-row:2; }
@media (max-width:860px){
  .rooms-head{ grid-template-columns:minmax(0,1fr); gap:12px 0; }
  .rooms-head .eyebrow{ grid-column:1; grid-row:1; }
  .rooms-aside{ grid-column:1; grid-row:2; justify-self:start; }
  .rooms-title{ grid-column:1; grid-row:3; }
}
.rooms-title{
  position:relative; display:inline-block; justify-self:start;
  font-size:var(--rooms-title); font-weight:300;
  line-height:1.02; letter-spacing:-0.02em; margin:0;
}
/* The clipped overlay copy: same glyphs, same position, showing only the
   band that sits over the photograph. */
.rooms-title-over{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  color:var(--cream); text-shadow:0 1px 3px rgba(20,24,15,0.55), 0 2px 18px rgba(20,24,15,0.45);
  clip-path:inset(calc(100% - var(--rooms-overlap) * 1em) 0 0 0);
}
.rooms-body{
  position:relative; padding-left:var(--bleed-pad); padding-right:0;
  /* rides up over the bottom band of the heading */
  margin-top:calc(var(--rooms-title) * var(--rooms-overlap) * -1);
}
.rooms-stage{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--green-deep);
}
.rooms-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 0.6s ease-in-out;
}
.rooms-img.is-active{ opacity:1; }
/* Keeps the crossing band of the heading legible whatever the photograph
   does in that corner. */
.rooms-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--scrim-copy-top); opacity:0.55; height:38%;
}
/* Thumbnails sit under the LEFT edge of the stage, where the image
   starts — the caption takes the column beside them. Grid placement,
   not DOM order, so the caption still reads before the controls. */
.rooms-foot{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:26px 44px; align-items:start; margin-top:24px;
  padding-right:var(--gutter);
}
.rooms-captions{ grid-column:2; grid-row:1; }
.rooms-controls{ grid-column:1; grid-row:1; }
.rooms-captions{ position:relative; }
.rooms-caption{
  display:none;
}
.rooms-caption.is-active{ display:block; }
.rooms-caption h3{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.25rem, 2vw, 1.6rem); line-height:1.15; margin:0 0 8px;
}
.rooms-caption p{ color:var(--ink-soft); font-size:var(--fs-body-sm); max-width:42ch; margin:0; }
.rooms-thumbs{ display:flex; gap:12px; flex-wrap:wrap; }
.rooms-thumb{
  position:relative; padding:0; border:none; background:none; cursor:pointer;
  width:clamp(64px, 8vw, 92px); opacity:0.55;
  transition:opacity 0.4s ease;
}
.rooms-thumb img{
  width:100%; aspect-ratio:4/5; height:auto; object-fit:cover; display:block;
}
.rooms-thumb::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:1px;
  background:var(--gold); opacity:0; transition:opacity 0.4s ease;
}
.rooms-thumb.is-active{ opacity:1; }
.rooms-thumb.is-active::after{ opacity:1; }
.rooms-thumb:hover{ opacity:0.85; }
.rooms-thumb:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; opacity:1; }
.rooms-cta{ margin-top:22px; }
@media (max-width:860px){
  .rooms-foot{ grid-template-columns:minmax(0,1fr); }
  .rooms-captions, .rooms-controls{ grid-column:1; grid-row:auto; }
  .rooms-body{ padding-right:0; }
  .rooms-foot{ padding-right:var(--gutter); }
}
@media (prefers-reduced-motion: reduce){
  .rooms-img{ transition:none; }
}

.crest{ text-align:center; }
.crest__eyebrow{ display:block; color:var(--pomegranate); margin-bottom:16px; }
.crest__main{
  font-size:clamp(2.1rem, 5.4vw, 4.2rem); line-height:1;
  letter-spacing:-0.02em; font-weight:400;
}
/* The roman-and-italic device already used in section headings, pulled
   apart across the full width: the qualifier flanks the subject instead
   of following it. */
.crest__wings{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:0 clamp(0rem, 4vw, 6rem); margin:clamp(.1rem,.6vw,.5rem) 0 0;
}
.wing{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 4.4vw, 3.4rem); line-height:1;
  font-style:italic; font-weight:300; opacity:0.9;
}

.triptych{
  display:grid; grid-template-columns:1fr 1.32fr 1fr; align-items:center;
  gap:clamp(.6rem,1.4vw,1.5rem); max-width:1080px; margin:clamp(28px,4vw,52px) auto 0;
}
.panel{
  position:relative; overflow:hidden; margin:0;
  aspect-ratio:3/4; background:var(--green-deep);
}
.panel--centre{
  aspect-ratio:3/4.35;
  box-shadow:0 30px 70px rgba(10,12,8,.35);
}
.panel img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.panel:hover img{ transform:scale(1.04); }
.panel figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:clamp(14px,2vw,22px) clamp(10px,1.6vw,18px);
  font-family:var(--font-body); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; text-align:center; color:var(--cream);
  /* sized against the brightest ground behind any of the three captions —
     the flatbread under the centre panel left cream at 3.68:1 */
  background:linear-gradient(to top, rgba(20,24,15,0.95) 0%, rgba(20,24,15,0.9) 52%, rgba(20,24,15,0.55) 80%, rgba(20,24,15,0) 100%);
}
.crest__foot{ text-align:center; margin-top:clamp(28px,4vw,46px); }
.crest__foot p{
  max-width:56ch; margin:0 auto; color:var(--ink-soft); font-size:var(--fs-lede);
}
.crest__ctas{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px;
}
@media (prefers-reduced-motion: reduce){
  .panel img{ transition:none; }
  .panel:hover img{ transform:none; }
}
/* A three-panel symmetrical composition at phone width is three unreadable
   slivers. The centre panel alone is the correct outcome, not a fallback. */
@media (max-width:760px){
  .triptych{ grid-template-columns:minmax(0,1fr); max-width:420px; }
  .panel:not(.panel--centre){ display:none; }
  .panel--centre{ aspect-ratio:4/5; }
  .crest__wings{
    flex-direction:column; align-items:center; padding:0; gap:2px;
  }
}

.detail-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(20px,4vw,60px); max-width:760px; margin:0 auto;
}
@media (max-width:640px){ .detail-grid{ grid-template-columns:minmax(0,1fr); gap:26px; } }
.detail-note{ border-top:1px solid var(--gold); padding-top:18px; }
.detail-tag{
  display:block; font-family:var(--font-body); font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--pomegranate); margin-bottom:8px;
}
.detail-note h3{ font-size:1.25rem; margin-bottom:6px; }
.detail-note p{
  font-family:var(--font-body); font-style:italic; font-size:var(--fs-body-sm);
  color:var(--ink-soft); margin:0;
}

/* ============================================================
   BAR / LOUNGE — one photograph, nine cells, pushed apart.
   The darkest section on the homepage; it should feel like walking
   into a different room. Used here and nowhere else.
   ============================================================ */
.bar-section{
  background:var(--olive-950); color:var(--cream);
  padding:var(--section-y-lg) 0;
}
.bar__stage{ position:relative; }
/* Sits on its own layer above the cells and must not move with them —
   if the title drifts with the image the whole thing reads as broken. */
.bar__head{
  position:relative; z-index:3; pointer-events:none;
  /* the whole head drops onto the photograph, label and title together,
     so the gap between them matches every other section's */
  transform:translateY(clamp(1.4rem,3.4vw,2.9rem));
}
.bar__head .eyebrow{
  display:block; color:var(--gold-soft); margin-left:6%; margin-bottom:12px;
}
.bar__title{
  margin-left:6%; max-width:16ch;
  font-size:clamp(2rem, 4.6vw, 3.6rem); font-weight:300;
  line-height:1.02; letter-spacing:-0.02em; color:var(--cream);
  text-shadow:0 2px 24px rgba(10,12,8,.55);
}
.bar__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr);
  aspect-ratio:16/10;
}
.bar__cell{ position:relative; overflow:hidden; display:block; }
.bar__cell img{
  position:absolute; width:300%; height:300%; max-width:none;
  object-fit:cover; display:block;
  /* denser than the frame arrives, so it sits on the near-black ground
     and so the marble third doesn't tile into flat squares */
  filter:brightness(0.86) saturate(0.94);
}
.bar__cell:nth-child(3n+1) img{ left:0; }
.bar__cell:nth-child(3n+2) img{ left:-100%; }
.bar__cell:nth-child(3n)   img{ left:-200%; }
.bar__cell:nth-child(-n+3) img{ top:0; }
.bar__cell:nth-child(n+4):nth-child(-n+6) img{ top:-100%; }
.bar__cell:nth-child(n+7) img{ top:-200%; }

/* The split is opt-in: script.js adds .tiles-ready. Without JS, or under
   reduced motion, the photograph simply renders whole. Movement is on
   transform only — animating gap would lay out every frame. */
.bar__grid.tiles-ready .bar__cell{
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.bar__grid.tiles-ready .bar__cell:nth-child(1){ transform:translate(-3.2%,-3.2%); }
.bar__grid.tiles-ready .bar__cell:nth-child(2){ transform:translate(0,-3.6%);   transition-delay:45ms; }
.bar__grid.tiles-ready .bar__cell:nth-child(3){ transform:translate(3.2%,-3.2%); }
.bar__grid.tiles-ready .bar__cell:nth-child(4){ transform:translate(-3.6%,0);   transition-delay:60ms; }
.bar__grid.tiles-ready .bar__cell:nth-child(5){ transform:scale(.97);           transition-delay:120ms; }
.bar__grid.tiles-ready .bar__cell:nth-child(6){ transform:translate(3.6%,0);    transition-delay:75ms; }
.bar__grid.tiles-ready .bar__cell:nth-child(7){ transform:translate(-3.2%,3.2%); }
.bar__grid.tiles-ready .bar__cell:nth-child(8){ transform:translate(0,3.6%);    transition-delay:90ms; }
.bar__grid.tiles-ready .bar__cell:nth-child(9){ transform:translate(3.2%,3.2%); }
.bar__grid.tiles-ready.is-whole .bar__cell{ transform:none; }

/* Copy on the left, the CTA on the right, on one line under the photo */
.bar__foot{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  text-align:left; margin-top:clamp(24px,3.4vw,40px);
}
.bar__foot p{
  max-width:44ch; margin:0; color:var(--cream); opacity:0.88;
  font-family:var(--font-display); font-weight:300; font-size:clamp(1.25rem, 1.9vw, 1.6rem); line-height:1.3;
}
.bar__foot .btn{ flex:none; }

@media (max-width:860px){
  .bar__grid{ aspect-ratio:4/5; }
  .bar__head .eyebrow, .bar__title{ margin-left:0; }
  .bar__title{ max-width:12ch; }
  .bar__foot{ flex-direction:column; align-items:flex-start; gap:24px; }
  .bar__foot p{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .bar__grid .bar__cell{ transform:none; transition:none; }
}

.since{
  background:var(--green-deep); color:var(--cream);
  padding:var(--section-y-lg) 0;
  overflow:hidden;
}
/* No top highlight here: it drew a line against the band above. */
section.since::after{ box-shadow:none; }
.since__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:clamp(40px,6vw,96px);
}
.since__copy .eyebrow{ display:block; color:var(--gold-soft); margin-bottom:16px; }
.since__copy h2{
  font-size:clamp(2rem, 4.2vw, 3.2rem); font-weight:300;
  line-height:1.04; letter-spacing:-0.02em; color:var(--cream);
  /* keeps the italic phrase on its own line rather than orphaning "in" */
  text-wrap:balance; max-width:14ch;
}
.since__copy p{
  margin-top:18px; max-width:44ch; font-size:var(--fs-body);
  color:var(--cream); opacity:0.94;
}
.since__copy .btn{ margin-top:28px; }
.since__ig{
  display:flex; align-items:center; gap:14px; width:max-content; max-width:100%;
  margin-top:44px; color:var(--cream); font-size:var(--fs-lede); letter-spacing:0.03em;
}
.since__ig svg{
  width:36px; height:36px; flex:none; padding:8px; color:var(--gold-soft);
  border:1px solid rgba(217,189,124,0.45); border-radius:50%;
  transition:border-color .3s ease, background .3s ease;
}
.since__ig small{
  display:block; margin-bottom:2px; letter-spacing:0;
  font-family:var(--font-display); font-style:italic; font-size:var(--fs-body-sm); color:var(--gold-soft);
}
.since__ig:hover{ color:var(--gold-soft); }
.since__ig:hover svg{ border-color:var(--gold-soft); background:rgba(217,189,124,0.08); }
/* The arch: a full semicircle over the top, and a gold hairline set off
   from it. The photograph is taller than the frame so [data-parallax]
   has somewhere to drift. */
.since__media{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  border-radius:999px 999px 0 0;
  outline:1px solid rgba(217,189,124,0.5); outline-offset:10px;
}
.since__media img{
  position:absolute; left:0; width:100%; height:116%; top:-8%;
  object-fit:cover; object-position:62% 50%; display:block; will-change:transform;
}
@media (max-width:860px){
  .since{ padding:var(--section-y) 0; }
  .since__grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .since__media{ order:-1; width:100%; max-width:420px; margin:0 auto; aspect-ratio:4/4.4; }
}

/* The quote portrait picks up the pair of moves used elsewhere on the
   site: a slow scale, and a gold hairline that draws inward. Subtle,
   and nothing depends on it — there is no hover on touch. */
.testimonial-media img{ transition:transform 1.1s cubic-bezier(.22,.61,.36,1); }
.testimonial-media::after{
  content:""; position:absolute; inset:14px; z-index:2; pointer-events:none;
  border:1px solid rgba(217,189,126,0.35);
  transition:inset 0.7s cubic-bezier(.22,.61,.36,1), border-color 0.7s cubic-bezier(.22,.61,.36,1);
}
.testimonial-media:hover img{ transform:scale(1.04); }
.testimonial-media:hover::after{ inset:22px; border-color:rgba(217,189,126,0.6); }
@media (prefers-reduced-motion: reduce){
  .testimonial-media img{ transition:none; }
  .testimonial-media:hover img{ transform:none; }
  .testimonial-media::after{ transition:none; }
}

/* ---------- Legal pages (privacy, terms) ---------- */
/* Plain prose on the cream ground. No hero photograph: there is no honest
   photograph for a privacy notice, and one would only cost load time on the
   page people reach when they are already suspicious. */
.legal-head{
  background:var(--green-deep); color:var(--cream);
  padding:calc(var(--section-y) + 56px) 0 var(--section-y);
}
.legal-head h1{ font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.1rem,5vw,3.2rem); margin:14px 0 0; color:var(--cream); }
.legal-updated{ margin:18px 0 0; font-size:var(--fs-small); color:rgba(239,231,217,0.72); }
.legal-body{ background:var(--cream); color:var(--ink); }
.legal-body h2{ font-family:var(--font-display); font-weight:400; font-size:1.45rem;
  margin:46px 0 12px; color:var(--ink); }
.legal-body h2:first-of-type{ margin-top:0; }
.legal-body p, .legal-body li{ color:var(--ink-soft); line-height:1.8; }
.legal-body ul{ padding-left:1.15em; margin:14px 0; }
.legal-body li{ margin-bottom:10px; }
.legal-body a{ color:var(--pomegranate); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.legal-lede{ font-size:1.06rem; color:var(--ink) !important;
  border-left:2px solid var(--gold); padding-left:20px; margin-bottom:34px; }
.footer-bottom-bar a{ color:inherit; font-size:inherit; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(239,231,217,0.35); }
.footer-bottom-bar a:hover{ color:var(--cream); text-decoration-color:var(--gold-soft); }
/* Companies Act: the registered name, number and office must appear on the
   site. Its own full-width line, below the rest of the bar. */
.footer-bottom-bar .footer-company{ flex-basis:100%; line-height:1.6; }
/* Privacy and Terms are tiny text; the padding gives each a 24px+ tap target
   (WCAG 2.5.8) without changing how the bar looks. */
.footer-legal a{ display:inline-block; padding:7px 2px; margin:-7px 0; }

:root{
  /* Each pool fades on an eased curve to exactly nothing, and sits wholly
     inside its layer (centre +/- radius stays within 2-98%). A straight
     fade to a hard stop drew a visible ring, and a pool running off the
     layer's edge drew a straight line; both were visible on the first
     version. The grain dithers the gradient so dark greens do not band. */
  --gloss-pools:
    radial-gradient(36% 40% at 38% 42%, rgba(217,189,124,0.055) 0%, rgba(217,189,124,0.0473) 14%, rgba(217,189,124,0.0352) 28%, rgba(217,189,124,0.0231) 42%, rgba(217,189,124,0.0132) 56%, rgba(217,189,124,0.006) 70%, rgba(217,189,124,0.0019) 84%, rgba(217,189,124,0.0) 100%),
    radial-gradient(34% 38% at 64% 60%, rgba(239,231,217,0.03) 0%, rgba(239,231,217,0.0258) 14%, rgba(239,231,217,0.0192) 28%, rgba(239,231,217,0.0126) 42%, rgba(239,231,217,0.0072) 56%, rgba(239,231,217,0.0033) 70%, rgba(239,231,217,0.0011) 84%, rgba(239,231,217,0.0) 100%),
    radial-gradient(30% 26% at 52% 30%, rgba(150,168,118,0.045) 0%, rgba(150,168,118,0.0387) 14%, rgba(150,168,118,0.0288) 28%, rgba(150,168,118,0.0189) 42%, rgba(150,168,118,0.0108) 56%, rgba(150,168,118,0.0049) 70%, rgba(150,168,118,0.0016) 84%, rgba(150,168,118,0.0) 100%);
  --gloss-pools-maroon:
    radial-gradient(27% 34% at 30% 38%, rgba(240,168,186,0.16) 0%, rgba(240,168,186,0.1376) 14%, rgba(240,168,186,0.1024) 28%, rgba(240,168,186,0.0672) 42%, rgba(240,168,186,0.0384) 56%, rgba(240,168,186,0.0176) 70%, rgba(240,168,186,0.0056) 84%, rgba(240,168,186,0.0) 100%),
    radial-gradient(27% 32% at 70% 64%, rgba(239,231,217,0.09) 0%, rgba(239,231,217,0.0774) 14%, rgba(239,231,217,0.0576) 28%, rgba(239,231,217,0.0378) 42%, rgba(239,231,217,0.0216) 56%, rgba(239,231,217,0.0099) 70%, rgba(239,231,217,0.0032) 84%, rgba(239,231,217,0.0) 100%),
    radial-gradient(24% 20% at 52% 24%, rgba(217,189,124,0.1) 0%, rgba(217,189,124,0.086) 14%, rgba(217,189,124,0.064) 28%, rgba(217,189,124,0.042) 42%, rgba(217,189,124,0.024) 56%, rgba(217,189,124,0.011) 70%, rgba(217,189,124,0.0035) 84%, rgba(217,189,124,0.0) 100%);
  --gloss-sheen: linear-gradient(172deg, rgba(239,231,217,0.05) 0%, rgba(239,231,217,0.018) 22%, rgba(239,231,217,0.006) 38%, rgba(239,231,217,0) 55%);
  --gloss-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Nav bar: frosted glass */
header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
}
header::before{
  /* 90% of a slightly deeper olive, so over the cream sections the bar still
     reads as the brand green (82% turned it grey); photos still blur through. */
  background:var(--gloss-sheen), rgba(24,29,19,0.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(239,231,217,0.09), inset 0 -1px 0 rgba(217,189,124,0.16);
}
header.solid::before{ opacity:1; }
/* Browsers without backdrop-filter get the old near-solid bar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header::before{ background:var(--gloss-sheen), rgba(30,36,24,0.96); }
}

/* Footer, mobile menu and large green sections: pools of light */
.footer-split, .since, .bar-section, .legal-head, section.dark{
  position:relative; isolation:isolate;
}
.navlinks{ isolation:isolate; }
.footer-split::before, .since::before, .bar-section::before,
.legal-head::before, section.dark::before, .navlinks::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--gloss-pools); background-repeat:no-repeat;
  transform:scale(0.92);
}
.footer-split::after, .since::after, .bar-section::after,
.legal-head::after, section.dark::after, .navlinks::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--gloss-sheen), var(--gloss-grain);
  box-shadow:inset 0 1px 0 rgba(239,231,217,0.06);
}
.footer-split::before{ opacity:0.65; }
/* The mobile menu is only a pane at 860px and below */
@media (min-width:861px){ .navlinks::before, .navlinks::after{ content:none; } }
/* Maroon: the Reserve band gets its own, lighter glass (rose and cream
   light instead of gold and sage), same sheen */
.reserve.maroon{ position:relative; isolation:isolate; }
.reserve.maroon::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--gloss-pools-maroon); background-repeat:no-repeat;
  transform:scale(0.92);
}
.reserve.maroon::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(172deg, rgba(255,226,232,0.08) 0%, rgba(255,226,232,0.03) 22%, rgba(255,226,232,0.01) 40%, rgba(255,226,232,0) 58%), var(--gloss-grain);
  box-shadow:inset 0 1px 0 rgba(255,226,232,0.10);
}

/* Button groups. Once a pair (or the 404's three) stops fitting on one
   line they stack, and a stacked group is one column as wide as its widest
   button, so every button in it matches instead of each hugging its own
   label. .ff-ctas does the same with its own rule. Kept at the end of the
   file so it outranks each group's own display rule. */
@media (max-width:520px){
  .hero-ctas, .crest__ctas, .map-facade-actions, .btn-row{
    display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
    width:max-content; max-width:100%; margin-left:auto; margin-right:auto;
  }
  .hero-ctas .btn, .crest__ctas .btn, .map-facade-actions .btn, .btn-row .btn{ text-align:center; }
}

/* ---------- Book ---------- */
.book{ --lift:56px; --frame-h:clamp(560px, calc(100svh - 110px), 820px);
  background:var(--cream); color:var(--ink); padding-bottom:var(--section-y); overflow:hidden; }
.book-layout{ display:grid; grid-template-columns:minmax(0,1fr); }
.book-band{
  grid-row:1; grid-column:1 / -1; z-index:0; position:relative; overflow:hidden; padding:0;
  margin-inline:calc(50% - 50vw);
}
.book-intro{ grid-row:1; grid-column:1; position:relative; z-index:1;
  padding:calc(var(--section-y) + 64px) 0 calc(var(--lift) + 40px); }
.book-intro .eyebrow{ color:var(--gold-soft); }
.book-intro h1{ font-family:var(--font-display); font-weight:300; font-size:clamp(2.6rem, 6vw, 4.4rem);
  line-height:1.04; margin:14px 0 0; color:var(--cream); }
.book-sub{ margin:20px 0 0; max-width:30em; font-size:var(--fs-lede); line-height:1.7; color:rgba(239,231,217,0.82); }
.book-rosette{
  position:absolute; z-index:0; pointer-events:none;
  width:min(760px, 95vw); height:auto; right:max(-180px, -12vw); top:50%;
  translate:0 -50%; opacity:0.17; stroke-width:0.35;
  animation:heroRoseTurn 240s linear infinite;
}
.book-rosette path{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:bookDraw 2.8s cubic-bezier(.65,0,.25,1) forwards;
  animation-delay:calc(0.2s + var(--i) * 0.07s);
}
@keyframes bookDraw{ to{ stroke-dashoffset:0; } }
.booking-col{ grid-row:2; grid-column:1; position:relative; z-index:2; margin-top:calc(-1 * var(--lift)); }
.book-aside{ grid-row:3; grid-column:1; padding-top:56px; max-width:620px; }

@media (min-width:961px){
  .book{ --frame-h:clamp(600px, calc(100svh - 190px), 900px); }
  .book-layout{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(40px, 5vw, 80px);
    grid-template-rows:auto 1fr; }
  .book-intro{ padding-bottom:0; min-height:clamp(440px, 56svh, 540px); }
  .booking-col{ grid-row:1 / span 2; grid-column:2; margin-top:calc(var(--section-y) + 62px); }
  .book-aside{ grid-row:2; grid-column:1; padding-top:48px; }
  .book-rosette{ right:max(-200px, -14vw); }
}

.booking-card{
  position:relative; isolation:isolate; overflow:hidden; height:var(--frame-h);
  border-radius:22px; background:var(--cream-2); border:1px solid rgba(142,117,61,0.28);
  box-shadow:0 1px 2px rgba(20,24,15,0.06), 0 24px 48px -20px rgba(20,24,15,0.35), 0 60px 120px -60px rgba(20,24,15,0.45);
}
.booking-card iframe{
  position:relative; z-index:1; display:block; border:0; background:transparent;
  width:calc(100% + var(--sb, 0px)); height:100%;
}
.booking-card.is-auto{ height:auto; }
.js .booking-card:not(.is-ready)::before{
  content:"Loading the booking form\2026"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:var(--fs-small);
}
.booking-cue{
  position:absolute; z-index:2; left:50%; bottom:18px; width:44px; height:44px; margin-left:-22px;
  display:grid; place-items:center; border-radius:50%; pointer-events:none;
  color:var(--gold-soft); background:rgba(30,36,24,0.84);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 10px 24px -10px rgba(20,24,15,0.6), inset 0 0 0 1px rgba(217,189,124,0.25);
  opacity:0; transition:opacity .6s ease;
}
.booking-cue svg{ width:20px; height:20px; animation:cueBob 2.2s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:translateY(-2px); } 50%{ transform:translateY(3px); } }
.js .booking-card.is-ready:not(.cue-off):not(.is-auto) .booking-cue{ opacity:1; }
.booking-fallback{ margin:18px 0 0; text-align:center; font-size:var(--fs-small); line-height:1.7; color:var(--ink-soft); }

.book-aside .eyebrow{ color:var(--pomegranate); }
.book-aside h2{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.9rem, 3vw, 2.5rem);
  line-height:1.1; color:var(--ink); margin:12px 0 28px; }
.book-facts{ margin:0; border-top:1px solid rgba(142,117,61,0.35); }
.book-facts > div{ display:grid; grid-template-columns:minmax(0,9.5rem) minmax(0,1fr); gap:16px;
  padding:18px 0; border-bottom:1px solid rgba(142,117,61,0.35); }
.book-facts dt{ font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase;
  font-weight:600; line-height:1.5; color:var(--ink); padding-top:3px; }
.book-facts dd{ margin:0; font-size:var(--fs-body-sm); line-height:1.7; color:var(--ink-soft); }
.book-small{ margin:18px 0 0; font-size:var(--fs-small); line-height:1.7; color:var(--ink-soft); }
.booking-fallback a, .book-facts a{ color:var(--pomegranate); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.book-facts a[href^="tel:"]{ white-space:nowrap; }

@media (max-width:640px){
  .booking-col{ margin-left:-8px; margin-right:-8px; }
  .booking-card{ border-radius:18px; }
  .book-rosette{ width:120vw; right:-55vw; top:38%; }
  .book-facts > div{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .booking-fallback{ text-wrap:balance; }
}
@media (prefers-reduced-motion: reduce){
  .book-rosette, .book-rosette path, .booking-cue svg{ animation:none; }
  .book-rosette path{ stroke-dashoffset:0; }
}
.book-facts a{ display:inline-block; }