/* =============================================================================
   SPICE N MOR — spicenmor.com.au
   Brand: #0E0B09 ink · #7C5222 → #B98741 → #E3BE7E gold · #F2EBDD cream
   Type:  Playfair Display (wordmark/display) · Cinzel (descriptors)
          Cormorant Garamond (body, menus)
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  --ink:        #0E0B09;
  --ink-2:      #14100C;
  --ink-3:      #1C1611;
  --bronze:     #7C5222;
  --gold:       #B98741;
  --gold-light: #E3BE7E;
  --cream:      #F2EBDD;

  --cream-70: rgba(242,235,221,.70);
  --cream-50: rgba(242,235,221,.50);
  --cream-32: rgba(242,235,221,.32);
  --line:     rgba(185,135,65,.24);
  --line-soft:rgba(242,235,221,.10);

  --gold-grad: linear-gradient(105deg,#7C5222 0%,#B98741 34%,#E3BE7E 62%,#B98741 100%);

  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-descr:   'Cinzel', 'Playfair Display', Georgia, serif;
  --f-body:    'Cormorant Garamond', Georgia, serif;

  /* Menu typography, taken from the printed menu (Spice N Mor Menu font
     change.pdf). Used for the menu section and the signature dish cards so
     the site and the physical menu read as the same document. */
  --f-menu-head:  'Arsenal SC', 'Cinzel', Georgia, serif;        /* section + group labels */
  --f-menu-item:  'Libre Baskerville', Georgia, serif;           /* dish names + prices     */
  --f-menu-body:  'Crimson Pro', 'Cormorant Garamond', Georgia, serif; /* descriptions      */

  --wrap: 1280px;
  --gut:  clamp(20px, 5vw, 72px);
  --sec:  clamp(84px, 11vw, 168px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--f-body);
  font-size:clamp(17px,1.05vw,19px);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,iframe{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,h4,h5,h6,p,figure,ul{ margin:0 }
ul{ padding:0; list-style:none }
::selection{ background:rgba(185,135,65,.35); color:var(--cream) }

:focus-visible{
  outline:1.5px solid var(--gold-light);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.section{ padding-block:var(--sec); position:relative }

/* --------------------------------------------------------- shared elements */
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  font-family:var(--f-descr);
  font-size:clamp(10px,.72vw,12px);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.35rem;
}
.eyebrow--center{ text-align:center }

.display{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.15rem,4.4vw,4.1rem);
  line-height:1.1;
  letter-spacing:-.012em;
  color:var(--cream);
}
.display em{
  font-style:italic;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.prose p{ color:var(--cream-70); max-width:56ch }
.prose p + p{ margin-top:1.05rem }

/* buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  padding:.95rem 2.1rem;
  border-radius:999px;
  font-family:var(--f-descr);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             background-position .6s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
.btn--sm{ padding:.72rem 1.5rem; font-size:.66rem }

.btn--gold{
  background:var(--gold-grad);
  background-size:200% 100%;
  color:#120D08;
  box-shadow:0 8px 26px -14px rgba(185,135,65,.85);
}
.btn--gold:hover{ background-position:100% 0; transform:translateY(-2px);
  box-shadow:0 14px 34px -14px rgba(227,190,126,.7) }

.btn--ghost{
  border:1px solid var(--line);
  color:var(--cream);
}
.btn--ghost:hover{ border-color:var(--gold-light); color:var(--gold-light); transform:translateY(-2px) }

.link-underline{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--f-descr);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light);
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
  transition:gap .35s var(--ease), border-color .35s var(--ease);
}
.link-underline svg{ width:18px; height:18px }
.link-underline:hover{ gap:1.15rem; border-color:var(--gold-light) }

/* the SM mark --------------------------------------------------------------- */
/* Custom properties are the only styling that crosses into <use> shadow
   content, so the mark's variants are driven entirely through them. */
.mark{ width:44px; height:44px; flex:none; --sm-lotus:inline; --sm-letter:40px; --sm-shift:0px }
.mark--sm{ width:42px; height:42px }
.mark--lg{ width:88px; height:88px }

/* Brand rule: below 40px the lotus drops away; ring + letters carry the mark. */
@media (max-width:600px){
  .mark--sm{ width:36px; height:36px; --sm-lotus:none; --sm-letter:46px; --sm-shift:3px }
}

/* photo slot ----------------------------------------------------------------
   A warm gradient sits underneath every photo. If an image is missing or still
   loading, that fallback shows and the section still reads as designed.

   The image is a real <img> rather than a CSS background: url() inside a
   custom property resolves against the stylesheet, not the document, so
   inline --src values silently gained an assets/css/ prefix. <img> also buys
   lazy loading and alt text.                                                 */
.shot{
  display:block; position:relative;
  width:100%; height:100%;
  background-image:
    radial-gradient(120% 120% at 30% 15%, rgba(185,135,65,.30), transparent 58%),
    radial-gradient(100% 100% at 80% 90%, rgba(124,82,34,.42), transparent 60%),
    linear-gradient(150deg,#241a12 0%,#150F0B 55%,#0E0B09 100%);
  overflow:hidden;
}
.shot > img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s var(--ease);
}
.shot::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(185,135,65,.16);
  pointer-events:none;
}
.shot--round{ border-radius:50% }
.shot--round::after{ border-radius:50% }

/* film grain ---------------------------------------------------------------- */
.grain{
  position:absolute; inset:0; z-index:2;
  pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>");
}

/* scroll reveal ------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}


/* ═══════════════════════════════════════════════════════════════════ HEADER */
/* NOTE: no backdrop-filter on the header. filter/backdrop-filter/transform on
   a fixed ancestor makes it the containing block for position:fixed children,
   which trapped the fullscreen mobile nav inside the 60px header box. The
   solid background below is visually equivalent. */
.site-head{
  position:fixed; inset:0 0 auto; z-index:80;
  transition:background .45s var(--ease), border-color .45s var(--ease),
             padding .45s var(--ease);
  border-bottom:1px solid transparent;
  padding-block:.9rem;
}
.site-head.is-stuck{
  background:rgba(12,10,8,.95);
  border-bottom-color:var(--line-soft);
  padding-block:.45rem;
}
.site-head__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; gap:2rem;
}

.brand{ display:flex; align-items:center; gap:.95rem; flex:none }
.brand__rule{ width:1px; height:34px; background:var(--line) }
.brand__text{ display:flex; flex-direction:column; line-height:1 }
.brand__name{
  font-family:var(--f-display);
  font-size:1.32rem; letter-spacing:.005em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand__sub{
  font-family:var(--f-descr);
  font-size:.55rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-top:.42rem;
}

.nav{ display:flex; gap:2.4rem; margin-inline:auto }
.nav a{
  position:relative;
  font-family:var(--f-descr);
  font-size:.7rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-70);
  padding-block:.4rem;
  transition:color .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--gold-light);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover, .nav a.is-active{ color:var(--cream) }
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1); transform-origin:left }

.site-head__end{ display:flex; align-items:center; gap:1.4rem; flex:none }
.head-tel{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--f-descr); font-size:.7rem;
  letter-spacing:.14em; color:var(--cream-70);
  transition:color .35s var(--ease);
}
.head-tel svg{ width:15px; height:15px }
.head-tel:hover{ color:var(--gold-light) }

.burger{ display:none; width:30px; height:22px; position:relative }
.burger span{
  position:absolute; left:0; height:1px; width:100%;
  background:var(--cream); transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:2px }
.burger span:nth-child(2){ top:10px }
.burger span:nth-child(3){ top:18px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }


/* ═════════════════════════════════════════════════════════════════════ HERO */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:clamp(120px,16vh,170px) var(--gut) 0;
  overflow:hidden;
  isolation:isolate;
}
.hero__glow{
  position:absolute; inset:-25% -10% auto; height:130%;
  background:
    radial-gradient(48% 46% at 50% 34%, rgba(185,135,65,.24), transparent 70%),
    radial-gradient(70% 55% at 50% 100%, rgba(124,82,34,.20), transparent 72%);
  z-index:-1;
}
.hero__inner{ max-width:900px; text-align:center; position:relative; z-index:3 }

.hero__word{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(3.4rem,11.5vw,9.5rem);
  line-height:.94;
  letter-spacing:-.022em;
  margin-block:.1em .18em;
}
.hero__word .gold-text{
  background:linear-gradient(102deg,#8A5C28 0%,#B98741 26%,#F0D6A5 48%,#B98741 70%,#8A5C28 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 9s ease-in-out infinite;
}
@keyframes sheen{ 0%,100%{ background-position:0% 0 } 50%{ background-position:100% 0 } }
@media (prefers-reduced-motion:reduce){ .hero__word .gold-text{ animation:none } }

.hero__tag{
  font-family:var(--f-descr);
  font-size:clamp(.68rem,1.15vw,.9rem);
  letter-spacing:.44em; text-transform:uppercase;
  color:var(--gold-light);
  padding-left:.44em;
}
.hero__lede{
  margin:2rem auto 0;
  max-width:52ch;
  font-size:clamp(1.02rem,1.3vw,1.22rem);
  color:var(--cream-70);
}
.hero__lede em{ font-style:italic; color:var(--gold-light) }

.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.6rem }

.hero__bar{
  position:relative; z-index:3;
  margin-top:auto;
  width:100%; max-width:var(--wrap);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.1rem 1.8rem;
  padding:1.5rem 0 1.7rem;
  border-top:1px solid var(--line-soft);
  font-family:var(--f-descr);
  font-size:.66rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cream-50);
}
.hero__bar span{ display:inline-flex; align-items:center; gap:.6rem }
.hero__bar svg{ width:14px; height:14px; color:var(--gold) }
.hero__bar a:hover{ color:var(--gold-light) }
.hero__bar-sep{ width:4px; height:4px; border-radius:50%; background:var(--line) }
@media (max-width:900px){
  .hero__bar{ flex-direction:column; gap:.75rem; text-align:center }
  /* Beats `.hero__bar span` on specificity. */
  .hero__bar .hero__bar-sep{ display:none }
}
.mer{ font-size:.78em; letter-spacing:.1em }

/* floating plates */
.plate{ position:absolute; z-index:1; pointer-events:none }
.plate span{ display:block; width:100%; aspect-ratio:1; box-shadow:0 40px 80px -30px rgba(0,0,0,.9) }
.plate--l{ width:clamp(150px,17vw,268px); left:clamp(-40px,3vw,72px); top:26vh }
.plate--r{ width:clamp(160px,19vw,300px); right:clamp(-46px,2vw,54px); top:38vh }
@media (max-width:1080px){ .plate{ opacity:.35 } }
@media (max-width:820px){ .plate{ display:none } }

.scroll-cue{
  position:absolute; left:50%; bottom:calc(1.5rem + 74px); z-index:4;
  transform:translateX(-50%);
  width:22px; height:36px; border:1px solid var(--line); border-radius:999px;
}
.scroll-cue span{
  position:absolute; left:50%; top:8px; margin-left:-1.5px;
  width:3px; height:7px; border-radius:2px; background:var(--gold-light);
  animation:cue 2s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(0); opacity:0 } 30%{ opacity:1 } 70%{ transform:translateY(12px); opacity:0 } 100%{ opacity:0 } }
@media (max-width:820px){ .scroll-cue{ display:none } }


/* ════════════════════════════════════════════════════════════════════ STORY */
.story{ background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%) }
.story__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,96px); align-items:center;
}
.story__copy .prose{ margin-top:1.6rem }

.story__stats{
  display:flex; flex-wrap:wrap; gap:2.6rem;
  margin-top:3rem; padding-top:2rem;
  border-top:1px solid var(--line-soft);
}
.story__stats b{
  display:block;
  font-family:var(--f-display); font-weight:400;
  font-size:2.5rem; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.story__stats i{ font-style:normal; font-size:.55em }
.story__stats span{
  display:block; margin-top:.55rem;
  font-family:var(--f-descr); font-size:.6rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--cream-50);
}

.story__media{ position:relative }
.shot--tall{ aspect-ratio:4/5; border-radius:2px }

/* Rotating emblem — the ring of type turns, the monogram stays upright. */
.emblem{
  position:absolute; left:-58px; bottom:-58px;
  width:186px; height:186px;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle, rgba(14,11,9,.94) 62%, rgba(14,11,9,.72) 100%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.95);
}
.emblem__ring{
  grid-area:1/1;
  width:100%; height:100%;
  animation:emblem-spin 26s linear infinite;
}
.emblem__ring text{
  font-family:var(--f-descr);
  font-size:11.4px;
  font-weight:500;
  letter-spacing:.02em;
}
.emblem__mark{
  grid-area:1/1;
  width:64px; height:64px;
  --sm-lotus:inline; --sm-letter:40px; --sm-shift:0px;
}
@keyframes emblem-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .emblem__ring{ animation:none } }

@media (max-width:900px){
  .story__grid{ grid-template-columns:1fr }
  .emblem{ left:auto; right:-16px; bottom:-46px; width:148px; height:148px }
  .emblem__ring text{ font-size:12.4px }
  .emblem__mark{ width:52px; height:52px }
}
@media (max-width:420px){
  .emblem{ width:124px; height:124px; right:-10px; bottom:-38px }
  .emblem__mark{ width:44px; height:44px }
}


/* ══════════════════════════════════════════════════════════════════ MARQUEE */
.marquee{
  overflow:hidden; padding-block:1.5rem;
  border-block:1px solid var(--line-soft);
  background:var(--ink-2);
}
.marquee__track{
  display:flex; align-items:center; gap:2.6rem;
  width:max-content;
  animation:slide 44s linear infinite;
  font-family:var(--f-descr);
  font-size:clamp(.8rem,1.6vw,1.15rem);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-32);
}
.marquee__track i{ font-style:normal; color:var(--gold); font-size:.55em }
@keyframes slide{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none } }


/* ═══════════════════════════════════════════════════════════════ SIGNATURES */
.signatures{ background:var(--ink-2) }

.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2.5rem; flex-wrap:wrap;
  margin-bottom:clamp(40px,5vw,72px);
}
.sec-head--center{ justify-content:center; text-align:center }
.sec-head--center .display{ margin-inline:auto }
.sec-head__end{ display:flex; align-items:flex-end; gap:2rem; flex-wrap:wrap }
.sec-head__note{
  max-width:34ch; font-size:.95rem; color:var(--cream-50);
}
.sec-head__note--center{ max-width:52ch; margin:1.4rem auto 0 }

.rail-nav{ display:flex; gap:.6rem }
.rail-btn{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--cream-70);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.rail-btn svg{ width:19px; height:19px }
.rail-btn:hover{ border-color:var(--gold-light); color:#120D08; background:var(--gold-light) }
.rail-btn[disabled]{ opacity:.28; pointer-events:none }

.rail{
  --rail-pad:calc(50vw - var(--wrap)/2 + var(--gut));
  display:flex; gap:clamp(16px,1.8vw,28px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px var(--rail-pad) 28px;
  /* Snap ports must clear the gutter padding, or the rail self-scrolls on load. */
  scroll-padding-inline:var(--rail-pad);
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none }
@media (max-width:1424px){ .rail{ --rail-pad:var(--gut) } }

.dish{
  flex:0 0 clamp(250px,26vw,340px);
  scroll-snap-align:start;
  position:relative;
}
.dish__img{ aspect-ratio:3/4; border-radius:2px }
.dish__frame{ overflow:hidden; border-radius:2px }
.dish:hover .dish__img > img{ transform:scale(1.06) }
.dish__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:1.15rem }
.dish__name{
  font-family:var(--f-menu-item); font-size:1rem; font-weight:400; line-height:1.4;
  color:var(--cream);
}
.dish__price{
  font-family:var(--f-menu-item); font-size:.88rem; letter-spacing:0;
  color:var(--gold-light); white-space:nowrap;
}
.dish__desc{
  margin-top:.5rem;
  font-family:var(--f-menu-body); font-weight:300;
  font-size:.92rem; color:var(--cream-50); line-height:1.6;
}
.dish__tag{
  position:absolute; top:14px; left:14px;
  padding:.32rem .8rem; border-radius:999px;
  background:rgba(14,11,9,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);
  font-family:var(--f-menu-head); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light);
}


/* ═════════════════════════════════════════════════════════════════════ MENU */
.menu{ background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 40%) }

.menu-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  margin-bottom:clamp(40px,5vw,68px);
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line-soft);
}
.menu-tab{
  padding:.7rem 1.5rem; border-radius:999px;
  border:1px solid transparent;
  font-family:var(--f-menu-head); font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-50);
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.menu-tab:hover{ color:var(--cream) }
.menu-tab[aria-selected="true"]{
  color:var(--gold-light);
  border-color:var(--line);
  background:rgba(185,135,65,.07);
}

.menu-panel[hidden]{ display:none }
.menu-panel{ animation:fadeUp .6s var(--ease) both }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } }
@media (prefers-reduced-motion:reduce){ .menu-panel{ animation:none } }

/* Each printed sub-heading (Vegetarian, Seafood, Naan & Breads…) becomes a
   group. Groups flow in columns so a long section fills the page evenly
   without an item ever splitting across a column break. */
.menu-group + .menu-group{ margin-top:clamp(38px,4.5vw,62px) }
.menu-group__title{
  font-family:var(--f-menu-head);
  font-size:.8rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
  padding-bottom:.9rem;
  margin-bottom:.4rem;
  border-bottom:1px solid var(--line);
}
.menu-group__items{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 clamp(40px,6vw,96px);
}
@media (max-width:820px){ .menu-group__items{ grid-template-columns:1fr } }

.menu-item{
  display:grid; grid-template-columns:1fr auto;
  gap:.2rem 1.2rem;
  padding-block:1.25rem;
  border-bottom:1px solid var(--line-soft);
}
/* Sides and drinks carry no description — keep those rows compact. */
.menu-item--tight{ padding-block:.85rem }
.menu-item__head{
  font-family:var(--f-menu-item); font-size:.98rem; font-weight:400;
  line-height:1.45; letter-spacing:-.005em; color:var(--cream);
}
.menu-item__price{
  grid-column:2; grid-row:1;
  font-family:var(--f-menu-item); font-size:.88rem; letter-spacing:0;
  color:var(--gold-light); white-space:nowrap;
  padding-top:.1em;
}
.menu-item__desc{
  grid-column:1/-1;
  font-family:var(--f-menu-body);
  font-size:.92rem; font-weight:300; line-height:1.6;
  color:var(--cream-50);
  max-width:56ch;
  margin-top:.25rem;
}
.menu-foot{
  margin-top:clamp(40px,5vw,68px); padding-top:1.8rem;
  border-top:1px solid var(--line-soft);
  font-family:var(--f-menu-body); font-weight:300;
  font-size:.9rem; color:var(--cream-32); text-align:center;
}
.menu-foot a{ color:var(--gold-light); border-bottom:1px solid var(--line) }
.menu-foot a:hover{ border-color:var(--gold-light) }


/* ════════════════════════════════════════════════════════════════ STATEMENT */
.statement{
  position:relative; isolation:isolate;
  padding-block:clamp(110px,15vw,220px);
  text-align:center;
}
.statement__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden }
.statement__bg .shot{ height:100% }
.statement__bg .shot > img{ filter:brightness(.34) saturate(.85) }
.statement__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--ink) 0%,transparent 28%,transparent 72%,var(--ink) 100%);
}
.statement__text{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,3.5vw,3.05rem);
  line-height:1.24; letter-spacing:-.01em;
  color:var(--cream);
  max-width:22ch; margin-inline:auto;
}
.statement__text em{
  font-style:italic;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (min-width:900px){ .statement__text{ max-width:none } }


/* ══════════════════════════════════════════════════════════════════ GALLERY */
.gallery{ background:var(--ink) }
.mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,minmax(190px,26vh));
  gap:clamp(10px,1.1vw,18px);
}
.mosaic__item{ position:relative; overflow:hidden; border-radius:2px }
/* Scrim so captions stay readable over the brighter photos (fire, windows). */
.mosaic__item::after{
  content:""; position:absolute; inset:auto 0 0; height:42%;
  background:linear-gradient(to top, rgba(14,11,9,.88), transparent);
  pointer-events:none;
}
.mosaic__item figcaption{ z-index:1 }
.mosaic__item:hover .shot > img{ transform:scale(1.06) }
.mosaic__item figcaption{
  position:absolute; left:16px; bottom:14px;
  font-family:var(--f-descr); font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-70);
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.mosaic__item--a{ grid-column:1/3; grid-row:1/3 }
.mosaic__item--b{ grid-column:3/4; grid-row:1/2 }
.mosaic__item--c{ grid-column:4/5; grid-row:1/2 }
.mosaic__item--d{ grid-column:3/4; grid-row:2/3 }
.mosaic__item--e{ grid-column:4/5; grid-row:2/3 }
@media (max-width:820px){
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,32vw) }
  .mosaic__item--a{ grid-column:1/3; grid-row:1/2 }
  .mosaic__item--b{ grid-column:1/2; grid-row:2/3 }
  .mosaic__item--c{ grid-column:2/3; grid-row:2/3 }
  .mosaic__item--d{ grid-column:1/2; grid-row:3/4 }
  .mosaic__item--e{ grid-column:2/3; grid-row:3/4 }
}


/* ══════════════════════════════════════════════════════════════════ RESERVE */
.reserve{ position:relative; isolation:isolate }
.reserve__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden }
.reserve__bg .shot{ height:100% }
.reserve__bg .shot > img{ filter:brightness(.34) saturate(.9) }
.reserve__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(14,11,9,.55) 30%,rgba(14,11,9,.55) 70%,var(--ink) 100%);
}

.res-card{
  max-width:900px; margin-inline:auto;
  padding:clamp(30px,4.5vw,60px);
  border:1px solid var(--line);
  border-radius:4px;
  background:rgba(14,11,9,.58);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
.res-card__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,3.6vw,3rem);
  line-height:1.1; text-align:center;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.res-card__note{
  max-width:46ch; margin:1.1rem auto 0;
  text-align:center; font-size:.98rem; color:var(--cream-50);
}
.res-card__note a{ color:var(--gold-light); border-bottom:1px solid var(--line) }

/* ── opening hours + call ───────────────────────────────────────────── */
.hours{
  margin-top:clamp(32px,4vw,48px);
  padding:clamp(24px,3.2vw,38px) 1.5rem;
  border-block:1px solid var(--line-soft);
  text-align:center;
}
.hours__label{
  font-family:var(--f-descr); font-size:.6rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.hours__time{
  margin:.7rem 0 .55rem;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.6rem,6vw,4.6rem); line-height:1;
  letter-spacing:-.01em;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hours__time i{ font-style:normal; font-size:.4em; letter-spacing:.02em }
/* No opacity here: it would create a stacking context and break the
   parent's background-clip:text, making the dash disappear. */
.hours__time b{ font-weight:400; padding-inline:.16em; font-size:.72em }
.hours__days{
  font-family:var(--f-descr); font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cream-50);
}

.res-alt{ margin-top:1.5rem; font-size:.98rem; color:var(--cream-50) }
.res-alt a{ color:var(--gold-light); border-bottom:1px solid var(--line) }
.res-alt a:hover{ border-color:var(--gold-light) }

.res-submit{ margin-top:clamp(32px,4vw,52px); text-align:center }
.btn-ring{
  position:relative; display:inline-block;
  padding:1.1rem 3.2rem;
  font-family:var(--f-descr); font-size:.76rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream);
  transition:color .35s var(--ease), transform .4s var(--ease);
}
.btn-ring__label{ display:inline-flex; align-items:center; gap:.75rem }
.btn-ring__icon{ width:17px; height:17px; color:var(--gold); transition:color .35s var(--ease) }
.btn-ring:hover .btn-ring__icon{ color:var(--gold-light) }
.btn-ring em{ font-family:var(--f-body); font-style:italic; text-transform:none; letter-spacing:.04em; font-size:1.3em }
.btn-ring__oval{
  position:absolute; inset:0; width:100%; height:100%;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
  opacity:.75;
}
.btn-ring:hover{ color:var(--gold-light); transform:translateY(-2px) }
.btn-ring:hover .btn-ring__oval{ transform:rotate(-2.5deg) scale(1.04); opacity:1 }



/* ════════════════════════════════════════════════════════════════════ VISIT */
.visit{ background:var(--ink-2); position:relative; overflow:hidden }
.vert-label{
  position:absolute; left:calc(var(--gut) * .28); top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:var(--f-descr); font-size:.68rem;
  letter-spacing:.55em; text-transform:uppercase;
  color:var(--cream-32);
}
@media (max-width:1180px){ .vert-label{ display:none } }

.visit__grid{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(40px,6vw,88px); align-items:center;
}
@media (max-width:920px){ .visit__grid{ grid-template-columns:1fr } }

.contact-list{ margin-top:2.6rem; display:grid; gap:1.6rem }
.contact-list li{ display:flex; gap:1.1rem; align-items:flex-start }
.contact-list svg{ width:19px; height:19px; margin-top:.3rem; color:var(--gold); flex:none }
.contact-list__k{
  display:block;
  font-family:var(--f-descr); font-size:.56rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cream-32);
  margin-bottom:.28rem;
}
.contact-list__v{ display:block; font-size:1.06rem; line-height:1.5; color:var(--cream) }
a.contact-list__v{ transition:color .35s var(--ease) }
a.contact-list__v:hover{ color:var(--gold-light) }

.visit__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.8rem }

.visit__map{ position:relative; border-radius:3px; overflow:hidden; border:1px solid var(--line) }
.visit__map iframe{
  width:100%; height:clamp(340px,48vh,520px); border:0;
  filter:grayscale(1) invert(.92) contrast(.86) sepia(.32) saturate(1.5) hue-rotate(2deg);
}
.hours-badge{
  position:absolute; right:20px; top:20px;
  width:132px; height:132px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; text-align:center;
  background:rgba(14,11,9,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
}
.hours-badge span{
  font-family:var(--f-descr); font-size:.5rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cream-50);
}
.hours-badge b{
  font-family:var(--f-display); font-weight:400; font-size:1.2rem;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hours-badge i{ font-style:normal; font-size:.62em }


/* ═══════════════════════════════════════════════════════════════════ FOOTER */
.site-foot{
  background:var(--ink);
  border-top:1px solid var(--line-soft);
  padding-block:clamp(56px,7vw,92px) 2rem;
}
.foot__top{
  display:grid; grid-template-columns:minmax(200px,280px) 1fr;
  gap:clamp(40px,6vw,90px);
  padding-bottom:clamp(40px,5vw,66px);
  border-bottom:1px solid var(--line-soft);
}
@media (max-width:820px){ .foot__top{ grid-template-columns:1fr } }

.foot__brand{ text-align:left }
.foot__name{
  font-family:var(--f-display); font-size:1.8rem; font-weight:400;
  margin-top:1.1rem; line-height:1;
}
.foot__tag{
  font-family:var(--f-descr); font-size:.55rem;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-top:.7rem;
}

.foot__nav{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem 1.5rem;
}
@media (max-width:640px){ .foot__nav{ grid-template-columns:repeat(2,1fr) } }
.foot__nav h3{
  font-family:var(--f-descr); font-size:.56rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.1rem;
}
.foot__nav a, .foot__nav p{
  display:block; font-size:.98rem; line-height:1.6; color:var(--cream-50);
  transition:color .35s var(--ease);
}
.foot__nav a + a{ margin-top:.45rem }
.foot__nav a:hover{ color:var(--gold-light) }

.foot__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.2rem; padding-top:1.9rem;
  font-family:var(--f-descr); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cream-32);
}
.foot__social{ display:flex; gap:.7rem }
.foot__social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-soft);
  display:grid; place-items:center;
  color:var(--cream-50);
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.foot__social svg{ width:16px; height:16px }
.foot__social a:hover{ color:var(--gold-light); border-color:var(--line); transform:translateY(-2px) }


/* ══════════════════════════════════════════════════════ MOBILE NAVIGATION */
@media (max-width:1024px){
  .burger{ display:block }
  .head-tel{ display:none }

  /* The overlay is a SIBLING of the brand and burger inside .site-head__inner,
     so those two need their own stacking order to stay clickable above it —
     a z-index on the shared parent would lift the overlay too. */
  .site-head__inner{ position:relative }
  .brand, .site-head__end{ position:relative; z-index:2 }

  .nav{
    position:fixed; inset:0;
    z-index:1;
    flex-direction:column; align-items:center; justify-content:center;
    gap:0;
    margin:0;
    padding:6rem var(--gut) 3rem;
    background:#0B0907;          /* fully opaque — nothing shows through */
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .26s var(--ease), visibility .26s;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;  /* no rubber-banding through to the page */
  }
  .nav.is-open{ opacity:1; visibility:visible; pointer-events:auto }

  /* The panel arrives first, then the links rise into it. Fading the whole
     overlay in one go reads as a flash of the page underneath. */
  .nav a{
    font-family:var(--f-display);
    font-size:clamp(1.9rem,7vw,2.4rem);
    letter-spacing:0; text-transform:none;
    color:var(--cream);
    padding-block:.6rem;
    opacity:0; transform:translateY(16px);
    transition:opacity .38s var(--ease), transform .38s var(--ease);
  }
  .nav.is-open a{ opacity:1; transform:none }
  .nav.is-open a:nth-child(1){ transition-delay:.08s }
  .nav.is-open a:nth-child(2){ transition-delay:.13s }
  .nav.is-open a:nth-child(3){ transition-delay:.18s }
  .nav.is-open a:nth-child(4){ transition-delay:.23s }
  .nav.is-open a:nth-child(5){ transition-delay:.28s }
  .nav a::after{ display:none }
  .nav a.is-active{ color:var(--gold-light) }

  @media (prefers-reduced-motion:reduce){
    .nav a{ opacity:1; transform:none; transition:none }
  }

  /* Scroll lock. `overflow:hidden` alone does not hold on iOS Safari, so the
     body is pinned at its current offset and restored on close — otherwise
     the page scrolls behind the menu and jumps when it shuts. */
  body.nav-open{
    position:fixed;
    width:100%;
    overflow:hidden;
  }
}
@media (max-width:520px){
  .brand__rule, .brand__text{ display:none }
  .site-head__end{ margin-left:auto }
  .btn--sm{ padding:.66rem 1.2rem; font-size:.6rem }
}