/* ============================================================
   KARMA — Modern Indian Bistro
   Design system  ·  hand-built, no framework
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand — sampled from the Karma logo */
  --ink:        #0B0A09;
  --ink-2:      #131110;
  --ink-3:      #1C1917;
  --line:       rgba(255,255,255,.12);
  --line-soft:  rgba(255,255,255,.07);

  --paper:      #F4F1EB;
  --paper-2:    #EAE5DC;
  --paper-ink:  #1A1614;

  --red:        #E4362F;
  --red-bright: #FD3A36;
  --gold:       #C9A14A;
  --gold-lt:    #E9CE93;

  --fg:         #F2EEE8;
  --fg-dim:     rgba(242,238,232,.62);
  --fg-faint:   rgba(242,238,232,.38);

  /* type */
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:    "Jost", "Futura", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(.78rem, .74rem + .2vw, .86rem);
  --step-0:  clamp(.95rem, .91rem + .22vw, 1.06rem);
  --step-1:  clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
  --step-2:  clamp(1.45rem, 1.25rem + .95vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.5rem + 2.1vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.6rem + 4.2vw, 5rem);
  --step-5:  clamp(3.1rem, 1.5rem + 7.4vw, 8.2rem);

  /* rhythm */
  --pad:      clamp(1.25rem, 5vw, 2.5rem);
  --section:  clamp(5rem, 11vw, 10.5rem);
  --maxw:     1300px;
  --measure:  62ch;

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

/* ---------- 2. 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(--fg);
  font-family:var(--sans); font-size:var(--step-0); font-weight:300;
  line-height:1.65; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{display:block; max-width:100%; height:auto}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.04; letter-spacing:-.015em}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; border-radius:2px }
::selection{ background:var(--red); color:#fff }

.skip{
  position:fixed; top:-100px; left:1rem; z-index:999; padding:.8rem 1.2rem;
  background:var(--paper); color:var(--paper-ink); font-size:var(--step--1);
  letter-spacing:.12em; text-transform:uppercase; transition:top .2s;
}
.skip:focus{ top:1rem }

/* ---------- 3. Layout primitives ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.wrap-wide{ width:100%; max-width:1660px; margin-inline:auto; padding-inline:var(--pad) }
.section{ padding-block:var(--section) }
.section-sm{ padding-block:clamp(3.5rem,7vw,6rem) }

.display{ font-family:var(--display); font-optical-sizing:auto }
.d1{ font-family:var(--display); font-size:var(--step-5); line-height:.94; letter-spacing:-.025em }
.d2{ font-family:var(--display); font-size:var(--step-4); line-height:1; letter-spacing:-.02em }
.d3{ font-family:var(--display); font-size:var(--step-3); line-height:1.08; letter-spacing:-.015em }
.d4{ font-family:var(--display); font-size:var(--step-2); line-height:1.18; letter-spacing:-.01em }

.eyebrow{
  font-size:var(--step--1); font-weight:400; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{ content:""; width:clamp(24px,4vw,46px); height:1px; background:currentColor; opacity:.55; flex:none }
.eyebrow.center{ justify-content:center }
.eyebrow.center::after{ content:""; width:clamp(24px,4vw,46px); height:1px; background:currentColor; opacity:.55; flex:none }

.lede{ font-size:var(--step-1); line-height:1.6; color:var(--fg-dim); max-width:var(--measure) }
.body{ color:var(--fg-dim); max-width:var(--measure) }
.body + .body{ margin-top:1.15em }
em.gold{ font-style:italic; color:var(--gold-lt) }

/* ---------- 4. Buttons ---------- */
.btn{
  --bg:transparent; --bd:var(--fg); --fg-b:var(--fg);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1.02rem 2.1rem; min-height:48px;
  font-size:var(--step--1); font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-b); border:1px solid var(--bd); background:var(--bg);
  overflow:hidden; isolation:isolate; transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--fg);
  transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--slow);
}
.btn:hover{ color:var(--ink) } .btn:hover::after{ transform:scaleY(1); transform-origin:top }
.btn-solid{ --bg:var(--red); --bd:var(--red); color:#fff }
.btn-solid::after{ background:#fff }
.btn-solid:hover{ color:var(--ink); border-color:#fff }
.btn-gold{ --bd:var(--gold); color:var(--gold-lt) }
.btn-gold::after{ background:var(--gold-lt) }
.btn-ink{ --bd:var(--paper-ink); color:var(--paper-ink) }
.btn-ink::after{ background:var(--paper-ink) }
.btn-ink:hover{ color:var(--paper) }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem }
@media (max-width:520px){ .btn-row{ flex-direction:column; align-items:stretch } .btn-row .btn{ width:100% } }

.link-u{
  display:inline-flex; align-items:center; gap:.6rem; padding-block:.35em;
  font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt);
  border-bottom:1px solid rgba(233,206,147,.35); transition:border-color .3s, gap .3s var(--ease);
}
.link-u:hover{ border-color:var(--gold-lt); gap:1.05rem }
.link-u .ar{ transition:transform .35s var(--ease) }
.link-u:hover .ar{ transform:translateX(3px) }

/* ---------- 5. Header / nav ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s, transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr-in{
  max-width:1660px; margin-inline:auto; padding:clamp(1.15rem,2.1vw,1.7rem) var(--pad);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem;
}
.hdr.stuck .hdr-in{ padding-block:clamp(.8rem,1.4vw,1.1rem) }
.hdr.stuck{ background:rgba(11,10,9,.86); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--line-soft) }
.hdr.hide{ transform:translateY(-102%) }
body.menu-open .hdr{ z-index:120; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; transform:none }

.brand{ display:flex; align-items:center; gap:.8rem; flex:none; justify-self:start }
.brand img{ width:auto; height:clamp(36px,4.6vw,46px) }
.brand-txt{ display:flex; flex-direction:column; line-height:1 }
.brand-txt b{ font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1.85vw,1.5rem); letter-spacing:.24em; color:var(--fg) }
.brand-txt span{ position:relative; font-size:.5rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-top:.62em; padding-top:.52em }
.brand-txt span::before{ content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:linear-gradient(90deg, rgba(201,161,74,.55), rgba(201,161,74,0)) }

.nav{ display:flex; align-items:center; justify-content:center;
  gap:clamp(1.2rem,2.6vw,2.6rem); justify-self:center }
.nav a{
  position:relative; font-size:.76rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,238,232,.82); padding-block:.5rem; white-space:nowrap; transition:color .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-2px; height:1px;
  background:var(--gold); transition:left .4s var(--slow), right .4s var(--slow);
}
.nav a:hover{ color:#fff }
.nav a:hover::after{ left:0; right:0 }
.nav a[aria-current="page"]{ color:#fff }
.nav a[aria-current="page"]::after{ left:0; right:0; background:var(--gold) }

.hdr-cta{ display:flex; align-items:center; gap:1rem; justify-self:end }
.hdr-cta .btn{
  min-height:46px; padding:.85rem 1.85rem; border-radius:0;
  border:1px solid rgba(242,238,232,.55); color:#fff;
  font-size:.72rem; letter-spacing:.24em;
}
.hdr-cta .btn::after{ background:#fff }
.hdr-cta .btn:hover{ color:var(--ink); border-color:#fff }

.burger{ display:none; width:46px; height:46px; margin-right:-8px; position:relative; z-index:130 }
.burger span{ position:absolute; left:11px; width:24px; height:1.6px; background:var(--fg); border-radius:2px; transition:transform .4s var(--slow), opacity .2s }
.burger span:nth-child(1){ top:19px } .burger span:nth-child(2){ top:26px }
.hdr:not(.stuck) .brand,.hdr:not(.stuck) .nav,.hdr:not(.stuck) .hdr-cta{ filter:drop-shadow(0 1px 14px rgba(0,0,0,.65)) }
body.menu-open .burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
body.menu-open .burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:110; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; padding:5.5rem var(--pad) 2.5rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--slow); visibility:hidden;
}
body.menu-open .drawer{ clip-path:inset(0 0 0 0); visibility:visible }
.drawer::before{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background:url("../img/slide-1-tall.webp") center/cover no-repeat;
}
.drawer-nav{ position:relative; display:flex; flex-direction:column; gap:.1rem }
.drawer-nav a{
  font-family:var(--display); font-size:clamp(2rem,10vw,3rem); line-height:1.22;
  color:var(--fg); opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
body.menu-open .drawer-nav a{ opacity:1; transform:none }
body.menu-open .drawer-nav a:nth-child(1){transition-delay:.16s}
body.menu-open .drawer-nav a:nth-child(2){transition-delay:.21s}
body.menu-open .drawer-nav a:nth-child(3){transition-delay:.26s}
body.menu-open .drawer-nav a:nth-child(4){transition-delay:.31s}
body.menu-open .drawer-nav a:nth-child(5){transition-delay:.36s}
body.menu-open .drawer-nav a:nth-child(6){transition-delay:.41s}
.drawer-nav a[aria-current="page"]{ color:var(--red-bright) }
.drawer-foot{ position:relative; margin-top:auto; padding-top:2.2rem; border-top:1px solid var(--line-soft); display:grid; gap:.45rem; color:var(--fg-dim); font-size:var(--step--1) }
.drawer-foot a:hover{ color:var(--gold-lt) }

@media (max-width:1020px){
  .nav, .hdr-cta .btn{ display:none }
  .burger{ display:block }
}

/* ---------- 5b. Preloader ---------- */
.preloader{ display:none }
.js .preloader{
  display:grid; place-items:center; position:fixed; inset:0; z-index:1000;
  background:var(--ink);
  transition:opacity 1.05s var(--ease), visibility 0s linear 1.05s;
}
/* the mark settles, then breathes for the length of the hold, so the beat
   reads as deliberate rather than as a stalled page */
.js .preloader img{
  width:clamp(170px,21vw,268px); height:auto;
  opacity:0; transform:translateY(10px) scale(.95);
  animation:markIn 1.7s var(--slow) forwards,
            markHold 5.6s var(--ease) 1.7s forwards;
}
@keyframes markIn{ to{ opacity:1; transform:none } }
@keyframes markHold{ from{ transform:none } to{ transform:scale(1.06) } }
/* the gold rule draws itself across the hold — a progress cue, not a blank wait */
.js .preloader::after{
  content:""; position:absolute; left:50%; bottom:clamp(64px,12vh,110px);
  width:clamp(90px,14vw,150px); height:1px;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  background:linear-gradient(90deg,transparent,rgba(201,161,74,.6),transparent);
  opacity:0; animation:ruleDraw 6.4s var(--ease) .6s forwards;
}
@keyframes ruleDraw{
  0%   { opacity:0; transform:translateX(-50%) scaleX(0) }
  16%  { opacity:1 }
  100% { opacity:1; transform:translateX(-50%) scaleX(1) }
}
.js body.loaded .preloader{ opacity:0; visibility:hidden; pointer-events:none }
.js body.preloading{ overflow:hidden }
@media (prefers-reduced-motion: reduce){
  .js .preloader img{ animation:none; opacity:1; transform:none }
  .js .preloader::after{ animation:none; opacity:1; transform:translateX(-50%) }
  .js .preloader{ transition:opacity .2s }
}

/* ---------- 6. Hero (video + photo slider) ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink) }
.hero-media{ position:absolute; inset:0 }
.slides{ position:absolute; inset:0 }
.slide{
  position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  transition:opacity 1.4s var(--ease), visibility 0s linear 1.4s;
}
.slide.is-on{ opacity:1; visibility:visible; transition:opacity 1.4s var(--ease), visibility 0s }
.slide picture,.slide img,.slide video{ display:block; width:100%; height:100% }
.slide img,.slide video{ object-fit:cover; object-position:center }
.slide img{ transform:scale(1.035) }
.slide.is-on img{ animation:drift 9s linear forwards }
.slide--video video{ transform:none }
@keyframes drift{ from{ transform:scale(1.035) } to{ transform:scale(1.085) } }

.hero-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(11,10,9,.92) 0%, rgba(11,10,9,.7) 22%, rgba(11,10,9,.34) 46%,
      rgba(11,10,9,.08) 68%, rgba(11,10,9,.06) 82%, rgba(11,10,9,.58) 100%),
    linear-gradient(105deg, rgba(11,10,9,.82) 0%, rgba(11,10,9,.52) 26%,
      rgba(11,10,9,.16) 52%, rgba(11,10,9,0) 74%);
}

.hero-in{ position:relative; width:100%; max-width:1660px; margin-inline:auto;
  padding:0 var(--pad) clamp(3.2rem,7vh,5.5rem) }
.hero-copy{ max-width:min(100%, 40rem) }
.hero h1{ max-width:11ch }
.hero h1 .it{ font-style:italic; color:var(--gold-lt) }
.hero .lede{ color:rgba(242,238,232,.9); max-width:46ch; margin-top:clamp(1.2rem,2.4vw,1.9rem);
  text-shadow:0 1px 18px rgba(11,10,9,.5) }
.hero .btn-row{ margin-top:clamp(1.6rem,3vw,2.3rem) }
.hero .eyebrow,.hero h1{ text-shadow:0 2px 26px rgba(11,10,9,.45) }

.hero-dots{ display:flex; gap:.65rem; margin-top:clamp(2.2rem,4vw,3.2rem) }
.dot{ width:34px; height:20px; padding:0; position:relative }
.dot::after{ content:""; position:absolute; left:0; right:0; top:9px; height:1.5px;
  background:rgba(242,238,232,.34); transition:background .4s var(--ease), transform .4s var(--ease) }
.dot:hover::after{ background:rgba(242,238,232,.7) }
.dot.is-on::after{ background:var(--gold-lt); transform:scaleY(2) }

.hero-scroll{
  position:absolute; right:calc(var(--pad) + 2px); bottom:clamp(3.2rem,7vh,5.5rem);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase; color:var(--fg-faint);
  writing-mode:vertical-rl;
}
.hero-scroll i{ width:1px; height:56px; background:linear-gradient(var(--fg-faint),transparent); display:block }
@media (max-width:900px){ .hero-scroll{ display:none } }

@media (prefers-reduced-motion: reduce){
  .slide.is-on img{ animation:none }
  .slide{ transition:none }
}

/* ---------- 8. Editorial blocks ---------- */
.split{ display:grid; gap:clamp(2.4rem,6vw,5.5rem); align-items:center }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .split.a{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) }
  .split.b{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) }
  .split.c{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(2.4rem,5vw,4.5rem) }
  .split .flip{ order:-1 }
}
.stack{ display:grid; gap:clamp(1.3rem,2.6vw,2rem); align-content:start }

.fig{ position:relative; overflow:hidden; background:var(--ink-3) }
.fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--slow) }
.fig:hover img{ transform:scale(1.045) }
.fig.r43{ aspect-ratio:4/3 } .fig.r34{ aspect-ratio:3/4 } .fig.r11{ aspect-ratio:1/1 }
.fig.r169{ aspect-ratio:16/9 } .fig.r54{ aspect-ratio:5/4 } .fig.r45{ aspect-ratio:4/5 }
.fig-cap{ margin-top:.85rem; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint) }

.offset-pair{ position:relative; display:grid; grid-template-columns:repeat(12,1fr); gap:0 }
.offset-pair .p1{ grid-column:1/9; z-index:1 }
.offset-pair .p2{ grid-column:7/13; margin-top:clamp(2.5rem,7vw,6rem); z-index:2; border:6px solid var(--ink) }
@media (max-width:700px){
  .offset-pair .p1{ grid-column:1/11 }
  .offset-pair .p2{ grid-column:5/13; margin-top:-14%; border-width:4px }
}

.rule{ height:1px; background:var(--line-soft); border:0; margin:0 }

/* pull quote */
.quote{ position:relative; text-align:center; max-width:23ch; margin-inline:auto }
.quote q{ quotes:none; font-family:var(--display); font-size:var(--step-3); line-height:1.16; font-style:italic; color:var(--fg) }

/* stat / detail list */
.deets{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
.deets > div{ padding-top:1.2rem; border-top:1px solid var(--line-soft) }
.deets dt{ font-size:var(--step--1); letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:.55rem }
.deets dd{ margin:0; color:var(--fg-dim); overflow-wrap:anywhere }
.deets dd a:hover{ color:var(--fg) }

/* ---------- 9. Menu teaser ---------- */
.menu-teaser{ position:relative; background:var(--ink-2); overflow:hidden }
.menu-teaser::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(70% 55% at 18% 18%, rgba(228,54,47,.13) 0%, transparent 62%),
    radial-gradient(60% 50% at 88% 84%, rgba(201,161,74,.11) 0%, transparent 62%);
}
.menu-teaser::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.menu-teaser > *{ position:relative }
.menu-cols{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center }
@media (min-width:900px){ .menu-cols{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr) } }
.menu-card{
  position:relative; max-width:420px; box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  transform:rotate(-2.2deg); transition:transform .8s var(--slow);
}
.menu-card:hover{ transform:rotate(0deg) translateY(-6px) }
.menu-index{ display:grid; gap:0; margin-top:.5rem }
.menu-index li{ border-top:1px solid var(--line-soft) }
.menu-index li:last-child{ border-bottom:1px solid var(--line-soft) }
.menu-index a{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:1.05rem .2rem; transition:padding .4s var(--ease), color .3s }
.menu-index a:hover{ padding-inline:.9rem .2rem; color:var(--gold-lt) }
.menu-index .t{ font-family:var(--display); font-size:var(--step-1); letter-spacing:.01em }
.menu-index .n{ font-size:var(--step--1); letter-spacing:.2em; color:var(--fg-faint) }

/* ---------- 10. Gallery ---------- */
.gal{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.6rem,1.3vw,1.1rem) }
.gal .g{ overflow:hidden; background:var(--ink-3) }
.gal .g img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--slow), filter .6s }
.gal .g:hover img{ transform:scale(1.05) }
.g1{ grid-column:span 7; aspect-ratio:4/5 }
.g2{ grid-column:span 5; aspect-ratio:3/4; align-self:end }
.g3{ grid-column:span 4; aspect-ratio:1/1 }
.g4{ grid-column:span 8; aspect-ratio:16/10 }
.g5{ grid-column:span 5; aspect-ratio:4/5 }
.g6{ grid-column:span 7; aspect-ratio:5/4; align-self:start }
@media (max-width:700px){
  .g1,.g4,.g6{ grid-column:span 12 }
  .g2,.g3,.g5{ grid-column:span 6 }
  .g2,.g5{ aspect-ratio:3/4 } .g3{ aspect-ratio:3/4 }
}

/* ---------- 11. Paper sections (menu page) ---------- */
.paper{ background:var(--paper); color:var(--paper-ink) }
.paper .eyebrow{ color:var(--red) }
.paper .body,.paper .lede{ color:rgba(26,22,20,.72) }
.paper .rule{ background:rgba(26,22,20,.14) }
.menu-sheet{ display:grid; gap:clamp(1.1rem,2.4vw,2rem); max-width:1080px; margin-inline:auto }
.menu-sheet figure{ margin:0; background:#fff; box-shadow:0 26px 60px -34px rgba(26,22,20,.55), 0 0 0 1px rgba(26,22,20,.08) }
.menu-sheet img{ width:100%; height:auto }
.menu-bar{
  position:sticky; top:0; z-index:40; transition:top .5s var(--ease);
  background:rgba(244,241,235,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(26,22,20,.12);
}
body.hdr-shown .menu-bar{ top:var(--hdr-h,64px) }
.menu-sheet figure{ scroll-margin-top:calc(var(--hdr-h,64px) + 74px) }
.menu-bar-in{ max-width:1080px; margin-inline:auto; padding:.85rem var(--pad); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.chips a{ font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; padding:.5rem .85rem; border:1px solid rgba(26,22,20,.18); color:rgba(26,22,20,.72); transition:.3s }
.chips a:hover{ background:var(--paper-ink); color:var(--paper); border-color:var(--paper-ink) }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(8,7,7,.96); display:none; place-items:center; padding:1rem }
.lb[open]{ display:grid }
.lb img{ max-width:100%; max-height:92vh; object-fit:contain; width:auto }
.lb-close{ position:fixed; top:1rem; right:1rem; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--fg) }
.lb-nav{ position:fixed; top:50%; transform:translateY(-50%); width:48px; height:48px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--fg); background:rgba(11,10,9,.5) }
.lb-prev{ left:1rem } .lb-next{ right:1rem }

/* ---------- 12. Bar menu list ---------- */
.bm{ display:grid; gap:clamp(2.6rem,6vw,4.5rem) }
@media (min-width:860px){ .bm{ grid-template-columns:1fr 1fr; column-gap:clamp(3rem,7vw,7rem) } }
.bm-group{ break-inside:avoid }
.bm-group h3{ font-family:var(--display); font-size:var(--step-2); color:var(--red-bright); letter-spacing:.02em; margin-bottom:.35rem }
.bm-note{ font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:1.3rem }
.bm-item{ display:grid; grid-template-columns:1fr auto; gap:.4rem 1.5rem; padding:.85rem 0; border-top:1px solid var(--line-soft); align-items:baseline }
.bm-item .nm{ font-size:var(--step-0); color:var(--fg) }
.bm-item .pr{ font-size:var(--step-0); color:var(--gold-lt); white-space:nowrap; font-variant-numeric:tabular-nums }
.bm-item .ds{ grid-column:1/-1; font-size:var(--step--1); color:var(--fg-faint); line-height:1.55 }

/* ---------- 13. Cards (catering / events) ---------- */
.pkgs{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft) }
@media (min-width:760px){ .pkgs{ grid-template-columns:1fr 1fr } }
.pkg{ background:var(--ink); padding:clamp(1.8rem,3.5vw,2.8rem); display:grid; gap:1rem; align-content:start; transition:background .5s }
.pkg:hover{ background:var(--ink-3) }
.pkg h3{ font-family:var(--display); font-size:var(--step-2); letter-spacing:.06em; text-transform:uppercase }
.pkg .price{ font-size:var(--step-1); color:var(--gold-lt); letter-spacing:.04em }
.pkg ul{ display:grid; gap:.5rem; color:var(--fg-dim); font-size:var(--step-0) }
.pkg li{ padding-left:1.15rem; position:relative }
.pkg li::before{ content:""; position:absolute; left:0; top:.72em; width:5px; height:5px; background:var(--red); border-radius:50% }

/* ---------- 14. Forms ---------- */
.form{ display:grid; gap:1.05rem }
@media (min-width:640px){ .form{ grid-template-columns:1fr 1fr } .form .full{ grid-column:1/-1 } }
.field{ display:grid; gap:.5rem; min-width:0 }
.field label{ font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint) }
.form > *,.deets > div,.split > *,.stack > *,.bm-group,.feat > *{ min-width:0 }
.field input,.field select,.field textarea{
  width:100%; max-width:100%; min-width:0;
  font:inherit; font-size:var(--step-0); color:var(--fg); background:transparent;
  border:0; border-bottom:1px solid var(--line); padding:.8rem .1rem; min-height:48px;
  border-radius:0; transition:border-color .3s;
}
.field textarea{ min-height:120px; resize:vertical }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--fg-faint) 50%),linear-gradient(135deg,var(--fg-faint) 50%,transparent 50%); background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%; background-size:6px 6px; background-repeat:no-repeat }
.field select option{ background:var(--ink-2); color:var(--fg) }
.field input:focus,.field select:focus,.field textarea:focus{ border-bottom-color:var(--gold-lt); outline:none }
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-faint) }
.policy{ font-size:var(--step--1); color:var(--fg-faint); line-height:1.6 }

/* ---------- 15. Map ---------- */
.map{ position:relative; width:100%; aspect-ratio:4/3; background:var(--ink-3); overflow:hidden; border:1px solid var(--line-soft) }
@media (min-width:560px){ .map{ min-height:320px } }
@media (min-width:900px){ .map.tall{ aspect-ratio:auto; height:100%; min-height:520px } }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.86) }

/* ---------- 16. Footer ---------- */
.ftr{ background:var(--ink-2); border-top:1px solid var(--line-soft) }
.ftr-top{ display:grid; gap:clamp(2.4rem,5vw,3.5rem); padding-block:clamp(3.5rem,7vw,6rem) }
@media (min-width:880px){ .ftr-top{ grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.85fr)) } }
.ftr h4{ font-size:var(--step--1); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:1.15rem }
.ftr li{ margin-bottom:.6rem }
.ftr a{ color:var(--fg-dim); transition:color .3s }
.ftr a:hover{ color:var(--fg) }
.hours{ display:grid; gap:.45rem; font-size:var(--step--1) }
.hours div{ display:flex; justify-content:space-between; gap:1rem; color:var(--fg-dim) }
.hours div.closed span:last-child{ color:var(--red) }
.hours div.today{ color:var(--fg) }
.hours div.today span:first-child::after{ content:" ·"; color:var(--gold) }
.ftr-bot{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; padding-block:1.5rem; border-top:1px solid var(--line-soft); font-size:var(--step--1); color:var(--fg-faint) }
.socials{ display:flex; gap:.6rem }
.socials a{ width:40px; height:40px; border:1px solid var(--line); display:grid; place-items:center; color:var(--fg-dim); transition:.35s }
.socials a:hover{ border-color:var(--gold); color:var(--gold-lt); transform:translateY(-2px) }

/* ---------- 17. Page head (inner pages) ---------- */
.phead{ position:relative; padding-block:clamp(8.5rem,17vw,13rem) clamp(3rem,6vw,5rem); overflow:hidden; border-bottom:1px solid var(--line-soft) }
.phead-bg{ position:absolute; inset:0 }
.phead-bg img{ width:100%; height:100%; object-fit:cover; opacity:.34 }
.phead-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--ink) 4%,rgba(11,10,9,.55) 60%,rgba(11,10,9,.8) 100%) }
.phead-in{ position:relative }
.crumb{ font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:1.4rem }
.crumb a:hover{ color:var(--gold-lt) }
.crumb span{ color:var(--fg-faint); padding-inline:.5rem }

/* ---------- 18. Reveal animation ---------- */
.js [data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--slow), transform .9s var(--slow) }
.js [data-rv].in{ opacity:1; transform:none }
.js [data-rv="img"]{ transform:none; clip-path:inset(0 0 100% 0); opacity:1; transition:clip-path 1.1s var(--slow) }
.js [data-rv="img"].in{ clip-path:inset(0 0 0 0) }
@media (prefers-reduced-motion: reduce){
  [data-rv],[data-rv].in,.js [data-rv],.js [data-rv].in{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important }
  .fig img,.gal .g img{ transition:none }
  *{ scroll-behavior:auto !important }
}

/* ---------- 19. Utilities ---------- */
.center{ text-align:center } .mx{ margin-inline:auto }
.mt-s{ margin-top:clamp(1rem,2vw,1.6rem) } .mt-m{ margin-top:clamp(1.8rem,3.5vw,2.8rem) } .mt-l{ margin-top:clamp(2.8rem,6vw,4.5rem) }
.nowrap{ white-space:nowrap }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
body.menu-open{ overflow:hidden }


/* ---------- 20. Feature pair (home: events + catering) ---------- */
.feat{ display:grid; gap:clamp(2.6rem,6vw,4.5rem) }
@media (min-width:900px){
  .feat{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start }
  .feat .b{ margin-top:clamp(3rem,8vw,7rem) }
}
.feat article{ display:grid; gap:clamp(1rem,2vw,1.5rem); align-content:start }
.feat .fig{ margin:0 }
.feat h3{ font-family:var(--display); font-size:var(--step-2); line-height:1.1 }
.feat .num{ font-size:var(--step--1); letter-spacing:.3em; color:var(--gold); display:block; margin-bottom:-.4rem }

/* anchors clear the fixed header */
:target{ scroll-margin-top:calc(var(--hdr-h,64px) + 40px) }
[id]{ scroll-margin-top:calc(var(--hdr-h,64px) + 40px) }

/* ---------- 6b. Hero + masthead, small screens ---------- */
@media (max-width:520px){
  .brand img{ height:34px }
  .brand-txt b{ font-size:1.05rem; letter-spacing:.18em }
  .brand-txt span{ font-size:.44rem; letter-spacing:.17em; white-space:nowrap }
}
@media (max-width:900px){
  /* the portrait crop is brighter through the middle — lean the scrim vertical */
  .hero-media::after{
    background:
      linear-gradient(to top,
        rgba(11,10,9,.95) 0%, rgba(11,10,9,.86) 20%, rgba(11,10,9,.66) 40%,
        rgba(11,10,9,.42) 60%, rgba(11,10,9,.3) 78%, rgba(11,10,9,.6) 100%);
  }
  .hero-in{ padding-bottom:clamp(2.4rem,6vh,3.6rem) }
  .hero-dots{ margin-top:clamp(1.6rem,4vw,2.2rem) }
}

/* ---------- 23. Catering order builder ---------- */
.step{ display:grid; gap:clamp(1rem,2.4vw,2.5rem); padding-block:clamp(2.2rem,5vw,4rem);
  border-top:1px solid var(--line-soft) }
.step:first-child{ border-top:0; padding-top:0 }
@media (min-width:860px){ .step{ grid-template-columns:76px minmax(0,1fr) } }
.step-n{ font-family:var(--display); font-size:var(--step-1); color:var(--gold); letter-spacing:.1em }
.step-b{ min-width:0 }

.pkg-picks{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft) }
@media (min-width:700px){ .pkg-picks{ grid-template-columns:1fr 1fr } }
@media (min-width:1100px){ .pkg-picks{ grid-template-columns:repeat(4,1fr) } }
.pkg-pick input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 }
.pkg-card{ display:grid; gap:.55rem; align-content:start; height:100%;
  background:var(--ink); padding:clamp(1.15rem,2.2vw,1.6rem); cursor:pointer;
  border:1px solid transparent; transition:background .35s var(--ease), border-color .35s var(--ease) }
.pkg-pick:hover .pkg-card{ background:var(--ink-3) }
.pkg-pick input:checked + .pkg-card{ background:var(--ink-3); border-color:var(--gold) }
.pkg-pick input:focus-visible + .pkg-card{ outline:2px solid var(--gold-lt); outline-offset:-3px }
.pkg-n{ font-family:var(--display); font-size:var(--step-1); letter-spacing:.1em; text-transform:uppercase }
.pkg-p{ font-size:var(--step-1); color:var(--gold-lt) }
.pkg-p small{ display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); margin-top:.25rem }
.pkg-d,.pkg-inc{ font-size:var(--step--1); color:var(--fg-dim); line-height:1.55 }
.pkg-inc{ color:var(--fg-faint) }

.grps{ display:grid; gap:clamp(1.8rem,3.5vw,2.8rem) }
.grp{ border-top:1px solid var(--line-soft); padding-top:clamp(1.1rem,2vw,1.5rem) }
.grp.is-full .picks label:not(.on){ opacity:.34 }
.grp.is-full input:not(:checked){ cursor:not-allowed }
.grp-h{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.grp-h h3{ font-family:var(--display); font-size:var(--step-2) }
.grp-c{ font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); white-space:nowrap }
.grp.is-full .grp-c,.grp-c .tally{ color:var(--gold-lt) }
.grp-s{ font-size:var(--step--1); color:var(--fg-faint); margin-top:.4rem }
.picks{ display:grid; gap:.1rem; margin-top:1rem }
@media (min-width:640px){ .picks{ grid-template-columns:1fr 1fr } }
@media (min-width:1100px){ .picks{ grid-template-columns:repeat(3,1fr) } }
.pick{ position:relative; display:flex; align-items:center; gap:.7rem; padding:.62rem .3rem;
  cursor:pointer; min-height:44px; transition:opacity .3s }
.pick .box{ display:none }
.pick input{
  appearance:none; -webkit-appearance:none; flex:none; margin:0;
  width:16px; height:16px; border:1px solid var(--line); border-radius:0;
  background:transparent; cursor:pointer; display:grid; place-items:center;
  transition:border-color .25s var(--ease);
}
.pick input::after{ content:""; width:8px; height:8px; background:var(--red);
  transform:scale(0); transition:transform .25s var(--slow) }
.pick input:checked{ border-color:var(--red) }
.pick input:checked::after{ transform:scale(1) }
.pick input:disabled{ cursor:not-allowed; border-color:var(--line-soft) }
.pick .nm{ font-size:var(--step-0); color:var(--fg-dim); line-height:1.4 }
.pick input:checked ~ .nm{ color:var(--fg) }
.pick:has(input:checked) .nm{ color:var(--fg) }
.prem{ font-style:normal; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-left:.5rem; vertical-align:.12em }

.tray{ position:sticky; bottom:0; z-index:50; margin-top:clamp(1.5rem,3vw,2.5rem);
  background:rgba(11,10,9,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); margin-inline:calc(-1 * var(--pad)) }
.tray-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.9rem }
.tray-pkg{ font-family:var(--display); font-size:var(--step-1); display:flex; align-items:baseline; gap:.7rem }
.tray-price{ font-family:var(--sans); font-size:var(--step--1); letter-spacing:.16em; color:var(--gold-lt) }
.tray-line{ font-size:var(--step--1); color:var(--fg-faint); margin-top:.2rem }
.tray-line.ready{ color:var(--gold-lt) }
.tray-btns{ display:flex; gap:.6rem; flex-wrap:wrap }
.tray-btns .btn{ min-height:44px; padding:.7rem 1.4rem }
@media (max-width:560px){ .tray-btns{ width:100% } .tray-btns .btn{ flex:1 } }

/* ---------- 24. Print: a clean catering order sheet ---------- */
@media print{
  .hdr,.drawer,.preloader,.hero-scroll,.phead-bg,.colophon,.ftr,.tray-btns,
  .btn-row,.section-sm,.crumb,.skip{ display:none !important }
  html,body{ background:#fff !important; color:#000 !important }
  .phead{ padding-block:0 1rem !important; border-bottom:1px solid #000 }
  h1,h2,h3,.d1,.d3,.eyebrow,.lede,.body,.policy,.grp-h h3,.pkg-n{ color:#000 !important }
  .d1{ font-size:26pt !important } .d3{ font-size:14pt !important }
  .step{ border-color:#bbb; padding-block:10pt; break-inside:avoid }
  .grp{ border-color:#bbb; break-inside:avoid }
  .picks{ grid-template-columns:repeat(3,1fr) !important; gap:0 }
  .pick .nm{ color:#000 !important; font-size:9pt }
  .pick .box{ border-color:#666 }
  .pick input:checked + .box::after{ background:#000 }
  .pkg-picks{ grid-template-columns:repeat(4,1fr) !important; background:#bbb }
  .pkg-card{ background:#fff !important; border-color:#fff }
  .pkg-pick input:checked + .pkg-card{ border-color:#000 !important }
  .pkg-p,.pkg-d,.pkg-inc,.grp-c,.grp-s,.tray-line{ color:#333 !important }
  .field input,.field select,.field textarea{ border-bottom:1px solid #000 !important; color:#000 !important }
  .field label{ color:#333 !important }
  .tray{ position:static; background:none !important; border-top:1px solid #000;
    backdrop-filter:none; -webkit-backdrop-filter:none }
  [data-rv]{ opacity:1 !important; transform:none !important; clip-path:none !important }
  a[href]::after{ content:"" }
}

/* ---------- 25. Gallery ---------- */
.shots{ columns:1; column-gap:clamp(.7rem,1.4vw,1.15rem) }
@media (min-width:560px){ .shots{ columns:2 } }
@media (min-width:1000px){ .shots{ columns:3 } }
@media (min-width:1500px){ .shots{ columns:4 } }
.shot{ margin:0 0 clamp(.7rem,1.4vw,1.15rem); break-inside:avoid; -webkit-column-break-inside:avoid }
.shot button{
  display:block; width:100%; padding:0; position:relative; overflow:hidden;
  background:var(--ink-3); cursor:zoom-in; border:0;
}
.shot img{ display:block; width:100%; height:auto;
  transition:transform 1.1s var(--slow), filter .5s var(--ease) }
.shot button:hover img{ transform:scale(1.045); filter:brightness(.82) }
.shot button:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px }
.shot-cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .9rem;
  font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:var(--fg);
  text-align:left; opacity:0; transform:translateY(8px);
  background:linear-gradient(to top, rgba(11,10,9,.82), transparent);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.shot button:hover .shot-cap,.shot button:focus-visible .shot-cap{ opacity:1; transform:none }
@media (hover:none){ .shot-cap{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){
  .shot img,.shot-cap{ transition:none }
  .shot button:hover img{ transform:none }
}

/* ---------- 26. A dish category the chosen package doesn't include ----------
   It stays fully legible: a vanished or near-invisible block reads as a bug.
   Only the affordance is removed, not the content. */
.grp .grp-off{ display:none }
.grp.is-off .grp-count{ display:none }
.grp.is-off .grp-off{
  display:inline-block; padding:.34em .85em;
  border:1px solid rgba(201,161,74,.42); border-radius:100px;
  background:rgba(201,161,74,.10); color:var(--gold-lt);
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.grp.is-off .grp-h h3{ color:var(--fg-dim) }
.grp.is-off .picks{ pointer-events:none }
.grp.is-off .pick{ cursor:not-allowed }
.grp.is-off .pick input{ opacity:.35 }
.grp.is-off .pick .nm{ color:var(--fg-dim) }
@media (max-width:560px){
  .grp.is-off .grp-h{ flex-wrap:wrap }
  .grp.is-off .grp-off{ font-size:.72rem }
}