@font-face{font-family:'Geist';src:url('assets/fonts/geist.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'GeistMono';src:url('assets/fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
:root{
  --ink:#14161A;
  --paper:#F6F5F2;
  --accent:#3E6E8E;
  --accent-press:#2F5872;
  --accent-2:#C2A878;
  --accent-3:#6E8B6E;
  --mut:#6C7077;
  --mut-dark:#9BA0A6;
  --line:rgba(20,22,26,.12);
  --line-dark:rgba(246,245,242,.15);
  --depth-1:rgba(20,22,26,.05);
  --depth-2:rgba(20,22,26,.12);
  --ink-2:#1E2128;
  --paper-2:#EAE9E4;
  --ink-rgb:20,22,26;
  --paper-rgb:246,245,242;
  --accent-rgb:62,110,142;
  --accent-2-rgb:194,168,120;
  --accent-3-rgb:110,139,110;
  --on-media:#F5F2EC;
  --on-media-rgb:245,242,236;
  --scrim-rgb:12,12,13;
  --on-accent:#fff;
  --band-bg:var(--ink);
  --band-fg:var(--paper);
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'GeistMono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
   soch-venue-template — base sheet
   Derived from the Meet & Eat build. Colour and type are injected above
   this file by build.mjs; everything here is structural and theme-neutral.
   The 3D layer lives at the bottom, gated on [data-depth].
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* colour tokens + --sans/--mono are injected above this file by build.mjs
     from themes/<theme>.json and fonts/<font>/font.json */
  --wrap:1280px;
  --pad:clamp(1.15rem,5vw,4rem);
  --gap:clamp(2rem,5vw,4.5rem);
  --r:6px;
  --ease:cubic-bezier(.2,.6,.3,1);

  /* 3D layer — overridden per depth tier at the bottom of this sheet */
  --persp:1200px;
  --tilt:6deg;
  --lift:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.06rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}

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

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent);
  padding:.7rem 1.1rem;font-weight:600}
.skip:focus{left:0}

.wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}
.section{padding-block:clamp(4rem,10vw,8.5rem);position:relative}

/* ── Type ───────────────────────────────────────────────────────────── */
/* The reference is a heavy grotesque set tight — Geist at 800/900 with
   negative tracking gets there without a second family. */
.h2{
  font-size:clamp(2.3rem,1.1rem + 5.2vw,5rem);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.045em;
  margin:.15em 0 .5em;
  text-transform:uppercase;
}
.h2 em{font-style:normal;color:var(--accent)}
.h3{font-size:1.35rem;font-weight:700;letter-spacing:-.025em;margin:0 0 1.2rem;text-transform:uppercase}
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0;
}
.lede{font-size:clamp(1.05rem,1rem + .5vw,1.24rem);line-height:1.55;color:rgba(var(--ink-rgb),.78)}
.footnote{font-size:.78rem;color:var(--mut);line-height:1.5}
.section__head{margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.section__head .h2{max-width:14ch}
.section__head .lede{max-width:52ch}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  padding:.8rem 1.5rem;border-radius:var(--r);
  font:inherit;font-size:.9rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),
             color .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:1rem 1.9rem;font-size:.98rem}
.btn--sm{padding:.55rem 1.05rem;font-size:.84rem;border-width:2px}
.btn--accent{--bg:var(--accent);--fg:var(--on-accent);--bd:var(--accent)}
.btn--accent:hover{--bg:var(--accent-press);--bd:var(--accent-press)}
.btn--outline:hover{--bg:var(--ink);--fg:var(--paper)}
.ico{width:1em;height:1em;flex:none}

/* ── Nav ────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;gap:var(--gap);
  padding:.9rem var(--pad);
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),
             border-color .35s var(--ease),padding .35s var(--ease);
  border-bottom:2px solid transparent;
}
.nav[data-stuck="true"]{
  background:rgba(var(--paper-rgb),.92);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--ink);
  padding-block:.6rem;
}
.nav__brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;margin-right:auto;color:var(--accent)}
.mark{width:32px;height:32px;flex:none}
.nav__word{font-weight:800;font-size:1.12rem;letter-spacing:-.035em;color:var(--on-media);text-transform:uppercase}
.nav[data-stuck="true"] .nav__word{color:var(--ink)}
.nav__links{display:flex;gap:1.9rem}
.nav__links a{
  text-decoration:none;font-size:.88rem;font-weight:500;color:rgba(var(--on-media-rgb),.82);
  position:relative;padding-block:.2rem;transition:color .2s var(--ease);
}
.nav[data-stuck="true"] .nav__links a{color:var(--mut)}
.nav__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease);
}
.nav__links a:hover{color:var(--accent)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav[data-stuck="true"] .btn--sm{--bd:var(--accent)}
@media(max-width:900px){.nav__links{display:none}}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:end;
  overflow:hidden;isolation:isolate;background:var(--ink);
}
.hero__media{position:absolute;inset:-10% 0;z-index:-3;will-change:transform}
.hero__video{width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.05) brightness(.78)}
.hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(94deg,rgba(var(--scrim-rgb),.94) 0%,rgba(var(--scrim-rgb),.72) 34%,rgba(var(--scrim-rgb),.26) 66%,rgba(var(--scrim-rgb),.5) 100%),
    linear-gradient(180deg,rgba(var(--scrim-rgb),.9) 0%,rgba(var(--scrim-rgb),.2) 26%,rgba(var(--scrim-rgb),.35) 55%,rgba(var(--scrim-rgb),.94) 88%,var(--ink) 100%);
}
.hero__inner{
  position:relative;padding:0 var(--pad) clamp(3.5rem,8vw,6rem);
  width:min(var(--wrap),100%);margin-inline:auto;color:var(--on-media);will-change:transform;
}
.hero__inner .eyebrow{color:var(--accent-2)}
.hero__title{margin:.5rem 0 0;display:flex;flex-direction:column;line-height:.84}
.hero__l1,.hero__l2{
  font-size:clamp(3.6rem,1rem + 13vw,11rem);
  font-weight:900;letter-spacing:-.055em;text-transform:uppercase;
}
.hero__l2{color:var(--accent)}
.hero__l2 .amp{color:var(--on-media);font-weight:400;font-style:italic}
.hero__tag{
  margin:1.2rem 0 0;max-width:34ch;
  font-size:clamp(1rem,.9rem + .55vw,1.35rem);color:rgba(var(--on-media-rgb),.86);line-height:1.4;
}
.hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.scorechip{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  background:rgba(var(--on-media-rgb),.1);border:1px solid rgba(var(--on-media-rgb),.24);
  padding:.4rem .9rem;border-radius:999px;font-size:.9rem;color:var(--on-media);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.scorechip:hover{border-color:var(--accent-2);background:rgba(var(--accent-2-rgb),.14)}
.scorechip__star{color:var(--accent-2)}
.scorechip b{font-family:var(--mono);font-weight:600}
.scorechip__sep{opacity:.4}
.openpill{
  display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .9rem;border-radius:999px;
  border:1px solid rgba(var(--on-media-rgb),.24);font-size:.85rem;color:rgba(var(--on-media-rgb),.86);
}
.openpill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mut-dark)}
.openpill[data-state="open"]{border-color:rgba(120,190,110,.5);color:#BFE3B4}
.openpill[data-state="open"]::before{background:#7BC46C;box-shadow:0 0 0 3px rgba(123,196,108,.22)}
.openpill[data-state="shut"]{border-color:rgba(var(--accent-rgb),.5);color:#F3B3A5}
.openpill[data-state="shut"]::before{background:var(--accent)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.hero__cta .btn--outline{--bd:rgba(var(--on-media-rgb),.5);--fg:var(--on-media)}
.hero__cta .btn--outline:hover{--bg:var(--on-media);--fg:var(--ink);--bd:var(--on-media)}

/* ── Stats band ─────────────────────────────────────────────────────── */
.stats{background:var(--band-bg);color:var(--band-fg);padding-block:clamp(2rem,4vw,3rem)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.stat{display:flex;flex-direction:column;gap:.25rem}
.stat__n{font-family:var(--mono);font-size:clamp(1.6rem,1rem + 1.9vw,2.6rem);font-weight:600;
  letter-spacing:-.03em;color:var(--accent-2);line-height:1}
.stat__l{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut-dark)}
@media(max-width:760px){.stats__grid{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}}

/* ── Kitchen ────────────────────────────────────────────────────────── */
.kitchen__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.kitchen__stack{position:relative;min-height:min(76vh,620px)}
.kfig{margin:0;position:absolute;overflow:hidden;border-radius:var(--r);will-change:transform;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
.kfig img{width:100%;height:100%;object-fit:cover}
.kfig--a{width:60%;aspect-ratio:4/3;top:0;left:0;z-index:2}
.kfig--b{width:52%;aspect-ratio:4/5;top:20%;right:0;z-index:3}
.kfig--c{width:44%;aspect-ratio:4/3;bottom:0;left:10%;z-index:1}
.ticks{list-style:none;margin:2rem 0 0;padding:1.6rem 0 0;border-top:2px solid var(--ink)}
.ticks li{position:relative;padding-left:1.6rem;margin-bottom:.55rem;font-size:.95rem}
.ticks li::before{content:'';position:absolute;left:0;top:.55em;width:.62rem;height:.62rem;
  background:var(--accent);border-radius:2px}
@media(max-width:940px){
  .kitchen__grid{grid-template-columns:1fr}
  .kitchen__stack{min-height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
  .kfig{position:static;width:auto;aspect-ratio:4/3}
  .kfig--b{grid-row:span 2;aspect-ratio:3/4}
}

/* ── Sri Lanka band ─────────────────────────────────────────────────── */
.band{position:relative;overflow:hidden;isolation:isolate;background:rgb(var(--scrim-rgb));color:var(--on-media);
  padding-block:clamp(4rem,9vw,7.5rem)}
.band__media{position:absolute;inset:-14% 0;z-index:-2;will-change:transform;
  background:url('assets/img/sri-lanka.webp') center/cover no-repeat}
.band__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(92deg,rgba(var(--scrim-rgb),.93) 0%,rgba(var(--scrim-rgb),.74) 42%,rgba(var(--scrim-rgb),.3) 100%),
             linear-gradient(180deg,var(--ink),rgba(var(--scrim-rgb),.35) 30%,rgba(var(--scrim-rgb),.6) 70%,var(--ink))}
.band__inner{position:relative}
.band__inner .eyebrow{color:var(--accent-2)}
.band__h{font-size:clamp(2rem,1.1rem + 4vw,4rem);font-weight:800;line-height:.96;
  letter-spacing:-.045em;text-transform:uppercase;margin:.4em 0 .5em;max-width:16ch}
.band__h em{font-style:normal;color:var(--accent)}
.band__p{max-width:52ch;color:rgba(var(--on-media-rgb),.86);font-size:clamp(1rem,.95rem + .4vw,1.15rem)}

/* ── Menu ───────────────────────────────────────────────────────────── */
.menu{background:var(--paper-2)}
.menu__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.course__name{
  font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin:2.6rem 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
}
.course__name:first-child{margin-top:0}
.course__tag{font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--mut)}
.dishes{list-style:none;margin:0;padding:0}
.dishes li{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.72rem 0;border-bottom:1px solid var(--line)}
.dishes li:last-child{border-bottom:0}
.dishes .d{display:flex;flex-direction:column;gap:.12rem}
.dishes .d b{font-weight:600;font-size:1rem;letter-spacing:-.012em}
.dishes .d i{font-style:normal;font-size:.83rem;color:var(--mut);line-height:1.35}
/* Prices in mono so the column aligns on the decimal without a table */
.dishes .p{font-family:var(--mono);font-size:.95rem;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dishes .p::before{content:'€';font-weight:400;opacity:.5;margin-right:.1em}
/* Belt and braces on the same bug as the {{#if price}} in the template: the €
   is a pseudo-element, so an empty price span still printed a lone currency
   symbol. Rahwa Resto's sides and sauces are included with a main and carry no
   price on their own menu — the scrape was right, this was the rendering. */
.dishes .p:empty{display:none}

.combos{margin-top:clamp(2.5rem,5vw,4rem)}
.combos__title{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 1.2rem;padding-bottom:.6rem;border-bottom:2px solid var(--ink)}
.combos__title span{font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--mut);margin-left:.6rem}
.combos__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.combo{background:var(--band-bg);color:var(--band-fg);padding:1.5rem;border-radius:var(--r);
  display:flex;flex-direction:column;gap:.5rem}
.combo h4{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.combo p{margin:0;flex:1;font-size:.85rem;color:var(--mut-dark);line-height:1.45}
.combo__p{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--accent-2);letter-spacing:-.02em}
@media(max-width:940px){.menu__cols{grid-template-columns:1fr}.combos__grid{grid-template-columns:1fr}}

.note{margin:clamp(2.2rem,4vw,3rem) 0 0;padding:1.4rem 1.6rem;
  border-left:4px solid var(--accent);background:rgba(var(--accent-rgb),.06);border-radius:0 var(--r) var(--r) 0}
.note p{margin:0;font-size:.92rem}
.note b{font-weight:700}
.menu__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

/* ── Live rating ────────────────────────────────────────────────────── */
.rating{background:rgb(var(--scrim-rgb));color:var(--on-media);overflow:hidden}
/* The image is set inline from media.ratingBg, NOT here. This used to name a
   file from the original Meet & Eat build that the media pipeline never
   produces, so every generated site 404'd on it and lost this texture. */
.rating__bg{position:absolute;inset:-15% -8%;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:.16;will-change:transform}
.rating .wrap{position:relative;z-index:1}
.rating__grid{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:var(--gap);align-items:start}
.rating__panel{border:2px solid var(--line-dark);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.4rem);
  background:rgba(var(--scrim-rgb),.6);backdrop-filter:blur(6px);position:sticky;top:6rem}
.bigscore{display:flex;align-items:baseline;gap:.5rem;margin-top:.7rem}
.bigscore__n{font-family:var(--mono);font-size:clamp(3.6rem,2rem + 6vw,6rem);font-weight:600;
  line-height:1;letter-spacing:-.05em;color:var(--accent-2)}
.bigscore__of{font-family:var(--mono);font-size:1.1rem;color:var(--mut-dark)}
.bigscore__stars{color:var(--accent-2);font-size:1.15rem;letter-spacing:.18em;margin-top:.5rem}
.bigscore__count{margin:.7rem 0 .2rem;color:rgba(var(--on-media-rgb),.8);font-size:.95rem}
.bigscore__count b{font-family:var(--mono);font-weight:600;color:var(--on-media)}
.bigscore__stamp{font-family:var(--mono);font-size:.72rem;color:var(--mut-dark);margin:0 0 1.4rem}
.rating__panel .btn--outline{--bd:rgba(var(--on-media-rgb),.4);--fg:var(--on-media)}
.rating__panel .btn--outline:hover{--bg:var(--on-media);--fg:var(--ink);--bd:var(--on-media)}

.rating__quotes{display:flex;flex-direction:column;gap:1rem}
.quote{margin:0;padding:1.6rem 1.7rem;border:1px solid var(--line-dark);border-radius:var(--r);
  background:rgba(var(--on-media-rgb),.04);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.quote:hover{border-color:rgba(var(--accent-2-rgb),.5);transform:translateY(-3px)}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-size:1.02rem;line-height:1.5;color:rgba(var(--on-media-rgb),.92)}
.quote figcaption{display:flex;flex-direction:column;gap:.1rem;margin-top:1rem;font-size:.8rem;color:var(--mut-dark)}
.quote figcaption b{color:var(--on-media);font-weight:600;font-size:.9rem}
.rating .footnote{color:var(--mut-dark)}
@media(max-width:940px){.rating__grid{grid-template-columns:1fr}.rating__panel{position:static}}
/* No review quotes to show: collapse to one column and centre the score,
   rather than leaving half the section visibly empty. */
[data-noreviews] .rating__grid{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
[data-noreviews] .rating__panel{position:static;text-align:center}
[data-noreviews] .bigscore{justify-content:center}
[data-noreviews] .bigscore__stars{justify-content:center}

/* ── Visit ──────────────────────────────────────────────────────────── */
.visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.card{padding:clamp(1.6rem,3.5vw,2.4rem);border:2px solid var(--ink);border-radius:var(--r);background:var(--paper)}
.hours{width:100%;border-collapse:collapse;font-size:.94rem}
.hours th,.hours td{padding:.6rem 0;text-align:left;font-weight:400;border-bottom:1px solid var(--line)}
.hours th{color:var(--mut)}
.hours td{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.hours td.shut{color:var(--mut)}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours tr[data-today] th,.hours tr[data-today] td{color:var(--accent);font-weight:600}
.hours + .footnote{margin-top:1rem}
address{font-style:normal;font-size:1.15rem;line-height:1.5;margin-bottom:.8rem;font-weight:500}
.plus{font-size:.83rem;color:var(--mut);margin:0 0 1.5rem}
.plus code{font-family:var(--mono);font-size:.83rem;background:rgba(var(--ink-rgb),.07);padding:.12rem .4rem;border-radius:3px}
.card__actions{display:flex;flex-wrap:wrap;gap:.6rem}
.serves{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:1.5rem 0 0;padding:1.4rem 0 0;
  border-top:1px solid var(--line)}
.serves li{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem}
@media(max-width:820px){.visit__grid{grid-template-columns:1fr}}

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot{background:var(--band-bg);color:var(--band-fg);padding-top:clamp(3rem,6vw,4.5rem)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--gap)}
.foot__word{font-size:1.9rem;font-weight:900;letter-spacing:-.045em;text-transform:uppercase;margin:0 0 .5rem}
.foot__line{margin:0;color:var(--mut-dark);font-size:.9rem;line-height:1.55}
.foot__col h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 1rem;font-weight:500}
.foot__col p{margin:0 0 .55rem}
.foot__col a{text-decoration:none;color:rgba(var(--on-media-rgb),.82);font-size:.92rem;
  border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.foot__col a:hover{color:var(--accent-2);border-bottom-color:rgba(var(--accent-2-rgb),.5)}
.foot__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.4rem;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.72rem;color:var(--mut-dark)}
.foot__base p{margin:0}
.foot__demo{opacity:.7}
@media(max-width:820px){.foot__grid{grid-template-columns:1fr;gap:2.2rem}}

/* ── Motion ─────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-px]{transform:translate3d(0,0,0)}

@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
  [data-px]{transform:none !important}
  .hero__media{inset:0}
}

/* ═══════════════════════════════════════════════════════════════════════
   3D LAYER
   Gated on <body data-depth>:  off | subtle | full
   main.js never writes `transform` directly — it feeds --pxY (parallax),
   --mx/--my (pointer) and --sp (scroll progress) so CSS can compose depth
   and parallax on the same element without one clobbering the other.

   translateZ in a perspective container changes apparent size, so every
   layer carries a matching counter-scale: for translateZ(z) under
   perspective P the apparent scale is P/(P-z), so we apply (P-z)/P.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── depth tiers ─────────────────────────────────────────────────────── */
[data-depth="off"]    { --tilt:0deg;   --lift:0px;  --persp:none; }
[data-depth="subtle"] { --tilt:3deg;   --lift:8px;  --persp:1600px; }
[data-depth="full"]   { --tilt:6deg;   --lift:14px; --persp:1200px; }

/* ── parallax composes with depth instead of overwriting it ──────────── */
[data-px]{
  transform:
    translate3d(0, var(--pxY, 0px), var(--pz, 0px))
    scale(var(--pscale, 1));
  will-change:transform;
}

/* per-layer Z + counter-scale (P = 1200px) */
[data-depth-layer="-3"]{ --pz:-180px; --pscale:1.15 }
[data-depth-layer="-2"]{ --pz:-120px; --pscale:1.10 }
[data-depth-layer="-1"]{ --pz:-60px;  --pscale:1.05 }
[data-depth-layer="1"] { --pz:30px;   --pscale:0.975 }
[data-depth-layer="2"] { --pz:60px;   --pscale:0.95 }

[data-depth="off"] [data-depth-layer]{ --pz:0px; --pscale:1 }

/* ── perspective roots ───────────────────────────────────────────────── */
.hero,
.kitchen__grid,
.menu__cols,
.combos__grid,
.rating__grid,
.visit__grid{
  perspective:var(--persp);
  perspective-origin:50% 50%;
}
.hero__media,
.kitchen__stack{ transform-style:preserve-3d }

/* ── cards that tilt toward the pointer ──────────────────────────────── */
.combo,
.card,
.quote,
.kfig{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  [data-depth="subtle"] .combo:hover,
  [data-depth="full"] .combo:hover,
  [data-depth="subtle"] .card:hover,
  [data-depth="full"] .card:hover,
  [data-depth="subtle"] .quote:hover,
  [data-depth="full"] .quote:hover{
    transform:
      rotateX(calc(var(--my, 0) * var(--tilt) * -1))
      rotateY(calc(var(--mx, 0) * var(--tilt)))
      translateZ(var(--lift));
    box-shadow:
      0 2px 6px var(--depth-1),
      0 18px 40px -12px var(--depth-2);
  }
  /* the price column lifts a touch further so the card reads as layered */
  [data-depth="full"] .combo:hover .combo__p,
  [data-depth="full"] .card:hover .card__actions{
    transform:translateZ(22px);
    transition:transform .5s var(--ease);
  }
}

/* ── gallery: each figure sits on its own plane ──────────────────────── */
[data-depth="full"] .kfig{
  box-shadow:0 2px 8px var(--depth-1), 0 24px 50px -18px var(--depth-2);
}
[data-depth="full"] .kfig--0{ --pz:40px;  --pscale:0.967 }
[data-depth="full"] .kfig--1{ --pz:-50px; --pscale:1.042 }
[data-depth="full"] .kfig--2{ --pz:90px;  --pscale:0.925 }

/* ── menu dishes: a scroll-linked stagger, driven by --sp from main.js ── */
[data-depth="full"] .dish{
  transform:translateZ(calc(var(--sp, 0) * 14px));
  transition:transform .6s var(--ease);
}

/* ── hero title gets real depth between its lines ────────────────────── */
[data-depth="full"] .hero__title{ transform-style:preserve-3d }
[data-depth="full"] .hero__l1{ display:block; transform:translateZ(30px) }
[data-depth="full"] .hero__l2{ display:block; transform:translateZ(60px) }
[data-depth="subtle"] .hero__l1,
[data-depth="subtle"] .hero__l2,
[data-depth="off"] .hero__l1,
[data-depth="off"] .hero__l2{ display:block }

/* ── nav lifts off the page once stuck ───────────────────────────────── */
[data-depth="full"] .nav[data-stuck="true"]{
  box-shadow:0 1px 0 var(--line), 0 10px 30px -14px var(--depth-2);
}

/* ── dark-mode themes: shadows do nothing, so lean on rim light ───────── */
[data-mode="dark"] .combo,
[data-mode="dark"] .card,
[data-mode="dark"] .quote{
  border-color:var(--line);
  background:var(--paper-2);
}
[data-mode="dark"][data-depth="full"] .combo:hover,
[data-mode="dark"][data-depth="full"] .card:hover,
[data-mode="dark"][data-depth="full"] .quote:hover{
  box-shadow:0 0 0 1px var(--line), 0 18px 40px -12px rgba(0,0,0,.7);
}

/* ── anyone who asked for less motion gets a flat page ───────────────── */
@media (prefers-reduced-motion:reduce){
  [data-px]{ transform:none !important }
  .combo,.card,.quote,.kfig,.dish,
  .hero__l1,.hero__l2{ transform:none !important; transition:none !important }
  .hero,.kitchen__grid,.menu__cols,
  .combos__grid,.rating__grid,.visit__grid{ perspective:none }
}