:root{
  --ink:#0B0908;
  --ink2:#141110;
  --paper:#F4EEE4;
  --paper2:#EBE2D3;
  --red:#E1281E;
  --red-deep:#B71C14;
  --amber:#C98A4B;
  --seam:#835D47;
  --seam-deep:#503B2D;
  --line:rgba(244,238,228,.14);
  --line-ink:rgba(11,9,8,.14);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --jp:"Shippori Mincho",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
/* iOS lets you rubber-band sideways even with overflow-x:hidden on body —
   clip on the root plus a vertical-only touch-action stops the black gutter */
html{scroll-behavior:auto;overflow-x:hidden;overflow-x:clip;max-width:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;max-width:100%;touch-action:pan-y pinch-zoom}
::selection{background:var(--red);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:420;line-height:1.02;letter-spacing:-.015em}
.kicker{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--red)}
.serif-i{font-style:italic;font-weight:380}

/* ---------- loader ---------- */
/* The loader only earns its place on a cold visit. On a refresh the frames come
   straight from cache, so it stays invisible unless boot takes longer than a
   blink — otherwise every reload starts with a countdown nobody needs. */
#loader{position:fixed;inset:0;background:var(--ink);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .55s ease,visibility .55s}
#loader .pct,#loader .bar,#loader .note{opacity:0;transition:opacity .4s ease}
#loader.show .pct,#loader.show .bar,#loader.show .note{opacity:1}
#loader.done{opacity:0;visibility:hidden}
#loader img{width:130px;opacity:.96}
#loader .pct{font-family:var(--serif);font-size:64px;font-weight:380;letter-spacing:-.02em;color:var(--paper);font-variant-numeric:tabular-nums}
#loader .bar{width:180px;height:1px;background:var(--line);position:relative;overflow:hidden}
#loader .bar i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left}
#loader .note{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(244,238,228,.45)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:600;display:flex;align-items:center;justify-content:space-between;padding:calc(22px + env(safe-area-inset-top)) calc(clamp(20px,4vw,54px) + env(safe-area-inset-right)) 22px calc(clamp(20px,4vw,54px) + env(safe-area-inset-left));color:var(--paper);transition:color .5s ease,transform .55s cubic-bezier(.19,1,.22,1);mix-blend-mode:normal}
header.hide{transform:translateY(-110%)}
header.solid{background:rgba(244,238,228,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-ink)}
header.solid-dark{background:rgba(11,9,8,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .brand{display:flex;align-items:center;gap:13px}
header .brand img{display:block;width:auto;transition:filter .4s ease;filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
header .brand .mark{height:36px}
header .brand .mark-ink{display:none;filter:none}
header.on-light .brand .mark{display:none}
header.on-light .brand .mark-ink{display:block}
header .brand .word{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
header .brand .palma{height:21px}
header .brand .sushi{height:8px;margin-left:2px;opacity:.85}
header.on-light .brand .palma,header.on-light .brand .sushi{filter:brightness(0)}
header nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,38px)}
header nav a{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.82;transition:opacity .3s}
header nav a:hover{opacity:1}
header .cta{border:1px solid currentColor;border-radius:99px;padding:10px 22px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;transition:background .35s,color .35s,border-color .35s}
header .cta:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
header.on-light{color:var(--ink)}
.lang{background:none;border:0;color:inherit;font:inherit;font-size:11px;font-weight:600;letter-spacing:.22em;cursor:pointer;padding:10px 4px;opacity:.6;transition:opacity .3s}
.lang:hover{opacity:1}
.mlang{align-self:flex-start;margin-top:26px;font-size:12px;letter-spacing:.3em;opacity:.5;padding-left:0}
@media(max-width:760px){#lang{display:none}}
#burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px;color:inherit}
#burger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px}
@media(max-width:760px){header nav a{display:none}header nav .cta{display:inline-block}#burger{display:flex}}
/* phone widths: the wordmark, the pill and the burger were fighting for the
   same 390px — drop to the chopstick mark and a tighter pill */
@media(max-width:560px){
  header{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:16px;
         padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
  header .brand{gap:10px}
  header .brand .mark{height:30px}
  header .brand .palma{height:17px}
  header .brand .sushi{height:7px}
  header nav{gap:6px}
  header .cta{padding:9px 15px;font-size:10.5px;letter-spacing:.14em}
  #burger{width:38px;height:38px;padding:9px 7px;gap:5px}
}
/* only the very narrow phones drop the wordmark — at 390px (iPhone 13) there is
   still well over a hundred pixels of air next to the pill */
@media(max-width:359px){
  header .brand .word{display:none}
}

#mobnav{position:fixed;inset:0;z-index:900;background:rgba(11,9,8,.96);backdrop-filter:blur(16px);display:flex;align-items:center;padding:0 clamp(28px,9vw,60px);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
#mobnav.open{opacity:1;visibility:visible}
#mobnav .close{position:absolute;top:calc(18px + env(safe-area-inset-top));right:calc(20px + env(safe-area-inset-right));width:48px;height:48px;background:none;border:1px solid var(--line);border-radius:50%;color:var(--paper);font-size:26px;line-height:1;cursor:pointer}
#mobnav .inner{display:flex;flex-direction:column;gap:6px;width:100%}
#mobnav .mlink{font-family:var(--serif);font-size:clamp(34px,9vw,44px);color:var(--paper);display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgba(244,238,228,.08);opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.19,1,.22,1),transform .5s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i)*70ms)}
#mobnav.open .mlink{opacity:1;transform:none}
#mobnav .mlink i{font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.3em;color:var(--red)}
#mobnav .mres{margin-top:26px;align-self:flex-start;opacity:0;transform:translateY(16px);transition:opacity .5s .35s,transform .5s .35s}
#mobnav.open .mres{opacity:1;transform:none}
#mobnav .mmark{position:absolute;bottom:30px;right:26px;height:44px;opacity:.5}

/* ---------- dot nav ---------- */
#dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:590;display:flex;flex-direction:column;gap:16px;mix-blend-mode:difference}
#dots a{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.32;transition:opacity .3s,transform .3s;position:relative}
#dots a.act{opacity:1;transform:scale(1.5)}
#dots a span{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
#dots a:hover span{opacity:.9}
@media(max-width:760px){#dots{display:none}}

/* ---------- film ---------- */
#film{position:relative;height:1000vh}
/* dvh (not svh): the stage must track the live viewport, otherwise a retracted
   mobile URL bar leaves a black strip under the film */
#stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--ink)}
/* …except on touch devices, where dvh changes the moment the browser chrome
   slides away — that resizes the canvas mid-scroll and the film visibly jumps.
   lvh is the height with the chrome retracted, so it never changes: the bottom
   sliver simply sits behind the URL bar until it collapses. */
@media (pointer:coarse){#stage{height:100lvh}#chapter{bottom:calc(78px + env(safe-area-inset-bottom))}}
#screen{position:absolute;inset:0;width:100%;height:100%}
/* a canvas is a replaced element: inset:0 alone leaves it at its intrinsic
   backing-store width (dpr × viewport), which sticks out of the layout */
#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#grain{position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E")}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 52%,rgba(5,4,3,.5) 100%)}
#seamfade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(80,59,45,0) 6%,rgba(80,59,45,.18) 38%,rgba(80,59,45,.55) 66%,var(--seam-deep) 94%)}

.beat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 calc(clamp(22px,7vw,110px) + env(safe-area-inset-right)) 0 calc(clamp(22px,7vw,110px) + env(safe-area-inset-left));opacity:0;pointer-events:none;will-change:opacity,transform}
.beat .inner{max-width:640px}
.beat .kicker{margin-bottom:18px;display:flex;align-items:center;gap:14px}
.beat .kicker::before{content:"";width:34px;height:1px;background:var(--red)}
.beat h2{font-size:clamp(40px,6.4vw,92px);color:var(--paper);text-shadow:0 2px 40px rgba(0,0,0,.45)}
.beat p{margin-top:18px;font-size:clamp(15px,1.35vw,19px);color:rgba(244,238,228,.85);max-width:44ch;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.beat .jp{position:absolute;right:clamp(20px,6vw,90px);top:50%;transform:translateY(-50%);font-family:var(--jp);font-size:clamp(90px,14vw,190px);color:rgba(244,238,228,.07);line-height:1;user-select:none}

.beat.hero{align-items:center;text-align:center;justify-content:center}
.beat.hero .inner{max-width:none;display:flex;flex-direction:column;align-items:center}
.beat.hero .logo-hero{width:clamp(240px,30vw,440px);height:auto;filter:drop-shadow(0 10px 60px rgba(0,0,0,.65)) drop-shadow(0 2px 14px rgba(0,0,0,.5))}
.beat.hero .sub{margin-top:14px;font-size:clamp(14px,1.5vw,20px);color:rgba(244,238,228,.95);letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.85),0 2px 30px rgba(0,0,0,.7)}
.beat.hero .kicker{justify-content:center}
.beat.hero .kicker::before{display:none}
.scrollcue{position:absolute;bottom:calc(34px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:rgba(244,238,228,.6)}
.scrollcue i{width:1px;height:44px;background:linear-gradient(180deg,var(--red),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.beat.finale{justify-content:flex-end;padding-bottom:calc(14vh + env(safe-area-inset-bottom))}
.beat.finale .inner{max-width:560px}
.beat.finale .actions{display:flex;gap:28px;align-items:center;margin-top:30px;pointer-events:auto;flex-wrap:wrap}
.cta-text{display:inline-flex;align-items:center;gap:9px;color:var(--paper);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid rgba(244,238,228,.45);padding-bottom:6px;text-shadow:0 1px 8px rgba(0,0,0,.5);transition:border-color .3s,gap .3s}
.cta-text:hover{border-color:var(--paper);gap:13px}
@media(max-width:560px){
  /* keep the two calls to action on one line — stacked they read as a list */
  .beat.finale .actions{gap:16px;flex-wrap:nowrap;align-items:center}
  .beat.finale .btn{padding:13px 20px;font-size:10.5px;letter-spacing:.13em;white-space:nowrap}
  .beat.finale .cta-text{font-size:10.5px;letter-spacing:.13em;gap:7px;white-space:nowrap;padding-bottom:5px}
  .beat .kicker{font-size:10px;letter-spacing:.3em}
  .beat .kicker::before{width:22px;flex:none}
}
@media(max-width:340px){
  .beat.finale .actions{gap:12px}
  .beat.finale .btn{padding:12px 15px;font-size:9.5px;letter-spacing:.08em}
  .beat.finale .cta-text{font-size:9.5px;letter-spacing:.08em}
}
.btn{display:inline-block;border-radius:99px;padding:15px 34px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;transition:transform .3s,background .3s,color .3s,border-color .3s}
.btn.red{background:var(--red);color:var(--paper)}
.btn.red:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn.ghost{border:1px solid rgba(244,238,228,.45);color:var(--paper)}
.btn.ghost:hover{border-color:var(--paper);transform:translateY(-2px)}

#chapter{position:absolute;left:calc(clamp(20px,4vw,54px) + env(safe-area-inset-left));bottom:calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px;color:rgba(244,238,228,.85);z-index:5}
#chapter .num{font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:.14em}
#chapter .name{font-size:11px;font-weight:600;letter-spacing:.4em;text-transform:uppercase}
#chapter .rail{width:150px;height:1px;background:rgba(244,238,228,.2);position:relative}
#chapter .rail i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left}

/* ---------- content shared ---------- */
section.block{position:relative}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(22px,5vw,60px)}
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0)*90ms)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- landing / manifesto ---------- */
#story{background:linear-gradient(180deg,var(--seam-deep) 0%,#392B20 14%,#1E1710 32%,var(--ink) 52%);padding:30vh 0 16vh;text-align:center}
#story .jp-mark{font-family:var(--jp);font-size:15px;letter-spacing:1.2em;color:var(--amber);display:block;margin-bottom:34px}
#story h2{font-size:clamp(38px,5.6vw,84px);max-width:16ch;margin:0 auto}
#story h2 .w{display:inline-block}
#story h2 .c{display:inline-block;opacity:.12;transform:translateY(.18em) scaleY(.86);transform-origin:bottom;will-change:opacity,transform}
#story .foot{margin-top:44px;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,238,228,.5)}

/* ---------- signatures ---------- */
#signatures{background:var(--ink);padding:10vh 0 16vh;overflow:hidden}
#signatures .head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:7vh}
#signatures h2{font-size:clamp(36px,4.6vw,64px)}
#signatures .count{font-family:var(--serif);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
#signatures .count .cur{font-size:46px;color:var(--paper)}
#signatures .count .tot{font-size:18px;color:rgba(244,238,228,.4)}
#carousel{position:relative;height:min(60vh,520px);touch-action:pan-y;cursor:grab;outline:none;-webkit-user-select:none;user-select:none}
#carousel:active{cursor:grabbing}
#carousel img{-webkit-user-drag:none;pointer-events:none}
#carousel:focus-visible{outline:1px solid var(--line);outline-offset:20px}
/* .52s, not .85 — the long ease felt like the carousel was still thinking */
.card{position:absolute;left:50%;top:0;width:min(74vw,420px);height:100%;transform:translateX(-50%);transition:transform .52s cubic-bezier(.22,1,.28,1),opacity .52s,filter .52s;will-change:transform;cursor:pointer}
.card .ph{width:100%;height:78%;overflow:hidden;border-radius:14px;background:var(--ink2)}
.card .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.card:hover .ph img{transform:scale(1.1)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;opacity:0;transform:translateY(8px);transition:opacity .5s .15s,transform .5s .15s}
.card.active .meta{opacity:1;transform:none}
.card .meta .n{font-family:var(--serif);font-size:23px}
.card .meta .p{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--red)}
.card .meta .d{font-size:12.5px;color:rgba(244,238,228,.55);letter-spacing:.02em;margin-top:2px}
#carousel-nav{display:flex;gap:12px;justify-content:center;margin-top:6vh}
#carousel-nav button{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--paper);font-size:18px;cursor:pointer;transition:background .3s,border-color .3s,transform .2s}
#carousel-nav button:hover{background:var(--red);border-color:var(--red);transform:scale(1.05)}
#sig-rail{width:min(320px,60vw);height:1px;background:var(--line);margin:26px auto 0;position:relative}
#sig-rail i{position:absolute;top:0;left:0;height:100%;background:var(--red);transition:width .6s cubic-bezier(.19,1,.22,1)}
#sig-hint{display:none;justify-content:center;align-items:center;gap:12px;margin-top:16px;font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:rgba(244,238,228,.45);transition:opacity .5s}
#sig-hint span{width:20px;height:1px;background:rgba(244,238,228,.28)}
#sig-hint.gone{opacity:0}
@media(max-width:760px){#carousel-nav{display:none}#sig-hint{display:flex}}

/* ---------- marquee ---------- */
#marquee{background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:20px 0}
#marquee .track{display:flex;gap:60px;width:max-content;animation:mq 30s linear infinite;will-change:transform}
#marquee span{font-family:var(--serif);font-style:italic;font-size:22px;color:rgba(244,238,228,.55);white-space:nowrap;display:flex;align-items:center;gap:60px}
#marquee b{color:var(--red);font-family:var(--jp);font-weight:500;font-style:normal;font-size:16px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- menu ---------- */
#menu{background:var(--paper);color:var(--ink);padding:14vh 0 12vh;border-radius:36px 36px 0 0}
#menu .head{text-align:center;margin-bottom:8vh}
#menu .kicker{color:var(--red)}
#menu h2{font-size:clamp(42px,6vw,88px);margin-top:14px}
#menu .couvert{margin-top:16px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:rgba(11,9,8,.5)}
/* the bar spans the viewport, the pills sit inside the same 1280px column as
   the headings above so their left edge lines up with the section title */
#pillbar{position:sticky;top:var(--hdr-h,86px);touch-action:pan-x pan-y;z-index:400;overflow-x:auto;background:rgba(244,238,228,.92);backdrop-filter:blur(10px);scrollbar-width:none;border-bottom:1px solid var(--line-ink);transition:top .55s cubic-bezier(.19,1,.22,1)}
#pillbar .pills{display:flex;gap:8px;width:100%;max-width:1280px;margin:0 auto;padding:16px clamp(22px,5vw,60px);justify-content:flex-start}
@media (min-width:901px){#pillbar{overflow-x:visible}#pillbar .pills{flex-wrap:wrap}#menu .mcat{scroll-margin-top:224px}}
body.hdr-hidden #pillbar{top:0}
#menu .mcat{scroll-margin-top:176px}
#pillbar::-webkit-scrollbar{display:none}
#pillbar a{flex:0 0 auto;border:1px solid rgba(11,9,8,.35);border-radius:99px;padding:9px 20px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
#pillbar a.act,#pillbar a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mcat{padding:9vh 0 2vh;scroll-margin-top:90px}
.mcat .cathead{display:flex;align-items:baseline;gap:22px;margin-bottom:5vh}
.mcat h3{font-size:clamp(30px,3.6vw,50px)}
.mcat .cathead .sub{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:rgba(11,9,8,.45)}
.mcat .cathead::after{content:"";flex:1;height:1px;background:var(--line-ink)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));gap:16px 64px}
.mi{padding:14px 0;border-bottom:1px dashed rgba(11,9,8,.16)}
.mi .row{display:flex;align-items:baseline;gap:12px}
.mi .n{font-family:var(--serif);font-size:20px;font-weight:500}
.mi .dots{flex:1;border-bottom:1px dotted rgba(11,9,8,.3);transform:translateY(-4px)}
.mi .p{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--red);white-space:nowrap}
.mi .d{font-size:13px;color:rgba(11,9,8,.55);margin-top:4px;max-width:52ch}
#menu .menu-cta{text-align:center;margin-top:9vh}
#menu .btn.ink{background:var(--ink);color:var(--paper)}
#menu .btn.ink:hover{background:var(--red)}

/* ---------- chef ---------- */
#chef{background:var(--ink);padding:16vh 0;border-radius:36px 36px 0 0;margin-top:-36px;position:relative}
#chef .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center}
#chef .imgs{position:relative}
#chef .imgs .main{border-radius:16px;overflow:hidden}
#chef .imgs .main img{width:100%;height:auto}
#chef .imgs .float{position:absolute;right:-8%;bottom:-14%;width:46%;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid var(--line)}
#chef h2{font-size:clamp(36px,4.8vw,68px);max-width:12ch}
#chef .jp-side{font-family:var(--jp);color:var(--amber);letter-spacing:.9em;font-size:14px;display:block;margin-bottom:26px}
#chef p.lead{margin-top:26px;font-size:clamp(15.5px,1.35vw,18.5px);color:rgba(244,238,228,.78);max-width:52ch}
#chef blockquote{margin-top:36px;padding-left:24px;border-left:2px solid var(--red);font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.9vw,25px);color:var(--paper);max-width:40ch}
#chef .sig{margin-top:14px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,238,228,.5)}
@media(max-width:900px){#chef .grid{grid-template-columns:1fr}#chef .imgs{margin-bottom:60px}}

/* ---------- reviews: the verdict wall ---------- */
#loved{background:var(--ink);padding:14vh 0 12vh;position:relative;overflow:hidden}
/* the giant score sits behind everything and bleeds off the right edge */
#loved .ghost{position:absolute;right:-1.5vw;top:-1vh;font-family:var(--serif);font-weight:600;
  font-size:min(38vw,620px);line-height:.74;letter-spacing:-.04em;color:rgba(244,238,228,.055);
  pointer-events:none;user-select:none;white-space:nowrap}
#loved .wrap{position:relative;z-index:1}
#loved h2{font-size:clamp(34px,4.6vw,66px);margin-top:14px;max-width:15ch}
#loved .score{display:flex;align-items:baseline;gap:16px;margin-top:34px;flex-wrap:wrap}
#loved .score .stars{color:var(--red);letter-spacing:.16em;font-size:17px}
#loved .score .src{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,238,228,.45)}
#loved .quotes{display:grid;grid-template-columns:1.15fr .95fr .9fr;gap:clamp(26px,3.6vw,64px);margin-top:clamp(48px,7vw,96px);align-items:start}
#loved figure{display:flex;flex-direction:column;gap:22px}
#loved figure:nth-child(2){margin-top:clamp(20px,5vw,74px)}
#loved figure:nth-child(3){margin-top:clamp(40px,10vw,150px)}
#loved blockquote{font-family:var(--serif);line-height:1.4;color:var(--paper);position:relative;padding-top:26px}
#loved figure:nth-child(1) blockquote{font-size:clamp(21px,2.2vw,31px)}
#loved figure:nth-child(2) blockquote{font-size:clamp(19px,1.8vw,25px)}
#loved figure:nth-child(3) blockquote{font-size:clamp(22px,2.4vw,34px);font-style:italic}
#loved blockquote::before{content:"";position:absolute;top:0;left:0;width:28px;height:1px;background:var(--red)}
#loved figcaption{font-size:12.5px;color:rgba(244,238,228,.8)}
#loved figcaption span{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(244,238,228,.4);margin-top:5px}
@media(max-width:860px){
  #loved{padding:11vh 0 9vh}
  #loved .quotes{grid-template-columns:1fr;gap:44px}
  #loved figure:nth-child(2),#loved figure:nth-child(3){margin-top:0}
  #loved .ghost{font-size:64vw;right:-8vw;top:auto;bottom:2vh;color:rgba(244,238,228,.05)}
}

/* ---------- full-bleed call band ---------- */
#call{position:relative;background:#08201A;background-image:linear-gradient(115deg,#0d0b09 0%,#171210 45%,#0b0908 100%);
  padding:clamp(52px,7vw,86px) 0;margin-top:clamp(90px,12vw,170px);border-top:1px solid rgba(244,238,228,.07);border-bottom:1px solid rgba(244,238,228,.07)}
#call::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 150% at 72% 0%,rgba(225,40,30,.16),transparent 55%)}
#call .inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 clamp(22px,5vw,60px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
#call .tel{font-family:var(--serif);font-size:clamp(34px,6.2vw,92px);line-height:1;color:var(--paper);letter-spacing:-.01em;transition:color .35s}
#call .tel:hover{color:var(--red)}
#call .go{font-family:var(--serif);font-style:italic;font-size:clamp(28px,4.6vw,68px);line-height:1;color:var(--paper);
  border-bottom:1px solid rgba(244,238,228,.55);padding-bottom:6px;transition:border-color .35s,color .35s}
#call .go:hover{color:var(--red);border-color:var(--red)}
/* the cut-out platter hangs over the top edge, the way the ivy does */
#call .hang{position:absolute;right:clamp(-20px,2vw,54px);bottom:calc(100% - clamp(54px,8vw,120px));
  width:clamp(240px,27vw,440px);pointer-events:none;filter:drop-shadow(0 26px 46px rgba(0,0,0,.55));z-index:3}
@media(max-width:760px){
  #call{margin-top:clamp(70px,22vw,120px)}
  #call .inner{flex-direction:column;align-items:flex-start;gap:18px}
  #call .hang{width:min(74vw,340px);right:-6vw;bottom:calc(100% - clamp(34px,10vw,60px))}
}

/* ---------- visit ---------- */
#visit{background:var(--ink2);padding:clamp(90px,12vw,170px) 0 15vh;position:relative;overflow:hidden}
/* the city name runs off the right edge, clear of the terrace photo */
#visit .place{position:absolute;right:-3vw;top:clamp(20px,4vw,70px);font-family:var(--serif);font-weight:600;
  font-size:min(15vw,220px);line-height:.8;letter-spacing:-.035em;white-space:nowrap;
  color:rgba(244,238,228,.05);pointer-events:none;user-select:none}
/* the palm from inside the red sun — the shape itself, filled, no circle */
#visit .motif{position:absolute;left:min(-16vw,-110px);top:50%;width:min(72vw,820px);height:auto;
  transform:translateY(-50%);opacity:.07;pointer-events:none;user-select:none}
#visit .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,6vw,100px);position:relative;z-index:1}
#visit h2{font-size:clamp(38px,5vw,72px);max-width:12ch}
@media(max-width:900px){#visit .motif{width:150vw;left:-46vw;opacity:.07}#visit .place{font-size:22vw;top:auto;bottom:3vh;right:-6vw}}
#visit .lead{margin-top:22px;color:rgba(244,238,228,.72);max-width:46ch}
#visit .actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
#visit dl{display:grid;grid-template-columns:1fr 1fr;gap:34px 26px;align-content:start}
#visit dt{font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
#visit dd{font-size:15.5px;color:rgba(244,238,228,.85);line-height:1.75}
#visit dd a{border-bottom:1px solid rgba(244,238,228,.22);transition:border-color .3s,color .3s}
#visit dd a:hover{color:var(--paper);border-color:var(--red)}
@media(max-width:900px){#visit .grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--line);padding:60px 0 40px}
footer .top{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer .logo img{height:74px}
footer nav{display:flex;gap:28px}
footer nav a{font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;transition:opacity .3s}
footer nav a:hover{opacity:1}
footer .socials{display:flex;gap:14px}
footer .socials a{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
footer .socials a:hover{background:var(--red);border-color:var(--red)}
footer .socials svg{width:17px;height:17px;fill:var(--paper)}
footer .base a{color:inherit;border-bottom:1px solid rgba(244,238,228,.22);transition:color .3s,border-color .3s}
footer .base a:hover{color:var(--paper);border-color:var(--paper)}
footer .base{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.14em;color:rgba(244,238,228,.4)}

@media (prefers-reduced-motion:reduce){
  #film{height:100vh}
  .beat,.scrollcue i{animation:none!important}
  [data-reveal]{opacity:1;transform:none;transition:none}
}
#visit dd .closed{display:inline-block;margin-top:6px;font-size:12px;color:var(--red);opacity:.85}

/* nomad: the language switch is a link to the other language page; the swipe hint text has its own element */
a.lang{text-decoration:none}
#sig-hint b{font-weight:inherit}