/* ==========================================================================
   Mia Kusina Bar & Restaurant — 140 George Street, Dunedin
   Palette taken from the room itself: warm near-black timber, bulb amber,
   the sage-green ceramics the food comes out on.
   ========================================================================== */

:root{
  /* ground + ink */
  --ink:        #12100f;
  --ink-2:      #191512;
  --ink-3:      #221c18;
  --cream:      #f2ebe0;
  --cream-2:    #e7ddcd;

  /* accents */
  --ember:      #e0913f;
  --ember-2:    #c2762c;
  --sage:       #9db89a;

  /* themeable tokens — overridden inside pale sections */
  --bg:         var(--ink);
  --fg:         #f0e8dd;
  --fg-muted:   #a2968c;
  --rule:       #322b26;

  /* type */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Karla", "Helvetica Neue", Arial, sans-serif;

  /* measure */
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --max: 78rem;

  color-scheme: dark;
}

/* ── reset-ish ─────────────────────────────────────────────────────────── */
*,*::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:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.05; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ember); color:#1a1208; padding:.7rem 1.1rem; font-weight:700;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

/* film grain — keeps the flat colour from looking synthetic ─────────────── */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── shared bits ───────────────────────────────────────────────────────── */
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--ember); margin:0 0 1.1rem;
}

.h2{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 40, "WONK" 1;
  font-size:clamp(2rem, 1.2rem + 3.4vw, 3.7rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.02;
  margin:0 0 1.4rem;
}

.link{
  display:inline-block; font-weight:600; font-size:.94rem;
  letter-spacing:.02em; color:var(--ember);
  text-decoration:none; border-bottom:1px solid currentColor;
  padding-bottom:2px; transition:opacity .2s;
}
.link:hover{ opacity:.7; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.86rem;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  padding:.95rem 1.6rem; border:1px solid transparent; border-radius:2px;
  cursor:pointer; transition:background .22s, color .22s, border-color .22s;
  white-space:nowrap;
}
.btn--solid{ background:var(--ember); color:#191006; }
.btn--solid:hover{ background:var(--cream); }
.btn--outline{ border-color:currentColor; color:var(--fg); }
.btn--outline:hover{ background:var(--fg); color:var(--ink); }
.btn--ghost{ padding:.6rem .9rem; letter-spacing:.06em; color:var(--fg); }
.btn--ghost:hover{ color:var(--ember); }
.btn--sm{ padding:.7rem 1.2rem; font-size:.78rem; }

/* ── masthead ──────────────────────────────────────────────────────────── */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .3s, border-color .3s, padding .3s;
  border-bottom:1px solid transparent;
  padding:.55rem 0;
}
.masthead.is-stuck{
  background:rgba(18,16,15,.93);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);
}
.masthead__inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:2rem;
}

.wordmark{
  text-decoration:none; margin-right:auto;
  display:flex; align-items:center; gap:.72rem;
}
.wordmark__mark{
  width:46px; height:46px; flex:none; border-radius:50%;
  box-shadow:0 0 0 1px rgba(240,232,221,.14), 0 6px 18px rgba(0,0,0,.45);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.wordmark:hover .wordmark__mark{ transform:rotate(-8deg) scale(1.04); }
.wordmark__type{ display:block; }
.wordmark__name{
  display:block; font-family:var(--serif);
  font-variation-settings:"SOFT" 40, "WONK" 1;
  font-size:1.4rem; font-weight:600; letter-spacing:-.015em; line-height:1;
}
.wordmark__sub{
  display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-muted); margin-top:.32rem;
}

.nav{ display:flex; gap:2rem; }
.nav a{
  font-size:.82rem; letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; text-decoration:none; color:var(--fg-muted);
  padding:.35rem 0; position:relative; transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ember); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.nav a:hover{ color:var(--fg); }
.nav a:hover::after{ transform:scaleX(1); }

.masthead__actions{ display:flex; align-items:center; gap:.5rem; }

.burger{
  display:none; position:relative; width:42px; height:42px;
  background:none; border:0; cursor:pointer; padding:0;
}
.burger span{
  position:absolute; left:10px; width:22px; height:1.5px;
  background:var(--fg); transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.burger span:first-child{ top:16px; }
.burger span:last-child{ top:25px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.5px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:55; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:5rem var(--pad) 3rem;
}
.drawer[hidden]{ display:none; }
.drawer__nav{ display:flex; flex-direction:column; gap:.2rem; }
.drawer__nav a{
  font-family:var(--serif); font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2rem,9vw,2.9rem); font-weight:600; text-decoration:none;
  padding:.28em 0; border-bottom:1px solid var(--rule); letter-spacing:-.02em;
}
.drawer__foot{
  margin-top:2.5rem; display:flex; flex-direction:column; gap:.4rem;
  font-size:.9rem; color:var(--fg-muted);
}
.drawer__foot a{ color:var(--ember); text-decoration:none; font-weight:600; }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:7.25rem 0 0;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; display:block; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:58% 50%;
}
/* two scrims: one warm wash for colour, one directional for legibility */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(76deg,
      rgba(14,12,11,.96)  0%,
      rgba(14,12,11,.9)  26%,
      rgba(14,12,11,.62) 52%,
      rgba(14,12,11,.34) 78%,
      rgba(14,12,11,.42) 100%),
    linear-gradient(180deg,
      rgba(14,12,11,.85)  0%,
      rgba(14,12,11,.18) 24%,
      rgba(14,12,11,.28) 62%,
      rgba(18,16,15,.97) 100%);
}
.hero__inner{
  width:100%; max-width:var(--max); margin:0 auto;
  padding:0 var(--pad) 0;
}
.hero__text{ max-width:43rem; padding-bottom:clamp(2rem,4vw,3rem); }

.hero__title{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 45, "WONK" 1;
  font-size:clamp(2.4rem, 1rem + 4.9vw, 4.5rem);
  font-weight:600; letter-spacing:-.032em; line-height:.99;
  margin:0 0 1.25rem;
  text-wrap:balance;
  text-shadow:0 2px 34px rgba(10,8,7,.6);
}
.hero__lede{
  font-size:clamp(1.02rem,.98rem + .32vw,1.2rem);
  color:#cfc4b9; max-width:34rem; margin-bottom:1.65rem;
  text-shadow:0 1px 18px rgba(10,8,7,.7);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* the fact strip sits on the bottom edge, full width, like a plinth */
.facts{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(240,232,221,.16);
  background:linear-gradient(180deg, rgba(14,12,11,.25), rgba(14,12,11,.6));
  backdrop-filter:blur(3px);
}
.facts li{
  padding:1.15rem 1.4rem 1.25rem;
  border-right:1px solid rgba(240,232,221,.12);
}
.facts li:first-child{ padding-left:0; }
.facts li:last-child{ border-right:0; }
.facts__k{
  display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember); margin-bottom:.45rem; font-weight:600;
}
.facts__v{ display:block; font-size:.95rem; font-weight:600; }
.facts__v em{
  display:block; font-style:normal; font-weight:400;
  color:var(--fg-muted); font-size:.8em; margin-top:.15rem;
}

/* ── the room ──────────────────────────────────────────────────────────── */
.place{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:clamp(5rem,11vw,9rem) var(--pad);
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
}
.place__figures{ position:relative; padding-bottom:clamp(2rem,4vw,3.5rem); max-width:30rem; }
.place__fig{ margin:0; overflow:hidden; border-radius:2px; }
.place__fig--a img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 34%; }
.place__fig--b{
  position:absolute; right:-1.75rem; bottom:0; width:53%;
  border:10px solid var(--ink); border-radius:2px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.place__fig--b img{ width:100%; aspect-ratio:1/1; object-fit:cover; }

.place__body p{ color:var(--fg-muted); max-width:34rem; }

.specs{ margin:2.4rem 0 0; border-top:1px solid var(--rule); }
.specs > div{
  display:grid; grid-template-columns:minmax(7rem,10rem) 1fr; gap:1rem;
  padding:.95rem 0; border-bottom:1px solid var(--rule);
}
.specs dt{
  font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ember); font-weight:600; padding-top:.22rem;
}
.specs dd{ margin:0; font-size:.95rem; }

/* ── menu (pale section) ───────────────────────────────────────────────── */
.menu,
.reviews{
  --bg:var(--cream);
  --fg:#191411;
  --fg-muted:#6c6058;
  --rule:#dccfbc;
  background:var(--bg); color:var(--fg);
}
.menu{ position:relative; z-index:2; padding:clamp(4.5rem,10vw,8rem) 0; }
.menu .eyebrow{ color:var(--ember-2); }

.menu__head{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
}
.menu__intro{ max-width:42rem; color:var(--fg-muted); font-size:1.05rem; }

.menu__tabs{
  max-width:var(--max); margin:2.8rem auto 0; padding:0 var(--pad);
  display:flex; flex-wrap:wrap; gap:.4rem;
  border-bottom:1px solid var(--rule);
}
.menu__tabs button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--fg-muted);
  padding:.85rem 1.05rem; margin-bottom:-1px;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.menu__tabs button:hover{ color:var(--fg); }
.menu__tabs button[aria-selected="true"]{ color:var(--fg); border-bottom-color:var(--ember-2); }

.menu__panels{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.panel{
  padding-top:clamp(2.2rem,4vw,3.4rem);
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.panel[hidden]{ display:none; }

.panel{ display:block; }

/* ── menu cards ────────────────────────────────────────────────────────── */
.mcards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,1.8vw,1.5rem);
}
.mcard{
  display:flex; flex-direction:column;
  background:#fbf7f1;
  border:1px solid var(--rule); border-radius:3px;
  overflow:hidden;
  transition:border-color .25s, box-shadow .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.mcard:hover{
  border-color:rgba(194,118,44,.45);
  box-shadow:0 12px 30px rgba(60,42,24,.09);
  transform:translateY(-2px);
}
.mcard__img{ overflow:hidden; background:rgba(0,0,0,.05); }
.mcard__img img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.mcard:hover .mcard__img img{ transform:scale(1.05); }

.mcard__body{
  display:flex; flex-direction:column; flex:1;
  padding:1.35rem 1.35rem 1.2rem;
}
.mcard__name{
  font-family:var(--serif); font-variation-settings:"SOFT" 30,"WONK" 0;
  font-size:1.18rem; font-weight:600; letter-spacing:-.012em; line-height:1.2;
  margin:0 0 .5rem;
}
.mcard__desc{
  font-size:.89rem; line-height:1.6; color:var(--fg-muted);
  margin:0 0 1.1rem; flex:1;
}
.mcard__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:auto;
  padding-top:.9rem; border-top:1px solid var(--rule);
}
.mcard__price{
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.mcard__order{
  flex:none; text-decoration:none;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#191006; background:var(--ember);
  padding:.62rem 1.05rem; border-radius:2px;
  transition:background .22s, color .22s;
}
.mcard__order:hover{ background:#191411; color:var(--cream); }

.menu__note{
  max-width:var(--max); margin:clamp(3rem,6vw,4.5rem) auto 0;
  padding:0 var(--pad);
  font-size:.85rem; color:var(--fg-muted);
}
.menu__note::before{
  content:""; display:block; width:min(100%,34rem);
  border-top:1px solid var(--rule); margin-bottom:1.5rem;
}

/* ── what's on ─────────────────────────────────────────────────────────── */
.onnow{
  position:relative; z-index:2; background:var(--ink-2);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
  max-width:var(--max); margin:0 auto;
  padding:clamp(4rem,8vw,6.5rem) var(--pad);
}
.onnow__media{ position:relative; }
.onnow__media img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px;
}
.onnow__media::after{
  content:""; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(190deg, rgba(18,16,15,.1) 40%, rgba(18,16,15,.55) 100%);
  pointer-events:none;
}
.onnow__list{ margin-top:.5rem; }
.onnow__item{
  padding:1.55rem 0; border-top:1px solid var(--rule);
}
.onnow__item:first-child{ padding-top:.6rem; border-top:0; }
.onnow__item:last-child{ padding-bottom:0; }
.onnow__item h3{
  font-family:var(--serif); font-variation-settings:"SOFT" 35,"WONK" 1;
  font-size:1.55rem; margin-bottom:.55rem;
}
.onnow__item p{ color:var(--fg-muted); font-size:.96rem; max-width:36rem; }

/* ── gallery ───────────────────────────────────────────────────────────── */
.gallery{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:clamp(4.5rem,10vw,8rem) var(--pad);
}
.gallery__head{ margin-bottom:clamp(2rem,4vw,3rem); }
.gallery__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:13rem; gap:.7rem;
  /* the wide/tall tiles otherwise punch holes in the pack */
  grid-auto-flow:dense;
}
.shot{
  padding:0; border:0; background:var(--ink-3); cursor:zoom-in;
  overflow:hidden; position:relative; border-radius:2px;
}
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1), filter .5s;
  filter:saturate(.92);
}
.shot:hover img{ transform:scale(1.05); filter:saturate(1.06); }
.shot--tall{ grid-row:span 2; }
.shot--wide{ grid-column:span 2; }

/* ── reviews (pale section) ────────────────────────────────────────────── */
.reviews{
  position:relative; z-index:2;
  padding:clamp(4.5rem,10vw,7.5rem) var(--pad);
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:start;
}
.reviews__intro .eyebrow{ color:var(--ember-2); }
.reviews__intro .h2{ margin-bottom:1rem; }
.reviews__note{ font-size:.95rem; color:var(--fg-muted); max-width:22rem; margin:0; }
.reviews .link{ color:var(--ember-2); }

.reviews__quotes{ display:grid; gap:2.4rem; }
.quote{ margin:0; padding-left:1.6rem; border-left:2px solid var(--ember-2); }
.quote blockquote{ margin:0; }
.quote blockquote p{
  font-family:var(--serif); font-variation-settings:"SOFT" 35,"WONK" 1;
  font-size:clamp(1.25rem,.95rem + 1.1vw,1.85rem);
  line-height:1.28; letter-spacing:-.015em; margin:0 0 .9rem;
}
.quote figcaption{ font-size:.85rem; font-weight:700; letter-spacing:.04em; }
.quote figcaption span{ font-weight:400; color:var(--fg-muted); }

/* ── visit ─────────────────────────────────────────────────────────────── */
.visit{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:clamp(4.5rem,10vw,8rem) var(--pad) clamp(3rem,6vw,5rem);
}
.visit__head{ margin-bottom:clamp(2rem,4vw,3.2rem); }
.visit__cols{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.8rem,4vw,3.5rem);
  border-top:1px solid var(--rule); padding-top:2.4rem;
}
.visit__h{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember); margin-bottom:1.2rem; font-weight:700;
}
.hours{ width:100%; border-collapse:collapse; font-size:.92rem; }
.hours th{
  text-align:left; font-weight:400; color:var(--fg-muted);
  padding:.42rem 0; font-size:.92rem;
}
.hours td{ text-align:right; padding:.42rem 0; font-variant-numeric:tabular-nums; }

.visit address{ font-style:normal; font-size:1.02rem; line-height:1.75; margin-bottom:1rem; }
.fineprint{ font-size:.82rem; color:var(--fg-muted); margin-top:1rem; }

.contact li{
  display:grid; grid-template-columns:5.5rem 1fr; gap:.8rem;
  padding:.62rem 0; border-bottom:1px solid var(--rule); font-size:.92rem;
}
.contact li span{ color:var(--fg-muted); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; padding-top:.28rem; }
.contact li a{ text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:1px; }
.contact li a:hover{ border-bottom-color:var(--ember); color:var(--ember); }

.visit__map{
  margin-top:clamp(2.5rem,5vw,4rem);
  height:clamp(16rem,34vw,24rem); overflow:hidden; border-radius:2px;
  border:1px solid var(--rule); background:var(--ink-3);
}
.visit__map iframe{
  width:100%; height:100%; border:0;
  filter:grayscale(.35) sepia(.14) brightness(.86) contrast(1.02);
  transition:filter .45s ease;
}
.visit__map:hover iframe{ filter:none; }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot{
  position:relative; z-index:2; background:var(--ink-2);
  border-top:1px solid var(--rule);
  padding:clamp(3rem,6vw,4.5rem) var(--pad) 1.5rem;
}
.foot__inner{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; align-items:start;
}
.foot__logo{
  width:84px; height:84px; border-radius:50%;
  box-shadow:0 0 0 1px rgba(240,232,221,.12), 0 10px 30px rgba(0,0,0,.5);
}
.foot__tag{ font-size:.86rem; color:var(--fg-muted); margin:1.1rem 0 0; line-height:1.6; }
.foot__nav{ display:flex; flex-direction:column; gap:.55rem; }
.foot__nav a,
.foot__meta a{
  font-size:.88rem; text-decoration:none; color:var(--fg-muted); transition:color .2s;
}
.foot__nav a:hover,
.foot__meta a:hover{ color:var(--ember); }
.foot__meta{ display:flex; flex-direction:column; gap:.55rem; font-size:.88rem; color:var(--fg-muted); }
.foot__rule{
  max-width:var(--max); margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  padding-top:1.4rem; border-top:1px solid var(--rule);
  font-size:.76rem; color:var(--fg-muted); letter-spacing:.03em;
}

/* ── lightbox ──────────────────────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:90; background:rgba(10,9,8,.94);
  display:grid; place-items:center; padding:clamp(1rem,5vw,4rem);
  backdrop-filter:blur(6px);
}
.lightbox[hidden]{ display:none; }
.lightbox__fig{ margin:0; max-width:min(56rem,92vw); }
.lightbox__fig img{
  max-height:78svh; width:auto; margin:0 auto; border-radius:2px;
}
.lightbox__fig figcaption{
  margin-top:1rem; text-align:center; font-size:.86rem;
  color:var(--fg-muted); font-style:italic;
}
.lightbox__close{
  position:absolute; top:1rem; right:1.2rem; z-index:2;
  background:none; border:0; color:var(--cream); font-size:2.4rem;
  line-height:1; cursor:pointer; padding:.2rem .6rem;
}
.lightbox__close:hover{ color:var(--ember); }

/* ── phone quick bar ───────────────────────────────────────────────────── */
.quickbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(18,16,15,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
}
.quickbar a{
  flex:1; text-align:center; padding:.95rem .4rem; text-decoration:none;
  font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  border-right:1px solid var(--rule); color:var(--fg);
}
.quickbar a:last-child{ border-right:0; }
.quickbar a:first-child{ color:var(--ember); }

/* ── scroll reveal ─────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-in{ opacity:1; transform:none; transition:none; }
  .shot img{ transition:none; }
}

/* ── page head (menu / contact pages) ──────────────────────────────────── */
.page-head{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:9rem var(--pad) clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--rule);
}
.page-head .h2{ margin-bottom:1rem; }
.page-head__lede{
  color:var(--fg-muted); max-width:40rem;
  font-size:clamp(1rem,.97rem + .25vw,1.13rem); margin:0;
}

/* ── home page taster cards (dishes pulled from the live menu) ─────────── */
.tastes{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:clamp(4.5rem,10vw,7.5rem) var(--pad);
}
.tastes__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-bottom:clamp(2rem,4vw,3rem); flex-wrap:wrap;
}
.tastes__head .h2{ margin-bottom:0; }
.tastes__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.5vw,2rem);
}
.taste{
  display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--rule); border-radius:2px;
  overflow:hidden; transition:border-color .3s, transform .4s cubic-bezier(.2,.7,.3,1);
}
.taste:hover{ border-color:rgba(224,145,63,.4); transform:translateY(-3px); }
.taste__img{ overflow:hidden; }
.taste__img img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.taste:hover .taste__img img{ transform:scale(1.05); }
.taste__body{ padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.taste__cat{
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember); margin:0 0 .55rem; font-weight:600;
}
.taste__body h3{
  font-family:var(--serif); font-variation-settings:"SOFT" 30,"WONK" 0;
  font-size:1.3rem; letter-spacing:-.012em; margin:0 0 .5rem;
}
.taste__desc{ font-size:.9rem; color:var(--fg-muted); margin:0 0 1rem; flex:1; }
.taste__price{
  font-family:var(--serif); font-size:1.1rem; font-weight:600;
  margin:0; font-variant-numeric:tabular-nums;
}

/* ── contact page ──────────────────────────────────────────────────────── */
.contact-page{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:clamp(3rem,6vw,4.5rem) var(--pad) clamp(3rem,6vw,5rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:start;
}
.contact-card{
  border-top:1px solid var(--rule); padding-top:2rem; margin-bottom:2.5rem;
}
.contact-card:last-child{ margin-bottom:0; }
.contact-card h2{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember); margin-bottom:1.2rem; font-weight:700;
}
.contact-lead{
  font-family:var(--serif); font-variation-settings:"SOFT" 35,"WONK" 1;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem); line-height:1.15;
  letter-spacing:-.02em; margin:0 0 .6rem; text-decoration:none;
  display:inline-block;
}
a.contact-lead:hover{ color:var(--ember); }

@media (max-width:900px){
  .page-hero{ padding-top:9rem; min-height:auto; }
  .mcards{ grid-template-columns:repeat(2,1fr); }
  .tastes__grid{ grid-template-columns:repeat(2,1fr); }
  .contact-page{ grid-template-columns:1fr; }
  .page-head{ padding-top:7.5rem; }
}
@media (max-width:640px){
  .page-hero{ padding-top:8rem; }
  .page-hero__bg img{ object-position:58% 55%; }
  .page-hero__scrim{
    background:linear-gradient(180deg, rgba(14,12,11,.9) 0%, rgba(14,12,11,.5) 25%,
                                       rgba(14,12,11,.66) 55%, rgba(18,16,15,.97) 100%);
  }
  .mcards{ grid-template-columns:1fr; gap:.9rem; }
  .mcard__body{ padding:1.15rem 1.15rem 1rem; }
  .tastes__grid{ grid-template-columns:1fr; }
  .tastes__head{ flex-direction:column; align-items:flex-start; gap:1rem; }
}

/* ── nav current-page state ────────────────────────────────────────────── */
.nav a.is-current{ color:var(--fg); }
.nav a.is-current::after{ transform:scaleX(1); }

/* ── masthead order button ─────────────────────────────────────────────── */
.masthead__order{ white-space:nowrap; }

/* ── page-head CTA row ─────────────────────────────────────────────────── */
.page-head__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.8rem 0 0; }

/* ── drawer gets the order button too ──────────────────────────────────── */
.drawer__foot{ align-items:flex-start; }
.drawer__foot .btn{ margin-bottom:.6rem; }

/* ── menu as a standalone page ─────────────────────────────────────────── */
.menu--page{ padding-top:clamp(3rem,6vw,4.5rem); }

/* ── taster cards with no photograph ──────────────────────────────────── */
.tastes__grid--text{ grid-template-columns:repeat(3,1fr); gap:0; }
.tastes__grid--text .taste{
  background:none; border:0; border-top:1px solid var(--rule);
  border-radius:0; padding:1.6rem 1.6rem 1.8rem 0;
}
.tastes__grid--text .taste:hover{ transform:none; border-color:var(--rule); }
.taste--text .taste__body{ padding:0; }
.taste--text .taste__body h3{ font-size:1.45rem; }
.tastes__grid--text .taste__price{ color:var(--ember); }

@media (max-width:900px){
  .tastes__grid--text{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .tastes__grid--text{ grid-template-columns:1fr; }
}

/* ── page hero (contact) ───────────────────────────────────────────────── */
.page-hero{
  position:relative; z-index:2; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:min(58svh,32rem);
  padding:11rem 0 clamp(2.5rem,5vw,4rem);
  overflow:hidden;
}
.page-hero__bg{ position:absolute; inset:0; z-index:-2; display:block; }
.page-hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 55%;
}
.page-hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(80deg, rgba(14,12,11,.95) 0%, rgba(14,12,11,.86) 30%,
                           rgba(14,12,11,.55) 58%, rgba(14,12,11,.3) 100%),
    linear-gradient(180deg, rgba(14,12,11,.86) 0%, rgba(14,12,11,.2) 28%,
                            rgba(14,12,11,.35) 65%, rgba(18,16,15,.96) 100%);
}
.page-hero__inner{
  width:100%; max-width:var(--max); margin:0 auto;
  padding:0 var(--pad);
}
.page-hero .h2{ margin-bottom:1rem; text-shadow:0 2px 30px rgba(10,8,7,.55); }
.page-hero .page-head__lede{ max-width:38rem; color:#cfc4b9; }

/* ── footer credit ─────────────────────────────────────────────────────── */
.foot__credit{
  max-width:var(--max); margin:.7rem auto 0;
  font-size:.74rem; color:var(--fg-muted); letter-spacing:.03em;
  display:flex; flex-wrap:wrap; gap:.45rem; align-items:center;
}
.foot__credit a{
  color:var(--fg-muted); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.foot__credit a:hover{ color:var(--ember); border-bottom-color:currentColor; }
.foot__credit span{ opacity:.5; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:clamp(4.5rem,10vw,7.5rem) var(--pad);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:start;
}
.faq__head .h2{ margin-bottom:1rem; }
.faq__lede{ color:var(--fg-muted); font-size:.98rem; max-width:24rem; margin:0; }
.faq__lede a{ color:var(--ember); text-decoration:none; border-bottom:1px solid currentColor; }

.faq__list{ border-top:1px solid var(--rule); }
.faq__item{ border-bottom:1px solid var(--rule); }
.faq__item summary{
  list-style:none; cursor:pointer;
  padding:1.4rem 3rem 1.4rem 0; position:relative;
  transition:color .2s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary h3{
  font-family:var(--serif); font-variation-settings:"SOFT" 30,"WONK" 0;
  font-size:1.18rem; font-weight:600; letter-spacing:-.01em;
  margin:0; display:inline;
}
.faq__item summary:hover h3{ color:var(--ember); }
/* the +/- affordance */
.faq__item summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  width:13px; height:1.5px; background:var(--ember);
  transform:translateY(-50%);
}
.faq__item summary::before{
  content:""; position:absolute; right:calc(.35rem + 5.75px); top:50%;
  width:1.5px; height:13px; background:var(--ember);
  transform:translateY(-50%); transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.faq__item[open] summary::before{ transform:translateY(-50%) rotate(90deg); }

.faq__answer{ padding:0 2.5rem 1.6rem 0; }
.faq__answer p{
  color:var(--fg-muted); font-size:.96rem; line-height:1.7;
  margin:0 0 .9rem; max-width:40rem;
}
.faq__answer p:last-child{ margin-bottom:0; }
.faq__answer a{ color:var(--ember); text-decoration:none; border-bottom:1px solid var(--rule); }
.faq__answer a:hover{ border-bottom-color:currentColor; }
.faq__answer strong{ color:var(--fg); font-weight:600; }

@media (max-width:900px){
  .faq{ grid-template-columns:1fr; }
}

/* ══════════════════════════ breakpoints ══════════════════════════ */

@media (max-width:1080px){
  .nav{ gap:1.25rem; }
  .nav a{ font-size:.75rem; }
  .gallery__grid{ grid-auto-rows:11rem; }
  .facts li{ padding-inline:1rem; }
}

@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:block; }
  .masthead__order{ padding:.7rem 1rem; font-size:.72rem; }
  .wordmark__mark{ width:42px; height:42px; }

  .hero{ padding-top:7rem; min-height:88svh; }
  .hero__bg img{ object-position:62% 50%; }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(14,12,11,.9)  0%,
      rgba(14,12,11,.55) 22%,
      rgba(14,12,11,.72) 52%,
      rgba(18,16,15,.97) 100%);
  }
  .hero__text{ max-width:none; }

  .facts li{ padding:1rem 1.1rem; }
  .facts li:nth-child(odd){ padding-left:0; }

  .place{ grid-template-columns:1fr; }
  .place__figures{ padding-bottom:4rem; max-width:34rem; }
  .place__fig--b{ right:0; width:48%; }


  .onnow{ grid-template-columns:1fr; }
  .onnow__media{ max-width:30rem; }
  .onnow__media img{ aspect-ratio:4/3; }

  .reviews{ grid-template-columns:1fr; }

  .visit__cols{ grid-template-columns:1fr; gap:2.6rem; }
  .foot__inner{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1/-1; }
}

@media (max-width:640px){
  .wordmark__sub{ font-size:.58rem; letter-spacing:.16em; }
  .masthead__order{ display:none; }
  .hero{ padding-top:6.25rem; }
  .hero__cta .btn{ flex:1 1 auto; }

  .facts li{ padding:.85rem .9rem; }
  .facts__k{ font-size:.6rem; letter-spacing:.16em; }
  .facts__v{ font-size:.88rem; }
  .facts__v em{ font-size:.76em; }

  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:9.5rem; grid-auto-flow:dense; }
  .shot--wide{ grid-column:span 2; }
  .shot--tall{ grid-row:span 2; }

  .quickbar{ display:flex; }
  body{ padding-bottom:3.4rem; }

  .menu__tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .menu__tabs::-webkit-scrollbar{ display:none; }
  .menu__tabs button{ white-space:nowrap; }

  .contact li{ grid-template-columns:1fr; gap:.15rem; }
  .contact li span{ padding-top:0; }

  .foot__inner{ grid-template-columns:1fr; gap:2rem; }
  .foot__logo{ width:72px; height:72px; }
}

@media print{
  .masthead,.quickbar,.grain,.gallery,.visit__map,.drawer,
  .hero__bg,.hero__scrim,.onnow__media{ display:none; }
  body{ background:#fff; color:#000; }
  .hero{ min-height:auto; padding-top:1rem; }
}