/*
 * site.css: the only stylesheet for spicelounge-friargate.co.uk.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for the self-hosted Haskoy and Bagnard files
 *   3. Base          reset and element defaults
 *   4. Layout        container, sections
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (the original Elementor kit; media queries can't use custom properties):
 *   mobile  <= 767px    tablet 768px-1024px    laptop 1025px-1366px    desktop >= 1367px
 *   The header switches to the burger menu at <= 1024px.
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes (.button--dark) instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (Elementor kit "post-9" global colours) */
  --color-primary: #4d919e;      /* teal: header bar, buttons, highlights */
  --color-secondary: #ecbe2d;    /* yellow: Order Now, accents */
  --color-text: #141414;         /* headings, dark footer background */
  --color-accent: #454545;       /* body copy */
  --color-white: #ffffff;
  --color-cream: #fff9f3;        /* alternate section background, cards */
  --color-border: #dddddd;
  --color-notice: #f8f8f8;
  --color-overlay-light: rgb(255 255 255 / 0.85);
  --color-star: #f0ad4e;

  /* Typography */
  --font-body: "Haskoy", Arial, sans-serif;
  --font-heading: "Bagnard", Georgia, serif;
  --tracking: -0.01em;
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 1rem;        /* 16px */
  --text-nav: 1.15rem;    /* 18.4px: nav, buttons */
  --text-md: 1.25rem;     /* 20px: body copy */
  --text-lg: 1.5rem;      /* 24px: lead copy */
  --h-accent: 2rem;       /* 32px */
  --h-text: 3rem;         /* 48px */
  --h-section: 4.5rem;    /* 72px */
  --h-display: 7rem;      /* 112px */
  --leading-body: 1.7;
  --leading-heading: 1.4;

  /* Spacing and shape */
  --gutter: 32px;
  --container: 1080px;
  --section-pad: 128px;
  --radius-sm: 16px;
  --radius: 24px;
  --radius-pill: 50px;
  --shadow-card: 0 0 8px 0 rgb(0 0 0 / 0.1);

  /* Motion */
  --duration: 300ms;
  --ease: ease;
}
@media (max-width: 1024px) {
  :root { --h-section: 3.5rem; --h-accent: 1.5rem; }
}
@media (max-width: 767px) {
  :root { --h-display: 5rem; --h-section: 2.75rem; --h-text: 2.25rem; --h-accent: 2rem; --section-pad: 80px; }
}

/* ============ 2. Fonts ============ */
/* Original uploaded files (SIL Open Font Licence), self-hosted unchanged. */
@font-face { font-family: "Haskoy"; src: url("/assets/fonts/haskoy-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Haskoy"; src: url("/assets/fonts/haskoy-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bagnard"; src: url("/assets/fonts/bagnard-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--color-text); background: var(--color-white); overflow-x: hidden; }
html.offcanvas-open, html.offcanvas-open body { overflow: hidden; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0; }
p:has(+ p) { margin-bottom: 20px; }   /* original kit custom CSS */
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
[id] { scroll-margin-top: 0; }

/* ============ 4. Layout ============ */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.section--cream { background: var(--color-cream); }

/* ============ 5. Components ============ */

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 8px 16px; background: var(--color-white); }
.skip-link:focus { left: 16px; }

/* === Component: page-title (WordPress page title kept in the markup but hidden, as on the original) === */
.page-title { display: none; }

/* === Component: icon-sprite (inline SVG symbols in the header partial) === */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* === Component: heading styles (the original kit's global typography) === */
.h-display, .h-section, .h-text, .h-accent { font-family: var(--font-heading); font-weight: 400; line-height: var(--leading-heading); letter-spacing: var(--tracking); color: var(--color-text); }
.h-display { font-size: var(--h-display); }
.h-section { font-size: var(--h-section); }
.h-text { font-size: var(--h-text); }
.h-accent { font-size: var(--h-accent); }
.text-body { font-size: var(--text-md); line-height: var(--leading-body); letter-spacing: var(--tracking); color: var(--color-accent); }
.text-lead { font-size: var(--text-lg); line-height: var(--leading-body); letter-spacing: var(--tracking); color: var(--color-accent); }
.text-body a, .text-lead a { text-decoration: underline; }

/* === Component: highlight (words on a soft rounded background; original "Highlighting" snippet) === */
.highlight { color: var(--color-primary); position: relative; display: inline-block; }
.highlight::before { content: ""; display: block; position: absolute; top: 4px; left: -12px; right: -12px; bottom: 4px; background: rgb(0 0 0 / 0.05); border-radius: 16px; }
@media (max-width: 767px) {
  .highlight { display: inline; }
  .highlight::before { content: none; }
}

/* === Component: button === */
.button { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 12px 32px; border: 0; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-white); font-family: var(--font-body); font-size: var(--text-nav); font-weight: 400; line-height: 1.4; letter-spacing: var(--tracking); text-decoration: none; cursor: pointer; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
.button--secondary { background: var(--color-secondary); color: var(--color-white); }
.button--yellow { background: var(--color-secondary); color: var(--color-text); }
.button--wide { padding-inline: 40px; }
.button--white { background: var(--color-white); color: var(--color-text); }
.button--dark { background: var(--color-accent); color: var(--color-white); font-family: var(--font-heading); font-size: 2rem; }
.button--swap:hover, .button--swap:focus-visible { background: var(--color-primary); color: var(--color-text); }
.button--swap-primary:hover, .button--swap-primary:focus-visible { background: var(--color-secondary); color: var(--color-text); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button-row--center { justify-content: center; }
@media (max-width: 767px) {
  .button-row--stack { flex-direction: column; align-items: flex-start; }
  .button-row--stack.button-row--center { align-items: center; }
}

/* === Component: site-header (fixed teal pill floating over the page; original header template 10) === */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 99; padding: 48px var(--gutter) 0; pointer-events: none; }
.site-header__bar { pointer-events: auto; display: flex; align-items: center; gap: 32px; max-width: var(--container); margin-inline: auto; padding: 16px 24px 16px 40px; background: var(--color-primary); border: 1px solid var(--color-border); border-radius: 100px; }
.site-header__brand { flex: 0 0 calc(19% - 21px); display: flex; justify-content: center; }
.site-header__logo img { width: 120px; max-width: 100%; }
.site-nav { flex: 1 1 auto; }
.site-header__actions { flex: 0 0 calc(19% - 21px); display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.site-header__order { white-space: nowrap; }
.nav-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-top: 6px; padding: 0; background: none; border: 0; color: var(--color-secondary); cursor: pointer; }
.nav-toggle svg { width: 26px; height: 18px; }
@media (max-width: 1024px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__brand { flex-basis: calc(40% - 16px); }
  .site-header__actions { flex: 1 1 calc(60% - 16px); }
}
@media (max-width: 767px) {
  .site-header__bar { padding: 16px 24px 12px; }
  .site-header__brand { flex-basis: calc(75% - 16px); }
  .site-header__actions { flex-basis: calc(25% - 16px); justify-content: space-around; }
  .site-header__order { display: none; }
}

/* === Component: site-nav (desktop menu with the "Menus" dropdown) === */
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 20px; }
.site-nav__list > li { position: relative; }
.site-nav__list > li > a { display: inline-flex; align-items: center; color: var(--color-white); font-size: var(--text-nav); line-height: 1.4; }
.site-nav__caret { width: 10px; height: 16px; margin-left: 10px; fill: currentColor; }
.site-nav__sub { position: absolute; top: 100%; left: 0; margin-top: 28px; min-width: 100%; background: var(--color-white); border: 1px solid var(--color-border); border-top: 0; visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s; z-index: 2; }
.site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; }   /* hover bridge over the gap */
.site-nav__has-sub:hover .site-nav__sub, .site-nav__has-sub:focus-within .site-nav__sub { visibility: visible; opacity: 1; }
.site-nav__sub a { display: block; padding: 12px 64px 12px 10px; white-space: nowrap; color: var(--color-text); font-size: var(--text-sm); line-height: 1.7; }
.site-nav__sub a:hover, .site-nav__sub a:focus-visible { background: var(--color-primary); color: var(--color-white); }
@media (max-width: 1366px) {
  .site-nav__list { gap: 0 11px; }
  .site-nav__list > li > a { font-size: 1.1rem; }
}

/* === Component: offcanvas + slide-menu (mobile menu panel from the right with a "Menus" sub-panel) === */
.offcanvas { position: fixed; inset: 0; z-index: 150; }
.offcanvas[hidden] { display: none; }
.offcanvas__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.25); }
.offcanvas__panel { position: absolute; top: 0; right: 0; width: 340px; max-width: 100%; height: 100vh; height: 100dvh; overflow-y: auto; background: var(--color-primary); box-shadow: 2px 8px 23px 3px rgb(0 0 0 / 0.2); transform: translateX(100%); transition: transform 0.5s ease; }
.offcanvas.is-open .offcanvas__panel { transform: none; }
.offcanvas__top { display: flex; justify-content: flex-end; }
.offcanvas__close { margin: 16px 16px 12px; padding: 8px; min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--color-white); cursor: pointer; }
.offcanvas__close svg { width: 22px; height: 32px; fill: currentColor; }
.slide-menu { overflow: hidden; border-top: 1px solid var(--color-overlay-light); }
.slide-menu__track { display: flex; width: 200%; transition: transform 0.3s ease; }
.slide-menu.is-sub .slide-menu__track { transform: translateX(-50%); }
.slide-menu__list { width: 50%; flex: 0 0 50%; }
.slide-menu:not(.is-sub) .slide-menu__sub, .slide-menu.is-sub .slide-menu__list:first-child { visibility: hidden; }
.slide-menu__list li { display: flex; border-bottom: 1px solid var(--color-overlay-light); }
.slide-menu__list a { flex: 1 1 auto; display: block; padding: 20px 24px; color: var(--color-white); background: var(--color-primary); font-size: var(--text-nav); line-height: 1.4; letter-spacing: var(--tracking); }
.slide-menu__list a:hover, .slide-menu__list a:focus-visible { color: var(--color-text); background: var(--color-secondary); }
.slide-menu__arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 64px; padding: 20px 0; background: var(--color-primary); color: var(--color-white); border: 0; border-left: 1px solid var(--color-overlay-light); cursor: pointer; }
.slide-menu__back .slide-menu__arrow { border-left: 0; border-right: 1px solid var(--color-overlay-light); }
.slide-menu__arrow:hover { background: var(--color-secondary); color: var(--color-text); }
.slide-menu__arrow svg { width: 8px; height: 16px; fill: currentColor; }

/* === Component: popup (native <dialog>; site.js opens/closes it) === */
.popup:focus { outline: none; }
.popup { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: visible; }
.popup[open] { animation: popup-fade 0.4s ease; }
.popup::backdrop { background: rgb(0 0 0 / 0.4); }
@keyframes popup-fade { from { opacity: 0; } to { opacity: 1; } }
.popup__close { position: absolute; top: 20px; right: 20px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: none; border: 0; color: var(--color-text); cursor: pointer; }
.popup__close svg { width: 24px; height: 24px; fill: currentColor; }
.popup__close--light { color: var(--color-white); }

/* Christmas Bookings popup (500px card) */
.popup--christmas { width: 540px; padding: 16px; }
.popup-christmas { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-white); backdrop-filter: blur(8px); max-height: calc(100vh - 64px); overflow-y: auto; text-align: center; }
.popup-christmas__image { width: 98%; height: 242px; margin-inline: auto; object-fit: cover; }
.popup-christmas__body { padding: 32px; }
.popup-christmas__title { font-family: var(--font-heading); font-size: var(--h-text); line-height: 1.4; letter-spacing: var(--tracking); color: var(--color-text); }
.popup-christmas__text { margin-top: 12px; font-size: var(--text-md); line-height: 1.7; color: var(--color-text); }
.popup-christmas__subtitle { margin-top: 24px; font-family: var(--font-heading); font-size: var(--h-accent); line-height: 1.4; letter-spacing: var(--tracking); color: var(--color-text); }
.popup-christmas__subtitle + .popup-christmas__text { margin-top: 0; }
.popup-christmas__subtitle--second + .popup-christmas__text { margin-top: 20px; }
.popup-christmas__cta { margin-top: 0; }
.popup-christmas__cta--last { margin-top: 24px; margin-bottom: 12px; }
.popup-christmas__body p:has(+ p) { margin-bottom: 0; }
@media (max-width: 767px) {
  .popup-christmas__body { padding: 24px; }
}

/* Early Bird popup (two columns, 800px) */
.popup--early-bird { width: 800px; }
.popup--early-bird::backdrop { background: rgb(0 0 0 / 0.1); }
.popup-offer { display: flex; overflow: hidden; border-radius: var(--radius); background: var(--color-white); }
.popup-offer__media { flex: 0 0 50%; }
.popup-offer__media img { width: 100%; height: 575px; object-fit: cover; }
.popup-offer__body { position: relative; flex: 0 0 50%; padding: 48px; }
.popup-offer__body .popup__close { top: 24px; right: 24px; }
.popup-offer__kicker { font-size: var(--text-sm); font-weight: 600; line-height: 1.7; color: var(--color-primary); }
.popup-offer__title { font-family: var(--font-heading); font-size: 2rem; line-height: 1.4; letter-spacing: var(--tracking); color: var(--color-text); }
.popup-offer__intro { margin-top: 16px; font-size: var(--text-sm); line-height: 1.7; color: var(--color-accent); }
.popup-offer__list { margin-top: 8px; }
.popup-offer__list li { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text); padding-block: 2px; }
.popup-offer__option { position: relative; padding-left: 19px; }
.popup-offer__option::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 1px; background: var(--color-text); }
.popup-offer__price { margin-top: 6px; font-size: var(--text-md); line-height: 1.7; color: var(--color-text); }
.popup-offer__small { margin-top: 16px; font-size: var(--text-xs); line-height: 1.2; color: var(--color-accent); }
.popup-offer__body p:has(+ p) { margin-bottom: 0; }
@media (max-width: 767px) {
  .popup--early-bird { padding: 20px; }
  .popup-offer { flex-direction: column; max-height: calc(100vh - 72px); overflow-y: auto; }
  .popup-offer__body { order: -1; padding: 32px; }
  .popup-offer__body .popup__close { top: 20px; right: 32px; }
  .popup-offer__body .popup__close svg { width: 20px; height: 20px; }
  .popup-offer__media img { height: auto; }
}

/* === Component: bg-slideshow (Swiper fade slideshow behind a section; original Elementor background slideshow) === */
.bg-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bg-slideshow .swiper, .bg-slideshow .swiper-wrapper, .bg-slideshow .swiper-slide { width: 100%; height: 100%; }
.bg-slideshow img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bg-slideshow .swiper-slide:not(:first-child) { visibility: hidden; }
.bg-slideshow .swiper-initialized .swiper-slide { visibility: visible; }
.bg-overlay { position: absolute; inset: 0; z-index: 1; background: rgb(20 20 20 / 0.4); opacity: var(--overlay, 0.5); pointer-events: none; }

/* === Component: page-hero (inner-page hero: slideshow or image, dark overlay, big white H1) === */
.page-hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 710px; padding: 0 var(--gutter); background: var(--color-text); overflow: hidden; }
.page-hero__content { position: relative; z-index: 2; padding-block: 240px; }
.page-hero__title { font-family: var(--font-heading); font-size: var(--h-display); line-height: var(--leading-heading); letter-spacing: var(--tracking); color: var(--color-white); text-align: center; overflow-wrap: break-word; }
.page-hero__title--small { font-size: var(--h-section); }
@media (max-width: 767px) {
  .page-hero { min-height: 550px; }
  .page-hero__content { padding-block: 200px 64px; }
}

/* === Component: jump-bar (dark bar of in-page links to menu sections) === */
.jump-bar { background: var(--color-text); padding: 24px var(--gutter); overflow: auto; }
.jump-bar__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 80px; max-width: 1280px; margin-inline: auto; }
.jump-bar__list a { color: var(--color-white); font-size: var(--text-md); line-height: 1.7; letter-spacing: var(--tracking); }
.jump-bar__list a:hover { color: var(--color-secondary); }
@media (max-width: 1366px) { .jump-bar__list { gap: 0 48px; } }
.jump-bar--tight .jump-bar__list { gap: 0 24px; }
@media (max-width: 1024px) { .jump-bar__list { gap: 0 24px; } }

/* === Component: menu-section (section heading + optional notice + grid of item cards) === */
.menu-section { padding: var(--section-pad) var(--gutter); scroll-margin-top: 0; }
.menu-section--cream { background: var(--color-cream); }
@media (min-width: 1025px) { .menu-section--flush-bottom { padding-bottom: 0; } }
@media (max-width: 1024px) { .menu-section--tablet-compact { padding-block: 80px; } }
@media (min-width: 768px) { .menu-section--short-bottom { padding-bottom: 50px; } }
.menu-section__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: 48px; }
.menu-section__title { text-align: center; }
.notice-box { padding: 32px; border-radius: 20px; background: var(--color-notice); font-size: var(--text-md); line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-text); }
.menu-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.menu-grid > * { width: calc(33.3% - 16px); }
.menu-grid--two > * { width: calc(50% - 12px); }
@media (max-width: 1024px) { .menu-grid > * { width: calc(50% - 12px); } }
@media (max-width: 767px) { .menu-grid > * { width: 100%; } }

/* === Component: menu-card (dish / wine card) === */
.menu-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); }
.menu-section:not(.menu-section--cream) .menu-card { background: transparent; }
.menu-card__title { font-size: var(--text-md); font-weight: 600; line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-text); }
.menu-card__title small { font-size: inherit; font-weight: 400; }
.menu-card__text { font-size: var(--text-sm); line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-accent); }
.menu-card__title--compact { font-size: 1.2rem; }
.menu-card__text--black { color: #000; }
.menu-card__text--strong { font-weight: 600; color: var(--color-text); }
.menu-card__spacer { height: 4px; }
.menu-card__image { width: 100%; }
.menu-card__tags { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
.menu-card__tags li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); line-height: 1.2; color: var(--color-accent); }
.menu-card__tags img { width: 14px; height: 14px; object-fit: contain; }
.menu-card__badge { position: absolute; top: -11px; right: 16px; z-index: 1; padding: 6px 12px; border-radius: 4px; background: var(--color-primary); color: var(--color-white); font-size: var(--text-xs); line-height: 1.2; letter-spacing: var(--tracking); }

/* === Component: contact-band (footer "Get in Touch" card + map image; anchor #contact) === */
.contact-band { padding: 120px var(--gutter); background: var(--color-white); }
.contact-band__inner { display: flex; gap: 32px; max-width: var(--container); margin-inline: auto; }
.contact-card { flex: 1 1 50%; padding: 56px 64px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.contact-card__title { font-family: var(--font-heading); font-size: var(--h-text); line-height: 1.4; letter-spacing: var(--tracking); color: var(--color-text); margin-bottom: 20px; }
.contact-card__list { display: flex; flex-direction: column; gap: 16px; }
.contact-card__divider { margin: 22px 0; border: 0; border-top: 1px solid var(--color-border); }
.icon-box { display: flex; align-items: flex-start; gap: 16px; }
.icon-box--location { gap: 12px; }
.icon-box__icon { flex: 0 0 auto; width: 28px; height: auto; }
.icon-box--location .icon-box__icon { width: 32px; }
.icon-box__icon-link { display: inline-flex; }
.icon-box__text { font-size: var(--text-md); line-height: 1.7; color: var(--color-accent); overflow-wrap: anywhere; }
.icon-box__text strong { font-weight: 600; }
.map-card { position: relative; flex: 1 1 50%; display: flex; flex-direction: column; align-items: center; }
.map-card__image { width: 100%; height: 512px; object-fit: cover; border-radius: var(--radius); }
.map-card__button { margin-top: -70px; margin-bottom: 20px; position: relative; }
@media (max-width: 1024px) {
  .contact-band { padding-block: 80px; }
  .contact-card { padding: 24px 32px; }
  .map-card__image { height: 450px; }
}
@media (max-width: 767px) {
  .contact-band__inner { flex-direction: column; }
  .contact-card__divider { margin: 24px 0; }
}

/* === Component: site-footer (dark footer + white copyright bar) === */
.site-footer { background: var(--color-text); color: var(--color-white); }
.site-footer__inner { display: flex; flex-direction: column; gap: 64px; max-width: var(--container); margin-inline: auto; padding: 160px 0; width: min(100% - 2 * var(--gutter), var(--container)); }
.site-footer__brand { display: flex; flex-direction: column; gap: 8px; }
.site-footer__name { font-family: var(--font-heading); font-size: var(--h-accent); line-height: 1.4; letter-spacing: var(--tracking); }
.site-footer__tagline { font-size: var(--text-lg); line-height: 1.7; letter-spacing: var(--tracking); }
.site-footer__contact { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; padding-block: 32px; border-top: 1px solid var(--color-white); border-bottom: 1px solid var(--color-white); }
.site-footer__item { font-size: var(--text-lg); line-height: 1.7; letter-spacing: var(--tracking); }
.site-footer__item--links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.site-footer__address { text-align: end; }
.site-footer__bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 40px; }
.site-footer__nav a { font-size: var(--text-lg); line-height: 1.7; }
.site-footer__nav a:hover { color: var(--color-secondary); }
.social-links { display: flex; gap: 12px; }
.social-links a { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; color: var(--color-white); }
.social-links svg { width: 25px; height: 25px; fill: currentColor; }
.site-footer__bar { background: var(--color-white); color: var(--color-text); padding: 20px var(--gutter); }
.site-footer__bar-inner { display: flex; justify-content: space-between; gap: 32px; max-width: var(--container); margin-inline: auto; }
.site-footer__bar p { margin: 0; font-size: var(--text-sm); line-height: 1.7; letter-spacing: var(--tracking); }
.site-footer__credit { text-align: end; }
.site-footer__credit a { color: inherit; }
@media (max-width: 1024px) {
  .site-footer__tagline, .site-footer__item, .site-footer__nav a { font-size: var(--text-md); }
}
@media (max-width: 767px) {
  .site-footer__inner { gap: 48px; padding-block: 80px; }
  .site-footer__contact { flex-direction: column; align-items: flex-start; padding-block: 24px; }
  .site-footer__item--links { gap: 8px; }
  .site-footer__address { text-align: start; }
  .site-footer__nav { display: none; }
  .site-footer__bar { padding: 20px; }
  .site-footer__bar-inner { flex-direction: column; gap: 12px; }
  .site-footer__credit { text-align: start; }
}

/* === Component: stars (inline SVG star rating) === */
.stars { display: inline-flex; gap: 4px; color: var(--color-star); }
.stars svg { width: 24px; height: 24px; fill: currentColor; }

/* === Component: slider (Swiper; library CSS in /assets/vendor/swiper-14.3.0/) === */
.swiper { --swiper-theme-color: var(--color-primary); }

/* === Component: gallery (GLightbox opens a.glightbox links) === */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery a { display: block; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 767px) { .gallery { grid-template-columns: 1fr; } }

/* === Component: reveal (GSAP animates these; hidden only once GSAP has loaded) === */
.reveal-ready [data-reveal] { visibility: hidden; }

/* ============ 6. Pages ============ */

/* === Component: split (two columns, heading left / copy right; stacks on mobile) === */
.split { display: flex; justify-content: space-between; gap: 24px 128px; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.split__main { flex: 0 0 41%; display: flex; flex-direction: column; gap: 20px; }
.split__side { flex: 0 0 44%; }
.split__side--offset { margin-top: 12px; }
@media (max-width: 1024px) { .split { gap: 32px 64px; } .split__main, .split__side { flex-basis: calc(50% - 32px); } }
@media (max-width: 767px) { .split { flex-direction: column; gap: 16px; } .split__side--offset { margin-top: 0; } }

/* === Page: / (home) === */
.home-hero { position: relative; min-height: 710px; }
.home-about { overflow-x: clip; display: flex; flex-direction: column; align-items: center; gap: 128px; padding: 112px 0; }
.home-about__intro { width: min(100% - 2 * var(--gutter), 800px); display: flex; flex-direction: column; align-items: center; }
.home-about__logo { width: 278px; height: 200px; object-fit: contain; margin-bottom: 20px; }
.home-about__title { font-family: var(--font-heading); font-size: 4.5rem; line-height: 1.4; letter-spacing: var(--tracking); text-align: center; color: var(--color-text); }
.home-about__photo { width: 100%; display: flex; justify-content: center; }
.home-about__photo img { width: 100vw; max-width: 1024px; border-radius: var(--radius); }
.home-about .split { align-self: stretch; }
.home-menus { position: relative; padding-top: 128px; background: var(--color-white); }
.home-menus__inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 32px; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.home-menus__cards { display: flex; gap: 32px; }
.menu-teaser { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 64px 32px; border-radius: var(--radius); background: var(--color-cream); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.menu-teaser > * { position: relative; }
.menu-teaser__title { font-family: var(--font-heading); font-size: 2rem; line-height: 1.4; letter-spacing: var(--tracking); color: var(--color-text); text-align: center; }
.home-menus__slideshow { position: relative; min-height: 800px; margin-top: -120px; border-radius: 0 0 1000px 1000px; overflow: hidden; }
.home-order { position: relative; margin-top: -150px; display: flex; flex-direction: column; align-items: center; gap: 128px; background: var(--color-white); border-radius: 1000px 1000px 0 0; }
.home-order__circle { position: relative; width: 500px; max-width: 100%; min-height: 500px; margin-top: -250px; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; border-radius: 50%; background: var(--color-primary) var(--pattern) center / 60% auto repeat; overflow: hidden; }
.home-order__circle::before { content: ""; position: absolute; inset: 0; background: var(--color-primary); opacity: 0.46; }
.home-order__circle > * { position: relative; }
.home-order__circle-title { max-width: 265px; font-family: var(--font-heading); font-size: 2rem; line-height: 1.4; letter-spacing: var(--tracking); color: var(--color-white); text-align: center; }
.home-order__circle-button { display: inline-block; padding: 24px 34px; border-radius: 100px; background: var(--color-cream); color: var(--color-primary); font-size: var(--text-md); line-height: 1.7; letter-spacing: var(--tracking); text-align: center; }
.home-order__title { max-width: 640px; text-align: center; padding-inline: var(--gutter); box-sizing: content-box; }
.app-band { align-self: stretch; min-height: 800px; display: flex; justify-content: center; align-items: center; padding: 0 var(--gutter); background: var(--app-bg) center / cover no-repeat; }
.app-band__card { width: 820px; display: flex; flex-direction: column; align-items: center; padding: 80px 64px; border-radius: var(--radius); background: var(--color-overlay-light); backdrop-filter: blur(8px); text-align: center; }
.app-band__card > * { max-width: 525px; }
.app-band__title { max-width: 460px; margin-bottom: 24px; }
.app-band__text { margin-bottom: 24px; }
.book-band { padding: 112px var(--gutter); background: var(--color-cream); }
.book-band__inner { display: flex; align-items: center; gap: 32px 80px; max-width: var(--container); margin-inline: auto; }
.book-band__main { flex: 0 0 calc(50% - 40px); display: flex; flex-direction: column; gap: 20px; }
.book-band__side { flex: 0 0 calc(50% - 40px); }
@media (max-width: 1024px) {
  .home-about__title { font-size: 3.5rem; }
  .home-about__intro { width: min(100% - 2 * var(--gutter), 640px); }
  .home-menus__cards { justify-content: center; }
  .home-order { margin-top: -200px; }
  .home-order__circle { margin-top: -150px; }
  .app-band__card { width: 600px; }
  .book-band__inner { align-items: flex-start; gap: 40px; }
  .book-band__main { flex-basis: calc(55% - 20px); }
  .book-band__side { flex-basis: calc(45% - 20px); }
}
@media (max-width: 767px) {
  .home-hero { min-height: 450px; }
  .home-about { gap: 80px; padding: 80px 0; }
  .home-about__title { font-size: 2.1rem; }
  .home-about__photo img { width: 100%; height: 300px; object-fit: cover; border-radius: 0; }
  .home-menus { padding-top: 80px; }
  .home-menus__cards { flex-direction: column; }
  .menu-teaser { flex: none; background: var(--color-cream) var(--teaser-bg) center / cover no-repeat; }
  .menu-teaser::before { content: ""; position: absolute; inset: 0; background: var(--color-cream); opacity: 0.65; }
  .home-menus__slideshow { min-height: 650px; }
  .home-order { gap: 80px; }
  .home-order__circle { width: 300px; min-height: 300px; gap: 16px; padding: 48px 64px; margin-top: -150px; }
  .home-order__circle-title { font-size: 1.3rem; }
  .home-order__circle-button { padding: 16px 24px; }
  .app-band__card { width: 100%; padding: 32px; }
  .app-band__text { font-size: var(--text-md); }
  .book-band { padding-block: 80px; }
  .book-band__inner { flex-direction: column; }
}

/* === Component: page-hero variants === */
.page-hero--small .page-hero__title { font-size: var(--h-section); }
.page-hero--offset { margin-top: 38px; }
.page-hero--short .page-hero__content { padding-bottom: 100px; }
.page-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero--plain { background: var(--color-cream); }
.page-hero--plain .page-hero__title { color: var(--color-text); }
@media (max-width: 767px) {
  .page-hero--offset { margin-top: 34px; }
  .page-hero--short .page-hero__content { padding-bottom: 64px; }
  .page-hero--image { min-height: 710px; }
  .page-hero--image .page-hero__content { padding-block: 240px; }
  .page-hero--plain { min-height: 600px; }
  .page-hero--plain .page-hero__content { padding-block: 180px; }
}

/* === Component: rich-text (copy pasted into the original's text editor: lists, bold, headings) === */
.rich-text { font-size: 20px; line-height: 34px; color: var(--color-text); }
.rich-text h1 { font-size: 2em; font-weight: 700; margin: 0.67em 0; }
.rich-text h2 { font-size: 1.5em; font-weight: 700; margin: 0.83em 0; }
.rich-text h3 { font-size: 1.17em; font-weight: 700; margin: 1em 0; }
.rich-text ul { list-style: disc; padding-left: 40px; margin: 1em 0; }
.rich-text li p { margin: 0; }
.rich-text strong, .rich-text b { font-weight: 600; }
.rich-text a { text-decoration: underline; }
.rich-text--lead { font-size: 24px; line-height: 40.8px; letter-spacing: var(--tracking); text-align: center; }
.rich-text--lead p:has(+ h2), .rich-text--lead p:has(+ h3) { margin-bottom: 0; }
@media (max-width: 1024px) { .rich-text--lead { font-size: 20px; line-height: 34px; } }

/* === Component: intro-panel + event-box (copy beside a grey "Next Event" box; Supper Club, Father's Day) === */
.intro-panel { padding: 128px var(--gutter); }
.intro-panel__inner { display: flex; gap: 20px; max-width: var(--container); margin-inline: auto; padding: 32px; border-radius: 20px; background: var(--color-white); }
.intro-panel__text { flex: 1 1 auto; font-size: var(--text-md); line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-text); }
.intro-panel__text.rich-text { line-height: 34px; }
.intro-panel__text.rich-text p:first-child { margin-top: 0; }
.event-box { flex: 0 0 354px; align-self: flex-start; display: flex; flex-direction: column; gap: 24px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #f1f1f1; text-align: center; }
.intro-panel:not(.intro-panel--wide-box) .event-box { align-self: stretch; }
.event-box__title { font-family: var(--font-heading); font-size: 2rem; line-height: 1.4; letter-spacing: var(--tracking); color: var(--color-primary); }
.event-box__detail { font-size: var(--text-lg); font-weight: 600; line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-text); }
.event-box__note { font-size: var(--text-md); line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-accent); }
.intro-panel--wide-box .event-box { flex-basis: 434px; }
.intro-panel--wide-box .event-box__title { font-size: 1.9rem; }
.intro-panel--wide-box .event-box__detail { font-size: 1.4rem; font-weight: 400; }
@media (max-width: 1024px) and (min-width: 768px) {
  .intro-panel__text { flex: 0 0 calc(78% - 10px); }
  .event-box, .intro-panel--wide-box .event-box { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 767px) {
  .intro-panel { padding-block: 80px; }
  .intro-panel__inner { flex-direction: column; gap: 5px; padding: 15px; }
  .event-box, .intro-panel--wide-box .event-box { flex-basis: auto; align-self: stretch; margin-top: 30px; }
  .event-box__detail { font-size: var(--text-md); }
  .intro-panel--wide-box .event-box__title { font-size: 1.4rem; }
  .intro-panel--wide-box .event-box__detail { font-size: 1.2rem; }
}

/* === Component: chutney-band (closing note under the Supper Club menu) === */
.chutney-band { padding: 0 var(--gutter) 128px; background: var(--color-cream); text-align: center; }
.chutney-band__text { max-width: var(--container); margin-inline: auto; font-family: var(--font-heading); font-size: var(--text-md); line-height: 1.4; letter-spacing: var(--tracking); color: var(--color-text); }
@media (max-width: 767px) { .chutney-band { padding: 0 25px 125px; } .chutney-band__text { font-size: 1rem; } }

/* === Component: media-intro (text beside a square image; Home Cooked Meals) === */
.media-intro { padding: 100px 50px; }
.media-intro__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 450px)); justify-content: center; }
.media-intro__text { min-height: 450px; font-size: var(--text-md); line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-text); }
.media-intro__media { display: flex; justify-content: center; align-items: center; min-height: 450px; }
.media-intro__media img { width: 410px; max-width: 100%; }
@media (max-width: 767px) {
  .media-intro { padding-inline: var(--gutter); }
  .media-intro__inner { grid-template-columns: minmax(0, 1fr); }
  .media-intro__text { min-height: 0; }
  .media-intro__media { min-height: 0; padding: 20px; }
}

/* === Component: event-panel + poster-pair (Christmas Party page) === */
.event-panel { padding: 128px var(--gutter); }
.event-panel__inner { max-width: var(--container); margin-inline: auto; padding: 32px; border-radius: 20px; background: var(--color-white); }
.event-panel__text { font-size: var(--text-md); line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-text); }
.event-panel__text a { color: #0000ee; }
.event-panel__text--spaced { margin-top: 50px; margin-bottom: 20px; }
.poster-pair { display: grid; grid-template-columns: 1fr 1fr; }
.poster-pair img { width: 100%; }
.poster-pair--buttons { margin-bottom: 20px; text-align: center; }
.poster-pair--buttons p { margin: 0; }
@media (max-width: 767px) {
  .event-panel { padding-block: 80px; }
  .event-panel__inner { padding: 15px; }
  .poster-pair { grid-template-columns: 1fr; }
  .poster-pair--buttons { gap: 20px; }
}

/* === Component: buffet (Saturday Buffet copy + poster) === */
.buffet { display: flex; max-width: 1280px; margin-inline: auto; }
.buffet__text { flex: 0 0 50%; padding-right: 28px; }
.buffet__text > h1:first-child { margin-top: 26.8px; }
.buffet__side { flex: 0 0 calc(50% - 56px); margin: 28px; }
.buffet__image { width: 100%; }
@media (max-width: 1279px) { .buffet { padding-left: var(--gutter); } }
@media (max-width: 767px) {
  .buffet { flex-direction: column; padding-left: 0; }
  .buffet__text { padding: 0 var(--gutter); }
  .buffet__side { margin: 28px; }
}

/* === Component: Christmas Day page blocks === */
.xmas-intro { padding: 194px var(--gutter) 0; }
.xmas-intro__text { max-width: 800px; margin-inline: auto; }
.xmas-poster { display: flex; justify-content: center; padding-inline: 80px; }
.xmas-poster img { width: 819px; }
.xmas-order { padding: 58px; text-align: center; }
.raw-block { max-width: 1280px; margin-inline: auto; }
.raw-block__inner { font-family: var(--font-body); font-size: 1rem; line-height: 22.4px; letter-spacing: var(--tracking); color: var(--color-text); }
.raw-block h2 { font-size: 1.5em; font-weight: 700; margin: 0.83em 0; }
.raw-block ul { list-style: disc; padding-left: 40px; margin: 1em 0; }
.raw-block li p { margin: 0; }
.raw-block p { margin: 1em 0; }
.raw-block a { color: #0000ee; text-decoration: underline; }
/* Switch: add .raw-block--styled to give the pasted block the site's copy style instead (see SITE.md) */
.raw-block.raw-block--styled .raw-block__inner { font-size: 20px; line-height: 34px; padding-inline: var(--gutter); }
.raw-block--styled a { color: inherit; }
@media (max-width: 1024px) { .xmas-poster { padding-inline: 0; } }
@media (max-width: 767px) {
  .xmas-intro { padding-top: 162px; }
  .raw-block__inner { font-size: 2.25rem; line-height: 50.4px; overflow-wrap: anywhere; }
}

/* === Component: reviews page (intro split, rating, stats band, review cards) === */
.reviews-intro { padding: 128px var(--gutter); }
.reviews-intro__inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: 64px; }
.split--reviews { width: 100%; align-items: center; gap: 24px 80px; }
.split--reviews .split__main { flex: 0 1 auto; }
.split--reviews .split__side { flex: 0 0 455px; display: flex; flex-direction: column; gap: 24px; }
.reviews-intro__actions { display: flex; align-items: center; gap: 24px; }
.rating-summary { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 0; font-size: var(--text-lg); line-height: 1.7; color: var(--color-text); }
.rating-summary__stars { display: inline-flex; gap: 4px; color: var(--color-star); }
.rating-summary svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.rating-summary__half { display: inline-block; width: 10px; overflow: hidden; }
.stats-band { display: flex; justify-content: space-between; align-items: flex-end; padding: 40px 64px; border-radius: var(--radius); background: var(--color-primary); color: var(--color-white); }
.stats-band__item { display: flex; flex-direction: column; gap: 12px; text-align: center; padding-inline: 0; }
.stats-band__number { font-family: var(--font-heading); font-size: var(--h-text); line-height: 1.4; letter-spacing: var(--tracking); }
.stats-band__label { font-size: var(--text-md); line-height: 1.7; letter-spacing: var(--tracking); }
.stats-band__button { font-size: var(--text-md); line-height: 1.7; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--container); margin: 0 auto; width: min(100% - 2 * var(--gutter), var(--container)); }
.review-card { color: inherit; display: flex; flex-direction: column; gap: 32px; padding: 48px 32px; border: 1px solid var(--color-border); border-radius: var(--radius); text-align: center; }
.review-card__stars { display: flex; justify-content: center; align-items: center; gap: 4px; height: 36px; margin: 0; color: var(--color-star); }
.review-card__stars svg { width: 24px; height: 24px; fill: currentColor; }
.review-card__quote { font-size: var(--text-md); line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-accent); }
.review-card__name { font-size: var(--text-sm); line-height: 1.7; letter-spacing: var(--tracking); color: var(--color-accent); }
@media (max-width: 1024px) {
  .reviews-intro { padding-block: 80px; }
  .split--reviews { align-items: flex-start; }
  .stats-band { flex-wrap: wrap; row-gap: 24px; }
  .stats-band__action { flex: 0 0 100%; }
  .rating-summary { display: none; }
  .split--reviews .split__side { flex-basis: 45%; }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .reviews-intro { padding-top: 80px; }
  .split--reviews { align-items: flex-start; }
  .split--reviews .split__side { flex-basis: auto; }
  .split--reviews .text-lead { font-size: var(--text-md); }
  .stats-band { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "c b" "a a" "d d"; gap: 24px 0; padding: 32px; align-items: start; }
  .stats-band__item:nth-child(1) { grid-area: a; }
  .stats-band__item:nth-child(2) { grid-area: b; }
  .stats-band__item:nth-child(3) { grid-area: c; }
  .stats-band__action { grid-area: d; text-align: center; }
  .reviews-grid { grid-template-columns: 1fr; }
}

/* === Component: gallery-section (photo grid pulled up over the cream hero) === */
.gallery-section { position: relative; z-index: 2; margin-top: -160px; padding: 0 var(--gutter); }
.gallery-section .gallery { max-width: var(--container); margin-inline: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 24px; }
.gallery__item { border-radius: var(--radius); overflow: hidden; }
.gallery__item img { width: 100%; aspect-ratio: 350 / 300; object-fit: cover; }
@media (max-width: 767px) {
  .gallery-section { margin-top: -80px; }
  .gallery-section .gallery { grid-template-columns: 1fr; }
}

/* === Page: 404.html === */
.not-found .page-hero__content { padding-block: 240px 120px; text-align: center; }
.page-hero__title--medium { font-size: var(--h-section); }
.not-found__text { margin: 16px auto 32px; max-width: 640px; }
@media (max-width: 767px) { .not-found .page-hero__content { padding-block: 200px 80px; } }

/* ============ 7. Utilities ============ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-center { text-align: center; }

/* ============ Reduced motion ============ */
@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; }
  [data-reveal] { visibility: visible !important; }
}