/* ============================================================
   AZTEC TEMPLATE — structural CSS
   Theme tokens (palette + pairing) live in tokens.html <style>.
   This file is palette-agnostic.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--ground);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---- shared ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--f-script);color:var(--accent);font-size:var(--script-size);line-height:1;display:block}
.no-script .eyebrow{font-family:var(--f-body);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.78rem;line-height:1.3}
.kicker{font-family:var(--f-body);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem}
.sec-h{font-family:var(--f-display);font-weight:600;text-transform:uppercase;font-size:var(--sec-size);line-height:1.02;letter-spacing:.005em;margin-top:.15em}
.link-cta{font-family:var(--f-body);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:3px;display:inline-block;transition:opacity .18s}
.link-cta:hover{opacity:.62}

/* ---- preview banner ---- */
.preview-banner{
  position:sticky;top:0;z-index:100;
  background:#2563eb;color:#fff;text-align:center;
  padding:8px 16px;font-size:.82rem;
  display:flex;justify-content:center;align-items:center;gap:16px;
}
.preview-banner a{color:#fff;text-decoration:underline}

/* theme picker (edit-mode only, deliberately plain) */
.theme-picker{display:flex;align-items:center;gap:8px}
.theme-picker__label{font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.theme-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  transition:transform .12s,box-shadow .12s;padding:0;outline:none}
.theme-swatch:hover{transform:scale(1.15)}
.theme-swatch--active{box-shadow:0 0 0 2px #fff;transform:scale(1.15)}
.theme-pairing-tile{width:auto;height:auto;border-radius:4px;padding:4px 10px;
  font-size:.95rem;font-weight:700;color:#fff;background:rgba(255,255,255,.15)}
.theme-picker__error{color:#fca5a5;font-weight:600;font-size:.75rem;margin-left:4px}

/* ---- edit overlay markers (edit-preview + edit mode) ---- */
.has-edit-markers [data-edit-section]{position:relative}
.edit-marker{
  position:absolute;top:14px;right:14px;z-index:25;
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:3px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;border:none;white-space:nowrap;
  transition:opacity .18s,transform .12s;
  line-height:1.3;
}
.edit-marker:hover{transform:translateY(-1px)}
/* sample — most prominent: solid dark pill, always visible */
.edit-marker--sample{
  background:rgba(30,30,30,.88);color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  opacity:1;
}
/* partial — mid-weight: translucent dark, always visible, quieter than sample */
.edit-marker--partial{
  background:rgba(30,30,30,.62);color:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  opacity:1;
}
/* real — always visible but quietest: understated pill, present but calm */
.edit-marker--real{
  background:rgba(30,30,30,.42);color:rgba(255,255,255,.78);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  opacity:1;
}
/* dot indicator for sample/partial */
.edit-marker__dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.edit-marker--sample .edit-marker__dot{background:#60a5fa}
.edit-marker--partial .edit-marker__dot{background:#fbbf24}
/* pencil icon for real/hover state */
.edit-marker__icon{width:12px;height:12px;flex-shrink:0;opacity:.8}
/* Markers only render in preview/edit mode — no public breakpoint needed */

/* ============================ UTILITY BAR ============================ */
.utility-bar{background:var(--accent);color:var(--on-accent);
  font-family:var(--f-body);font-size:.82rem;font-weight:500;letter-spacing:.02em;
  line-height:1.3}
.utility-bar__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:var(--utility-bar-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.utility-bar__ann{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.utility-bar__soc{display:flex;align-items:center;gap:14px;flex-shrink:0}
.utility-bar__icon{width:20px;height:20px;color:var(--on-accent);opacity:.85;
  transition:opacity .18s;display:block}
.utility-bar__icon:hover,.utility-bar__icon:focus-visible{opacity:1}
.utility-bar__follow{color:var(--on-accent);opacity:.85;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:opacity .18s}
.utility-bar__follow:hover,.utility-bar__follow:focus-visible{opacity:1}

/* ============================ NAV ============================ */
/* Default: solid bar (safe fallback if JS disabled). JS adds .over-hero
   when the hero is visible, which makes it transparent. */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;
  height:var(--topbar-h);
  background:var(--surface);color:var(--ink);
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  transition:background .35s,color .35s,box-shadow .35s,top .35s}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:100%;
  display:flex;align-items:center;justify-content:space-between}
/* Offset nav for utility bar ONLY while over the hero (band is visible).
   Once scrolled past the hero, nav sits at top:0 — no gap above it. */
.has-utility-bar .nav.over-hero{top:var(--utility-bar-h)}
.has-preview-banner .nav{top:var(--edit-bar-h,0px)}
.has-utility-bar.has-preview-banner .nav.over-hero{top:calc(var(--utility-bar-h) + var(--edit-bar-h,0px))}
/* Transparent state over the hero — applied by IntersectionObserver */
.nav.over-hero{background:transparent;color:var(--on-dark);box-shadow:none}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.75rem;letter-spacing:.04em;text-transform:uppercase}
.brand__logo{max-height:52px;max-width:min(220px,35vw);width:auto;object-fit:contain;transition:opacity .35s}
/* Logo variant swap: light surface → dark logo; dark surface → light logo.
   Over hero → always light logo (hero is a photograph). */
.brand__logo--light{display:none}
.brand__logo--dark{display:block}
[data-surface="dark"] .brand__logo--light{display:block}
[data-surface="dark"] .brand__logo--dark{display:none}
.nav.over-hero .brand__logo--light{display:block}
.nav.over-hero .brand__logo--dark{display:none}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-family:var(--f-body);font-weight:500;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;opacity:.92;transition:opacity .18s,color .35s}
.nav-links a:hover{opacity:.6}
.book{border:1.5px solid currentColor;border-radius:2px;padding:11px 22px;font-weight:600;letter-spacing:.14em;transition:background .2s,color .2s,border-color .35s}
.book:hover{background:var(--ink);color:var(--surface);opacity:1}
.nav.over-hero .book:hover{background:var(--on-dark);color:var(--panel)}
.nav-toggle{display:none;background:none;border:none;color:inherit;cursor:pointer;padding:8px;z-index:25}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;transition:transform .3s,opacity .3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{
  display:none;position:fixed;inset:0;z-index:35;
  background:color-mix(in srgb, var(--panel) 97%, transparent);
  flex-direction:column;align-items:center;justify-content:center;gap:28px;
  color:var(--on-dark);
}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--f-display);font-weight:600;text-transform:uppercase;font-size:1.6rem;letter-spacing:.06em}
.mobile-menu .book{font-size:1rem;margin-top:12px}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--on-dark)}
.hero__bg{position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:var(--hero-filter,none)}
.hero__bg--fallback{background:linear-gradient(160deg,
  color-mix(in srgb, var(--panel) 90%, black) 0%,
  color-mix(in srgb, var(--panel) 70%, black) 55%,
  color-mix(in srgb, var(--panel) 50%, black) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,0) 78%),
             linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 40%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gut) clamp(56px,9vh,110px);
  max-height:calc(100svh - var(--topbar-h));overflow:hidden}
.hero-copy{max-width:22ch}
.hero .kicker{color:var(--on-dark);opacity:.9;white-space:nowrap;
  font-size:clamp(.58rem, 1.8vw, .72rem);letter-spacing:clamp(.1em, .5vw, .2em)}
.hero h1{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:var(--hero-size);line-height:.96;letter-spacing:.004em;margin:.28em 0 .55em}
/* Tagline type ramp — sized for worst-case (widest font pairing) with the
   service line near the CTA (out of the tagline's vertical budget).
   Narrow pairings get slightly more headroom than they need. */
.hero h1.tagline--m{font-size:clamp(2rem, 4.5vw, 3.6rem)}
.hero h1.tagline--l{font-size:clamp(1.6rem, 3.5vw, 2.7rem)}
.hero-dishes{font-weight:500;font-size:clamp(.9rem,1.3vw,1.02rem);max-width:52ch;opacity:.9;line-height:1.5}
.hero-service{font-family:var(--f-body);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.7rem;color:var(--on-dark);opacity:.7;margin-top:6px;line-height:1.8}
.hero-service__item{white-space:nowrap}
.hero-service__item:not(:last-child)::after{content:" | ";opacity:.5}
.hero-actions{margin-top:34px;display:flex;gap:18px;flex-wrap:wrap}
.btn-solid{background:var(--accent);color:var(--on-accent);font-family:var(--f-body);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;padding:15px 30px;border-radius:2px;transition:transform .18s,filter .18s}
.btn-solid:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-ghost{border:1.5px solid var(--on-dark);color:var(--on-dark);font-family:var(--f-body);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;padding:15px 30px;border-radius:2px;transition:background .2s,color .2s}
.btn-ghost:hover{background:var(--on-dark);color:var(--panel)}

/* animation */
.rise{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.rise-1{animation-delay:.15s}.rise-2{animation-delay:.30s}.rise-3{animation-delay:.45s}.rise-4{animation-delay:.60s}
@keyframes rise{to{opacity:1;transform:none}}

/* ============================ MENU TEASER ============================ */
.menu-teaser{padding:clamp(40px,7vw,80px) 0 clamp(64px,9vw,104px)}
.menu-head{text-align:center;margin-bottom:52px}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;max-width:900px;margin:0 auto}
.mcard{background:var(--surface);border-radius:4px;overflow:hidden;transition:transform .22s,box-shadow .22s;
  box-shadow:0 1px 0 rgba(0,0,0,.05)}
.mcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(30,18,10,.14)}
.mcard__img{aspect-ratio:4/3;width:100%;height:auto;display:block;object-fit:cover}
.mcard__img--placeholder{aspect-ratio:4/3;background:linear-gradient(160deg,
  color-mix(in srgb, var(--muted) 60%, var(--panel)),
  color-mix(in srgb, var(--panel) 80%, black))}
.mcard__img--typo{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:var(--panel);text-align:center;padding:20px}
.mcard__img--typo span{font-family:var(--f-display);color:var(--on-dark);font-size:clamp(1.4rem,2.2vw,1.8rem);
  text-transform:uppercase;letter-spacing:.08em;line-height:1.2}
.mcard-label{padding:20px 22px;display:flex;align-items:center;justify-content:space-between}
.mcard-label span{font-family:var(--f-body);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.86rem}
.mcard-label em{font-style:normal;color:var(--accent);font-size:1.1rem;transition:transform .2s}
.mcard:hover .mcard-label em{transform:translateX(4px)}
.menu-foot{text-align:center;margin-top:48px}

/* ============================ MENU PAGE (inner page) ============================ */

/* inner-page hero — calmer than home, dark band with centred title */
.page-hero{position:relative;background:var(--panel);color:var(--on-dark);text-align:center;
  padding:clamp(48px,8vw,86px) var(--gut)}
.page-hero .eyebrow{color:var(--accent)}
.page-hero h1{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;letter-spacing:.01em;margin-top:.1em}

/* nav override — sticky dark bar on inner pages (instead of fixed overlay) */
.menu-page .nav, .story-page .nav{position:sticky;top:0;z-index:40;
  background:var(--panel);color:var(--on-dark);padding-block:0;height:var(--topbar-h);box-shadow:none}
.menu-page .brand__logo--light, .story-page .brand__logo--light{display:block}
.menu-page .brand__logo--dark, .story-page .brand__logo--dark{display:none}
.menu-page.has-preview-banner .nav, .story-page.has-preview-banner .nav{top:var(--edit-bar-h)}

/* sticky menu sub-nav */
.subnav{position:sticky;top:var(--topbar-h);z-index:30;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(30,18,10,.05)}
.menu-page.has-preview-banner .subnav{top:calc(var(--topbar-h) + var(--edit-bar-h))}
.subnav-inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:6px;padding:0 var(--gut);
  height:var(--subnav-h);align-items:center;overflow-x:auto;scrollbar-width:none}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav a{white-space:nowrap;font-family:var(--f-body);font-weight:600;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 16px;
  border-radius:999px;transition:color .15s,background .15s;flex:0 0 auto}
.subnav a:hover{color:var(--ink)}
.subnav a.active{color:var(--on-accent);background:var(--accent)}

/* menu blocks */
.menu-block{padding:clamp(44px,7vw,76px) 0 clamp(20px,3vw,32px);
  scroll-margin-top:calc(var(--topbar-h) + var(--subnav-h))}
.menu-page.has-preview-banner .menu-block{scroll-margin-top:calc(var(--topbar-h) + var(--subnav-h) + var(--edit-bar-h))}
.menu-block + .menu-block{border-top:1px solid var(--line)}
.menu-page .menu-head{text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.menu-page .menu-head .sec-h{font-size:clamp(2rem,4vw,3rem)}

/* sections */
.section{margin-bottom:clamp(34px,5vw,54px)}
.section-h{font-family:var(--f-display);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);letter-spacing:.02em;
  padding-bottom:10px;margin-bottom:18px;
  border-bottom:2px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.section-desc{color:var(--muted);font-size:.94rem;margin-top:-10px;margin-bottom:16px}
.section-note{font-size:.88rem;color:var(--muted);font-style:italic;margin-top:-8px;margin-bottom:16px}

/* subsections */
.subsection-h{font-family:var(--f-display);font-weight:500;text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.15rem);color:var(--muted);letter-spacing:.04em;
  margin-top:28px;margin-bottom:12px}
.subsection-desc{color:var(--muted);font-size:.9rem;margin-top:-6px;margin-bottom:12px}

/* item rows */
.item{padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.item:last-child{border-bottom:none}
.item-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.item-name{font-family:var(--f-body);font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:.01em;min-width:0}
.item-tags{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle}
.tag{font-family:var(--f-body);font-weight:600;font-size:.6rem;letter-spacing:.05em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:3px;
  padding:1px 5px;text-transform:uppercase}
.item-price{font-family:var(--f-display);font-weight:500;font-size:1.05rem;color:var(--ink);white-space:nowrap;flex-shrink:0}
.item-desc{color:var(--muted);font-size:.92rem;margin-top:4px;max-width:64ch}
.item-extras{color:var(--muted);font-size:.86rem;margin-top:5px}

/* inline variants */
.variants{display:flex;flex-wrap:wrap;gap:18px;margin-top:7px}
.variant{font-family:var(--f-body);font-size:.86rem;color:var(--ink)}
.variant .vname{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:600;margin-right:6px}
.variant .vprice{font-family:var(--f-display);font-weight:500}

/* columnar variants (price-table) */
.col-table{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:8px}
.col-table__hdr{text-align:left}
.col-table__var-hdr{font-family:var(--f-body);font-weight:600;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  width:clamp(76px,9vw,96px);box-sizing:border-box;
  text-align:right;padding:8px 0 10px 16px;white-space:nowrap}
.col-table__sub-hdr{font-family:var(--f-display);font-weight:500;text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.15rem);color:var(--muted);letter-spacing:.04em;
  padding:20px 0 8px}
.col-table__item{padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  vertical-align:baseline}
.col-table__price{font-family:var(--f-display);font-weight:500;font-size:1.02rem;
  width:clamp(76px,9vw,96px);box-sizing:border-box;
  text-align:right;padding:10px 0 10px 16px;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);vertical-align:baseline}
.col-table__row--feat .col-table__item{font-weight:600}
.col-table tr:last-child .col-table__item,
.col-table tr:last-child .col-table__price{border-bottom:none}
.col-table + .col-table{margin-top:20px}
.col-table__sub-desc{padding:0 0 8px;color:var(--muted);font-size:.86rem}
@media (max-width:680px){
  .col-table thead{display:none}
  .col-table{table-layout:auto}
  .col-table,.col-table tbody,.col-table tr{display:block;width:100%;max-width:100%}
  .col-table__row{padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
  .col-table__item,.col-table__sub-hdr,.col-table__sub-desc{display:block;width:100%;max-width:100%;box-sizing:border-box}
  .col-table__item{padding:0 0 5px;border-bottom:0}
  .col-table__price{display:flex;width:100%;max-width:100%;box-sizing:border-box;justify-content:space-between;gap:16px;padding:3px 0;border-bottom:0;font-family:var(--f-body);font-size:.86rem}
  .col-table__price::before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  .col-table__price:empty{display:none}
}

/* menu footer blocks (dietary legend, surcharges, info notes) */
.menu-footer{margin-top:clamp(24px,3vw,40px);padding-top:clamp(20px,3vw,32px);
  border-top:1px solid var(--line)}
.menu-footer__block{margin-bottom:20px}
.menu-footer__block:last-child{margin-bottom:0}
.menu-footer__title{font-family:var(--f-body);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.72rem;color:var(--muted);margin-bottom:10px}
.menu-footer__badges{display:flex;flex-wrap:wrap;gap:8px}
.menu-footer__badge{font-size:.82rem;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:3px;padding:4px 12px}
.menu-footer__defs{list-style:none;display:flex;flex-wrap:wrap;gap:6px 24px}
.menu-footer__def{display:flex;gap:6px;font-size:.84rem;color:var(--muted)}
.menu-footer__def dt{font-weight:600;color:var(--accent)}
.menu-footer__def dd{margin:0}
.menu-footer__text p{font-size:.86rem;color:var(--muted);margin-bottom:4px}

/* ============================ FEATURE BLOCKS ============================ */
.feature{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  height:min(78vh,640px);max-width:var(--maxw);margin:clamp(40px,7vw,80px) auto;border-radius:4px;overflow:hidden}
.feature.flip .feat-media{order:2}
.feat-media{position:relative;overflow:hidden}
.feat-media__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.feat-media__img--placeholder{position:absolute;inset:0;background:linear-gradient(160deg,
  color-mix(in srgb, var(--accent) 40%, var(--panel)) 0%,
  color-mix(in srgb, var(--accent) 20%, var(--panel)) 60%,
  color-mix(in srgb, var(--panel) 85%, black) 100%)}
.feat-body{display:flex;align-items:center}
.feat-inner{padding:clamp(40px,6vw,88px);max-width:34rem}
.feat-inner .sec-h{margin-bottom:.5em}
.feat-inner p{color:var(--muted);margin-bottom:1.6em}

/* ============================ STORY TEASER ============================ */
.story{text-align:center;padding:clamp(84px,12vw,140px) var(--gut);background:var(--ground)}
.story-inner{max-width:44rem;margin:0 auto}
.story p{color:var(--muted);font-size:1.06rem;margin:.4em 0 1.8em}

/* ============================ GALLERY ============================ */
.gallery-section{padding:clamp(64px,9vw,104px) 0}
.gallery-head{text-align:center;margin-bottom:48px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-grid__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr 1fr}}
/* Masonry gallery layout (aspect-aware) */
.gallery-section .masonry{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:8px;gap:12px}
.gallery-section .masonry__item{overflow:hidden;border-radius:4px;display:block}
.gallery-section .masonry__item img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){.gallery-section .masonry{grid-template-columns:1fr 1fr}}

/* ============================ EVENTS ============================ */
.events-section{padding:clamp(64px,9vw,104px) 0}
.events-head{text-align:center;margin-bottom:48px}
.events-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.event-card{background:var(--ground);border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
  border-radius:4px;overflow:hidden}
.event-card__img{width:100%;aspect-ratio:16/9;overflow:hidden}
.event-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.event-card__body{padding:32px 30px}
.event-card:not(.event-card--has-img){padding:32px 30px}
.event-card__date{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:.88rem;color:var(--accent);margin-bottom:8px}
.event-card h3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.15rem;margin-bottom:8px}
.event-card p{font-size:.95rem;color:var(--muted);line-height:1.55}

/* ============================ OUR STORY PAGE ============================ */
.story-page-body{padding:clamp(48px,7vw,80px) 0 clamp(64px,9vw,104px)}
.story-blocks{display:flex;flex-direction:column;gap:clamp(48px,7vw,72px)}

/* divider — heading only */
.story-block--divider{text-align:center;padding:24px 0}

/* heading — shared */
.story-block__heading{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(1.4rem,3vw,2rem);line-height:1.15;margin-bottom:.6em}

/* prose — text only */
.story-block--prose p{font-size:1.05rem;line-height:1.7;color:var(--muted);margin-bottom:1em;
  max-width:680px}
.story-block--prose p:last-child{margin-bottom:0}

/* image-full — image only */
.story-block__img-full{width:100%;border-radius:4px;display:block}

/* split — text + image side by side */
.story-block--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,56px);
  align-items:center}
.story-block--img-right .story-block__text{order:1}
.story-block--img-right .story-block__media{order:2}
.story-block--img-left .story-block__text{order:2}
.story-block--img-left .story-block__media{order:1}
.story-block__text p{font-size:1.05rem;line-height:1.7;color:var(--muted);margin-bottom:1em}
.story-block__text p:last-child{margin-bottom:0}
.story-block__media{overflow:hidden;border-radius:4px}
.story-block__media img{width:100%;aspect-ratio:4/3;display:block;object-fit:cover;object-position:center}
/* Stacked layout: image full-width on top, text below */
.story-block--stacked .story-block__media--wide{border-radius:6px;overflow:hidden;margin-bottom:clamp(16px,3vw,28px)}
.story-block--stacked .story-block__media--wide img{width:100%;aspect-ratio:16/10;display:block;object-fit:cover;object-position:center}
.story-block--stacked .story-block__text p{font-size:1.05rem;line-height:1.7;color:var(--muted);margin-bottom:1em}
.story-block--stacked .story-block__text p:last-child{margin-bottom:0}
@media (max-width:680px){
  .story-block--split{grid-template-columns:1fr}
  .story-block--img-right .story-block__media,
  .story-block--img-left .story-block__media{order:1}
  .story-block--img-right .story-block__text,
  .story-block--img-left .story-block__text{order:2}
}

/* empty state */
.story-empty{text-align:center;color:var(--muted);font-size:1.05rem;padding:48px 0}

/* ============================ FIND US ============================ */
.find{padding:clamp(64px,9vw,104px) 0}
.find-head{text-align:center;margin-bottom:48px}
/* Location content blocks */
.loc-addr{font-size:.95rem;color:var(--muted);line-height:1.6;margin-bottom:6px}
.loc-contact{font-size:.9rem;margin-bottom:4px}
.loc-contact a{color:var(--accent);font-weight:500}
.loc-contact+.loc-hrs{margin-top:14px}
.loc-addr p{margin-bottom:2px}
.loc-hrs{border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);padding-top:14px;margin-bottom:14px}
.loc-hrow{display:grid;grid-template-columns:80px 1fr;gap:8px;padding:3px 0;font-size:.9rem}
.loc-hday{font-weight:600;color:var(--ink);white-space:nowrap}
.loc-hval{color:var(--ink)}
.loc-closed{font-style:italic;color:var(--muted)}
.loc-closures{margin-top:10px;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--ink) 12%,transparent)}
.loc-closure{font-size:.82rem;color:var(--accent);font-weight:500;margin-bottom:2px}
.loc-acts{display:flex;gap:10px;margin-top:auto}
.loc-btn{font-family:var(--f-body);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;
  border-radius:3px;text-decoration:none;text-align:center;cursor:pointer;font-weight:600;border:none}
.loc-btn--solid{background:var(--accent);color:var(--on-accent)}
.loc-btn--solid:hover{opacity:.9}
.loc-btn--ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.loc-btn--ghost:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* Rich single location (N=1 cards, or tabbed panel) */
.find-single{background:var(--surface);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  border-radius:10px;overflow:hidden;max-width:720px;margin:0 auto}
.find-single__info{padding:36px 40px;display:flex;flex-direction:column}
.find-single__name{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px}
.find-single .loc-addr{font-size:1rem}
.find-single .loc-hrow{grid-template-columns:80px 1fr;font-size:.95rem}
.find-single .loc-btn{padding:11px 22px;font-size:.8rem}
/* Card grid (N=2..4) */
.find-cards{display:grid;gap:22px;max-width:960px;margin:0 auto}
.find-cards--n2{grid-template-columns:repeat(2,1fr)}
.find-cards--n3{grid-template-columns:repeat(3,1fr)}
.find-cards--n4{grid-template-columns:repeat(2,1fr)}
@media(min-width:1000px){.find-cards--n4{grid-template-columns:repeat(4,1fr)}}
.find-card{background:var(--surface);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  border-radius:10px;overflow:hidden;padding:24px 22px;display:flex;flex-direction:column}
.find-card__name{font-family:var(--f-display);font-weight:700;font-size:1.3rem;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
/* Location tabs */
.loc-pills{display:flex;justify-content:center;gap:8px;margin-bottom:32px;flex-wrap:wrap}
.loc-pill{font-family:var(--f-body);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:.78rem;padding:8px 20px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
  border-radius:100px;background:transparent;color:var(--muted);cursor:pointer;transition:all .18s}
.loc-pill:hover{border-color:var(--accent);color:var(--ink)}
.loc-pill.active{background:var(--accent);border-color:var(--accent);color:var(--on-dark)}
.loc-panel--hidden{display:none}
.foot-col .foot-suburbs a{display:inline;margin-bottom:0;opacity:.82}
.foot-col .foot-suburbs a:hover{opacity:1}

/* ============================ FOOTER ============================ */
.footer{background:var(--panel);color:var(--on-dark);padding:clamp(56px,8vw,90px) 0 34px;margin-top:clamp(64px,9vw,104px)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.foot-brand .fb{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:1.7rem;letter-spacing:.04em}
.foot-brand .ft{font-family:var(--f-script);color:var(--accent);font-size:1.5rem;margin:6px 0 14px}
.no-script .foot-brand .ft{font-family:var(--f-body);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.78rem}
.foot-brand p{font-size:.9rem;opacity:.72;max-width:32ch;line-height:1.55}
.foot-col h4{font-family:var(--f-body);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:var(--accent);margin-bottom:16px}
.foot-col a,.foot-col p{display:block;font-size:.92rem;opacity:.82;margin-bottom:10px;transition:opacity .18s}
.foot-col a:hover{opacity:1}
.socials{display:flex;gap:14px;margin-top:18px}
.socials a{width:34px;height:34px;border:1px solid color-mix(in srgb,var(--on-dark) 30%,transparent);
  border-radius:50%;display:grid;place-items:center;opacity:.85}
.socials a:hover{opacity:1;border-color:var(--accent)}
.socials svg{width:16px;height:16px;fill:var(--on-dark)}
.foot-bottom{margin-top:52px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--on-dark) 15%,transparent);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;opacity:.6}
.foot-bottom a{color:inherit}

/* ============================ RESPONSIVE ============================ */
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .feature,.feature.flip{grid-template-columns:1fr;height:auto}
  .feature.flip .feat-media{order:0}
  .feat-media{aspect-ratio:4/3}
  .find-cards{grid-template-columns:1fr}
  .find-single__info{padding:28px 24px}
  .foot-top{grid-template-columns:1fr 1fr}
  .menu-footer__defs{flex-direction:column;gap:4px}
}
@media (max-width:560px){
  .foot-top{grid-template-columns:1fr}
  .hero-copy{max-width:100%}
  .hero-service{display:flex;flex-wrap:wrap;gap:2px 14px;max-width:100%;line-height:1.5}
  .hero-service__item:not(:last-child)::after{content:none}
  .item-price{font-size:.95rem}
  .loc-htime{display:block}
  .loc-hsep{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{animation:none;opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── Shop section ── */
.shop{padding:var(--sec-v,80px) 0;background:var(--surface)}
.shop .eyebrow{text-transform:uppercase;font-size:.75rem;letter-spacing:.15em;color:var(--accent);font-weight:600}
.shop .sec-h{margin-top:.25rem;margin-bottom:2rem}
.shop-grid{display:grid;gap:24px}
.shop-grid--n1{grid-template-columns:1fr;max-width:420px}
.shop-grid--n2{grid-template-columns:repeat(2,1fr)}
.shop-grid--n3{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.shop-grid--n2,.shop-grid--n3{grid-template-columns:1fr}}
.shop-card{border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--ground);display:flex;flex-direction:column;gap:16px}
.shop-card--soldout{opacity:.6}
.shop-card__body{flex:1}
.shop-card__name{font-family:var(--f-display);font-size:1.2rem;margin-bottom:6px}
.shop-card__desc{font-size:.9rem;color:var(--muted);line-height:1.5;margin-bottom:10px}
.shop-card__meta{display:flex;gap:12px;align-items:baseline;font-size:.85rem;flex-wrap:wrap}
.shop-card__price{font-weight:700;color:var(--ink)}
.shop-card__date{color:var(--muted)}
.shop-card__avail{font-size:.8rem;color:var(--muted);margin-top:6px}
.shop-card__soldout-badge{display:inline-block;padding:2px 10px;background:var(--line);border-radius:4px;font-weight:600;font-size:.75rem;color:var(--ink)}
.shop-card__buy{display:flex;gap:10px;align-items:center}
.shop-card__qty-row{display:flex;align-items:center;gap:6px}
.shop-card__qty-label{font-size:.8rem;color:var(--muted)}
.shop-card__qty-select{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:.85rem;background:var(--ground);color:var(--ink)}
.shop-card__btn{flex:1;padding:10px 20px;background:var(--accent);color:var(--on-accent);border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:var(--f-body);transition:opacity .15s}
.shop-card__btn:hover{opacity:.85}

/* ============================ VOUCHERS PAGE ============================ */
.vouchers-page__body{padding:clamp(56px,8vw,94px) 0 96px;background:var(--ground)}
.voucher-purchase{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:clamp(42px,7vw,82px);align-items:center;text-align:left}
.voucher-purchase__visual{min-width:0}
.voucher-card{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.46/1;min-height:370px;padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;color:var(--on-dark);background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);border-radius:4px;box-shadow:0 30px 70px color-mix(in srgb,var(--ink) 24%,transparent)}
.voucher-card::before{content:"";position:absolute;z-index:-2;inset:-35%;background:repeating-conic-gradient(from 18deg at 50% 50%,color-mix(in srgb,var(--accent) 22%,transparent) 0 9deg,transparent 9deg 27deg);transform:rotate(-8deg)}
.voucher-card::after{content:"";position:absolute;z-index:-1;inset:10px;border:1px solid color-mix(in srgb,var(--on-dark) 20%,transparent);pointer-events:none}
.voucher-card__preview{position:absolute;top:22px;right:24px;padding:4px 9px;border:1px solid color-mix(in srgb,var(--on-dark) 28%,transparent);font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.voucher-card__brand{height:40px;max-width:170px;display:flex;align-items:center;margin-bottom:9px}
.voucher-card__brand img{width:auto;max-width:100%;max-height:40px;object-fit:contain}
.voucher-card__monogram{width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--on-dark) 40%,transparent);font-family:var(--f-display);font-size:1.25rem;font-weight:700}
.voucher-card__restaurant{font-size:.67rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.voucher-card__kind{font-family:var(--f-display);font-size:clamp(1.35rem,2.7vw,2rem);font-weight:600;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;margin-top:5px}
.voucher-card__value{font-family:var(--f-display);font-size:clamp(2.7rem,6vw,4.2rem);font-weight:700;line-height:1;color:var(--accent);margin:auto 0 12px}
.voucher-card__recipient{display:flex;align-items:baseline;gap:9px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.voucher-card__recipient strong{font-family:var(--f-script);font-size:1.25rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--accent)}
.no-script .voucher-card__recipient strong{font-family:var(--f-body);font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.voucher-card__meta{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-top:14px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--on-dark) 22%,transparent);font-size:.63rem;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;opacity:.76}
.voucher-card__meta span:last-child{max-width:190px;text-align:right}
.voucher-purchase__intro h2{font-family:var(--f-display);font-size:clamp(1.65rem,3vw,2.35rem);font-weight:600;text-transform:uppercase;line-height:1.08;margin-bottom:10px}
.voucher-purchase__intro p{max-width:44ch;color:var(--muted);font-size:.96rem}
.voucher-form{display:grid;gap:24px;margin-top:30px}
.voucher-form__group{border:0;min-width:0}
.voucher-form__group legend,.voucher-form__gift-fields label>span{display:block;margin-bottom:10px;font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.voucher-form__choices,.voucher-form__recipient-type{display:flex;flex-wrap:wrap;gap:9px}
.voucher-choice{position:relative;cursor:pointer}
.voucher-choice input{position:absolute;opacity:0;pointer-events:none}
.voucher-choice span{display:block;padding:10px 17px;border:1px solid color-mix(in srgb,var(--ink) 19%,transparent);border-radius:2px;background:var(--surface);font-size:.88rem;font-weight:600;transition:border-color .18s,background .18s,color .18s}
.voucher-choice input:checked+span{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.voucher-choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.voucher-form__gift-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.voucher-form__gift-fields[hidden]{display:none}
.voucher-form__gift-fields label{display:block}
.voucher-form__message{grid-column:1/-1}
.voucher-form input,.voucher-form textarea{width:100%;padding:12px 13px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:2px;background:var(--surface);color:var(--ink);font:inherit;font-size:.9rem;outline:none}
.voucher-form textarea{resize:vertical;min-height:88px}
.voucher-form input:focus,.voucher-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}
.voucher-form__gift-fields small{font-size:.65rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.voucher-form__expiry{font-size:.75rem;color:var(--muted);margin-top:-7px}
.voucher-form__submit{width:100%;padding:14px 20px;border:1px solid var(--accent);border-radius:2px;background:var(--accent);color:var(--on-accent);font-family:var(--f-body);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:opacity .18s,transform .18s}
.voucher-form__submit:hover{opacity:.88;transform:translateY(-1px)}
.voucher-form__submit:disabled{opacity:.46;cursor:not-allowed;transform:none}
.voucher-notice{display:grid;gap:5px;margin-top:28px;padding:18px 20px;border-left:3px solid var(--accent);background:var(--surface);font-size:.88rem}
.voucher-notice span{color:var(--muted)}
.voucher-terms{margin-top:24px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);font-size:.8rem;color:var(--muted)}
.voucher-terms summary{cursor:pointer;color:var(--ink);font-weight:600}
.voucher-terms p{margin-top:12px;white-space:pre-line}
@media (max-width:860px){
  .voucher-purchase{grid-template-columns:1fr;max-width:680px}
}
@media (max-width:560px){
  .vouchers-page__body{padding:40px 0 64px}
  .voucher-card{width:100%;min-height:300px;aspect-ratio:auto;padding:24px}
  .voucher-card__preview{top:17px;right:18px}
  .voucher-card__meta{align-items:flex-start;flex-direction:column;gap:5px}
  .voucher-card__meta span:last-child{text-align:left}
  .voucher-form__gift-fields{grid-template-columns:1fr}
}