/* ==========================================================================
   GRATA BAKEHOUSE — Design System v2
   --------------------------------------------------------------------------
   Palette sampled from source-of-truth brand artefacts:
     grape   #2E0E62  sampled from the printed menu ground
     sage    #8C9D83  sampled from the BAKEHOUSE wordmark
     lilac   #B9A9DC  the shopfront awning
     terra   #C4796B  the café chairs
     cream / sand / travertine  the photography set
   Rule: no pure black, no pure white, no saturated accent.
   ========================================================================== */

:root{
  /* ---- brand ---- */
  --grape:        #2E0E62;
  --grape-lift:   #4A2596;
  --lilac:        #B9A9DC;
  --lilac-wash:   #EFEAF8;
  --sage:         #8C9D83;   /* wordmark green — decorative use only */
  --sage-deep:    #63745B;   /* text-safe sage, 4.67:1 on cream */
  --sage-wash:    #E4E8DD;
  --terra:        #C4796B;   /* large display text only (3.1:1) */
  --terra-deep:   #A55C4E;   /* text-safe terracotta, 4.88:1 on surface */

  /* ---- surfaces ---- */
  --cream:        #FBF6EF;
  --sand:         #F2E9DC;
  --travertine:   #E4D8C7;

  /* ---- semantic (light) ---- */
  --bg:           var(--cream);
  --bg-alt:       var(--sand);
  --surface:      #FFFDFA;
  --ink:          #1B0B3B;
  --ink-70:       #56466F;
  --ink-45:       #6F6285;   /* 5.19:1 on cream, 4.64:1 on sand — safe at 14px */
  --ink-20:       rgba(27,11,59,.20);
  --hairline:     rgba(27,11,59,.13);
  --accent:       var(--grape);
  --accent-ink:   var(--cream);

  /* ---- type ---- */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-display: clamp(3.4rem, 10.5vw, 10.5rem);
  --t-h1:      clamp(2.6rem, 6.6vw, 5.9rem);
  --t-h2:      clamp(2rem,  4.6vw, 4rem);
  --t-h3:      clamp(1.35rem, 2.1vw, 1.9rem);
  --t-lede:    clamp(1.06rem, 1.55vw, 1.32rem);
  --t-body:    1.0625rem;
  --t-small:   .875rem;
  --t-micro:   .7rem;

  /* ---- rhythm ---- */
  --gap:       clamp(1.25rem, 2.6vw, 2.5rem);
  --section:   clamp(3.75rem, 7vw, 7rem);
  --pad:       clamp(1.25rem, 4.4vw, 3.5rem);
  --maxw:      1360px;
  --maxw-text: 68ch;

  /* ---- motion ---- */
  --ease:      cubic-bezier(.22,.72,.26,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur-fast:  .32s;
  --dur:       .62s;
  --dur-slow:  1.05s;

  --radius:    18px;
  --radius-lg: 34px;
}

/* ---------------------------- dark mode ---------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:         #15082E;
    --bg-alt:     #1D0D3D;
    --surface:    #23124A;
    --ink:        #F4EDE3;
    --ink-70:     #C3B4D6;
    --ink-45:     #9083A6;
    --ink-20:     rgba(244,237,227,.22);
    --hairline:   rgba(244,237,227,.15);
    --accent:     var(--lilac);
    --accent-ink: #1B0B3B;
    --travertine: #33204F;
    --sand:       #1D0D3D;
  }
}
:root[data-theme="dark"]{
  --bg:#15082E; --bg-alt:#1D0D3D; --surface:#23124A;
  --ink:#F4EDE3; --ink-70:#C3B4D6; --ink-45:#9083A6;
  --ink-20:rgba(244,237,227,.22); --hairline:rgba(244,237,227,.15);
  --accent:var(--lilac); --accent-ink:#1B0B3B; --travertine:#33204F; --sand:#1D0D3D;
}

/* ---------------------------- reset -------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.62;
  font-weight:400;letter-spacing:-.006em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background .6s var(--ease),color .6s var(--ease);
}
img,svg,video{display:block;max-width:100%}
picture{display:contents}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--grape);color:var(--cream)}
:focus-visible{outline:2.5px solid var(--sage-deep);outline-offset:4px;border-radius:6px}

h1,h2,h3,.serif{
  font-family:var(--serif);font-weight:400;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
  line-height:.98;letter-spacing:-.028em;text-wrap:balance;
}
h1 em,h2 em,.serif em{font-style:italic;font-weight:300;font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1}

/* ---------------------------- layout ------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:980px;margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section)}
.lede{font-size:var(--t-lede);color:var(--ink-70);max-width:var(--maxw-text);line-height:1.55}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-deep);
}
.eyebrow::before{content:'';width:1.6rem;height:1px;background:currentColor;opacity:.6}

.rule{height:1px;background:var(--hairline);border:0}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr-link:focus{position:fixed;top:.75rem;left:.75rem;width:auto;height:auto;clip:auto;z-index:400;
  background:var(--grape);color:var(--cream);padding:.85rem 1.4rem;border-radius:99px;font-weight:600}

/* ---------------------------- buttons ------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.9rem;border:0;border-radius:99px;cursor:pointer;
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  transition:transform var(--dur) var(--ease),background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--accent);color:var(--accent-ink);
  box-shadow:0 14px 30px -18px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn--solid:hover{box-shadow:0 22px 44px -20px color-mix(in srgb,var(--accent) 85%,transparent)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-20)}
.btn--line:hover{box-shadow:inset 0 0 0 1px var(--ink);background:transparent}
.btn--cream{background:var(--cream);color:var(--grape)}
.btn--ghost-cream{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(251,246,239,.32)}
.btn--ghost-cream:hover{background:var(--cream);color:var(--grape)}
.btn--sm{padding:.62rem 1.25rem;font-size:.845rem}

/* the quiet text link with the sage underline that grows */
.tlink{position:relative;font-weight:500;padding-bottom:2px}
.tlink::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;opacity:.28;transform-origin:right;transition:transform var(--dur) var(--ease)}
.tlink:hover::after{transform:scaleX(0);transform-origin:left}
.tlink span{position:relative}
.tlink span::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--sage-deep);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease) .06s}
.tlink:hover span::after{transform:scaleX(1)}

/* ---------------------------- reveal motion ------------------------------ */
.rv{opacity:0;transform:translateY(1.4rem);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-out)}
.rv-img.in{clip-path:inset(0 0 0 0)}
[data-stagger]>*{transition-delay:calc(var(--i,0) * 90ms)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .rv-img{clip-path:none}
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.announce{
  background:var(--grape);color:var(--cream);text-align:center;
  font-size:.8125rem;font-weight:400;letter-spacing:.01em;padding:.6rem 1rem;
}
.announce b{font-weight:500}
.announce i{font-style:normal;opacity:.45;padding-inline:.7rem}

.nav{position:sticky;top:0;z-index:120;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.nav.stuck{border-bottom-color:var(--hairline)}
.nav__in{max-width:var(--maxw);margin-inline:auto;padding:1.05rem var(--pad);
  display:flex;align-items:center;gap:1.5rem}
.nav__brand{flex:0 0 auto}
.nav__primary{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.nav__brand{display:block}
.nav__brand img{height:clamp(2.4rem,3.6vw,3.4rem);width:auto}
/* which wordmark shows is set by JS syncMark(), so it stays correct for
   system-dark, stored-light and stored-dark alike */

.nav__links{display:flex;gap:clamp(1.1rem,2vw,2rem);list-style:none;align-items:center;
  margin:0;padding:0}
.nav__links a{font-size:.9rem;font-weight:450;color:var(--ink-70);
  transition:color var(--dur-fast) var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__actions{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.themetog{background:none;border:0;cursor:pointer;padding:.5rem;border-radius:99px;
  color:var(--ink-45);transition:color var(--dur-fast) var(--ease)}
.themetog:hover{color:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:.6rem;cursor:pointer}
.burger i{display:block;width:1.25rem;height:1.5px;background:var(--ink);margin:.3rem 0;border-radius:2px;
  transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(.45rem) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-.45rem) rotate(-45deg)}
.mnav{display:none;padding:.5rem var(--pad) 1.5rem;border-top:1px solid var(--hairline)}
.mnav a{display:block;padding:.95rem 0;font-size:1.15rem;font-family:var(--serif);
  border-bottom:1px solid var(--hairline)}
.mnav .btn{margin-top:1.25rem;width:100%}

@media (max-width:900px){
  .nav__primary,.nav__actions{display:none}
  .burger{display:block}
  .mnav.open{display:block}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;padding-top:clamp(2.25rem,4.5vw,3.75rem);text-align:center;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:-30% 50% auto auto;transform:translateX(50%);
  width:min(120vw,1200px);aspect-ratio:1.5;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--lilac) 42%,transparent),transparent 65%);
}
.hero__copy{position:relative;max-width:1100px;margin-inline:auto;padding-inline:var(--pad)}
.hero h1{font-size:var(--t-display);color:var(--accent);margin:.75rem 0 1.15rem;letter-spacing:-.038em}
.hero h1 em{color:var(--terra)}
.hero .lede{margin-inline:auto;text-align:center}
.hero__cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;
  margin-block:clamp(1.5rem,2.6vw,2rem) clamp(1.75rem,3.2vw,2.5rem)}

/* the Apple-style scroll expander: image grows into full bleed */
.expander{padding-inline:var(--pad)}
.expander__in{
  max-width:1520px;margin-inline:auto;overflow:hidden;
  border-radius:var(--er,var(--radius-lg));transform:scale(var(--es,.92));
  transform-origin:center top;will-change:transform;
  box-shadow:0 60px 120px -70px rgba(27,11,59,.55);
}
.expander__in img{width:100%;aspect-ratio:16/9;object-fit:cover}

.factbar{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.75rem,5vw,4.5rem);
  padding:clamp(1.75rem,3vw,2.5rem) var(--pad) 0;text-align:center}
.factbar div{min-width:7rem}
.factbar b{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:400;
  color:var(--accent);letter-spacing:-.02em}
.factbar span{font-size:var(--t-small);color:var(--ink-45)}

/* ---------------------------- marquee ------------------------------------ */
.marquee{background:var(--grape);color:var(--cream);overflow:hidden;white-space:nowrap;
  padding-block:1.1rem;margin-top:clamp(2.5rem,5vw,4rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;will-change:transform;
  animation:mq var(--mq-dur,40s) linear infinite}
.marquee__group{display:flex;flex:0 0 auto}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--serif);font-size:1.35rem;font-weight:300;padding-inline:1.5rem;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0}
.marquee__track i{font-style:normal;color:var(--lilac);font-size:.7rem;vertical-align:.35em}
@keyframes mq{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--mq-shift,50%)))}
}

/* ==========================================================================
   HERO PRODUCTS  — three iconic bakes, photography-led
   ========================================================================== */
.heroes{display:grid;gap:clamp(2.75rem,5vw,4.25rem)}
.heroes__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(1.75rem,3.2vw,2.75rem)}
.heroes__head h2{font-size:var(--t-h2);color:var(--ink);max-width:16ch;margin-top:1rem}

.bake{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:center;
  grid-template-columns:repeat(12,1fr)}
.bake__fig{grid-column:1 / 8;position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--travertine)}
.bake__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.6s var(--ease-out)}
.bake:hover .bake__fig img{transform:scale(1.035)}
.bake__body{grid-column:8 / 13}
.bake:nth-child(even) .bake__fig{grid-column:6 / 13;order:2}
.bake:nth-child(even) .bake__body{grid-column:1 / 6;order:1}
.bake__no{font-family:var(--serif);font-size:.8rem;color:var(--ink-45);letter-spacing:.1em}
.bake h3{font-size:var(--t-h3);margin:.7rem 0 .8rem;color:var(--ink)}
.bake p{color:var(--ink-70);font-size:.98rem;max-width:34ch}
.bake__meta{display:flex;align-items:baseline;gap:1rem;margin-top:1.1rem;
  padding-top:.9rem;border-top:1px solid var(--hairline)}
.bake__price{font-family:var(--serif);font-size:1.3rem;color:var(--accent)}
.bake__note{font-size:var(--t-small);color:var(--ink-45);margin-left:auto}

@media (max-width:860px){
  .bake,.bake:nth-child(even){grid-template-columns:1fr}
  .bake__fig,.bake:nth-child(even) .bake__fig{grid-column:1/-1;order:1}
  .bake__body,.bake:nth-child(even) .bake__body{grid-column:1/-1;order:2}
  .bake p{max-width:none}
}

/* ==========================================================================
   SIGNATURE COLLECTION — the scroll, in eight finishes
   ========================================================================== */
.signature{background:var(--grape);color:var(--cream);padding-block:var(--section);
  position:relative;overflow:hidden}
.signature .eyebrow{color:var(--lilac)}
.signature h2{font-size:var(--t-h1);margin:1.1rem 0 1.3rem;max-width:14ch}
.signature h2 em{color:var(--lilac)}
.signature .lede{color:rgba(251,246,239,.72)}
.sig__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,5vw,4rem);
  align-items:end}
.sig__intro{grid-column:1 / 6}
.sig__fig{grid-column:7 / 13;border-radius:var(--radius-lg);overflow:hidden}
.sig__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:860px){.sig__intro,.sig__fig{grid-column:1/-1}}

.sig__rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:clamp(2.25rem,4vw,3.25rem);padding-bottom:1.25rem;
  scrollbar-width:thin;scrollbar-color:rgba(251,246,239,.3) transparent}
.sig__rail::-webkit-scrollbar{height:3px}
.sig__rail::-webkit-scrollbar-thumb{background:rgba(251,246,239,.3);border-radius:9px}
.flav{flex:0 0 auto;width:min(15rem,62vw);scroll-snap-align:start;
  background:rgba(251,246,239,.055);border:1px solid rgba(251,246,239,.13);
  border-radius:var(--radius);padding:1.4rem 1.4rem 1.25rem;display:flex;flex-direction:column;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.flav:hover{background:rgba(251,246,239,.11);border-color:rgba(251,246,239,.3);transform:translateY(-3px)}
.flav h3{font-size:1.22rem;margin-bottom:.4rem}
.flav p{font-size:.855rem;color:rgba(251,246,239,.62);line-height:1.5;flex:1}
.flav__foot{display:flex;align-items:baseline;justify-content:space-between;
  margin-top:1.1rem;padding-top:.85rem;border-top:1px solid rgba(251,246,239,.15)}
.flav__price{font-family:var(--serif);font-size:1.05rem}
.flav__tag{font-size:.66rem;color:rgba(251,246,239,.6);letter-spacing:.16em;text-transform:uppercase}
.flav[data-kind="savoury"] .flav__price{color:var(--lilac)}

/* ==========================================================================
   MENU PREVIEW — type-led index, no photography
   ========================================================================== */
.menuidx__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(1.5rem,2.6vw,2.25rem)}
.menuidx__head h2{font-size:var(--t-h2);max-width:14ch;margin-top:1rem}
.catlist{list-style:none}
.cat{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;
  gap:clamp(1rem,3vw,2.5rem);padding:clamp(1.4rem,2.6vw,2.1rem) 0;
  border-top:1px solid var(--hairline);
  transition:padding-inline var(--dur) var(--ease)}
.cat:last-of-type{border-bottom:1px solid var(--hairline)}
.cat:hover{padding-inline:clamp(.4rem,1.4vw,1.1rem)}
.cat__no{font-size:var(--t-micro);color:var(--ink-45);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.cat__name{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.6rem);color:var(--ink);
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;letter-spacing:-.028em;
  transition:color var(--dur) var(--ease)}
.cat:hover .cat__name{color:var(--accent)}
.cat__count{font-size:var(--t-small);color:var(--ink-45);white-space:nowrap}
.cat__from{font-family:var(--serif);font-size:1.05rem;color:var(--ink-70);
  white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .cat{grid-template-columns:auto 1fr;row-gap:.35rem}
  .cat__count{grid-column:2}
  .cat__from{grid-column:2;justify-self:start}
  .cat__no{grid-row:1}
}
.menuidx__foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  margin-top:clamp(1.75rem,3vw,2.5rem)}
.menuidx__note{font-size:var(--t-small);color:var(--ink-45);margin-left:auto;max-width:38ch}

/* ==========================================================================
   WHY GRATA
   ========================================================================== */
.why{background:var(--bg-alt)}
.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.75rem,3vw,2.75rem);margin-top:clamp(1.75rem,3.2vw,2.75rem)}
.why__item{border-top:1px solid var(--hairline);padding-top:1.4rem}
.why__item h3{font-size:1.22rem;margin-bottom:.6rem;color:var(--ink)}
.why__item p{font-size:.93rem;color:var(--ink-70);line-height:1.6}
.why h2{font-size:var(--t-h2);max-width:18ch;margin-top:1rem}
.why h2 em{color:var(--sage-deep)}

/* ==========================================================================
   INSIDE GRATA
   ========================================================================== */
.inside__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.4vw,1.75rem);
  margin-top:clamp(1.75rem,3.2vw,2.75rem)}
.inside__grid figure{border-radius:var(--radius);overflow:hidden;background:var(--travertine)}
.inside__grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease-out)}
.inside__grid figure:hover img{transform:scale(1.04)}
.f-tall{grid-column:span 5;aspect-ratio:3/4}
.f-wide{grid-column:span 7;aspect-ratio:4/3}
.f-half{grid-column:span 6;aspect-ratio:16/10}
@media (max-width:760px){.f-tall,.f-wide,.f-half{grid-column:1/-1}}
.inside__caption{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:1.5rem;
  font-size:var(--t-small);color:var(--ink-45)}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews{background:var(--bg-alt)}
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1.25rem,2.6vw,2rem);margin-top:clamp(1.75rem,3vw,2.5rem)}
.review{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;gap:1rem}
.stars{color:var(--terra-deep);font-size:.8rem;letter-spacing:.18em}
.review blockquote{font-family:var(--serif);font-size:1.12rem;line-height:1.42;
  letter-spacing:-.02em;color:var(--ink)}
.review figcaption{margin-top:auto;font-size:var(--t-small);color:var(--ink-45)}
.reviews__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.reviews__head h2{font-size:var(--t-h2);max-width:16ch;margin-top:1rem}
.gscore{text-align:right}
.gscore b{display:block;font-family:var(--serif);font-size:2.6rem;font-weight:400;color:var(--accent);
  line-height:1}
.gscore span{font-size:var(--t-small);color:var(--ink-45)}

/* ==========================================================================
   INSIDER
   ========================================================================== */
.insider{background:var(--grape);color:var(--cream);padding-block:var(--section)}
.insider .eyebrow{color:var(--lilac)}
.insider__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start}
.insider__copy{grid-column:1 / 6}
.insider__form{grid-column:7 / 13}
.insider h2{font-size:var(--t-h1);margin:1.1rem 0 1.2rem;max-width:11ch}
.insider h2 em{color:var(--lilac)}
.insider__copy p{color:rgba(251,246,239,.72);max-width:38ch}
.perks{list-style:none;margin-top:2rem;display:grid;gap:.85rem}
.perks li{display:flex;gap:.85rem;align-items:flex-start;font-size:.93rem;
  color:rgba(251,246,239,.8)}
.perks li::before{content:'';flex:0 0 auto;width:.4rem;height:.4rem;border-radius:50%;
  background:var(--lilac);margin-top:.62rem}
@media (max-width:860px){.insider__copy,.insider__form{grid-column:1/-1}}

.field{display:grid;gap:.4rem;margin-bottom:1.05rem}
.field label{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,246,239,.66);font-weight:500}
.field input,.field select{
  background:rgba(251,246,239,.06);border:1px solid rgba(251,246,239,.2);
  border-radius:12px;padding:.85rem 1rem;color:var(--cream);font-size:.98rem;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.field input:focus,.field select:focus{outline:none;border-color:var(--lilac);
  background:rgba(251,246,239,.1)}
.field input::placeholder{color:rgba(251,246,239,.35)}
.field select option{background:var(--grape);color:var(--cream)}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
@media (max-width:520px){.fieldrow{grid-template-columns:1fr}}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.8rem;
  color:rgba(251,246,239,.68);line-height:1.5;margin:.6rem 0 1.4rem}
.consent input{margin-top:.25rem;accent-color:var(--lilac)}
.insider__form .btn{width:100%}
.formnote{font-size:.75rem;color:rgba(251,246,239,.58);margin-top:.9rem;text-align:center}

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */
.ig__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.ig__head h2{font-size:var(--t-h2);margin-top:1rem}
.ig__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:clamp(.5rem,1.2vw,.9rem);margin-top:clamp(1.5rem,2.6vw,2.25rem)}
.ig__grid a{position:relative;border-radius:12px;overflow:hidden;background:var(--travertine);
  aspect-ratio:1}
.ig__grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out),
  filter var(--dur) var(--ease)}
.ig__grid a:hover img{transform:scale(1.06)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--grape);color:var(--cream);padding-top:clamp(3rem,5vw,4.5rem)}
.foot__top{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2.25rem,4vw,3.25rem)}
.foot__brand{grid-column:1 / 5}
.foot__brand img{height:clamp(3.2rem,5vw,4.6rem);width:auto;max-width:22rem;margin-bottom:1.5rem;
  object-fit:contain;object-position:left center}
.foot__brand p{font-size:.9rem;color:rgba(251,246,239,.7);max-width:30ch}
.foot__col--menu{grid-column:6 / 8}
.foot__col--grata{grid-column:8 / 10}
.foot__col--find{grid-column:10 / 13}
.foot h4{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,246,239,.6);font-weight:500;margin-bottom:1.1rem;font-family:var(--sans)}
.foot ul{list-style:none;display:grid;gap:.65rem}
.foot a{font-size:.9rem;color:rgba(251,246,239,.78);transition:color var(--dur-fast) var(--ease)}
.foot a:hover{color:var(--cream)}
.foot address{font-style:normal;font-size:.9rem;color:rgba(251,246,239,.78);line-height:1.7}
.foot__bar{border-top:1px solid rgba(251,246,239,.15);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.78rem;color:rgba(251,246,239,.6)}
.foot__bar nav{display:flex;gap:1.5rem;flex-wrap:wrap}
@media (max-width:860px){
  .foot__brand{grid-column:1/-1}
  .foot__col--menu,.foot__col--grata,.foot__col--find{grid-column:span 6}
}

/* ---------------------------- mobile action bar -------------------------- */
.actionbar{display:none}
@media (max-width:760px){
  .actionbar{
    display:grid;grid-template-columns:repeat(3,1fr);position:fixed;
    left:.6rem;right:.6rem;bottom:.6rem;z-index:130;
    background:color-mix(in srgb,var(--grape) 94%,transparent);
    backdrop-filter:blur(14px);border-radius:99px;padding:.35rem;
    box-shadow:0 18px 40px -18px rgba(27,11,59,.7);
    transform:translateY(var(--ab,150%));transition:transform .5s var(--ease)}
  .actionbar.show{--ab:0}
  .actionbar a{display:flex;flex-direction:column;align-items:center;gap:.15rem;
    padding:.6rem .4rem;color:rgba(251,246,239,.75);font-size:.66rem;letter-spacing:.04em;
    border-radius:99px}
  .actionbar a.primary{background:var(--cream);color:var(--grape);font-weight:600}
  .actionbar svg{width:1.05rem;height:1.05rem}
  body{padding-bottom:4.5rem}
}

/* ==========================================================================
   V3 ADDITIONS — components for the scroll-led narrative
   ========================================================================== */

/* ---- coffee pairings: type-led, one anchor image ---- */
.pairs{background:var(--bg-alt)}
.pairs__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4.5vw,4rem);
  align-items:center}
.pairs__fig{grid-column:1 / 6;border-radius:var(--radius-lg);overflow:hidden;background:var(--travertine)}
.pairs__fig img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.8s var(--ease-out)}
.pairs__fig:hover img{transform:scale(1.04)}
.pairs__body{grid-column:7 / 13}
.pairs__body h2{font-size:var(--t-h2);margin:1rem 0 1rem}
.pairs__body h2 em{color:var(--terra)}
@media (max-width:860px){.pairs__fig,.pairs__body{grid-column:1/-1}}

.pairlist{margin-top:1.75rem}
.pairlist>div{display:grid;grid-template-columns:1fr auto;gap:.35rem 1.5rem;
  padding:1rem 0;border-top:1px solid var(--hairline);align-items:baseline}
.pairlist dt{font-family:var(--serif);font-size:1.08rem;letter-spacing:-.02em;color:var(--ink)}
.pairlist .pairlist__drink{font-family:var(--serif);font-size:1.08rem;color:var(--accent);
  white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.pairlist dd{grid-column:1 / -1;font-size:.875rem;color:var(--ink-70);line-height:1.55;margin:0}

/* ---- origin story ---- */
.origin{background:var(--bg-alt)}
.origin__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4.5vw,4rem)}
.origin__body{grid-column:1 / 7}
.origin__aside{grid-column:8 / 13;align-self:start}
.origin h2{font-size:var(--t-h2);margin:1rem 0 1.25rem;max-width:20ch}
.origin h2 em{color:var(--sage-deep)}
.origin p{color:var(--ink-70);margin-bottom:1.05rem;max-width:56ch}
.origin p strong{color:var(--ink);font-weight:500}
@media (max-width:860px){.origin__body,.origin__aside{grid-column:1/-1}}

.prov{border-top:1px solid var(--hairline);padding-top:1.4rem}
.prov dt{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-45);margin-bottom:.35rem}
.prov dd{font-family:var(--serif);font-size:1.5rem;color:var(--accent);
  letter-spacing:-.025em;margin-bottom:1.4rem;line-height:1.05}
.prov dd small{display:block;font-family:var(--sans);font-size:.82rem;color:var(--ink-45);
  letter-spacing:0;margin-top:.35rem;line-height:1.5}

/* ==========================================================================
   MENU SYSTEM — index, category hub, product page
   ========================================================================== */

/* ---- page header used by every non-home page ---- */
.phead{padding-block:clamp(2.25rem,4.5vw,4rem) clamp(1.5rem,3vw,2.5rem)}
.phead h1{font-size:var(--t-h1);color:var(--accent);margin:.75rem 0 1rem}
.phead h1 em{color:var(--terra)}
.phead .lede{max-width:56ch}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:var(--t-small);color:var(--ink-45);
  list-style:none;margin-bottom:.5rem}
.crumbs li+li::before{content:'/';margin-right:.5rem;opacity:.5}
.crumbs a:hover{color:var(--ink)}

/* ---- filter bar ---- */
.filters{position:sticky;top:3.6rem;z-index:60;padding-block:.9rem;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline)}
.filters__in{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.search{flex:1 1 15rem;position:relative;min-width:0}
.search input{width:100%;background:var(--surface);border:1px solid var(--ink-20);
  border-radius:99px;padding:.7rem 1rem .7rem 2.5rem;font-size:.95rem;color:var(--ink)}
.search input:focus{outline:none;border-color:var(--sage-deep)}
.search svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);
  width:1rem;height:1rem;color:var(--ink-45);pointer-events:none}
.chips{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:0;cursor:pointer;background:transparent;color:var(--ink-70);
  box-shadow:inset 0 0 0 1px var(--ink-20);border-radius:99px;padding:.5rem 1rem;
  font-size:.83rem;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease)}
.chip:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);
  box-shadow:none}
.toggle{display:inline-flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--ink-70);
  cursor:pointer;white-space:nowrap}
.toggle input{accent-color:var(--sage-deep);width:1rem;height:1rem}
.count{font-size:var(--t-small);color:var(--ink-45);margin-left:auto;white-space:nowrap}

/* ---- item rows ---- */
.grp{padding-top:clamp(2rem,4vw,3rem)}
.grp__h{display:flex;align-items:baseline;gap:1rem;padding-bottom:.75rem;
  border-bottom:1px solid var(--ink-20)}
.grp__h h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.grp__h span{font-size:var(--t-small);color:var(--ink-45);margin-left:auto}
.items{list-style:none}
.item{display:grid;grid-template-columns:1fr auto;gap:.3rem 1.5rem;
  padding:clamp(1rem,2vw,1.4rem) 0;border-bottom:1px solid var(--hairline);
  align-items:baseline;transition:padding-inline var(--dur) var(--ease)}
.item:hover{padding-inline:clamp(.3rem,1vw,.9rem)}
.item__name{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.4rem);color:var(--ink);
  letter-spacing:-.02em;display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.item__price{font-family:var(--serif);font-size:1.1rem;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.item__desc{grid-column:1/-1;font-size:.9rem;color:var(--ink-70);max-width:62ch;line-height:1.55}
.item__meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.35rem .9rem;
  font-size:.76rem;color:var(--ink-45);letter-spacing:.02em;margin-top:.3rem}
.item__meta b{font-weight:500;color:var(--ink-70)}
.item.is-hidden{display:none}
.nutri-off .item__meta{display:none}

/* veg / non-veg mark, the Indian convention */
.vmark{flex:0 0 auto;width:.78rem;height:.78rem;border-radius:2px;display:inline-block;
  box-shadow:inset 0 0 0 1.5px currentColor;position:relative;align-self:center}
.vmark::after{content:'';position:absolute;inset:23%;border-radius:50%;background:currentColor}
.vmark--veg{color:#3F7D3F}
.vmark--non{color:#9A3A2F}
.vmark--egg{color:#B07A16}

.tag{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep);
  box-shadow:inset 0 0 0 1px currentColor;border-radius:99px;padding:.18rem .5rem;
  align-self:center;font-family:var(--sans)}
.tag--savoury{color:var(--terra-deep)}

.empty{padding:3rem 0;text-align:center;color:var(--ink-45)}
.notice{background:var(--sand);border-left:2px solid var(--terra-deep);
  padding:1rem 1.25rem;border-radius:0 var(--radius) var(--radius) 0;
  font-size:.85rem;color:var(--ink-70);line-height:1.55;margin-top:2rem;max-width:70ch}
.notice b{color:var(--ink)}

/* ---- order bar ---- */
.orderbar{position:sticky;bottom:0;z-index:70;background:var(--grape);color:var(--cream);
  padding:.85rem var(--pad);display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
  box-shadow:0 -12px 32px -22px rgba(27,11,59,.8)}
.orderbar p{font-size:.87rem;color:rgba(251,246,239,.75);margin-right:auto}
.orderbar p b{color:var(--cream);font-weight:500}

/* ---- product page ---- */
.pdp{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4.5vw,4rem);
  align-items:start;padding-top:clamp(1rem,2vw,2rem)}
.pdp__media{grid-column:1 / 7;position:sticky;top:5rem}
.pdp__media figure{border-radius:var(--radius-lg);overflow:hidden;background:var(--travertine)}
.pdp__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pdp__body{grid-column:7 / 13}
.pdp__body h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:.6rem 0 .9rem;color:var(--ink)}
.pdp__price{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.pdp__price b{font-family:var(--serif);font-size:2rem;font-weight:400;color:var(--accent)}
.pdp__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.6rem 0 2rem}
@media (max-width:860px){.pdp__media,.pdp__body{grid-column:1/-1}.pdp__media{position:static}}

.spec{border-top:1px solid var(--hairline);padding-top:1.2rem;margin-top:1.8rem}
.spec h2{font-size:1.15rem;margin-bottom:.7rem}
.spec p{font-size:.94rem;color:var(--ink-70);max-width:60ch}
.nutri{display:grid;grid-template-columns:repeat(auto-fit,minmax(5rem,1fr));gap:1rem;
  margin-top:1rem}
.nutri div{border-top:1px solid var(--hairline);padding-top:.6rem}
.nutri dt{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.nutri dd{font-family:var(--serif);font-size:1.35rem;color:var(--ink);margin:.2rem 0 0}

.qa{border-top:1px solid var(--hairline);padding:1.1rem 0}
.qa h3{font-size:1.05rem;margin-bottom:.45rem}
.qa p{font-size:.92rem;color:var(--ink-70);max-width:62ch}

.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:clamp(1rem,2vw,1.5rem);margin-top:1.5rem}
.rel{box-shadow:inset 0 0 0 1px var(--hairline);border-radius:var(--radius);
  padding:1.25rem;display:flex;flex-direction:column;gap:.4rem;
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rel:hover{box-shadow:inset 0 0 0 1px var(--ink-20);transform:translateY(-2px)}
.rel h3{font-size:1.1rem}
.rel p{font-size:.84rem;color:var(--ink-70);flex:1}
.rel span{font-family:var(--serif);color:var(--accent)}


/* ---- delivery areas ---- */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1rem,2.2vw,1.6rem);margin-top:clamp(1.75rem,3.2vw,2.5rem)}
.area{box-shadow:inset 0 0 0 1px var(--hairline);border-radius:var(--radius);
  padding:clamp(1.35rem,2.4vw,1.75rem);display:flex;flex-direction:column;gap:.5rem;
  transition:box-shadow var(--dur) var(--ease)}
.area:hover{box-shadow:inset 0 0 0 1px var(--ink-20)}
.area__tag{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep)}
.area__tag--cafe{color:var(--terra-deep)}
.area h3{font-size:1.25rem;color:var(--ink)}
.area p{font-size:.88rem;color:var(--ink-70);line-height:1.55;flex:1}
.area span{font-size:.78rem;color:var(--ink-45)}

/* ---- platform buttons ---- */
.platforms{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.5rem,2.6vw,2rem)}
.btn--swiggy{background:#FC8019;color:#fff}
.btn--zomato{background:#E23744;color:#fff}
.btn--swiggy:hover,.btn--zomato:hover{filter:brightness(1.06)}


/* ---- page hero band, used on category and content pages ---- */
.phero{margin-block:clamp(.5rem,1.5vw,1.25rem) clamp(1.5rem,3vw,2.5rem);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--travertine)}
.phero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform 1.8s var(--ease-out)}
.phero:hover img{transform:scale(1.02)}
@media (max-width:640px){.phero img{aspect-ratio:4/3}}


/* ==========================================================================
   PLACEHOLDER SLOTS
   Self-sufficient on purpose: no clip-path reveal, no JS dependency, its own
   aspect ratio, and a visible frame so the slot reads even if the SVG itself
   fails to load. These are meant to be seen.
   ========================================================================== */
.slot{
  display:block!important;
  clip-path:none!important;          /* never wait on the reveal observer */
  opacity:1!important;
  transform:none!important;
  background:var(--travertine);
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  margin:0;
}
.slot img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:var(--slot-ar,16/9)!important;
  object-fit:contain!important;      /* never crop the label away */
  background:var(--travertine);
}
.slot--wide{--slot-ar:16/9}
.slot--half{--slot-ar:16/10}
.slot--tall{--slot-ar:4/5}