/* fonts: self-hosted (latin subset), variable files where Google ships them — no third-party request, no late swap */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/inter-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/playfair-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/playfair-italic-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dmmono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dmmono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Allura';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/allura.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =========================================================
   Tikka & Tonic — v3 "cinematic"
   Playfair Display (headings) · Inter (body) · Allura (accents)
   ========================================================= */
:root{
  --green:#113527; --green-2:#1A4634; --green-deep:#0C2219;
  --gold:#D9A53A; --gold-2:#E8C47A; --gold-deep:#B8862B;
  --spice:#CF5A2E;
  --cream:#F4ECDD; --paper:#FAF6EE; --sand:#EADFC8;
  --ink:#121613; --char:#151A17; --muted:#6F6A60;
  --f-display:"Playfair Display",Georgia,serif;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;
  --f-script:"Allura","Brush Script MT",cursive;
  --f-mono:"DM Mono",ui-monospace,monospace;
  --gutter:clamp(20px,5vw,72px);
  --max:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --tile:url("../../img/tile-azulejo.webp");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
address{font-style:normal}
::selection{background:var(--gold);color:var(--green-deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* film grain: a pre-rendered tile in plain (normal) blending — a full-screen fixed layer with mix-blend-mode had to be re-blended
   over the whole page on every scroll frame (and fought the blurred nav) */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;background:url("../../img/grain.webp") 0 0/160px}
/* ---------- type helpers ---------- */
.eyebrow{margin:0 0 18px;font:500 12px/1.2 var(--f-body);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.eyebrow.gold{color:var(--gold)}
.h2{margin:0;font:400 clamp(36px,4.6vw,72px)/1.04 var(--f-display);letter-spacing:-.01em;color:var(--green)}
.h2 em{font-style:italic;color:var(--gold-deep)}
.h2.light{color:var(--cream)}
.h2.light em{color:var(--gold)}
.script{font-family:var(--f-script);font-weight:400;line-height:1}
.sec-head{text-align:center;max-width:900px;margin:0 auto clamp(40px,5vw,72px)}
.sec-head .eyebrow::after{content:"";width:28px;height:1px;background:currentColor}
.sec-head--row{display:flex;justify-content:space-between;align-items:end;gap:24px;text-align:left;max-width:var(--max)}
.sec-head--row .eyebrow::after{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border-radius:2px;font:500 13px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s,transform .3s var(--ease)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--gold{background:var(--gold);color:var(--green-deep)}
.btn--gold:hover{background:var(--gold-2)}
.link{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--green);padding-bottom:6px;border-bottom:1px solid currentColor}
.link svg{transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(5px)}
/* ---------- placeholders (assets/js/placeholders.js) ---------- */
:where(.ph){position:relative}
.ph{display:block}
.ph svg{display:block;width:100%;height:100%;overflow:visible}
.ph__tag{position:absolute;left:50%;top:12px;transform:translateX(-50%);font:600 10px/1 var(--f-body);letter-spacing:.06em;color:rgba(18,22,19,.6);background:rgba(255,255,255,.8);padding:5px 8px;border-radius:999px;white-space:nowrap;pointer-events:none}
.ph--topplate{aspect-ratio:1}
.ph--photo,.ph--plate{aspect-ratio:4/5;width:100%;height:auto}
body.hide-tags .ph__tag{display:none}
/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;inset:0 0 auto;z-index:100;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding:22px var(--gutter);color:var(--cream);transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s}
.nav.is-scrolled{background:rgba(12,34,25,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:12px;padding-bottom:12px;box-shadow:0 1px 0 rgba(217,165,58,.18)}
.nav__logo img{height:46px;width:auto;transition:height .4s var(--ease);filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.nav.is-scrolled .nav__logo img{height:38px}
.nav__links{display:flex;justify-content:center;gap:clamp(20px,3vw,44px)}
.nav__links a{position:relative;font:500 12.5px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;padding:8px 0;opacity:.88;transition:opacity .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .35s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{right:0}
.nav__tools{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:2px;font:500 12px/1 var(--f-body);letter-spacing:.12em}
.lang button{padding:7px 8px;opacity:.55;transition:opacity .2s}
.lang button[aria-pressed="true"]{opacity:1;color:var(--gold)}
.nav__ig{display:grid;place-items:center;width:36px;height:36px;opacity:.85}
.nav__ig:hover{opacity:1;color:var(--gold)}
.nav__cta{font:500 12px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;padding:14px 20px;border:1px solid rgba(217,165,58,.7);color:var(--gold);transition:background .3s,color .3s}
.nav__cta:hover{background:var(--gold);color:var(--green-deep)}
.nav__burger{display:none;width:40px;height:40px;position:relative}
.nav__burger span{position:absolute;left:9px;right:9px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.nav__burger span:first-child{top:15px}
.nav__burger span:last-child{top:23px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:90;background:var(--green-deep) var(--tile) center/180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.drawer::before{content:"";position:absolute;inset:0;background:rgba(12,34,25,.93)}
.drawer > *{position:relative}
.drawer a:not(.btn){font:400 38px/1.1 var(--f-display);color:var(--cream)}
.drawer .btn{margin-top:18px}
.drawer[hidden]{display:none}
/* =========================================================
   HERO — playful split (v4)
   ========================================================= */
.hero{position:relative;min-height:max(100svh,760px);background:var(--paper);overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;padding:110px 0 80px}
.hero__panel{position:absolute;inset:0;z-index:-1;background:var(--green);clip-path:polygon(60% 0,100% 0,100% 100%,40% 100%)}
.hero__panel::before{content:"";position:absolute;inset:0;background:var(--tile) center/150px;opacity:.07}
.hero__panel::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 50% at 72% 58%,rgba(232,196,122,.22),transparent 70%)}
.hero__copy{position:relative;z-index:3;padding:0 24px 0 max(var(--gutter),calc((100vw - var(--max))/2))}
.hero__kicker{display:flex;align-items:center;gap:14px;margin:0 0 24px;font:500 12px/1.4 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.hero__kicker .rule{width:36px;height:1.5px;background:currentColor;flex:none}
.hero__title{margin:0;font:500 clamp(64px,7.4vw,128px)/.9 var(--f-display);letter-spacing:-.02em;color:var(--green)}
.hero__title .w{display:block}
.hero__title .amp{font-style:italic;font-weight:400;color:var(--gold)}
.hero__script{margin:20px 0 0 6px;font:400 clamp(34px,3vw,48px)/1 var(--f-script);color:var(--spice);transform:rotate(-3deg);transform-origin:left center}
.hero__desc{margin:22px 0 0;font:400 clamp(16px,1.2vw,18px)/1.7 var(--f-body);color:#5E594F;max-width:29em}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.status{display:inline-flex;align-items:center;gap:10px;margin:0;font:400 13px/1 var(--f-body);letter-spacing:.04em;color:var(--muted)}
.status i{width:8px;height:8px;border-radius:50%;background:#A39E93;flex:none}
.status.is-open i{background:#2FB36A;box-shadow:0 0 0 0 rgba(47,179,106,.5);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(47,179,106,0)}100%{box-shadow:0 0 0 0 rgba(47,179,106,0)}}
.hero__stage{position:relative;height:min(76vh,700px);z-index:2;margin-right:max(var(--gutter),calc((100vw - var(--max))/2))}
.scene{position:absolute;inset:0;visibility:hidden}
.scene.is-active{visibility:visible}
.cut{position:absolute;max-width:none;filter:drop-shadow(0 34px 28px rgba(0,0,0,.38)) drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.cut--glass{right:6%;bottom:9%;height:84%;width:auto}
.cut--front{left:0;bottom:3%;width:64%}
.hero .deco{inset:auto;position:absolute;z-index:3;width:15%;pointer-events:none;filter:drop-shadow(0 16px 14px rgba(0,0,0,.3))}
.hero .deco--lime{right:-4%;bottom:0;width:17%;transform:rotate(12deg)}
.hero__note{position:absolute;right:30%;top:0;margin:0;display:flex;align-items:flex-start;gap:4px;font:400 34px/1 var(--f-script);color:var(--gold-2);transform:rotate(-6deg);z-index:3}
.hero__note svg{margin-top:18px;color:var(--gold-2)}
.stamp{position:absolute;left:calc(42% - 20px);bottom:3%;width:132px;height:132px;z-index:4;border-radius:50%;background:var(--gold);color:var(--green-deep);display:grid;place-items:center;box-shadow:0 0 0 6px var(--paper),0 18px 40px -12px rgba(12,34,25,.55);transition:scale .4s var(--ease),rotate .4s var(--ease)}
.stamp:hover{scale:1.06;rotate:-6deg}
.stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.stamp text{font:500 13.5px var(--f-mono);letter-spacing:2.6px;fill:var(--green-deep)}
@keyframes spin{to{transform:rotate(360deg)}}
/* =========================================================
   INTRO ICON ROW
   ========================================================= */
.intro{background:var(--green);color:var(--cream);position:relative}
.intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--tile) 0 0/40px}
/* =========================================================
   TWO HALVES
   ========================================================= */
.halves{position:relative;padding:clamp(90px,10vw,150px) var(--gutter);overflow:hidden;background:var(--paper)}
.halves__botanical{position:absolute;width:clamp(200px,22vw,340px);opacity:.5;pointer-events:none}
.halves__botanical{right:-40px;top:40px;transform:rotate(18deg)}
.halves .sec-head{position:relative;z-index:1}
.half{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,52px) clamp(40px,4vw,56px);background:var(--cream);border:1px solid rgba(184,134,43,.25)}
/* =========================================================
   SIGNATURE DISH
   ========================================================= */
.signature{position:relative;overflow:hidden;background:var(--char);color:var(--cream);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(90px,10vw,150px) max(var(--gutter),calc((100vw - var(--max))/2))}
.signature::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 72% 55%,rgba(217,165,58,.16),transparent 70%),radial-gradient(40% 50% at 10% 10%,rgba(17,53,39,.6),transparent 70%);pointer-events:none}
.deco{position:absolute;pointer-events:none;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}
.deco--lime{width:30%;right:2%;bottom:2%;transform:rotate(-8deg);z-index:3}
/* =========================================================
   MARQUEE
   ========================================================= */
/* =========================================================
   MENU
   ========================================================= */
.menu{padding:clamp(90px,10vw,150px) var(--gutter);background:var(--paper)}
.menu__tabs{max-width:var(--max);margin:0 auto clamp(36px,4vw,56px);display:flex;justify-content:center;gap:6px 30px;flex-wrap:wrap;border-bottom:1px solid rgba(17,53,39,.14)}
.menu__tabs button{position:relative;font:500 12.5px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;padding:16px 2px;color:var(--muted);transition:color .2s}
.menu__tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease)}
.menu__tabs button:hover{color:var(--green)}
.menu__tabs button[aria-selected="true"]{color:var(--green)}
.menu__tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.menu__body{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,100px);align-items:start}
.menu__figure{margin:0;position:sticky;top:110px}
.menu__figure > img,.menu__figure > .ph{width:100%;aspect-ratio:4/5;border-radius:999px 999px 0 0;object-fit:contain;padding:10%;background:radial-gradient(circle at 50% 62%,#FFF9EC 0,#EFE2C4 74%);outline:1px solid rgba(184,134,43,.4);outline-offset:-12px}
.menu__note{margin-top:18px;text-align:center;font:400 clamp(28px,2.4vw,36px)/1 var(--f-script);color:var(--gold-deep)}
.menu__list{min-height:420px}
.menu__intro{margin:0 0 22px;font:italic 400 20px/1.5 var(--f-display);color:var(--green);max-width:34em}
.mi{padding:18px 0;border-bottom:1px solid rgba(17,53,39,.12)}
.mi__top{display:flex;align-items:baseline;gap:12px}
.mi__name{font:500 clamp(19px,1.5vw,23px)/1.25 var(--f-display);color:var(--green)}
.mi__fill{flex:1;border-bottom:1px dotted rgba(17,53,39,.35);transform:translateY(-5px)}
.mi__price{font:500 15px/1 var(--f-body);letter-spacing:.04em;color:var(--gold-deep);white-space:nowrap}
.mi__desc{margin:6px 0 0;font-size:14.5px;color:var(--muted);max-width:40em}
.heart{width:20px;height:20px;vertical-align:-4px;flex:none}
.menu__foot{max-width:var(--max);margin:44px auto 0;display:flex;justify-content:center;gap:12px 32px;flex-wrap:wrap;font:400 12px/1.4 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* =========================================================
   PLATE
   ========================================================= */
.plate{position:relative;background:var(--green);color:var(--cream);overflow:hidden}
.plate::before{content:"";position:absolute;inset:0;background:var(--tile) center/220px;opacity:.06}
/* =========================================================
   DETAILS (bento)
   ========================================================= */
.details{padding:clamp(90px,10vw,150px) var(--gutter);background:var(--paper)}
.details .sec-head--row .link{flex:none}
.bento{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(260px,24vw));gap:14px}
.tile{position:relative;margin:0;overflow:hidden;background:var(--green-deep);color:var(--cream)}
.tile > img,.tile > picture > img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tile:hover > img,.tile:hover > picture > img{transform:scale(1.06)}
.tile figcaption{position:absolute;inset:auto 0 0;padding:60px 22px 20px;background:linear-gradient(180deg,transparent,rgba(8,20,14,.85));display:flex;flex-direction:column;gap:4px}
.tile figcaption strong{font:400 22px/1.15 var(--f-display)}
.tile figcaption span{font-size:13px;color:rgba(244,236,221,.75)}
.tile--a{grid-column:1;grid-row:1 / span 2}
.tile--b{grid-column:2;grid-row:1}
.tile--brand{grid-column:3;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:28px;text-align:center;background:var(--green)}
.tile--brand::before{content:"";position:absolute;inset:12px;border:1px solid rgba(217,165,58,.35)}
.tile--brand .script{position:relative;margin:0;font-size:clamp(36px,3.2vw,52px);color:var(--gold)}
.tile__logo{position:relative;width:70%;max-width:220px}
.tile__botanical{position:absolute;width:46%;right:-8%;bottom:-6%;opacity:.35;transform:rotate(-20deg)}
.tile--c{grid-column:4;grid-row:1 / span 2}
.tile--d{grid-column:2;grid-row:2}
.tile--e{grid-column:3;grid-row:2}
/* =========================================================
   VISIT
   ========================================================= */
.visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--green-deep);position:relative}
.visit::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--tile) 0 0/40px;z-index:2}
.hours{margin:30px 0 0;border-collapse:collapse;font-size:15px}
.hours th{text-align:left;font-weight:500;padding:6px 28px 6px 0;color:var(--gold);letter-spacing:.04em}
.hours td{padding:6px 0;color:rgba(244,236,221,.85)}
.hours .off td,.hours .off th{opacity:.55}
.visit__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.visit__map{min-height:460px;position:relative}
.visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05) sepia(.12)}
/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--green);color:var(--cream);position:relative}
.footer__tiles{height:64px;background:var(--tile) center/64px;opacity:.9}
.footer__inner{max-width:var(--max);margin:0 auto;padding:clamp(56px,6vw,90px) var(--gutter) 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.footer__logo{width:200px;height:auto}
.footer__brand .script{margin:16px 0 0;font-size:36px;color:var(--gold)}
.footer__col h3{margin:0 0 14px;font:500 12px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.footer__col p{margin:0;font-size:15px;line-height:1.75;color:rgba(244,236,221,.78)}
.footer__col a:hover{color:var(--gold)}
.footer__small{margin:0;padding:22px var(--gutter) 30px;text-align:center;border-top:1px solid rgba(244,236,221,.12);font-size:12.5px;letter-spacing:.04em;color:rgba(244,236,221,.55)}
.footer__small a{text-decoration:underline;text-underline-offset:3px}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .nav__links{display:none}
  .nav{grid-template-columns:auto 1fr}
  .nav__tools{justify-self:end}
  .nav__burger{display:block}
  .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:minmax(240px,44vw)}
  .bento > *{grid-column:auto !important;grid-row:auto !important}
  .tile--a,.tile--c{grid-row:span 2 !important}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{padding:14px var(--gutter)}
  .nav__logo img{height:38px}
  .nav__cta,.nav__ig{display:none}
  .halves__botanical{opacity:.22;right:-70px;top:20px}
  .signature{grid-template-columns:1fr}
  .menu__body{grid-template-columns:1fr}
  .menu__figure{position:relative;top:auto;max-width:420px;margin:0 auto;width:100%}
  .menu__tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:26px;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter)}
  .menu__tabs::-webkit-scrollbar{display:none}
  .menu__tabs button{flex:none}
  .visit{grid-template-columns:1fr}
  .visit__map{min-height:340px}
}
@media (max-width:600px){
  .sec-head--row{flex-direction:column;align-items:flex-start}
  .bento{grid-template-columns:1fr;grid-auto-rows:minmax(300px,92vw)}
  .tile--a,.tile--c{grid-row:auto !important}
  .tile--brand{min-height:280px}
  .footer__inner{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}
/* =========================================================
   v4 — playful layer (between v2 and v3)
   ========================================================= */
:root{--paper:#FAF4E8;--radius:26px}
.btn{border-radius:999px}
.btn--line{border:1.5px solid var(--green);color:var(--green)}
.btn--line:hover{background:var(--green);color:var(--cream)}
.eyebrow{font:500 12px/1.2 var(--f-mono);letter-spacing:.2em}
.link{font-family:var(--f-mono);letter-spacing:.12em}
/* nav: green on cream, cream over the green panel */
.nav{color:var(--green)}
.nav__tools{color:var(--cream)}
.nav__logo img{filter:drop-shadow(0 3px 8px rgba(17,53,39,.18))}
.nav__links a{font-family:var(--f-mono);letter-spacing:.14em;opacity:1}
.nav__cta{border-radius:999px;border-color:var(--gold);color:var(--gold)}
.nav.is-scrolled{background:rgba(250,244,232,.93);box-shadow:0 1px 0 rgba(17,53,39,.1)}
.nav.is-scrolled .nav__tools{color:var(--green)}
.nav.is-scrolled .nav__cta{background:var(--green);border-color:var(--green);color:var(--cream)}
.lang button[aria-pressed="true"]{color:var(--gold)}
.nav.is-scrolled .lang button[aria-pressed="true"]{color:var(--gold-deep)}
/* intro: little cards */
.intro{background:var(--paper);color:var(--ink)}
.intro::after{display:none}
/* halves: tilted cards with a garnish */
.halves{background:var(--paper)}
.half{border-radius:var(--radius);border:0;box-shadow:0 30px 60px -40px rgba(17,53,39,.6);transition:translate .6s var(--ease),rotate .6s var(--ease)}
.half:hover{rotate:0deg;translate:0 -6px}
/* signature: mustard stage */
.signature{background:var(--gold);color:var(--green-deep)}
.signature::before{background:radial-gradient(50% 60% at 72% 55%,rgba(255,248,230,.35),transparent 70%)}
.signature .eyebrow{color:var(--green)}
.signature .h2{color:var(--green-deep)}
.signature .h2 em{color:var(--green-deep)}
.signature .btn--gold{background:var(--green-deep);color:var(--cream)}
.signature .btn--gold:hover{background:var(--green-2)}
/* menu: pill tabs */
.menu{padding-top:clamp(110px,11vw,170px)}
.menu__tabs{border-bottom:0;gap:8px}
.menu__tabs button{padding:13px 20px;border-radius:999px;border:1px solid rgba(17,53,39,.16);font-family:var(--f-mono);letter-spacing:.14em;background:#fff}
.menu__tabs button::after{display:none}
.menu__tabs button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:var(--cream)}
.mi__price{font-family:var(--f-mono);color:var(--spice)}
/* details: rounded tiles + label chips */
.tile{border-radius:22px}
.tile figcaption{inset:auto auto 14px 14px;padding:12px 16px;background:rgba(250,244,232,.95);color:var(--green);border-radius:16px;gap:2px;max-width:calc(100% - 28px)}
.tile figcaption strong{font-size:18px}
.tile figcaption span{color:var(--muted);font-size:12px}
.tile--brand::before{border-radius:14px}
/* visit: rounded card + map */
.visit{background:var(--paper);gap:16px;padding:clamp(60px,7vw,110px) max(var(--gutter),calc((100vw - var(--max))/2))}
.visit::before{display:none}
.visit__map{border-radius:var(--radius);overflow:hidden}
/* ---------- v4 responsive ---------- */
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,50fr) minmax(0,50fr)}
  .hero__note{display:none}
}
@media (max-width:900px){
  .nav{color:var(--cream)}
  .hero{display:flex;flex-direction:column;align-items:stretch;padding:76px 0 56px;min-height:0}
  .hero__panel{bottom:auto;height:calc(76px + min(100vw,540px) + 30px);clip-path:polygon(0 0,100% 0,100% 84%,0 100%)}
  .hero__stage{order:-1;height:min(100vw,540px);margin:0 var(--gutter)}
  .hero__copy{padding:30px var(--gutter) 0}
  .hero__title{font-size:clamp(56px,17vw,96px)}
  .hero__title .w{display:inline}
  .hero__kicker{font-size:11px;letter-spacing:.16em;gap:10px}
  .hero__kicker .rule{width:24px}
  .hero__cta .btn{flex:1 1 auto}
  .stamp{left:auto;right:12px;bottom:auto;top:calc(76px + min(100vw,540px) - 92px);width:100px;height:100px}
  .stamp text{font-size:13px}
  .visit{padding:40px var(--gutter)}
}
/* =========================================================
   v5 — refinements
   ========================================================= */
.nav__logo img,.nav.is-scrolled .nav__logo img{filter:none}
.hero .status{margin-top:30px}
.btn--green{background:var(--green);color:var(--cream)}
.btn--green:hover{background:var(--green-2)}
/* welcome band — the green hero panel pours into it */
.intro{background:var(--green);color:var(--cream);position:relative;overflow:hidden}
.intro::before{content:"";position:absolute;inset:0;background:var(--tile) center/150px;opacity:.07;pointer-events:none}
.intro .eyebrow::after{content:"";width:28px;height:1px;background:currentColor}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(48px,5vw,72px) auto 0;max-width:960px;border-top:1px solid rgba(217,165,58,.35)}
.facts > div{padding:26px 20px 0}
.facts > div + div{border-left:1px solid rgba(217,165,58,.35)}
.facts dt{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.facts dd{margin:0;font-size:15.5px;color:rgba(244,236,221,.88)}
.facts a{border-bottom:1px solid rgba(244,236,221,.3);transition:border-color .2s,color .2s}
.facts a:hover{color:var(--gold);border-color:var(--gold)}
/* reviews */
.reviews{position:relative;background:var(--green-deep);color:var(--cream);padding:clamp(90px,10vw,140px) max(var(--gutter),calc((100vw - var(--max))/2));overflow:hidden}
.reviews::before{content:"";position:absolute;inset:0;background:var(--tile) center/150px;opacity:.05;pointer-events:none}
.reviews > *{position:relative}
/* visit */
.visit{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center;background:var(--paper);padding:clamp(90px,10vw,140px) max(var(--gutter),calc((100vw - var(--max))/2))}
.visit__sub{margin:20px 0 0;max-width:30em;color:var(--muted);font-size:17px}
.visit__cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:28px 44px;margin-top:40px;padding-top:30px;border-top:1px solid rgba(17,53,39,.14)}
.visit__col h3{margin:0 0 12px;font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.visit__col address,.visit__col p{margin:0;font-size:15px;line-height:1.7;color:var(--ink)}
.visit__col a:hover{color:var(--gold-deep)}
.visit .hours{margin:0;font-size:15px}
.visit .hours th{color:var(--green);padding:0 18px 4px 0;font-weight:500}
.visit .hours td{color:var(--ink);padding:0 0 4px}
.visit__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.visit__map{position:relative;min-height:0;height:clamp(460px,44vw,620px);border-radius:999px 999px var(--radius) var(--radius);overflow:hidden;box-shadow:0 0 0 10px var(--cream),0 0 0 11px rgba(184,134,43,.35),0 40px 70px -40px rgba(17,53,39,.6)}
.visit__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.3) sepia(.15) contrast(1.02)}
@media (max-width:1100px){
  .visit{grid-template-columns:1fr}
  .visit__map{height:480px;max-width:560px;width:100%;justify-self:center}
}
@media (max-width:900px){
  .hero{padding-bottom:0}
  .hero__copy{padding-bottom:56px}
}
@media (max-width:700px){
  .facts{grid-template-columns:1fr;text-align:center}
  .facts > div{padding:22px 0}
  .facts > div + div{border-left:0;border-top:1px solid rgba(217,165,58,.35)}
  .visit__cols{grid-template-columns:1fr}
  .visit__map{height:400px}
}
.menu{padding-top:clamp(90px,10vw,140px);padding-bottom:clamp(60px,6vw,90px)}
.details{padding-top:clamp(60px,6vw,90px)}
.details .sec-head--row{padding-top:clamp(50px,5vw,80px);border-top:1px solid rgba(17,53,39,.12)}
.visit .hours th,.visit .hours td{white-space:nowrap}
/* opening curtain */
.curtain{position:fixed;inset:0;z-index:300;background:var(--green);display:grid;place-items:center;clip-path:inset(0 0 0 0)}
.curtain::before{content:"";position:absolute;inset:0;background:var(--tile) center/150px;opacity:.07}
.curtain__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.curtain img{width:min(260px,52vw);height:auto}
.curtain__line{width:160px;height:1px;background:rgba(217,165,58,.3);position:relative;overflow:hidden}
.curtain__line::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:left;animation:load 1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.curtain.is-gone{display:none}
html.no-curtain .curtain{display:none}
/* hero: light beam + gold dust */
.hero__beam{position:absolute;right:8%;top:-30%;width:70%;height:150%;background:radial-gradient(closest-side,rgba(255,214,140,.22),rgba(255,214,140,.06) 55%,transparent 75%);transform:rotate(14deg);mix-blend-mode:screen;animation:breathe 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes breathe{from{opacity:.75}to{opacity:1}}
.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__title{perspective:800px}
.hero__title .ch{display:inline-block;will-change:transform}
.hero__title .w{overflow:visible}
.cut{will-change:transform}
/* scrubbed reading line */
.ornament{display:block;width:200px;height:26px;margin:22px auto 0;color:var(--gold-deep)}
.ornament path{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.ornament.is-drawn path{transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1);stroke-dashoffset:0}
.reduce .ornament path{stroke-dashoffset:0}
/* arches open like doors */
.tile{isolation:isolate}
.tile > img,.tile > picture > img{height:118%;margin-top:-9%}
/* footer giant wordmark */
.footer{overflow:hidden}
.footer__giant{margin:0;padding:clamp(40px,5vw,70px) 0 0;text-align:center;white-space:nowrap;font:400 clamp(60px,13.5vw,230px)/.95 var(--f-display);letter-spacing:-.03em;color:rgba(244,236,221,.09)}
.footer__giant .amp{font-style:italic;color:rgba(217,165,58,.4)}
.footer__giant .ch{display:inline-block}
/* buttons */
.btn{position:relative;overflow:hidden;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .curtain{display:none}
}
.wrd{display:inline-block;white-space:nowrap}
.hero__beam{background:radial-gradient(closest-side,rgba(255,206,120,.38),rgba(255,206,120,.12) 50%,transparent 76%);right:2%;top:-20%;width:62%;height:120%}
.hero__panel::after{background:radial-gradient(70% 60% at 70% 62%,transparent 40%,rgba(5,18,11,.45) 100%)}
.stage__shadow{position:absolute;left:4%;right:6%;bottom:2%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);filter:blur(6px);z-index:0}
/* v6.2 — green left, light right */
@media (min-width:901px){
  .hero__panel{clip-path:polygon(0 0,61% 0,45% 100%,0 100%)}
  .hero__panel::after{background:radial-gradient(60% 70% at 18% 45%,rgba(232,196,122,.14),transparent 70%)}
  .hero__beam{left:-10%;right:auto;top:-30%;width:60%;height:130%;transform:rotate(-14deg)}
  .hero__kicker{color:var(--gold)}
  .hero__title{color:var(--cream)}
  .hero__script{color:var(--gold-2)}
  .hero__desc{color:rgba(244,236,221,.8)}
  .hero .btn--line{border-color:rgba(244,236,221,.6);color:var(--cream)}
  .hero .btn--line:hover{background:var(--cream);color:var(--green-deep)}
  .hero .status{color:rgba(244,236,221,.7)}
  .hero__note{color:var(--gold-deep)}
  .hero__note svg{color:var(--gold-deep)}
  .stage__shadow{background:radial-gradient(closest-side,rgba(60,40,10,.32),transparent)}
  .nav{color:var(--cream)}
  .nav__tools{color:var(--green)}
  .nav.is-scrolled{color:var(--green)}
}
@media (min-width:901px){
  .nav__cta{border-color:var(--green);color:var(--green)}
  .nav__cta:hover{background:var(--green);color:var(--cream)}
  .lang button[aria-pressed="true"]{color:var(--gold-deep)}
}
.js:not(.hero-ready) .hero__panel{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
/* v6.4 — no flicker before the intro, CSS-driven loader */
.js:not(.hero-go) .hero__copy,
.js:not(.hero-go) .hero__stage,
.js:not(.hero-go) .nav{visibility:hidden}
.curtain img{animation:logoIn .9s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes logoIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.curtain__line::after{animation:load 1.6s cubic-bezier(.4,0,.2,1) .2s forwards}
.curtain.is-done .curtain__line::after{animation:none;transform:scaleX(1);transition:transform .3s}
/* =========================================================
   v6.5 — Signature dish: one cinematic frame
   ========================================================= */
.signature{display:block;background:var(--paper);color:var(--cream);padding:clamp(16px,2vw,28px);overflow:hidden}
.signature::before{display:none}
@media (max-width:900px){
  .signature{padding:12px}
}
.signature .btn--gold{background:var(--gold);color:var(--green-deep)}
.signature .btn--gold:hover{background:var(--gold-2)}
.signature .eyebrow{color:var(--gold)}
/* =========================================================
   v6.8 — hero frames itself on scroll (see main.js)
   ========================================================= */
.hero{background:var(--cream)}
.halves{padding-top:clamp(90px,9vw,140px)}
/* =========================================================
   v6.9 — Two halves: one frame split by the hero diagonal
   ========================================================= */
@property --shift{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --tilt{syntax:'<number>';inherits:true;initial-value:1}
.halves{padding-bottom:0}
.duo{--tilt:1;--shift:0%;--a:calc(50% + var(--tilt) * 8% + var(--shift));--b:calc(50% - var(--tilt) * 8% + var(--shift));
  position:relative;height:clamp(580px,84vh,860px);margin-top:clamp(10px,2vw,30px);overflow:hidden;background:var(--green-deep);transition:--shift .9s cubic-bezier(.2,.7,.2,1)}
.duo:has(.duo__half--tikka:hover){--shift:9%}
.duo:has(.duo__half--tonic:hover){--shift:-9%}
.duo__half{position:absolute;inset:0;overflow:hidden;color:var(--cream)}
.duo__half--tikka{clip-path:polygon(0 0,var(--a) 0,var(--b) 100%,0 100%)}
.duo__half--tonic{clip-path:polygon(var(--a) 0,100% 0,100% 100%,var(--b) 100%)}
.duo__img{position:absolute;top:-6%;height:112%;object-fit:cover;transition:filter .6s}
.duo__half--tikka .duo__img{left:0;width:66%;object-position:50% 50%}
.duo__half--tonic .duo__img{right:0;width:66%;object-position:50% 45%}
.duo__half::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(6,14,9,.88) 0%,rgba(6,14,9,.45) 34%,rgba(6,14,9,0) 62%)}
.duo__half:hover .duo__img{filter:brightness(1.06)}
.duo__body{position:absolute;z-index:2;bottom:clamp(36px,5vw,72px);width:min(31%,430px)}
.duo__half--tikka .duo__body{left:max(var(--gutter),calc((100vw - var(--max))/2))}
.duo__half--tonic .duo__body{right:max(var(--gutter),calc((100vw - var(--max))/2));text-align:right}
.duo__half--tonic .duo__label{justify-content:flex-end}
.duo__label{position:relative;z-index:1;display:flex;gap:12px;margin:0 0 6px;font:500 11.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.duo__label span:first-child{opacity:.6}
.duo__label{pointer-events:none}.duo__label span{pointer-events:auto}
.duo__name{margin:0;font:400 clamp(70px,7vw,120px)/.95 var(--f-display);font-style:italic;letter-spacing:-.02em;color:var(--cream)}
.duo__text{margin:16px 0 22px;font-size:15px;line-height:1.65;color:rgba(244,236,221,.82)}
.link--light{color:var(--cream);border-color:rgba(244,236,221,.5)}
.link--light:hover{color:var(--gold);border-color:var(--gold)}
.duo__seam{position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--gold);
  clip-path:polygon(calc(var(--a) - 1px) 0,calc(var(--a) + 1px) 0,calc(var(--b) + 1px) 100%,calc(var(--b) - 1px) 100%)}
.duo__amp{position:absolute;z-index:4;top:50%;left:calc((var(--a) + var(--b)) / 2);width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;
  background:var(--gold);color:var(--green-deep);display:grid;place-items:center;font:italic 400 42px/1 var(--f-display);box-shadow:0 0 0 6px rgba(6,14,9,.35),0 16px 40px -10px rgba(0,0,0,.6);pointer-events:none}
@media (max-width:1100px){
  .duo__body{width:38%}
}
@media (max-width:900px){
  .duo{height:auto;display:flex;flex-direction:column;background:none}
  .duo__half{position:relative;inset:auto;min-height:118vw;clip-path:none}
  .duo__half--tikka{clip-path:polygon(0 0,100% 0,100% calc(100% - 9vw),0 100%);z-index:1}
  .duo__half--tonic{margin-top:-9vw;clip-path:none}
  .duo__half .duo__img{width:100%;left:0;right:auto}
  .duo__body,.duo__half--tikka .duo__body,.duo__half--tonic .duo__body{left:22px;right:22px;width:auto;text-align:left;bottom:calc(36px + 9vw)}
  .duo__half--tonic .duo__body{bottom:36px}
  .duo__half--tonic .duo__label{justify-content:flex-start}
  .duo__seam{display:none}
  .duo__amp{top:118vw;left:auto;right:22px;margin:-62px 0 0;width:60px;height:60px;font-size:32px}
}
.duo{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
@media (max-width:900px){
  .duo__half::after{background:linear-gradient(0deg,rgba(6,14,9,.92) 0%,rgba(6,14,9,.7) 45%,rgba(6,14,9,.15) 80%)}
}
@media (min-width:901px){
  .duo__half--tikka::after{background:linear-gradient(0deg,rgba(6,14,9,.9) 0%,rgba(6,14,9,.55) 38%,rgba(6,14,9,0) 68%),linear-gradient(90deg,rgba(6,14,9,.55) 0%,rgba(6,14,9,0) 42%)}
  .duo__half--tonic::after{background:linear-gradient(0deg,rgba(6,14,9,.9) 0%,rgba(6,14,9,.55) 38%,rgba(6,14,9,0) 68%),linear-gradient(270deg,rgba(6,14,9,.55) 0%,rgba(6,14,9,0) 42%)}
}
/* v6.11 — more air between the hero and "Two halves" */
.halves{padding-top:clamp(140px,14vw,220px)}
.halves .sec-head{margin-bottom:clamp(70px,7vw,120px)}
.halves__botanical{top:clamp(90px,9vw,150px)}
@media (max-width:900px){
  .halves{padding-top:96px}
  .halves .sec-head{margin-bottom:56px}
}
/* =========================================================
   v8 — Signature dishes: "scroll service"
   One pinned stage; scrolling serves the next dish from below while the
   colour of the room changes with it.
   ========================================================= */
.sv{position:relative;background:#CF5A2E}
.sv__pin{--sv-ink:#FFF6E6;--sv-ac:#F6D58A;--sv-deep:#A9431F;position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;color:var(--sv-ink)}
.sv__pin::before{content:"";position:absolute;inset:0;background:var(--tile) center/180px;opacity:.018;pointer-events:none}
.sv__marquee{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;
  font:italic 400 clamp(120px,19vw,320px)/1 var(--f-display);letter-spacing:-.04em;color:var(--sv-deep);will-change:transform}
.sv__dishes{position:absolute;inset:0;pointer-events:none}
.sv__dish{--w:min(52vw,800px);--h:min(64vh,640px);position:absolute;left:50%;top:52%;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);object-fit:contain;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.3))}
.sv__top{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:clamp(92px,11vh,120px);display:flex;justify-content:space-between;align-items:center;font:500 12px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.sv__title{margin:0;font:inherit;letter-spacing:inherit;display:flex;gap:12px;align-items:center}
.sv__title::before{content:"";width:34px;height:1px;background:currentColor}
.sv__top span{opacity:.75}
.sv__num{position:absolute;z-index:3;left:var(--gutter);top:50%;transform:translateY(-50%);height:1.15em;overflow:hidden;font:400 clamp(64px,7vw,120px)/1.15 var(--f-display)}
.sv__num div{will-change:transform}
.sv__num span{display:block;height:1.15em}
.sv__infos{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(34px,5vw,64px);width:min(420px,34vw);height:210px}
.sv__info{position:absolute;left:0;bottom:0;width:100%}
.sv__infoimg{display:none}
.sv__tag{margin:0 0 14px;font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sv-ac)}
.sv__name{margin:0 0 12px;font:400 clamp(30px,2.8vw,44px)/1.04 var(--f-display);letter-spacing:-.01em}
.sv__desc{margin:0 0 18px;font-size:15px;line-height:1.6;opacity:.85}
.sv__meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin:0}
.sv__price{font:400 30px/1 var(--f-display)}
.sv__price small{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.sv__link{color:inherit;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:11px 16px;border:1px solid currentColor;border-radius:999px;opacity:.85;transition:opacity .3s,background .3s,color .3s}
.sv__link:hover{opacity:1;background:var(--sv-ink);color:var(--c,#CF5A2E)}
.sv__rail{position:absolute;z-index:3;right:var(--gutter);top:50%;transform:translateY(-50%);margin:0;padding:0;list-style:none}
.sv__rail button{display:flex;align-items:center;justify-content:flex-end;gap:14px;width:100%;background:none;border:0;padding:8px 0;color:inherit;cursor:pointer;font:400 17px/1.2 var(--f-display);opacity:.45;transition:opacity .4s}
.sv__rail button::after{content:"";width:46px;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:right;transition:transform .5s var(--ease)}
.sv__rail button.on{opacity:1}
.sv__rail button.on::after{transform:scaleX(1)}
.sv__rail button:hover{opacity:.85}
.sv__hint{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(34px,5vw,64px);margin:0;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;opacity:.6}
@media (max-width:900px){
  .sv__top{top:84px}
  .sv__top span{display:none}
  .sv__dish{--w:90vw;--h:44vh;top:46%}
  .sv__num{top:112px;transform:none;font-size:52px}
  .sv__rail,.sv__hint{display:none}
  .sv__infos{left:var(--gutter);right:var(--gutter);width:auto;bottom:28px;height:200px}
  .sv__desc{font-size:14px}
  .sv__marquee{top:44%}
}
/* no GSAP / reduced motion: a calm, stacked list */
.sv--static{background:var(--green-deep)}
.sv--static .sv__pin{height:auto;min-height:0;padding:clamp(100px,10vw,150px) var(--gutter) 80px;color:var(--cream)}
.sv--static .sv__marquee,.sv--static .sv__dishes,.sv--static .sv__num,.sv--static .sv__rail,.sv--static .sv__hint,.sv--static .sv__top span{display:none}
.sv--static .sv__top{position:static;margin:0 auto 50px;max-width:var(--max)}
.sv--static .sv__infos{position:static;width:auto;height:auto;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:50px 40px}
.sv--static .sv__info{position:static}
.sv--static .sv__infoimg{display:block;width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:18px}
.sv--static .sv__tag{color:var(--gold)}
/* =========================================================
   v9 — scrolled nav: even tint of the section underneath + very subtle blur
   ========================================================= */
.nav{transition:background-color .5s var(--ease),padding .4s var(--ease),box-shadow .4s,color .5s}
.nav.is-scrolled{background:transparent;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:none}
/* over the hero the nav keeps its hero colours; it only adapts once the next section is under it */
@media (min-width:901px){
  .nav.is-scrolled:not(.is-past-hero){color:var(--cream)}
}
.nav.is-past-hero,.nav.is-past-hero .nav__tools{color:var(--green)}
.nav.is-past-hero .nav__cta{background:transparent;border-color:currentColor;color:inherit}
.nav.is-past-hero .nav__cta:hover{background:var(--gold);border-color:var(--gold);color:var(--green-deep)}
.nav.is-past-hero.is-on-dark,.nav.is-past-hero.is-on-dark .nav__tools{color:#FAF4E8}
.nav.is-past-hero .lang button{opacity:.45}
.nav.is-past-hero .lang button[aria-pressed="true"]{color:inherit;opacity:1}
/* =========================================================
   v10 — hero green: deeper, richer gradient instead of the hazy glow
   ========================================================= */
.hero__panel{background:linear-gradient(160deg,#17473A 0%,#123A2B 32%,#0D2C20 66%,#081C14 100%)}
.hero__panel::before{opacity:.045}
.hero__panel::after{background:
  radial-gradient(70% 55% at 12% 0%,rgba(232,196,122,.07),transparent 65%),
  radial-gradient(130% 100% at 25% 35%,transparent 45%,rgba(2,10,6,.42) 100%)}
.hero__beam{display:none}
/* =========================================================
   v13 — Reviews: four arches (the menu's arch shape).
   "classic": cream arches + the headline review in hero green.
   "playful" (.rv--playful): each arch in a signature-dish colour, tilted and floating, a spinning 4,7 sticker.
   ========================================================= */
.rv{position:relative;background:var(--paper);color:var(--green);padding:clamp(100px,10vw,160px) var(--gutter);overflow:hidden}
.rv .sec-head{margin-bottom:clamp(44px,5vw,76px)}
.rv blockquote{margin:0}
.rv cite{font-style:normal}
.rv-arches{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);align-items:end}
.rv-arch{--atilt:0deg;--alift:0px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;min-height:clamp(400px,34vw,470px);padding:clamp(70px,6vw,96px) clamp(22px,2vw,32px) 34px;
  border-radius:999px 999px 18px 18px;background:radial-gradient(circle at 50% 30%,#FFF9EC 0,#F1E6CD 80%);outline:1px solid rgba(184,134,43,.4);outline-offset:-10px;
  rotate:var(--atilt);translate:0 var(--alift);
  transition:rotate .7s cubic-bezier(.2,.9,.2,1.25),translate .7s cubic-bezier(.2,.9,.2,1.25),scale .5s var(--ease),background .6s,box-shadow .5s,opacity .9s var(--ease)}
.rv-arch__mark{font:400 86px/.6 var(--f-display);color:var(--gold-deep);height:34px;transition:color .6s,rotate .5s cubic-bezier(.2,.9,.2,1.6),scale .5s cubic-bezier(.2,.9,.2,1.6)}
.rv-arch p{margin:0;flex:1;font:400 clamp(19px,1.45vw,22px)/1.45 var(--f-display);color:var(--green);transition:color .6s}
.rv-arch p em{font-style:italic;color:var(--gold-deep);transition:color .6s}
.rv-arch cite{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .6s}
.rv-arch cite b{font-weight:500;color:var(--green)}
.rv-arch--hero{order:2;min-height:clamp(460px,39vw,540px);background:linear-gradient(160deg,#17473A 0%,#123A2B 40%,#0B261B 100%);outline-color:rgba(217,165,58,.45)}
.rv-arches .rv-arch:nth-child(2){order:1}
.rv-arches .rv-arch:nth-child(3){order:3}
.rv-arches .rv-arch:nth-child(4){order:4}
.rv-arch--hero p{color:var(--cream);font-size:clamp(23px,1.9vw,29px);line-height:1.3}
.rv-arch--hero p em,.rv-arch--hero .rv-arch__mark{color:var(--gold)}
.rv-arch--hero cite{color:rgba(244,236,221,.6)}
.rv-arch--hero cite b{color:var(--gold)}
.rv-arch:hover{--alift:-12px;--atilt:0deg;scale:1.02}
.rv-arch:hover .rv-arch__mark{rotate:-12deg;scale:1.2}
/* entrance: the arches rise up one after another */
.js .rv-arch{opacity:0;translate:0 110px}
.js .rv.is-in .rv-arch{opacity:1;translate:0 var(--alift);transition-delay:calc(var(--i) * .12s)}
.js .rv.is-in .rv-arch:hover{transition-delay:0s}
/* the 4,7 badges */
.rv-foot{text-align:center;margin-top:clamp(44px,5vw,70px)}
.rv-badge{position:relative;display:grid;place-content:center;justify-items:center;width:150px;height:150px;border-radius:50%;color:var(--green-deep);text-decoration:none;
  background:radial-gradient(circle at 35% 30%,#F2CF7A,#D9A53A 55%,#B8862B);box-shadow:0 18px 36px -14px rgba(12,34,25,.5),inset 0 0 0 5px rgba(255,255,255,.14)}
.rv-badge svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);animation:rvspin 24s linear infinite;pointer-events:none}
.rv-badge text{font:500 10.5px var(--f-mono);letter-spacing:2.6px;text-transform:uppercase;fill:var(--green-deep)}
.rv-badge strong{font:400 44px/1 var(--f-display);letter-spacing:-.02em}
.rv-badge span{font-size:11px;letter-spacing:2px;margin-top:2px}
@keyframes rvspin{to{transform:rotate(360deg)}}
.rv-badge--inline{width:auto;height:auto;display:inline-flex;align-items:center;gap:14px;padding:12px 22px 12px 24px;border-radius:999px;background:none;border:1px solid rgba(184,134,43,.45);box-shadow:none;color:var(--green);transition:background .3s,border-color .3s,color .3s}
.rv-badge--inline strong{font-size:30px}
.rv-badge--inline span{color:var(--gold-deep);font-size:13px;letter-spacing:.14em;margin:0}
.rv-badge--inline small{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rv-badge--inline svg{position:static;width:16px;height:12px;animation:none;color:var(--gold-deep);transition:transform .4s var(--ease)}
.rv-badge--inline:hover{background:var(--green);border-color:var(--green);color:var(--cream)}
.rv-badge--inline:hover small{color:rgba(244,236,221,.75)}
.rv-badge--inline:hover svg{transform:translateX(4px);color:var(--gold)}
/* ---- playful look ---- */
@media (max-width:900px){
  .rv-arches{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78vw;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:40px var(--gutter) 30px;scrollbar-width:none;align-items:stretch}
  .rv-arches::-webkit-scrollbar{display:none}
  .rv-arch{scroll-snap-align:center;min-height:400px}
  .rv-arch--hero{min-height:400px}
}
@media (prefers-reduced-motion:reduce){
  .rv-arch{animation:none;transition:none}
  .js .rv-arch{opacity:1;translate:none}
  .rv-badge svg{animation:none}
}
@media (max-width:900px){
  .rv-badge--inline{gap:10px;padding:12px 18px}
  .rv-badge--inline small{white-space:nowrap;font-size:10px;letter-spacing:.12em}
  .rv-badge--inline strong{font-size:26px}
}
/* blob: soft organic shapes that slowly breathe */
/* =========================================================
   v15 — Review cards as soft polygons (SVG, morph on hover). Classic colours, no shadows.
   ========================================================= */
.rv-arches{align-items:center;gap:clamp(10px,1.4vw,20px)}
.rv-arch,.rv-arch--hero{background:none;outline:0;border-radius:0;isolation:isolate;min-height:0;aspect-ratio:1/1.06;justify-content:center;gap:14px;padding:13% 17%}
.rv-arch p{flex:none;font-size:clamp(16px,1.25vw,19px);line-height:1.42}
.rv-arch--hero p{font-size:clamp(18px,1.45vw,22px);line-height:1.32}
.rv-arch__mark{font-size:64px;height:24px}
.rv-arch cite{font-size:10px}
.rv-shape{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.rv-shape__ring{stroke:rgba(184,134,43,.5);stroke-width:1.2}
.rv-arch--hero .rv-shape__ring{stroke:rgba(217,165,58,.55)}
/* a little rhythm: not every card on the same line */
.rv-arch{--alift:0px}
.rv-arches .rv-arch:nth-child(2){--alift:-18px}
.rv-arches .rv-arch:nth-child(1){--alift:14px}
.rv-arches .rv-arch:nth-child(3){--alift:-6px}
.rv-arches .rv-arch:nth-child(4){--alift:20px}
.rv-arch:hover{--alift:-14px;scale:1}
@media (max-width:900px){
  .rv-arch,.rv-arch--hero{--alift:0px!important;padding:14% 18%}
  .rv-arch p{font-size:17px}
  .rv-arch--hero p{font-size:19px}
}
.rv-shape__ring{display:none}
/* =========================================================
   v16 — Visit: our own map (MapLibre + OpenFreeMap), brand colours, custom pin
   ========================================================= */
.visit__map{box-shadow:0 0 0 10px var(--cream),0 0 0 11px rgba(184,134,43,.35);background:#F3E8CF}
.ttmap,.ttmap.maplibregl-map{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s var(--ease)}
.visit__map.is-ready .ttmap,.visit__map.is-fallback .ttmap{opacity:1}
.ttmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.3) sepia(.15) contrast(1.02)}
.ttmap .maplibregl-canvas{outline:none}
.ttmap .maplibregl-cooperative-gesture-screen{background:rgba(12,34,25,.55);color:#FAF4E8;font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.ttmap .maplibregl-ctrl-attrib{background:rgba(250,244,232,.8);font:400 10px/1.4 var(--f-body);color:var(--muted)}
.ttmap .maplibregl-ctrl-attrib a{color:var(--muted)}
.ttmap .maplibregl-ctrl-bottom-left{left:6px;bottom:6px}
/* pin: a little green sign with the logo, pointing at the door */
.ttpin{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;cursor:pointer}
.ttpin__card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 14px;border-radius:14px;background:var(--green);box-shadow:0 14px 26px -12px rgba(12,34,25,.6);transition:transform .45s cubic-bezier(.2,.9,.2,1.4)}
.ttpin__card img{display:block;width:84px;height:auto}
.ttpin__card span{font:500 9.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(250,244,232,.75);white-space:nowrap}
.ttpin__tip{width:14px;height:14px;margin-top:-8px;background:var(--green);transform:rotate(45deg);border-radius:0 0 3px 0}
.ttpin__pulse{position:absolute;left:50%;bottom:-6px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(217,165,58,.6);animation:ttpulse 2.2s ease-out infinite}
.ttpin:hover .ttpin__card{transform:translateY(-4px) scale(1.04)}
@keyframes ttpulse{0%{box-shadow:0 0 0 0 rgba(217,165,58,.55)}100%{box-shadow:0 0 0 22px rgba(217,165,58,0)}}
.ttmap__open{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:var(--green);color:var(--cream);font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background .3s}
.ttmap__open:hover{background:var(--gold-deep)}
.ttmap__open svg{color:var(--gold)}
@media (prefers-reduced-motion:reduce){
  .ttpin__pulse{animation:none}
}
/* =========================================================
   v17 — map frame, bigger. [data-frame] = diagonal | circle | card (chosen via local switcher)
   ========================================================= */
.visit{overflow:clip}
.visit__map{border-radius:0;box-shadow:none;aspect-ratio:auto;overflow:hidden;height:auto;transition:clip-path 1.5s cubic-bezier(.7,0,.2,1)}
.ttmap__open{bottom:30px}
.ttmap .maplibregl-ctrl-bottom-left{left:auto;right:8px;bottom:8px}
.ttmap .maplibregl-ctrl-bottom-left .maplibregl-ctrl{margin:0}
/* card: a large rounded card, slightly tilted */
@media (prefers-reduced-motion:reduce){
  .visit__map{transition:none}
}
/* =========================================================
   v22 — Location, calm: details left; the map sits inside the outline of São Miguel (mask set in JS),
   first the whole island, then it flies in to Ponta Delgada
   ========================================================= */
.visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,90px);align-items:center;background:var(--paper);overflow:clip;
  padding:clamp(90px,10vw,140px) max(var(--gutter),calc((100vw - var(--max)) / 2))}
.visit__info .visit__cols{grid-template-columns:repeat(2,auto)}
.visit__info .visit__cols .visit__col:first-child{grid-column:1 / -1}
.visit__fig{margin:0;width:100%}
.visit__island{position:relative;aspect-ratio:1000 / 358.06;transition:opacity 1.2s var(--ease),translate 1.4s cubic-bezier(.2,.9,.2,1)}
.js .visit__fig:not(:has(.is-shown)) .visit__island{opacity:0;translate:0 30px}
.visit__map{position:absolute;inset:0;width:auto;height:auto;justify-self:stretch;align-self:stretch;min-height:0;max-width:none;margin:0;border-radius:0;box-shadow:none;rotate:0deg;clip-path:none;overflow:hidden;background:#F3E8CF;transition:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.visit__coast{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.visit__coast path{fill:none;stroke:var(--gold-deep);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.visit .ttmap__open{display:none}
.visit .ttmap .maplibregl-ctrl-attrib{display:none}
.visit__where small{display:block;margin-top:6px;font-size:9px;letter-spacing:.1em;text-transform:none;opacity:.8}
.visit__where small a:hover{color:var(--gold-deep)}
.visit .ttpin__card{padding:7px 10px;border-radius:12px}
.visit .ttpin__card img{width:62px}
.visit__cap{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(17,53,39,.12)}
.visit__where{font:500 10.5px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.visit__where b{font-weight:500;color:var(--green)}
.visit__views{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(17,53,39,.18)}
.visit__views button{padding:8px 14px;border-radius:999px;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green);transition:background .3s,color .3s}
.visit__views button[aria-pressed="true"]{background:var(--green);color:var(--cream)}
@media (max-width:1100px){
  .visit{grid-template-columns:1fr}
  .visit__fig{max-width:760px}
}
@media (max-width:700px){
  .visit{padding:80px var(--gutter)}
  .visit__fig{width:calc(100% + 2 * var(--gutter) - 16px);margin-left:calc(8px - var(--gutter))}
  .visit__cap{flex-direction:column;align-items:flex-start;margin-left:calc(var(--gutter) - 8px)}
  .visit__info .visit__cols{grid-template-columns:1fr}
  .visit .ttpin__card img{width:52px}
}
/* v23 — bigger: details as a row on top, the island across the full width below; zoom + view controls */
.visit{grid-template-columns:1fr;gap:clamp(50px,5vw,80px)}
.visit__info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,110px);align-items:end}
.visit__info > *{grid-column:1}
.visit__info .visit__cols{grid-column:2;grid-row:1 / span 4;align-self:end;grid-template-columns:repeat(3,auto);justify-content:space-between;margin:0;padding-top:28px}
.visit__info .visit__cols .visit__col:first-child{grid-column:auto}
.visit__fig{max-width:none}
.visit__ctrl{display:flex;gap:10px;align-items:center}
.visit__zoom{display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(17,53,39,.18)}
.visit__zoom button{width:32px;height:30px;border-radius:999px;font:400 19px/1 var(--f-display);color:var(--green);display:grid;place-items:center;transition:background .3s,color .3s}
.visit__zoom button:hover{background:var(--green);color:var(--cream)}
@media (max-width:1100px){
  .visit__info{grid-template-columns:1fr}
  .visit__info .visit__cols{grid-column:1;grid-row:auto;margin-top:36px;justify-content:start}
}
@media (max-width:700px){
  .visit__info .visit__cols{grid-template-columns:1fr}
  .visit__ctrl{flex-wrap:wrap}
}
/* v25 — nav flicker. WebKit drops/redraws composited layers that pass under a backdrop-filter, which shows as flicker
   while scrolling. Fewer permanent layers (buttons no longer promoted), and the nav gets its own stable layer.
   Nothing changes visually. */
.btn{will-change:auto}
.nav{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;isolation:isolate}
/* native scrolling: keep CSS smooth-scroll off so ScrollTrigger snapping and pins are not fought (anchor links glide via JS) */
html{scroll-behavior:auto}
/* v26 — performance. Big images with soft drop-shadows that GSAP moves get their own GPU layer, so moving them
   doesn't repaint the shadow every frame. The map pin pulses with transform/opacity instead of an animated box-shadow. */
.cut,.sv__dishes{will-change:transform}
.ttpin__pulse{box-shadow:none;animation:ttpulse2 2.2s ease-out infinite}
.ttpin__pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(217,165,58,.55);animation:ttring 2.2s ease-out infinite}
@keyframes ttpulse2{0%,100%{transform:scale(1)}50%{transform:scale(.92)}}
@keyframes ttring{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.4);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ttpin__pulse::after{animation:none;opacity:0}
}
/* Lenis (official stylesheet rules) */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
/* v28 — menu photo straight on the page: the category name on top, the dish just tucking under its lower edge, the note right under it.
   The cut-outs are normalised (img/menu-*-fit.webp: same 6:5 canvas, dish trimmed and centred), so every category lines up the same way. */
.menu__figure{--md:#A9CDB2;position:sticky;top:120px;isolation:isolate;container-type:inline-size;background:none;border-radius:0;padding:0;text-align:center}
.menu__word{display:block;position:relative;z-index:0;margin:0 0 -.56em;white-space:nowrap;pointer-events:none;
  font:italic 400 27cqw/1 var(--f-display);letter-spacing:-.04em;color:var(--md);transition:color .7s var(--ease)}
.menu__figure > img,.menu__figure > .ph{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:6/5;max-height:none;
  margin:0;padding:0 3%;border-radius:0;background:none;outline:none;filter:none;object-fit:contain}
.menu__figure .menu__note{position:relative;z-index:1;margin-top:12px}
@media (max-width:900px){
  .menu__figure{position:relative;top:auto}
}
/* v29 — the signature section holds still with position:sticky (the browser keeps it in place, no pin/unpin moment to jump);
   the section's height (set in JS as --sv-h) provides the scroll distance */
.sv:not(.sv--static){height:var(--sv-h,auto)}
.sv:not(.sv--static) .sv__pin{position:sticky;top:0}

/* width/height attributes on <img> are only there to reserve space while loading; CSS decides the real size */
:where(img[width][height]){height:auto}

/* <picture> (AVIF + WebP fallback) must not add a box: the <img> keeps laying out as before */
picture{display:contents}
picture > source{display:none}
/* AVIF tile where supported */
@supports (background-image:image-set(url("x.avif") type("image/avif"))){
  :root{--tile:image-set(url("../../img/tile-azulejo.avif") type("image/avif"),url("../../img/tile-azulejo.webp") type("image/webp"))}
}
/* skip link (keyboard): hidden until focused */
.skip{position:fixed;left:16px;top:-80px;z-index:400;padding:12px 18px;border-radius:999px;background:var(--green);color:var(--cream);font:500 13px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;transition:top .2s}
.skip:focus{top:16px}
.rv-arches:focus-visible{outline:2px solid var(--gold);outline-offset:6px}

/* calm buttons: no follow-the-mouse, no light sweep — just a slow, soft colour change and a small arrow nudge */
.btn,.nav__cta,.sv__link,.rv-badge--inline,.menu__tabs button,.lang button,.visit__views button,.visit__zoom button{transition-duration:.45s;transition-timing-function:ease}
.btn svg,.link svg,.rv-badge--inline svg{transition:transform .5s ease}
.btn:hover svg,.rv-badge--inline:hover svg{transform:translateX(3px)}
.link:hover svg{transform:translateX(3px)}

/* map credit: small "i" next to the Island/Street switch; the attribution opens above it */
.visit__credit{position:relative;display:inline-flex}
.visit__info-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(17,53,39,.18);background:transparent;color:var(--green);
  font:italic 500 16px/1 var(--f-display);display:grid;place-items:center;cursor:pointer;transition:background .45s ease,color .45s ease,border-color .45s ease}
.visit__info-btn:hover,.visit__info-btn[aria-expanded="true"]{background:var(--green);border-color:var(--green);color:var(--cream)}
.visit__credit-text{position:absolute;right:0;bottom:calc(100% + 10px);z-index:5;margin:0;padding:8px 13px;border-radius:999px;background:var(--paper);
  border:1px solid rgba(17,53,39,.14);box-shadow:0 8px 20px -12px rgba(17,53,39,.35);white-space:nowrap;font:400 11px/1.3 var(--f-body);color:var(--muted)}
.visit__credit-text[hidden]{display:none}
.visit__credit-text a{color:var(--green)}
.visit__credit-text a:hover{color:var(--gold-deep)}

/* map controls: zoom, Island/Street and the "i" share one height (40px) */
.visit__ctrl{--ctl:40px}
.visit__zoom,.visit__views{box-sizing:border-box;height:var(--ctl);align-items:stretch}
.visit__zoom button,.visit__views button{height:auto}
.visit__views button{display:grid;place-items:center;padding:0 14px}
.visit__info-btn{box-sizing:border-box;width:var(--ctl);height:var(--ctl)}

/* menu (drawer) open: the bar stays see-through over the dark green drawer, with cream text */
@media (max-width:900px){
  .nav.nav.is-drawer{background:transparent}
  .nav.nav.is-drawer,.nav.nav.is-drawer .nav__tools{color:#FAF4E8}
}

/* iOS Safari (iOS 26) most likely colours the strip behind its status bar + URL pill from the fixed layer it finds at the
   top of the page. Here that is the full-screen film-grain layer (fixed, transparent) — Jewel of India has no such layer,
   and there Safari fills the strip (same blurred menu bar otherwise). On iOS the grain is therefore left out (at 5% it is not visible on a phone anyway), so the
   menu bar is the top layer, exactly as on Jewel; the bar itself keeps the desktop look (see-through, light blur). */
@supports (-webkit-touch-callout:none){
  @media (max-width:900px){ body::before{display:none} }
}
/* phones: Safari (iOS 26) paints the strip behind its status bar + URL pill in the page colour. That is kept at one
   neutral system colour — white in light mode, black in dark mode — so it doesn't change while scrolling. Every section
   has its own background, so this colour is not visible on the page itself (only in the overscroll at the very top). */
@media (max-width:900px){
  html,body{background-color:#fff}
  /* the opening curtain is a full-screen green layer; fixed, Safari would colour its strip green while it shows, so on
     phones it sits on the page instead (the page is at the top while it shows anyway) */
  .curtain{position:absolute;inset:0 0 auto;height:100vh;height:100lvh}
}
@media (max-width:900px) and (prefers-color-scheme:dark){
  html,body{background-color:#000}
}
/* phones: sideways swipes over the dishes switch category (main.js); the browser keeps vertical scrolling */
@media (pointer:coarse){ .menu__body{touch-action:pan-y} }
/* phones: signature dishes calmer — smaller dish, centred between the number and the text (svh = the visible screen
   with Safari's bars showing), and no price / "see it on the menu" line */
@media (max-width:900px){
  .sv__dish{--w:76vw;--h:38vh;--h:38svh;top:47%}
  .sv__meta{display:none}
  .sv__infos{height:150px}
}
/* phones: the menu photo and the category word above it a bit smaller (the word is sized to the figure's width) */
@media (max-width:900px){
  .menu__figure{max-width:min(78%,340px)}
}
/* phones: a more compact hero — smaller photo stage and title, so the copy and buttons come up sooner */
@media (max-width:900px){
  .hero{--hs:min(80vw,440px);padding-top:68px;padding-bottom:44px}
  .hero__panel{height:calc(68px + var(--hs) + 26px)}
  .hero__stage{height:var(--hs)}
  .hero__copy{padding-top:22px}
  .hero__title{font-size:clamp(50px,14.5vw,88px)}
  .stamp{top:calc(68px + var(--hs) - 84px);width:88px;height:88px}
}
/* phones: "Tikka & Tonic" and the subtitle each on one line — sized to the width that is available
   (title ≈ 6.2 × its font size wide; the subtitle ≈ 12.1× in Portuguese, 10.2× in English) */
@media (max-width:900px){
  .hero__title{font-size:min(88px,calc((100vw - 2 * var(--gutter)) / 6.4));white-space:nowrap}
  .hero__script{font-size:min(40px,calc((100vw - 2 * var(--gutter) - 14px) / 12.5));white-space:nowrap;margin-top:14px}
  html[lang="en"] .hero__script{font-size:min(40px,calc((100vw - 2 * var(--gutter) - 14px) / 10.5))}
}
/* phones: no kicker line ("Indian street food meets craft cocktails") above the title */
@media (max-width:900px){ .hero__kicker{display:none} .hero__copy{padding-top:36px} }
/* phones: title a bit smaller, photo stage a bit more compact */
@media (max-width:900px){
  .hero{--hs:min(72vw,400px)}
  .hero__title{font-size:min(76px,calc((100vw - 2 * var(--gutter)) / 7.4))}
  /* subtitle scaled along, so it stays about as wide as the title */
  .hero__script{font-size:min(34px,calc((100vw - 2 * var(--gutter) - 14px) / 14.6))}
  html[lang="en"] .hero__script{font-size:min(34px,calc((100vw - 2 * var(--gutter) - 14px) / 12.2))}
}
/* phones: the same thin gold seam as on desktop, along the diagonal where Tikka meets Tonic */
@media (max-width:900px){
  .duo__half--tonic::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:calc(9vw + 2px);background:var(--gold);pointer-events:none;
    clip-path:polygon(0 9vw,100% 0,100% 2px,0 calc(9vw + 2px))}
}

/* ===== review fixes (16 Oct) ===== */
/* contrast: small gold text on cream gets a darker, readable gold (≥4.5:1); the deep gold for large text/accents is
   nudged to ≥3:1; the bright gold stays for decoration and on dark backgrounds */
:root{--gold-deep:#AD7E28;--gold-text:#86601A}
.eyebrow:not(.gold),.mi__price,.visit__col h3,.rv-badge--inline span,.hero__note{color:var(--gold-text)}
.nav.is-scrolled:not(.is-on-dark) .lang button[aria-pressed="true"]{color:var(--gold-text)}
@media (max-width:900px){ .nav.is-past-hero:not(.is-on-dark) .lang button[aria-pressed="true"]{color:var(--gold-text)} }
/* focus: a two-tone ring (cream inside, green outside) that stays visible on cream, photos and the coloured sections */
:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px;box-shadow:0 0 0 2px var(--cream)}
.is-on-dark :focus-visible,.drawer :focus-visible,.footer :focus-visible,.duo :focus-visible{outline-color:var(--cream);box-shadow:0 0 0 2px var(--green-deep)}
/* sections that receive focus from in-page links / the skip link: no ring on the whole section */
[tabindex="-1"]:focus{outline:none;box-shadow:none}
/* no JavaScript: no opening curtain (it is only lifted by the script) */
html:not(.js) .curtain{display:none}
/* phones: "Small things, done properly" as a swipeable strip instead of six full-width tiles stacked (that was about four
   screens of scrolling). Each photo is a portrait card, the next one peeks in from the right; the logo tile is left out
   here (the logo is already in the header, hero and footer). */
@media (max-width:900px){
  .details{padding-bottom:56px}
  .details .sec-head--row{margin-bottom:24px}
  .bento{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;scroll-padding:0 var(--gutter)}
  .bento::-webkit-scrollbar{display:none}
  .bento > *{flex:0 0 min(70vw,320px);aspect-ratio:4/5;height:auto;min-height:0;scroll-snap-align:start}
  .bento > .tile--brand{display:none}
  .bento .tile > img,.bento .tile > picture > img{height:100%;margin-top:0;transform:none}
  .tile figcaption{inset:auto auto 10px 10px;padding:9px 12px;max-width:calc(100% - 20px)}
  .tile figcaption strong{font-size:16px}
  .tile figcaption span{font-size:11.5px}
}
/* phones: "Small things, done properly" on one line (the title is ≈ 11.8 × its font size wide, in both languages) */
@media (max-width:900px){ #detTitle{font-size:min(40px,calc((100vw - 2 * var(--gutter)) / 12.1));white-space:nowrap} }
/* phones: the dark gradient behind the Tikka / Tonic text reaches further up, so the label and the big name read too */
@media (max-width:900px){
  .duo__half::after,.duo__half--tikka::after,.duo__half--tonic::after{background:linear-gradient(0deg,rgba(6,14,9,.9) 0%,rgba(6,14,9,.76) 44%,rgba(6,14,9,.58) 68%,rgba(6,14,9,.38) 88%,rgba(6,14,9,.26) 100%)}
  .duo__label,.duo__name{text-shadow:0 1px 14px rgba(6,14,9,.75)}
}
/* menu footnotes: lines that wrap stay centred (they were left-aligned once a line broke on phones) */
.menu__foot{text-align:center}
.menu__foot > span{text-wrap:balance}
@media (max-width:900px){ .menu__foot{flex-direction:column;align-items:center;gap:10px;letter-spacing:.08em} }
/* menu footnotes smaller on phones so every line fits on one row; heart scales with the text */
@media (max-width:900px){ .menu__foot{font-size:9px;gap:9px} .menu__foot .heart{width:1.6em;height:1.6em;vertical-align:-.45em} }
/* brand tile: the logo was caught by the photo rule (.tile > img = cover, 118% tall) and lost its TIKKA/TONIC side banners */
.tile--brand > .tile__logo{width:84%;max-width:280px;height:auto;margin-top:0;object-fit:contain;transform:none}
/* kitchen half: keep the tikka basket (left of the photo) in frame */
.duo__half--tikka .duo__img{object-position:30% 60%}