/* =========================================================
   TANDOOR ET GRILLE — high-end design system (shared)
   Editorial, photography-led, restrained. One ember accent,
   a brass hairline for luxe. Bone / ink / ember / brass.
   Used by: index.html, menu.html, catering.html
   ========================================================= */
:root{
  --bone:#F1ECE3;         /* warm off-white page */
  --bone-2:#E8E1D4;
  --paper:#F8F5EF;
  --ink:#171310;          /* warm near-black */
  --char:#2A231C;         /* warm charcoal */
  --muted:#8B8073;        /* soft warm gray */
  --ember:#B23A2E;        /* muted brick red — single accent */
  --ember-deep:#8E2C22;
  --brass:#AD8A54;        /* warm brass — hairlines & small accents */
  --brass-soft:#C6A874;

  --f-serif:'Fraunces', Georgia, serif;
  --f-sans:'Hanken Grotesk', system-ui, sans-serif;

  --pad: clamp(20px, 5.5vw, 100px);
  --maxw: 1360px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --track: 0.24em;        /* label letter-spacing */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-sans);
  background:var(--bone);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}
::selection{background:var(--ember);color:var(--bone)}
h1,h2,h3{font-family:var(--f-serif);font-weight:400;line-height:1.02;letter-spacing:-0.015em}

/* ---------- shared type helpers ---------- */
.eyebrow{font-family:var(--f-sans);font-weight:600;font-size:.72rem;text-transform:uppercase;
  letter-spacing:var(--track);color:var(--ember)}
.eyebrow--muted{color:var(--muted)}
.lede{font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.6;color:var(--char);max-width:56ch}
.serif-i{font-family:var(--f-serif);font-style:italic}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent);border:0}

/* ---------- container / section ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,11vw,150px)}
.section--tight{padding-block:clamp(48px,7vw,90px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-sans);font-weight:600;
  font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;padding:1.05em 1.9em;border-radius:100px;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--bone);cursor:pointer;
  transition:transform .4s var(--ease), background .3s, color .3s, border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn--ember{background:var(--ember);border-color:var(--ember);color:#fff}
.btn--ember:hover{background:var(--ember-deep);border-color:var(--ember-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(23,19,16,.28)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--on-dark{background:transparent;color:var(--bone);border-color:rgba(241,236,227,.4)}
.btn--on-dark:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.link-underline{position:relative;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
  padding-bottom:3px;background-image:linear-gradient(var(--ember),var(--ember));background-size:0% 1.5px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease)}
.link-underline:hover{background-size:100% 1.5px}

/* =========================================================
   NAV  — minimal, elegant, transparent → solid on scroll
   ========================================================= */
.nav{position:fixed;inset-inline:0;top:0;z-index:50;transition:background .5s, padding .5s, box-shadow .5s;
  padding:clamp(14px,2vw,26px) var(--pad)}
.nav__inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav.is-solid{background:rgba(241,236,227,.9);backdrop-filter:blur(14px);padding-block:12px;
  box-shadow:0 1px 0 rgba(23,19,16,.08)}
.nav__logo{display:flex;align-items:center;height:clamp(30px,3.4vw,42px)}
.nav__logo img{height:100%;width:auto;object-fit:contain}
.nav.is-light .nav__logo img{filter:brightness(0) invert(1)}
.nav.is-solid .nav__logo img{filter:none}
.nav__links{display:none;gap:clamp(20px,2.4vw,40px);align-items:center}
@media(min-width:940px){.nav__links{display:flex}}
.nav__links a{font-family:var(--f-sans);font-weight:500;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);opacity:.85;transition:opacity .3s,color .3s}
.nav.is-light .nav__links a{color:var(--bone)}
.nav__links a:hover,.nav__links a.is-current{opacity:1;color:var(--ember)}
.nav.is-light .nav__links a:hover{color:#fff}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__lang{background:none;border:0;cursor:pointer;font-family:var(--f-sans);font-weight:600;
  font-size:.76rem;letter-spacing:.08em;color:inherit;opacity:.75}
.nav.is-light .nav__lang{color:var(--bone)}
.nav__lang .on{opacity:1}.nav__lang .off{opacity:.4}
.nav__cta{font-size:.76rem;padding:.75em 1.4em}
.nav__burger{display:grid;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
@media(min-width:940px){.nav__burger{display:none}}
.nav__burger i{width:24px;height:2px;background:var(--ink);display:block;transition:.3s}
.nav.is-light .nav__burger i{background:var(--bone)}

/* mobile menu overlay */
.mnav{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;padding:var(--pad);transform:translateY(-100%);
  transition:transform .6s var(--ease);visibility:hidden}
.mnav.open{transform:none;visibility:visible}
.mnav__top{display:flex;justify-content:space-between;align-items:center;height:clamp(30px,3.4vw,42px)}
.mnav__top img{height:100%;filter:brightness(0) invert(1)}
.mnav__close{background:none;border:0;color:var(--bone);font-size:1.6rem;cursor:pointer}
.mnav__links{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:.1em}
.mnav__links a{font-family:var(--f-serif);font-size:clamp(2.4rem,11vw,4rem);line-height:1.06;color:var(--bone)}
.mnav__links a em{color:var(--brass-soft)}
.mnav__foot{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:.8rem}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{background:var(--ink);color:var(--bone);padding:clamp(64px,9vw,120px) var(--pad) 40px}
.foot__inner{max-width:var(--maxw);margin:0 auto}
.foot__grid{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:820px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot__logo{height:44px;margin-bottom:22px;filter:brightness(0) invert(1)}
.foot__tag{color:var(--muted);max-width:34ch;line-height:1.6}
.foot h4{font-family:var(--f-sans);font-weight:600;font-size:.72rem;text-transform:uppercase;
  letter-spacing:var(--track);color:var(--brass-soft);margin-bottom:16px}
.foot__col a,.foot__col p{display:block;color:var(--bone);opacity:.85;margin-bottom:8px;transition:opacity .3s,color .3s}
.foot__col a:hover{opacity:1;color:var(--brass-soft)}
.foot__bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  margin-top:clamp(48px,7vw,90px);padding-top:24px;border-top:1px solid rgba(241,236,227,.14);
  color:var(--muted);font-size:.78rem}

/* =========================================================
   MOTION — reveal on scroll (JS adds .in)
   ========================================================= */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* clip mask reveal for images */
.img-reveal{position:relative;overflow:hidden}
.img-reveal img,.img-reveal video{width:100%;height:100%;object-fit:cover}
html.js .img-reveal img,html.js .img-reveal video{transform:scale(1.08);transition:transform 1.4s var(--ease)}
html.js .img-reveal::after{content:"";position:absolute;inset:0;background:var(--bone);transform-origin:top;
  transition:transform 1.1s var(--ease)}
html.js .img-reveal.in::after{transform:scaleY(0)}
html.js .img-reveal.in img,html.js .img-reveal.in video{transform:scale(1)}