/* ── tokens ──────────────────────────────────────────────────────────── */
:root{
  --char:#1E120C;         /* charred oven wood */
  --char-2:#2C1B12;
  --ember:#C2502A;        /* fired terracotta */
  --ember-lit:#E2703C;
  --semola:#F6EFE2;       /* semolina paper */
  --semola-2:#EDE3D1;
  --basil:#5E7042;
  --basil-lt:#7C9A5A;
  --gold:#B8842B;
  --ink:#2A1D15;
  --ink-soft:#6B5B4D;
  --line:#DACDB8;

  --f-display:"Playfair Display SC",Georgia,serif;
  --f-body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;
  --wrap:min(1180px, 92vw);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--semola); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{font-family:var(--f-display); font-weight:400; line-height:1.08; margin:0; letter-spacing:.01em}
p{margin:0 0 var(--s2)}
a{color:inherit}
:focus-visible{outline:3px solid var(--ember); outline-offset:3px; border-radius:4px}

.wrap{width:var(--wrap); margin-inline:auto}
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--ember); margin:0 0 var(--s2)
}
.tricolore{height:3px; width:64px; border-radius:2px;
  background:linear-gradient(90deg,var(--basil) 0 33.3%,#F6EFE2 33.3% 66.6%,var(--ember) 66.6% 100%)}

/* ── skip link ───────────────────────────────────────────────────────── */
/* moved vertically, never horizontally — a negative `left` becomes 11,000px
   of horizontal scroll the moment the document flips to dir="rtl". */
.skip{
  position:fixed; inset-inline-start:.5rem; top:-6rem; z-index:200;
  background:var(--char); color:var(--semola); padding:.8rem 1.2rem;
  border-radius:0 0 8px 8px; text-decoration:none; transition:top .2s var(--ease)
}
.skip:focus{top:0}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:var(--s3);
  padding:.7rem max(4vw,1rem);
  background:rgba(30,18,12,0); backdrop-filter:blur(0px);
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.solid{background:rgba(30,18,12,.92); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(246,239,226,.12)}
.nav__mark{font-family:var(--f-display); color:var(--semola); font-size:1.02rem; letter-spacing:.04em; text-decoration:none; white-space:nowrap}
.nav__mark span{color:var(--ember-lit)}
.nav__links{display:none; gap:var(--s3); margin-inline-start:auto; align-items:center}
@media(min-width:900px){.nav__links{display:flex}}
.nav__links a{
  color:rgba(246,239,226,.82); text-decoration:none; font-size:.86rem;
  letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  padding:.4rem 0; border-bottom:1px solid transparent; transition:color .2s var(--ease),border-color .2s var(--ease)
}
.nav__links a:hover{color:var(--semola); border-color:var(--ember-lit)}
.nav__side{display:flex; align-items:center; gap:.6rem; margin-inline-start:auto}
@media(min-width:900px){.nav__side{margin-inline-start:var(--s3)}}
.lang{
  background:none; border:1px solid rgba(246,239,226,.34); color:var(--semola);
  font-family:var(--f-body); font-size:.74rem; font-weight:600; letter-spacing:.1em;
  padding:.5rem .7rem; border-radius:999px; cursor:pointer; min-height:38px;
  transition:background .2s var(--ease),border-color .2s var(--ease)
}
.lang:hover{background:rgba(246,239,226,.12); border-color:var(--semola)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.8rem 1.35rem; border-radius:999px;
  font-family:var(--f-body); font-weight:600; font-size:.88rem; letter-spacing:.04em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .18s var(--ease), background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--fill{background:var(--ember); color:#fff; box-shadow:0 6px 22px -10px rgba(194,80,42,.9)}
.btn--fill:hover{background:var(--ember-lit); box-shadow:0 10px 28px -10px rgba(194,80,42,.95)}
.btn--ghost{border-color:rgba(246,239,226,.42); color:var(--semola)}
.btn--ghost:hover{background:rgba(246,239,226,.13)}
.btn--ink{border-color:var(--ink); color:var(--ink)}
.btn--ink:hover{background:var(--ink); color:var(--semola)}
.btn svg{width:17px;height:17px;flex:none}
.nav .btn{display:none}
@media(min-width:640px){.nav .btn{display:inline-flex}}

/* ── reveal ──────────────────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  .scroll-hint i{animation:none}
}

/* ── sections ────────────────────────────────────────────────────────── */
section{padding:var(--s6) 0}
@media(min-width:900px){section{padding:var(--s7) 0}}
.sec-head{max-width:44ch; margin-bottom:var(--s5)}
.sec-head h2{font-size:clamp(2rem,4.4vw,3rem); margin-bottom:var(--s2)}
.sec-head p{color:var(--ink-soft)}

/* story */
.story{background:var(--semola-2); position:relative}
.story__grid{display:grid; gap:var(--s5)}
@media(min-width:900px){.story__grid{grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center}}
.story__copy p{color:var(--ink-soft); max-width:46ch}
.story__figs{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.fig{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(140deg,#D9C9B0,#C4AF92); aspect-ratio:3/4;
}
.fig:first-child{margin-top:var(--s5)}
.fig img{width:100%;height:100%;object-fit:cover}
.pull{
  font-family:var(--f-display); font-size:clamp(1.3rem,2.5vw,1.75rem);
  line-height:1.34; color:var(--ink); border-inline-start:3px solid var(--ember);
  padding-inline-start:var(--s3); margin:var(--s4) 0 0
}

/* signatures */
.sig-grid{display:grid; gap:var(--s3)}
@media(min-width:760px){.sig-grid{grid-template-columns:repeat(3,1fr)}}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); display:flex; flex-direction:column
}
.card:hover{transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(42,29,21,.5)}
.card__img{aspect-ratio:4/3; background:linear-gradient(140deg,#E2D3BA,#CDB894); position:relative}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__body{padding:var(--s3); display:flex; flex-direction:column; gap:.45rem; flex:1}
.card__body h3{font-size:1.24rem}
.card__body p{color:var(--ink-soft); font-size:.94rem; margin:0}
.card__price{
  margin-top:auto; padding-top:var(--s2); font-weight:700; color:var(--ember);
  font-variant-numeric:tabular-nums; letter-spacing:.02em
}
.tag{
  position:absolute; top:.7rem; inset-inline-start:.7rem; z-index:2;
  background:rgba(30,18,12,.86); color:var(--semola); font-size:.63rem;
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  padding:.36rem .6rem; border-radius:999px; backdrop-filter:blur(4px)
}

/* menu */
.menu{background:var(--char); color:var(--semola)}
.menu .sec-head h2{color:var(--semola)}
.menu .sec-head p{color:rgba(246,239,226,.62)}
.menu .eyebrow{color:var(--ember-lit)}
.tabs{
  display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.6rem; margin-bottom:var(--s4);
  scrollbar-width:thin; -webkit-overflow-scrolling:touch
}
.tabs::-webkit-scrollbar{height:3px}
.tabs::-webkit-scrollbar-thumb{background:rgba(246,239,226,.25); border-radius:2px}
.tab{
  flex:none; min-height:44px; padding:.6rem 1.1rem; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid rgba(246,239,226,.26); color:rgba(246,239,226,.76);
  font-family:var(--f-body); font-size:.82rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease)
}
.tab:hover{color:var(--semola); border-color:rgba(246,239,226,.55)}
.tab[aria-selected="true"]{background:var(--ember); border-color:var(--ember); color:#fff}
.panel[hidden]{display:none}
.list{display:grid; gap:0 var(--s6); list-style:none; margin:0; padding:0}
@media(min-width:820px){.list{grid-template-columns:1fr 1fr}}
.row{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.85rem 0; border-bottom:1px dotted rgba(246,239,226,.2)
}
.row__name{font-weight:500; letter-spacing:.01em}
.row__dot{flex:1; border-bottom:2px dotted rgba(246,239,226,.34); transform:translateY(-5px)}
.row__price{
  font-variant-numeric:tabular-nums; font-weight:700; color:var(--ember-lit);
  white-space:nowrap; letter-spacing:.02em
}
.row__price small{color:rgba(246,239,226,.45); font-weight:500; font-size:.76em; margin-inline-end:.15rem}
.row__note{display:block; font-size:.8rem; color:rgba(246,239,226,.5); font-weight:400}
.group-label{
  grid-column:1/-1; margin:var(--s4) 0 .2rem; font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); font-weight:700
}
.group-label:first-child{margin-top:0}
.menu__foot{
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid rgba(246,239,226,.16);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4); align-items:center;
  font-size:.86rem; color:rgba(246,239,226,.6)
}

/* reviews */
.quotes{display:grid; gap:var(--s3)}
@media(min-width:820px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2)
}
.quote p{font-family:var(--f-display); font-size:1.06rem; line-height:1.5; margin:0; color:var(--ink)}
.quote footer{font-size:.78rem; color:var(--ink-soft); letter-spacing:.05em; margin-top:auto}

/* visit */
.visit{background:var(--semola-2)}
.visit__grid{display:grid; gap:var(--s5)}
@media(min-width:900px){.visit__grid{grid-template-columns:.85fr 1.15fr; gap:var(--s6)}}
.facts{list-style:none; margin:0 0 var(--s4); padding:0; display:grid; gap:var(--s3)}
.facts li{display:flex; gap:var(--s2); align-items:flex-start}
.facts svg{width:19px;height:19px;flex:none;stroke:var(--ember);fill:none;stroke-width:1.6;margin-top:3px}
.facts b{display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-bottom:.15rem}
.hours{width:100%; border-collapse:collapse; font-size:.94rem; font-variant-numeric:tabular-nums}
.hours th{text-align:start; font-weight:500; padding:.42rem 0; color:var(--ink-soft)}
.hours td{text-align:end; padding:.42rem 0; font-weight:600}
.hours tr.today th,.hours tr.today td{color:var(--ember)}
.map{border:0; width:100%; aspect-ratio:4/3; border-radius:var(--r); filter:saturate(.85) contrast(.96)}
@media(min-width:900px){.map{aspect-ratio:1/1}}

/* footer */
.foot{background:var(--char); color:rgba(246,239,226,.62); padding:var(--s5) 0 var(--s4); font-size:.88rem}
.foot__top{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between; align-items:center; padding-bottom:var(--s3); border-bottom:1px solid rgba(246,239,226,.14)}
.foot__mark{font-family:var(--f-display); color:var(--semola); font-size:1.2rem}
.foot__mark span{color:var(--ember-lit)}
.foot__soc{display:flex; gap:.6rem}
.foot__soc a{
  width:44px;height:44px;display:grid;place-items:center;border-radius:999px;
  border:1px solid rgba(246,239,226,.24); color:var(--semola); text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease)
}
.foot__soc a:hover{background:rgba(246,239,226,.13); border-color:var(--semola)}
.foot__soc svg{width:19px;height:19px;fill:currentColor}
.foot__bot{padding-top:var(--s3); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between; font-size:.78rem; color:rgba(246,239,226,.42)}
.foot__bot a{color:rgba(246,239,226,.62)}

/* sticky mobile call bar */
.callbar{
  position:fixed; inset:auto 0 0 0; z-index:99; display:flex; gap:.6rem;
  padding:.6rem max(4vw,.75rem) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(30,18,12,.94); backdrop-filter:blur(10px);
  border-top:1px solid rgba(246,239,226,.14);
  transform:translateY(110%); transition:transform .35s var(--ease)
}
.callbar.up{transform:none}
.callbar .btn{flex:1}
@media(min-width:640px){.callbar{display:none}}
body{padding-bottom:0}
@media(max-width:639px){body.has-bar{padding-bottom:5rem}}

/* ════════════════════════════════════════════════════════════════════
   MOTION LAYER
   Patterns borrowed from 21st.dev (blur word-reveal, marquee ribbon,
   pointer spotlight/tilt, scroll parallax) and rewritten in plain CSS +
   JS — the originals are all React + framer-motion, which this one-file
   site cannot use. Every one of them is transform/opacity only.
   ════════════════════════════════════════════════════════════════════ */

/* word-by-word blur reveal on headings */
.rw .w{
  display:inline-block; white-space:pre; opacity:0;
  filter:blur(10px); transform:translateY(.42em) rotate(1.2deg);
  transition:opacity .62s var(--ease), filter .62s var(--ease), transform .62s var(--ease);
  transition-delay:calc(var(--i) * 42ms);
}
.rw.in .w{opacity:1; filter:blur(0); transform:none}

/* marquee ribbon */
.ribbon{
  overflow:hidden; background:var(--ember); color:#fff;
  padding:.9rem 0; border-block:1px solid rgba(0,0,0,.14);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ribbon__track{
  display:flex; align-items:center; gap:2.2rem; width:max-content;
  animation:slide 38s linear infinite; will-change:transform;
}
.ribbon:hover .ribbon__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ribbon span{
  font-family:var(--f-display); font-size:clamp(1.05rem,2.1vw,1.5rem);
  letter-spacing:.05em; white-space:nowrap
}
.ribbon i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);flex:none}

/* hero: parallax drift + pointer tilt on the oven stage */
.hero__inner{will-change:transform}
.stage{transition:transform .5s var(--ease)}
.stage.tilt{transition:transform .18s linear}

/* story figures: clip reveal + slow settle */
.fig img{
  transform:scale(1.14); transition:transform 1.5s var(--ease), clip-path 1.1s var(--ease);
  clip-path:inset(0 0 100% 0)
}
.rv.in .fig img,.fig.in img{transform:scale(1); clip-path:inset(0 0 0 0)}
.story__figs .fig:last-child img{transition-delay:.14s}

/* dish cards: pointer spotlight + tilt */
.card{transform-style:preserve-3d; will-change:transform}
.card__img{overflow:hidden}
.card__img img{transition:transform 1.1s var(--ease)}
.card:hover .card__img img{transform:scale(1.06)}
.card__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .35s var(--ease);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(255,214,150,.42), transparent 68%);
  mix-blend-mode:soft-light;
}
.card:hover .card__glow{opacity:1}

/* stat count-up */
.tick{font-variant-numeric:tabular-nums}

/* nav active section */
.nav__links a.here{color:var(--semola); border-color:var(--ember-lit)}

@media (prefers-reduced-motion:reduce){
  .rw .w{opacity:1; filter:none; transform:none; transition:none}
  .ribbon__track{animation:none}
  .fig img{transform:none; clip-path:none; transition:none}
  .card__img img,.card{transition:none}
  .card:hover .card__img img{transform:none}
}

/* RTL */
[dir="rtl"] .row__price{direction:ltr}
[dir="rtl"] .ribbon__track{animation-direction:reverse}
[dir="rtl"] .pull{border-inline-start:3px solid var(--ember)}