/* ==========================================================================
   Waterside Bar Restaurant — Design Tokens & Base
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* Header wordmark only — licensed font, self-hosted rather than pulled from a CDN */
@font-face{
  font-family: 'Luna Bar';
  src: url('../fonts/luna-bar.woff2') format('woff2'),
       url('../fonts/luna-bar.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Palette — deep purple / charcoal / polished gold */
  --color-bg:            #0c0910;
  --color-bg-alt:        #120c19;
  --color-surface:       #1b1424;
  --color-surface-2:     #221a2e;
  --color-purple-deep:   #241333;
  --color-purple:        #3c2159;
  --color-purple-soft:   #5a3a80;
  --color-gold:          #c8a24d;
  --color-gold-light:    #e6cc8c;
  --color-gold-dim:      rgba(200,162,77,0.35);
  --color-cream:         #f4eee1;
  --color-cream-dim:     rgba(244,238,225,0.72);
  --color-muted:         #b3a6c2;
  --color-border:        rgba(200,162,77,0.22);
  --color-border-soft:   rgba(244,238,225,0.12);
  --color-overlay:       rgba(9,6,13,0.62);
  --color-error:         #e2685f;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale */
  --step-eyebrow: 0.78rem;
  --step-body: 1.05rem;
  --step-h4: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --step-h3: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  --step-h2: clamp(2.3rem, 1.7rem + 2.6vw, 3.4rem);
  --step-h1: clamp(3rem, 2rem + 4.5vw, 5.6rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Misc */
  --radius-sm: 2px;
  --radius-md: 4px;
  --container: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 260ms;
}

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

/* Image copy deterrents — blocks the iOS/Android long-press "Save Image" sheet
   and desktop drag-out-to-save; paired with the right-click/dev-tools guard
   in main.js. As noted there, this deters casual copying only. */
img{
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  user-select:none;
}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-cream);
  font-family:var(--font-body);
  font-size:var(--step-body);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img, video{ max-width:100%; display:block; }
main img{ filter:saturate(0.86) contrast(1.06) brightness(0.97) sepia(0.06) hue-rotate(-6deg); }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--color-cream);
  margin:0 0 var(--space-sm);
  line-height:1.12;
  letter-spacing:0.005em;
}
h1{ font-size:var(--step-h1); font-weight:500; }
h2{ font-size:var(--step-h2); }
h3{ font-size:var(--step-h3); }
h4{ font-size:var(--step-h4); font-weight:600; }

p{ margin:0 0 var(--space-sm); color:var(--color-cream-dim); }
p:last-child{ margin-bottom:0; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:1.5rem; }
@media (min-width:768px){ .container{ padding-inline:2.5rem; } }

/* Wider than .container specifically for the header: at 10 nav items the header genuinely
   needs more room than the 1240px content column, without widening page content itself. */
.container-wide{ max-width:1700px; margin-inline:auto; padding-inline:1.5rem; }
@media (min-width:768px){ .container-wide{ padding-inline:2.5rem; } }
@media (min-width:1220px) and (max-width:1399px){ .container-wide{ padding-inline:1.75rem; } }

section{ position:relative; }

/* Eyebrow label */
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-size:var(--step-eyebrow);
  font-weight:500;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--color-gold);
  margin-bottom:var(--space-sm);
}
.eyebrow::before{ content:'— '; color:var(--color-gold-dim); }

.section-head{ max-width:640px; margin-bottom:var(--space-lg); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ font-size:1.1rem; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.95rem 2.1rem;
  font-family:var(--font-body);
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--color-gold); color:#1a1220; border-color:var(--color-gold); }
.btn-gold:hover{ background:var(--color-gold-light); border-color:var(--color-gold-light); }
.btn-outline{ background:transparent; color:var(--color-cream); border-color:var(--color-border-soft); }
.btn-outline:hover{ border-color:var(--color-gold); color:var(--color-gold-light); }
.btn-ghost-gold{ background:transparent; color:var(--color-gold-light); border-color:var(--color-gold-dim); }
.btn-ghost-gold:hover{ background:rgba(200,162,77,0.08); border-color:var(--color-gold); }
.btn-block{ width:100%; justify-content:center; }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-1{ transition-delay:80ms; }
.reveal-2{ transition-delay:180ms; }
.reveal-3{ transition-delay:280ms; }
.reveal-4{ transition-delay:380ms; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.4rem 0;
  transition:background var(--dur) var(--ease), padding var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(12,9,16,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:0.85rem 0;
  border-color:var(--color-border-soft);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand{ display:flex; align-items:center; gap:0.7rem; }
.brand-mark{ width:57px; height:57px; flex-shrink:0; }
.brand-mark svg, .brand-mark img{ width:100%; height:100%; object-fit:contain; }
.brand-word{ font-family:'Luna Bar', var(--font-display); font-size:1.5rem; letter-spacing:0.04em; color:var(--color-cream); line-height:1; }
.brand-word small{ display:block; font-family:var(--font-body); font-size:0.58rem; letter-spacing:0.32em; text-transform:uppercase; color:var(--color-gold); margin-top:0.35rem; font-weight:500; }

.main-nav{ display:none; }
@media (min-width:1220px){
  .main-nav{ display:flex; align-items:center; gap:1.05rem; flex-wrap:nowrap; }
  .main-nav > a{
    position:relative;
    font-size:0.76rem; letter-spacing:0.11em; text-transform:uppercase; font-weight:500;
    color:var(--color-cream-dim);
    padding:0.4rem 0;
    white-space:nowrap;
    transition:color var(--dur) var(--ease);
  }
  .main-nav > a::after{
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
    background:var(--color-gold); transform:scaleX(0); transform-origin:left;
    transition:transform var(--dur) var(--ease);
  }
  .main-nav > a:hover, .main-nav > a[aria-current="page"]{ color:var(--color-gold-light); }
  .main-nav > a:hover::after, .main-nav > a[aria-current="page"]::after{ transform:scaleX(1); }

  /* "More" dropdown — same link treatment as the top-level items, plus a caret
     that rotates open; the panel is a dark flyout matching the header's palette. */
  .nav-more{ position:relative; }
  .nav-more-trigger{
    position:relative;
    display:flex; align-items:center; gap:0.35rem;
    font-family:inherit; font-size:0.76rem; letter-spacing:0.11em; text-transform:uppercase; font-weight:500;
    color:var(--color-cream-dim);
    background:transparent; border:none; padding:0.4rem 0; cursor:pointer;
    white-space:nowrap;
    transition:color var(--dur) var(--ease);
  }
  .nav-more-trigger::after{
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
    background:var(--color-gold); transform:scaleX(0); transform-origin:left;
    transition:transform var(--dur) var(--ease);
  }
  .nav-more-caret{ transition:transform var(--dur) var(--ease); flex-shrink:0; }
  .nav-more-trigger:hover, .nav-more-trigger.is-active, .nav-more-trigger[aria-expanded="true"]{ color:var(--color-gold-light); }
  .nav-more-trigger:hover::after, .nav-more-trigger.is-active::after, .nav-more-trigger[aria-expanded="true"]::after{ transform:scaleX(1); }
  .nav-more-trigger[aria-expanded="true"] .nav-more-caret{ transform:rotate(180deg); }

  .nav-more-panel{
    position:absolute; top:calc(100% + 1rem); right:0; z-index:60;
    min-width:210px;
    display:flex; flex-direction:column;
    background:linear-gradient(160deg, #150f1d 0%, #0c0910 100%);
    border:1px solid var(--color-border-soft); border-radius:var(--radius-sm);
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
    padding:0.5rem;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  /* Invisible strip across the gap between the trigger and the panel, so the pointer never "leaves" the menu on its way down. */
  .nav-more-panel::before{ content:''; position:absolute; left:0; right:0; top:-1.1rem; height:1.1rem; }
  .nav-more.is-open .nav-more-panel{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav-more-panel a{
    display:block; padding:0.65rem 0.9rem; border-radius:var(--radius-sm);
    font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
    color:var(--color-cream-dim); white-space:nowrap;
    transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
  }
  .nav-more-panel a:hover, .nav-more-panel a[aria-current="page"]{
    color:var(--color-gold-light); background:rgba(255,255,255,0.04);
  }
}

.header-actions{ display:flex; align-items:center; gap:0.75rem; }
@media (min-width:1220px) and (max-width:1399px){ .header-actions .btn{ padding:0.95rem 1.5rem; } }
.header-actions .btn{ display:none; }
/* Below 640px there's only room for one header CTA alongside the logo and menu button, so the
   primary "Reserve a Table" stays visible (compact) and "Reserve a Room" waits in the menu —
   both show at full size from 640px up. */
.header-actions .btn-gold{ display:inline-flex; padding:0.6rem 0.9rem; font-size:0.72rem; letter-spacing:0.1em; }
@media (min-width:640px){ .header-actions .btn{ display:inline-flex; padding:0.95rem 2.1rem; font-size:0.82rem; letter-spacing:0.18em; } }
/* Phones narrower than 375px don't have room for the logo at full size alongside the Reserve
   button and menu toggle, so the logo and its padding shrink a little to make space. */
@media (max-width:374px){
  .container-wide{ padding-inline:1rem; }
  .header-inner{ gap:0.75rem; }
  .brand{ gap:0.5rem; }
  .brand-mark{ width:44px; height:44px; }
  .brand-word{ font-size:1.2rem; }
}

.nav-toggle{
  /* One button, always in the fixed header (never obscured), that both opens and closes
     the nav — swaps its own icon rather than relying on a second close button layered
     underneath it, which was unreachable since the header sits above the nav in z-index. */
  position:relative; z-index:101;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  background:transparent; border:1px solid var(--color-border-soft); border-radius:var(--radius-sm);
  color:var(--color-cream); cursor:pointer;
}
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }
@media (min-width:1220px){ .nav-toggle{ display:none; } }

.mobile-nav{
  /* display:none is the hidden state — not a transform/visibility trick — so there is no
     way for any part of this overlay to paint over the page on any browser. The open/close
     animation is handled by toggling "is-visible" (display) a frame apart from "is-open"
     (the actual opacity/transform transition); see the nav-toggle JS. */
  position:fixed; inset:0; z-index:99;
  display:none;
  flex-direction:column;
  background:linear-gradient(160deg, #150f1d 0%, #0c0910 100%);
  opacity:0;
  transform:translateY(-18px);
  transition:opacity 320ms var(--ease), transform 320ms var(--ease);
}
.mobile-nav.is-visible{ display:flex; }
.mobile-nav.is-open{ opacity:1; transform:translateY(0); }
/* The close button lives outside this wrapper so it stays put if the list itself has to scroll.
   Content is centered when it fits, but on short viewports (mobile browser chrome eating real
   vertical space) it never overlaps the header above or gets clipped below — it scrolls instead. */
.mobile-nav-scroll{
  /* Anchored to the top (not centred) on purpose: centring taller-than-viewport content
     pushes it upward past its own top edge, and content that overflows upward past a
     scroll container's origin isn't reachable by scrolling — exactly what caused the
     nav to overlap the header above on short/chrome-heavy mobile viewports. */
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; justify-content:flex-start; gap:0;
  padding:calc(var(--header-h, 5rem) + 1rem) 2rem 2rem;
}
.mobile-nav ul{ display:flex; flex-direction:column; gap:0; flex-shrink:0; }
.mobile-nav li{ border-bottom:1px solid var(--color-border-soft); }
.mobile-nav a{
  display:block; padding:1.1rem 0; font-family:var(--font-display); font-size:1.9rem; color:var(--color-cream);
}
.mobile-nav a:hover{ color:var(--color-gold-light); }
.mobile-nav .btn{ margin-top:2rem; }
body.nav-open{ overflow:hidden; }

/* ==========================================================================
   Page hero (non-video, interior pages)
   ========================================================================== */
.page-hero{
  position:relative; min-height:62vh; display:flex; align-items:flex-end;
  padding-top:9rem; padding-bottom:var(--space-xl);
  background-size:cover; background-position:center;
  isolation:isolate;
}
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(9,6,13,0.55) 0%, rgba(9,6,13,0.72) 55%, var(--color-bg) 100%);
}
.page-hero .eyebrow{ color:var(--color-gold-light); }
.page-hero h1{ max-width:820px; }
.page-hero p{ max-width:560px; font-size:1.15rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--color-bg-alt); border-top:1px solid var(--color-border-soft); padding-top:var(--space-xl); }
.footer-top{ display:grid; gap:var(--space-lg); grid-template-columns:1fr; padding-bottom:var(--space-lg); }
@media (min-width:768px){ .footer-top{ grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2rem; } }
.footer-brand p{ max-width:320px; margin-top:1rem; }
.footer-col h5{ font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--color-gold); margin:0 0 1.1rem; font-weight:500; }
.footer-col ul{ display:flex; flex-direction:column; gap:0.7rem; }
.footer-col a, .footer-col span{ color:var(--color-cream-dim); font-size:0.92rem; }
.footer-col a:hover{ color:var(--color-gold-light); }
.footer-social{ display:flex; gap:1rem; margin-top:1.4rem; }
.footer-social a{
  width:50px; height:50px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-gold-dim); border-radius:50%; color:var(--color-gold);
  transition:border-color var(--dur), color var(--dur), background var(--dur), transform var(--dur);
}
.footer-social a svg{ width:22px; height:22px; }
.footer-social a:hover{ border-color:var(--color-gold); color:var(--color-gold-light); background:rgba(200,162,77,0.1); transform:translateY(-2px); }
.footer-bottom{
  border-top:1px solid var(--color-border-soft);
  padding:1.6rem 0 2rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:0.8rem; color:var(--color-muted);
}
.footer-bottom a{ color:var(--color-muted); }
.footer-bottom a:hover{ color:var(--color-gold-light); }
.footer-credit{
  display:inline-flex; align-items:center; gap:0.55rem;
  color:var(--color-muted); transition:color var(--dur) var(--ease);
}
.footer-credit:hover{ color:var(--color-gold-light); }
.footer-credit img{ height:22px; width:auto; flex-shrink:0; opacity:0.85; }

/* ==========================================================================
   Utility
   ========================================================================== */
.text-gold{ color:var(--color-gold-light); }
.center{ text-align:center; }
.mt-lg{ margin-top:var(--space-lg); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link{
  position:absolute; left:1rem; top:-3rem; z-index:1000;
  background:var(--color-gold); color:#1a1220; padding:0.7rem 1.2rem; border-radius:var(--radius-sm);
  transition:top var(--dur) var(--ease); font-size:0.85rem; font-weight:600;
}
.skip-link:focus{ top:1rem; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--color-gold); outline-offset:3px;
}

.divider{ width:64px; height:1px; background:var(--color-gold-dim); margin:1.6rem 0; }
.divider.center{ margin-inline:auto; }

/* ==========================================================================
   Home — Hero (video)
   ========================================================================== */
.hero-video{
  position:relative; height:100vh; min-height:640px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
}
.hero-video video, .hero-video .hero-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.hero-video::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(9,6,13,0.62) 0%, rgba(9,6,13,0.5) 38%, rgba(9,6,13,0.92) 100%),
    linear-gradient(90deg, rgba(9,6,13,0.65) 0%, transparent 30%, transparent 70%, rgba(9,6,13,0.65) 100%),
    radial-gradient(ellipse at center, rgba(36,19,51,0.15) 0%, rgba(9,6,13,0.55) 75%);
}
.hero-video-content{ position:relative; text-align:center; padding:0 1.5rem; max-width:900px; }
.hero-video-content .eyebrow{ color:var(--color-gold-light); }
.hero-video-content .eyebrow::before{ content:none; }
.hero-video-content h1{ font-family:'Luna Bar', var(--font-display); font-size:clamp(3.2rem, 2rem + 6vw, 7rem); margin-bottom:0.4rem; }
.hero-video-content .hero-sub{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.18rem,1.08rem + 0.6vw,1.58rem);
  color:var(--color-cream-dim); letter-spacing:0.02em; margin-bottom:2.2rem;
}
.hero-video-content .btn-row{ justify-content:center; }
.scroll-cue{
  position:absolute; bottom:8.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  font-size:0.85rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--color-gold-light);
}
.scroll-cue-arrow{ color:var(--color-gold); animation:scrollcuebounce 1.8s ease-in-out infinite; }
@keyframes scrollcuebounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }
@media (prefers-reduced-motion: reduce){ .scroll-cue-arrow{ animation:none; } }

/* Welcome / intro split */
.motto-standout{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  line-height:1.15; color:var(--color-gold-light); margin:0.6rem 0 1.4rem;
}
.split{ display:grid; gap:var(--space-lg); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:4.5rem; } }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.split-media{ position:relative; }
.split-media img{ width:100%; height:auto; border-radius:var(--radius-md); }
.split-media .frame-tag{
  position:absolute; bottom:-1.4rem; right:-1.4rem;
  background:var(--color-surface); border:1px solid var(--color-border);
  padding:1.1rem 1.5rem; border-radius:var(--radius-md);
  font-family:var(--font-display); font-style:italic; font-size:1.18rem; color:var(--color-gold-light);
  max-width:220px; display:none;
}
@media (min-width:640px){ .split-media .frame-tag{ display:block; } }

/* Two photos stacked in a split column, the second with a name tag (e.g. Our Story) */
.split-media-stack{ display:flex; flex-direction:column; gap:1.6rem; }
.photo-figure{ position:relative; margin:0 auto; width:100%; max-width:460px; }
.photo-figure img{ display:block; width:100%; height:auto; border-radius:var(--radius-md); }
.photo-tag{
  position:absolute; left:1rem; bottom:1rem; padding:0.4rem 1.15rem;
  border:1px solid var(--color-gold-dim); border-radius:999px;
  background:rgba(12,9,16,0.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--font-display); font-style:italic; font-size:1.28rem; color:var(--color-gold-light);
}

/* Rotating photo carousel (e.g. Event Hire) — crossfades through a set of images automatically;
   JS toggles .is-active on one .event-carousel-slide and one dot at a time. */
.event-carousel{ position:relative; border-radius:var(--radius-md); overflow:hidden; box-shadow:0 24px 50px rgba(32,26,18,0.18); }
.event-carousel-track{ position:relative; aspect-ratio:4 / 5; }
.event-carousel-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.event-carousel-slide.is-active{ opacity:1; }
/* This one source photo is landscape, unlike the rest of the set — contain it instead of
   cropping it to the shared portrait box, so the full frame stays visible. */
.event-carousel-slide.is-landscape{ object-fit:contain; background:var(--color-bg-alt); }
.event-carousel-dots{
  position:absolute; left:0; right:0; bottom:1rem; z-index:1;
  display:flex; justify-content:center; gap:0.55rem;
}
.event-carousel-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; border:1px solid var(--color-gold-light);
  background:rgba(12,9,16,0.4); cursor:pointer; transition:background var(--dur), transform var(--dur);
}
.event-carousel-dots button.is-active{ background:var(--color-gold-light); transform:scale(1.2); }

/* Culinary highlight cards */
.highlight-grid{ display:grid; gap:1.75rem; grid-template-columns:1fr; }
@media (min-width:700px){ .highlight-grid{ grid-template-columns:repeat(3, 1fr); } }
.highlight-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:3/4; isolation:isolate;
}
.highlight-card img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.highlight-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(9,6,13,0.92) 100%);
}
.highlight-card:hover img{ transform:scale(1.06); }
.highlight-card-content{ position:absolute; left:0; right:0; bottom:0; padding:1.8rem; z-index:1; }
.highlight-card-content .eyebrow{ margin-bottom:0.5rem; }
.highlight-card-content h3{ font-size:1.7rem; margin-bottom:0.4rem; }
.highlight-card-content p{ font-size:0.92rem; }

/* Al fresco / feature band */
.feature-band{
  position:relative; background-size:cover; background-position:center;
  padding:var(--space-2xl) 0; isolation:isolate;
}
.feature-band::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(9,6,13,0.92) 0%, rgba(9,6,13,0.55) 55%, rgba(9,6,13,0.3) 100%); }
.feature-band-inner{ max-width:520px; }

/* Rooms teaser */
.room-teaser-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:640px){ .room-teaser-grid{ grid-template-columns:repeat(4, 1fr); } }
.room-teaser{ border-radius:var(--radius-md); overflow:hidden; position:relative; aspect-ratio:3/4; }
.room-teaser img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.room-teaser:hover img{ transform:scale(1.07); }
.room-teaser::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(9,6,13,0.9) 100%); }
.room-teaser span{ position:absolute; left:1.2rem; bottom:1.1rem; z-index:1; font-family:var(--font-display); font-size:1.15rem; color:var(--color-cream); }

/* Testimonials — scroll snap row */
.testimonial-row{
  display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1.2rem; margin:0 -1.5rem; padding-inline:1.5rem;
  scrollbar-width:thin; scrollbar-color:var(--color-gold-dim) transparent;
}
.testimonial-row::-webkit-scrollbar{ height:5px; }
.testimonial-row::-webkit-scrollbar-thumb{ background:var(--color-gold-dim); border-radius:5px; }
.testimonial-card{
  scroll-snap-align:start; flex:0 0 320px;
  background:var(--color-surface); border:1px solid var(--color-border-soft); border-radius:var(--radius-md);
  padding:2rem; display:flex; flex-direction:column; gap:1.2rem;
}
@media (min-width:640px){ .testimonial-card{ flex-basis:380px; } }
.testimonial-card .quote-mark{ font-family:var(--font-display); font-size:2.6rem; color:var(--color-gold); line-height:1; }
.testimonial-card p{ font-style:italic; font-family:var(--font-display); font-size:1.23rem; color:var(--color-cream); }
.testimonial-card cite{ font-style:normal; font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-muted); }

/* Opening times */
.hours-disclaimer{ margin-top:1.6rem; font-size:0.9rem; font-style:italic; color:var(--color-muted); text-align:center; }
.hours-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:700px){ .hours-grid{ grid-template-columns:1fr 1fr; } }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table tr{ border-bottom:1px solid var(--color-border-soft); }
.hours-table tr:last-child{ border-bottom:none; }
.hours-table td{ padding:0.85rem 0; font-size:0.95rem; }
.hours-table td:first-child{ color:var(--color-cream); font-weight:500; }
.hours-table td:last-child{ text-align:right; color:var(--color-cream-dim); }
.hours-card-title{ display:flex; align-items:center; gap:0.7rem; margin-bottom:1.2rem; }
.hours-card-title svg{ color:var(--color-gold); flex-shrink:0; }

/* CTA band */
.cta-band{
  text-align:center; padding:var(--space-2xl) 0;
  background:radial-gradient(ellipse at center, var(--color-purple-deep) 0%, var(--color-bg) 72%);
  border-top:1px solid var(--color-border-soft); border-bottom:1px solid var(--color-border-soft);
}
.cta-band h2{ margin-bottom:0.6rem; }
.cta-band p{ max-width:480px; margin-inline:auto; margin-bottom:2.2rem; font-size:1.1rem; }
.cta-band .btn-row{ justify-content:center; }

/* ==========================================================================
   Menu page — accordion
   ========================================================================== */
.menu-tabs-sticky{
  position:sticky; top:var(--header-h, 84px); z-index:90;
  background:rgba(12,9,16,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--color-border-soft); border-bottom:1px solid var(--color-border-soft);
  margin-bottom:var(--space-lg);
}
.menu-tabs{ display:flex; flex-wrap:wrap; gap:0.6rem; padding-block:1rem; }
.menu-tab{
  padding:0.6rem 1.3rem; border:1px solid var(--color-border-soft); border-radius:999px;
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-cream-dim);
  background:transparent; cursor:pointer; transition:all var(--dur) var(--ease);
}
.menu-tab:hover{ border-color:var(--color-gold-dim); color:var(--color-cream); }
.menu-tab.is-active{ background:var(--color-gold); border-color:var(--color-gold); color:#1a1220; }
/* External link styled as a tab (the live allergen guide). Its own class so the tab-scroll script leaves it alone. */
.menu-tab-link{
  display:inline-flex; align-items:center; gap:0.45rem; line-height:normal;
  padding:0.6rem 1.3rem; border:1px solid var(--color-gold-dim); border-radius:999px;
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-gold-light);
  transition:all var(--dur) var(--ease);
}
.menu-tab-link:hover{ border-color:var(--color-gold); background:rgba(200,162,77,0.1); color:var(--color-cream); }
@media (max-width:560px){
  .menu-tabs{ gap:0.4rem; padding-block:0.75rem; }
  .menu-tab, .menu-tab-link{ padding:0.5rem 0.85rem; font-size:0.72rem; letter-spacing:0.08em; }
}

.menu-section{ margin-bottom:var(--space-2xl); scroll-margin-top:7rem; }
.menu-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.2rem; flex-wrap:wrap; border-bottom:1px solid var(--color-border); padding-bottom:1.2rem; }
.menu-section-head h2{ margin-bottom:0; }
.menu-section-head p{ max-width:420px; font-style:italic; font-family:var(--font-display); font-size:1.13rem; color:var(--color-gold-light); }

.dish-list{ display:flex; flex-direction:column; }
.dish{ border-bottom:1px solid var(--color-border-soft); }
.dish-trigger{
  width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  background:none; border:none; text-align:left; cursor:pointer; padding:1.35rem 0;
  color:inherit;
}
.dish-name{ font-family:var(--font-display); font-size:1.28rem; color:var(--color-cream); display:flex; align-items:baseline; gap:0.6rem; }
.dish-tag{ font-family:var(--font-body); font-size:0.62rem; letter-spacing:0.08em; color:var(--color-gold); border:1px solid var(--color-gold-dim); border-radius:3px; padding:0.15rem 0.4rem; text-transform:uppercase; }
.dish-price{ font-family:var(--font-display); font-size:1.15rem; color:var(--color-gold-light); white-space:nowrap; display:flex; align-items:center; gap:0.9rem; }
.dish-price .chevron{ transition:transform var(--dur) var(--ease); color:var(--color-muted); }
.dish[data-open="true"] .chevron{ transform:rotate(180deg); }
.dish-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 380ms var(--ease); }
.dish-panel-inner{ overflow:hidden; }
.dish[data-open="true"] .dish-panel{ grid-template-rows:1fr; }
.dish-desc{ padding:0 0 1.5rem; max-width:640px; font-size:0.98rem; color:var(--color-cream-dim); }

.menu-intro-media{ position:relative; border-radius:var(--radius-md); overflow:hidden; margin-bottom:var(--space-2xl); }
.menu-intro-media img{ width:100%; height:min(60vh,480px); object-fit:cover; }
/* z-index:1 — without it this pseudo-element, generated after .menu-intro-media-content in
   paint order, stacks on top of the title and washes it out instead of sitting behind it. */
.menu-intro-media::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(9,6,13,0.85) 0%, rgba(9,6,13,0.1) 60%); }
.menu-intro-media-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:2.5rem; }
.menu-note{
  border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.6rem 1.8rem; margin-top:var(--space-lg);
  font-size:0.9rem; color:var(--color-muted);
}

/* Downloadable menu links */
.menu-downloads{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:1.5rem; }
.menu-downloads a{
  display:inline-flex; align-items:center; gap:0.5rem; font-size:0.82rem; letter-spacing:0.08em;
  border:1px solid var(--color-border-soft); border-radius:999px; padding:0.55rem 1.1rem; color:var(--color-cream-dim);
  transition:all var(--dur) var(--ease);
}
.menu-downloads a:hover{ border-color:var(--color-gold); color:var(--color-gold-light); }

/* ==========================================================================
   Experience / About page
   ========================================================================== */
.story-block{ display:flex; flex-direction:column; gap:var(--space-2xl); }
.pull-quote{
  font-family:var(--font-display); font-style:italic; color:var(--color-gold-light);
  font-size:clamp(1.58rem,1.28rem + 1.4vw,2.18rem); line-height:1.4; max-width:820px;
  border-left:2px solid var(--color-gold); padding-left:2rem; margin:0;
}
.chef-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:700px){ .chef-grid{ grid-template-columns:repeat(3,1fr); } }
.chef-card{ text-align:center; }
.chef-card .chef-photo{ width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; object-position:center top; margin-bottom:1.2rem; border:1px solid var(--color-border); }
.chef-card h4{ margin-bottom:0.2rem; }
.chef-card .role{ font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--color-gold); }
.chef-card .chef-note{ font-size:0.93rem; font-style:italic; color:var(--color-muted); margin-top:0.6rem; }
/* Team bios: native expand/collapse, so no script is needed and it works with keyboard and screen readers. */
.chef-bio{ margin-top:1.1rem; }
.chef-bio summary{
  display:inline-flex; align-items:center; gap:0.55rem; cursor:pointer; list-style:none;
  padding:0.5rem 1.1rem; border:1px solid var(--color-gold-dim); border-radius:999px;
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-gold-light);
  transition:all var(--dur) var(--ease);
}
.chef-bio summary::-webkit-details-marker{ display:none; }
.chef-bio summary::after{
  content:''; width:0.4rem; height:0.4rem; margin-top:-0.15rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform var(--dur) var(--ease);
}
.chef-bio[open] summary::after{ transform:rotate(-135deg); margin-top:0.15rem; }
.chef-bio summary:hover{ border-color:var(--color-gold); background:rgba(200,162,77,0.1); color:var(--color-cream); }
.chef-bio summary:focus-visible{ outline:2px solid var(--color-gold); outline-offset:3px; }
.chef-bio .when-open{ display:none; }
.chef-bio[open] .when-open{ display:inline; }
.chef-bio[open] .when-closed{ display:none; }
.chef-bio-text{ text-align:left; margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--color-border-soft); }
.chef-bio-text p{ font-size:0.93rem; line-height:1.75; margin-bottom:0.9rem; }
.chef-bio-text p:last-child{ margin-bottom:0; }

.value-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:700px){ .value-grid{ grid-template-columns:repeat(3,1fr); } }
.value-card{ border-top:1px solid var(--color-border); padding-top:1.5rem; }
.value-card .num{ font-family:var(--font-display); font-size:0.85rem; color:var(--color-gold); }

/* ==========================================================================
   What's On page
   ========================================================================== */
.whats-on-empty{
  padding:2.4rem; text-align:center; font-style:italic; font-size:1.13rem; color:var(--color-muted);
  border:1px dashed var(--color-border); border-radius:var(--radius-md);
}
.whats-on-grid{ display:grid; gap:1.6rem; grid-template-columns:1fr; }
@media (min-width:640px){ .whats-on-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .whats-on-grid{ grid-template-columns:repeat(3,1fr); } }
.whats-on-card{
  border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden;
  background:linear-gradient(160deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.whats-on-card:hover{ border-color:var(--color-gold); transform:translateY(-4px); }
.whats-on-card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.whats-on-card-body{ padding:1.4rem 1.5rem 1.6rem; }
.whats-on-date{ font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-gold); }
.whats-on-card-body h4{ margin:0.3rem 0 0.4rem; }
.whats-on-card-body p{ font-size:0.9rem; margin:0; }

/* ==========================================================================
   Gift Voucher page
   ========================================================================== */
.voucher-steps{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:700px){ .voucher-steps{ grid-template-columns:repeat(3,1fr); } }
.voucher-step{ display:flex; gap:1.2rem; }
.voucher-step .step-num{
  flex-shrink:0; width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--color-gold-dim);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); color:var(--color-gold-light); font-size:1.1rem;
}

/* GiftUp checkout embed — the widget renders its own amount cards, form and payment step,
   so this just gives it a contained, on-brand frame to sit in. */
.giftup-embed{
  max-width:900px; margin-inline:auto; padding:2rem;
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  background:linear-gradient(160deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
}

/* Terms & conditions accordion, sitting directly beneath the embed above */
.giftup-terms{ max-width:760px; margin:var(--space-2xl) auto 0; }
.giftup-terms h3{ font-size:1.5rem; }

/* ==========================================================================
   Gallery page
   ========================================================================== */
.gallery-grid{ display:grid; gap:0.9rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .gallery-grid{ grid-template-columns:repeat(4,1fr); } }
.gallery-item{
  position:relative; overflow:hidden; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--color-surface);
}
.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1; transition:transform 700ms var(--ease); }
.gallery-item.tall img{ aspect-ratio:1/2; }
.gallery-item.wide img{ aspect-ratio:4/3; }
.gallery-item.panorama{ grid-column:span 2; }
.gallery-item.panorama img{ aspect-ratio:2560/1196; }
.gallery-item::after{ content:''; position:absolute; inset:0; background:rgba(9,6,13,0); transition:background var(--dur) var(--ease); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item:hover::after{ background:rgba(9,6,13,0.18); }
.gallery-item .expand-icon{
  position:absolute; top:0.9rem; right:0.9rem; width:30px; height:30px; border-radius:50%;
  background:rgba(9,6,13,0.55); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  color:var(--color-cream); opacity:0; transition:opacity var(--dur) var(--ease);
}
.gallery-item:hover .expand-icon{ opacity:1; }

.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(6,4,9,0.94);
  display:flex; align-items:center; justify-content:center; padding:3rem 1.5rem;
  opacity:0; pointer-events:none; transition:opacity 320ms var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:min(1100px,92vw); max-height:84vh; object-fit:contain; border-radius:var(--radius-md); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(244,238,225,0.06); border:1px solid var(--color-border-soft); border-radius:50%;
  color:var(--color-cream); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur), background var(--dur);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ border-color:var(--color-gold); background:rgba(200,162,77,0.1); }
.lightbox-close{ top:1.5rem; right:1.5rem; width:44px; height:44px; }
.lightbox-prev, .lightbox-next{ top:50%; transform:translateY(-50%); width:48px; height:48px; }
.lightbox-prev{ left:1rem; }
.lightbox-next{ right:1rem; }
.lightbox-caption{ position:absolute; left:0; right:0; bottom:1.6rem; text-align:center; font-family:var(--font-display); font-style:italic; font-size:1.13rem; color:var(--color-cream-dim); }

/* ==========================================================================
   Reservations / Contact page
   ========================================================================== */
.reserve-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:960px){ .reserve-grid{ grid-template-columns:1fr 1fr; gap:4rem; } }
.reserve-panel{
  background:var(--color-surface); border:1px solid var(--color-border-soft); border-radius:var(--radius-md);
  padding:2.4rem;
}
.reserve-panel.featured{ border-color:var(--color-border); }
.reserve-panel h3{ margin-bottom:0.6rem; }
.reserve-icon{ width:46px; height:46px; border-radius:50%; border:1px solid var(--color-gold-dim); display:flex; align-items:center; justify-content:center; color:var(--color-gold); margin-bottom:1.3rem; }

.contact-detail{ display:flex; gap:1rem; margin-bottom:1.4rem; }
.contact-detail svg{ flex-shrink:0; color:var(--color-gold); margin-top:0.2rem; }
.contact-detail strong{ display:block; color:var(--color-cream); font-weight:500; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.25rem; }
.contact-detail a, .contact-detail span{ color:var(--color-cream-dim); }
.contact-detail a:hover{ color:var(--color-gold-light); }

.form-field{ margin-bottom:1.4rem; }
.form-field label{ display:block; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-muted); margin-bottom:0.55rem; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background:var(--color-bg-alt); border:1px solid var(--color-border-soft); border-radius:var(--radius-sm);
  padding:0.85rem 1rem; color:var(--color-cream); font-family:var(--font-body); font-size:0.96rem;
  transition:border-color var(--dur) var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color:var(--color-gold); outline:none; }
.form-field textarea{ resize:vertical; min-height:120px; }
.form-row{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media (min-width:520px){ .form-row{ grid-template-columns:1fr 1fr; } }
.form-status{ font-size:0.85rem; margin-top:1rem; color:var(--color-gold-light); min-height:1.2em; }

/* Required-field validation: a field (or radio group) missing data gets a red border and its
   error message revealed; .form-field-error / .xmas-time-error stay hidden until flagged. */
.form-field-error{ display:none; font-size:0.8rem; color:var(--color-error); margin-top:0.5rem; }
.form-field-error.is-visible{ display:block; }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select{ border-color:var(--color-error); }
.form-field.has-error > label{ color:var(--color-error); }
.form-field.has-error .form-field-error{ display:block; }
.xmas-radio-row.has-error{ outline:1px solid var(--color-error); outline-offset:0.5rem; border-radius:var(--radius-sm); }
.xmas-time-field.has-error .xmas-time-grid{ outline:1px solid var(--color-error); outline-offset:0.4rem; border-radius:var(--radius-sm); }
.xmas-time-error{ display:none; font-size:0.8rem; color:var(--color-error); margin-top:0.6rem; }
.xmas-time-error.is-visible{ display:block; }
.xmas-radio-option{ font-weight:700; }

.map-frame{ border:1px solid var(--color-border-soft); border-radius:var(--radius-md); overflow:hidden; margin-top:var(--space-lg); }
.map-frame iframe{ width:100%; height:360px; border:0; filter:grayscale(0.4) invert(0.92) contrast(0.9); }

/* ==========================================================================
   Rooms page
   ========================================================================== */
.room-card{
  display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--color-border-soft); border-radius:var(--radius-md);
  overflow:hidden; margin-bottom:2.2rem;
}
@media (min-width:800px){ .room-card{ grid-template-columns:1.1fr 1fr; } }
.room-card:nth-child(even) .room-card-media{ order:2; }
@media (min-width:800px){ .room-card:nth-child(even) .room-card-media{ order:0; } }
/* The media column used to stretch full-height to match the text column, which crushed these
   wide room photos into a narrow sliver (badly cropping the room itself) whenever a room's
   description ran long. Sizing the image by its own aspect ratio instead, centred in whatever
   height the text ends up needing, keeps the whole room in shot. */
.room-card-media{ position:relative; align-self:center; }
.room-card-media img{ display:block; width:100%; height:auto; aspect-ratio:var(--room-ratio, 3/2); object-fit:cover; }
.room-card-body{ padding:2.4rem; display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.room-meta{ display:flex; flex-wrap:wrap; gap:1.4rem; margin:0.4rem 0 0.6rem; }
.room-meta span{ display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; letter-spacing:0.04em; color:var(--color-muted); }
.room-meta svg{ color:var(--color-gold); }
.room-card-body .btn{ align-self:flex-start; margin-top:0.6rem; }

/* ==========================================================================
   Legal pages (Privacy Policy, Legal Notice)
   ========================================================================== */
.legal-content{ max-width:760px; }
.legal-content .updated{ font-style:italic; font-size:1.13rem; color:var(--color-muted); margin-bottom:2.2rem; }
.legal-content h2{ margin-top:2.4rem; margin-bottom:0.9rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ margin-top:1.6rem; margin-bottom:0.6rem; font-size:1.05rem; color:var(--color-cream); }
.legal-content p{ line-height:1.7; }
.legal-content ul{ list-style:disc; padding-left:1.3rem; margin:0 0 var(--space-sm); }
.legal-content li{ color:var(--color-cream-dim); line-height:1.7; margin-bottom:0.4rem; }
.legal-content a{ color:var(--color-gold-light); text-decoration:underline; text-underline-offset:2px; }
.legal-content strong{ color:var(--color-cream); }

/* ==========================================================================
   Drinks price lists (menu page)
   ========================================================================== */
.drinks-sub{ padding:0 0 1.2rem; max-width:780px; }
.drinks-subhead{
  display:grid; grid-template-columns:minmax(0,1fr) repeat(var(--cols,1), var(--pw,4.9rem)); gap:0.5rem; align-items:end;
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-gold);
  margin:1.3rem 0 0.3rem; padding-bottom:0.5rem; border-bottom:1px solid var(--color-border);
}
.drinks-subhead .col{ text-align:right; color:var(--color-muted); letter-spacing:0.1em; }
.drinks-row{
  display:grid; grid-template-columns:minmax(0,1fr) repeat(var(--cols,1), var(--pw,4.9rem)); gap:0.5rem; align-items:baseline;
  padding:0.55rem 0; border-bottom:1px solid var(--color-border-soft);
}
.drinks-row .d-name{ color:var(--color-cream); font-size:0.98rem; }
.drinks-row .d-name .dish-tag{ margin-left:0.4rem; vertical-align:middle; }
.drinks-row .d-desc{ display:block; font-size:0.93rem; font-style:italic; color:var(--color-muted); margin-top:0.15rem; }
.drinks-row .d-price{ text-align:right; font-family:var(--font-display); font-size:1.05rem; color:var(--color-gold-light); white-space:nowrap; }
.drinks-note{ font-size:0.94rem; font-style:italic; color:var(--color-muted); margin:0.8rem 0 0; }
.drinks-promo{
  margin:0.4rem 0 0.4rem; padding:0.9rem 1.2rem; max-width:780px; text-align:center;
  border:1px dashed var(--color-gold-dim); border-radius:var(--radius-md);
  font-family:var(--font-display); font-size:1.15rem; color:var(--color-gold-light);
}
.menu-note a{ color:var(--color-gold-light); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:560px){
  .drinks-subhead, .drinks-row{ --pw:3.6rem; gap:0.35rem; }
  .drinks-row .d-price{ font-size:0.95rem; }
}

/* ==========================================================================
   Tripadvisor widgets
   ========================================================================== */
.hero-ta-badge{ position:absolute; top:calc(var(--header-h, 5rem) + 1rem); right:1rem; z-index:5; width:92px; }
@media (min-width:768px){ .hero-ta-badge{ right:2.5rem; width:112px; } }
.footer-ta{ width:84px; flex-shrink:0; }
/* Badge presented as a small plaque: the artwork is untouched, only the blank white margin is trimmed. */
.hero-ta-badge, .footer-ta{
  aspect-ratio:180 / 202; overflow:hidden; border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,162,77,0.55);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-ta-badge:hover, .footer-ta:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,0.55), 0 0 0 1px var(--color-gold); }
/* The Tripadvisor script injects fixed-size wrappers and a padded image; these overrides make it fit and crop the padding. */
.hero-ta-badge .TA_certificateOfExcellence, .footer-ta .TA_certificateOfExcellence,
.hero-ta-badge .widCOE2020, .footer-ta .widCOE2020{ width:100% !important; margin:0 !important; }
.hero-ta-badge a, .footer-ta a{ display:block; width:100% !important; }
.hero-ta-badge img, .footer-ta img{
  display:block; width:111.12% !important; max-width:none !important; height:auto !important;
  margin:-16.67% 0 0 -5.56% !important;
}

.footer-trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 2.2rem;
  padding:1.6rem 0 2rem; border-top:1px solid var(--color-border-soft);
}
.footer-reviews{ flex:1 1 300px; max-width:640px; min-width:0; overflow:hidden; }
@media (max-width:640px){ .footer-trust{ justify-content:center; } }
/* Reviews ticker: dark panel in the site palette; the Tripadvisor logo tile is left as supplied. */
.footer-reviews #CDSSCROLLINGRAVE{
  width:100% !important; box-sizing:border-box; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,0.035) !important; border:1px solid var(--color-border) !important;
}
.footer-reviews marquee{ width:calc(100% - 93px) !important; }
.footer-reviews marquee, .footer-reviews marquee *{ font-family:var(--font-body) !important; font-size:0.85rem !important; }
.footer-reviews .reviewTitle{ color:var(--color-cream) !important; }
.footer-reviews .reviewContribution{ color:var(--color-muted) !important; }
.footer-reviews .link, .footer-reviews .link a{ color:var(--color-gold-light) !important; }

/* ==========================================================================
   Embedded document (allergen guide)
   ========================================================================== */
.video-frame{
  max-width:960px; margin-inline:auto; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:0 24px 50px rgba(32,26,18,0.18); border:1px solid var(--color-border);
}
.video-frame video{ display:block; width:100%; aspect-ratio:16/9; background:#000; }
.embed-frame{
  margin:1.6rem 0 1rem; border:1px solid var(--color-border); border-radius:var(--radius-md);
  overflow:hidden; background:#fff;
}
.embed-frame iframe{ display:block; width:100%; height:min(78vh, 900px); min-height:520px; border:0; }
.embed-fallback{ font-size:0.9rem; color:var(--color-muted); }
.embed-fallback a{ color:var(--color-gold-light); text-decoration:underline; text-underline-offset:2px; }

/* ==========================================================================
   Responsive helpers
   ========================================================================== */
@media (max-width:479px){
  .btn{ font-size:0.72rem; letter-spacing:0.1em; padding:0.9rem 1.3rem; white-space:normal; text-align:center; }
}


/* Menu page — sub-headings within each menu */
.menu-subhead{ font-size:var(--step-h4); color:var(--color-gold-light); margin:2.6rem 0 0.4rem; }
.menu-subhead:first-of-type{ margin-top:0; }
.menu-subnote{ color:var(--color-muted); font-style:italic; font-family:var(--font-display); font-size:1.1rem; margin:0 0 1rem; max-width:680px; }
.menu-section .menu-note{ margin-top:1.2rem; }
.menu-feature{ border:2px solid var(--color-gold); border-radius:var(--radius-md); padding:1.4rem 1.8rem; margin:0 0 2.2rem; text-align:center; font-size:1.15rem; font-weight:600; line-height:1.7; color:var(--color-cream); background:rgba(200,162,77,0.06); }
.menu-feature strong{ color:var(--color-gold-light); font-weight:700; }
.motto-line{ display:block; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-gold-light); }