/* ==========================================================================
   MALOCCHIO · Merchant City, Glasgow
   Direction: "Il Corno". White, black, orange and the deep
   green of their marble tables. Square edges, hairline rules, wide-tracked
   geometric sans. The crowned horn is the motif, traced from their own menu
   artwork and used everywhere as a single SVG symbol.
   Built by SocialsGroup.
   ========================================================================== */

:root{
  --paper:#ffffff;
  --paper-2:#f4f4f2;
  --paper-3:#e9e9e6;
  --ink:#000000;
  --ink-soft:#3a3a38;
  --muted:#6e6e6a;
  --muted-2:#9a9a95;

  --terra:#c25e28;
  --terra-2:#d97434;
  --marble:#14251d;
  --marble-2:#1d3327;
  --brass:#c25e28;
  --brass-pale:#e08a4a;

  --rule:#e2e2de;
  --rule-strong:#c4c4bf;

  --display:'Jost', 'Futura', 'Century Gothic', sans-serif;
  --ui:'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --wrap:1280px;
  --gut:clamp(20px,4.4vw,56px);
  --sec:clamp(72px,8.5vw,124px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--terra);color:var(--paper)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ------------------------------------------------------------------ type - */
h1,h2,h3,.display{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:.06em;text-transform:lowercase}
h1{font-size:clamp(52px,9vw,124px)}
h2{font-size:clamp(34px,5.4vw,68px)}
h3{font-size:clamp(21px,2.3vw,29px);line-height:1.16}
.display em,h1 em,h2 em,h3 em{font-style:normal;color:var(--terra)}

.kicker{
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  color:var(--terra);display:block;margin-bottom:18px;
}
.num{
  font-family:var(--display);font-size:12px;letter-spacing:.16em;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
p.body{color:var(--ink-soft);font-size:16.5px;max-width:58ch}
p.body + p.body{margin-top:16px}
.small{font-size:12.5px;color:var(--muted);letter-spacing:.02em}

.rule{height:1px;background:var(--rule);border:0}
.rule-ink{height:1px;background:var(--ink);opacity:.16;border:0}

/* drop cap, used once in the story */
.dropcap::first-letter{
  font-family:var(--display);font-size:3.6em;line-height:.9;float:left;font-weight:300;
  padding:8px 14px 0 0;color:var(--terra);
}

/* ---------------------------------------------------------------- corno -- */
.corno{width:15px;height:auto;aspect-ratio:100/318;flex:0 0 auto;overflow:visible}

.corno-divider{
  display:flex;align-items:center;gap:20px;color:var(--rule-strong);
  margin:0 auto;max-width:var(--wrap);padding:0 var(--gut);
}
.corno-divider::before,.corno-divider::after{content:'';flex:1;height:1px;background:var(--rule)}
.corno-divider .corno{width:13px;color:var(--ink);opacity:.6}

/* --------------------------------------------------------------- buttons - */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 28px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-family:var(--ui);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .28s ease,color .28s ease,border-color .28s ease;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-terra{background:var(--terra);border-color:var(--terra);color:var(--paper)}
.btn-terra:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-light{border-color:rgba(255,255,255,.4);color:var(--paper)}
.btn-light:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn .arw{transition:transform .28s ease}
.btn:hover .arw{transform:translateX(4px)}

.tlink{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--terra);
  padding-bottom:5px;border-bottom:1px solid var(--rule-strong);
  transition:border-color .3s,gap .3s,color .3s;
}
.tlink:hover{border-color:var(--terra);gap:15px}

/* ------------------------------------------------------------------- nav - */
.nav{
  position:sticky;top:0;z-index:80;background:var(--paper);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .3s ease;
}
.nav.stuck{box-shadow:0 10px 30px -24px rgba(0,0,0,.5)}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .corno{width:11px;color:var(--ink)}
.brand .word{
  /* the real wordmark, not a typeset stand-in. Alpha mask + currentColor,
     so it follows the ink/paper colour rules exactly like the text did. */
  display:block;height:11px;aspect-ratio:1920/190;background:currentColor;
  -webkit-mask:url(/assets/img/wordmark.png) no-repeat center/contain;
  mask:url(/assets/img/wordmark.png) no-repeat center/contain;
}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{
  text-decoration:none;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--ink-soft);padding:4px 0;position:relative;transition:color .25s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--terra);
  transition:right .3s ease;
}
.nav-links a:hover{color:var(--terra)}
.nav-links a:hover::after{right:0}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-right .btn{padding:12px 22px}

.burger{display:none;width:40px;height:40px;border:1px solid var(--rule-strong);background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:17px;height:1px;background:var(--ink);transition:transform .3s,opacity .25s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:23px}
.burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:76px 0 0;z-index:79;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.drawer.open{opacity:1;visibility:visible}
.drawer a{font-family:var(--display);font-size:34px;letter-spacing:.06em;text-decoration:none;padding:8px 0;transition:color .25s}
.drawer a:hover{color:var(--terra)}
.drawer .btn{margin-top:24px;font-family:var(--ui)}

/* ------------------------------------------------------------------ hero - */
.hero{display:grid;grid-template-columns:1.02fr .98fr;min-height:calc(100svh - 76px);border-bottom:1px solid var(--rule)}
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,6vw,86px) clamp(24px,5vw,72px) clamp(40px,5vw,64px) var(--gut);
  position:relative;
}
.hero-copy .mark{width:26px;color:var(--ink);margin-bottom:32px}
.hero h1{text-transform:uppercase;letter-spacing:.16em;font-weight:400;font-size:clamp(38px,5.9vw,84px);line-height:1.02}
.hero .sub{
  margin-top:20px;font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.hero .tagline{
  font-family:var(--display);font-style:normal;font-size:clamp(20px,2.3vw,30px);
  color:var(--ink-soft);margin-top:30px;max-width:19ch;line-height:1.28;
}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.hero-foot{
  margin-top:auto;padding-top:34px;border-top:1px solid var(--rule);
  display:flex;gap:28px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.hero-media{position:relative;overflow:hidden;background:var(--paper-3)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-media .stamp{
  position:absolute;left:0;bottom:0;background:var(--terra);color:var(--paper);
  padding:14px 22px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
}

/* running strip of dish names */
.strip{
  background:var(--ink);color:var(--paper);overflow:hidden;
  padding:15px 0;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
}
.strip-track{display:flex;gap:38px;white-space:nowrap;width:max-content;will-change:transform}
.strip-track span{display:inline-flex;align-items:center;gap:38px}
.strip-track .corno{width:9px;color:var(--paper);opacity:.9}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:slide 60s linear infinite}}

/* --------------------------------------------------------------- section - */
section{padding:var(--sec) 0;position:relative}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(38px,5vw,62px)}
.sec-head h2{max-width:16ch}
.sec-head .aside{max-width:34ch;color:var(--muted);font-size:14px;padding-bottom:8px}

/* story: asymmetric, watermark corno behind */
.story{background:var(--paper-2);border-block:1px solid var(--rule);overflow:hidden}
.story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,78px);align-items:center;position:relative;z-index:1}
.story .watermark{
  position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  width:min(300px,26vw);color:var(--ink);opacity:.045;pointer-events:none;z-index:0;
}
.story-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.story-photos img{width:100%;object-fit:cover}
.story-photos .tall{aspect-ratio:4/5}
.story-photos .sq{aspect-ratio:1/1;margin-top:44px}

.facts{display:flex;gap:clamp(24px,3.4vw,50px);flex-wrap:wrap;margin-top:38px;padding-top:28px;border-top:1px solid var(--rule-strong)}
.fact .n{font-family:var(--display);font-size:clamp(30px,3.4vw,42px);line-height:1;color:var(--terra)}
.fact .l{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:9px;font-weight:500}

/* editorial food grid */
.plates{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,22px)}
.plate{position:relative;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.plate:hover img{transform:scale(1.045)}
.plate figcaption{
  display:flex;align-items:baseline;gap:12px;padding-top:12px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.plate figcaption .num{font-size:10px;color:var(--terra)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}
.ar45 img{aspect-ratio:4/5}
.ar11 img{aspect-ratio:1/1}
.ar32 img{aspect-ratio:3/2}

/* menu card, set like a printed contents page */
.card-menu{border:1px solid var(--ink);background:var(--paper)}
.menu-row{
  display:flex;align-items:center;gap:24px;padding:clamp(22px,2.6vw,34px) clamp(20px,3vw,42px);
  border-bottom:1px solid var(--rule);text-decoration:none;
  transition:background .3s ease,padding-left .3s ease;
}
.menu-row:last-child{border-bottom:0}
.menu-row:hover{background:var(--paper-2);padding-left:calc(clamp(20px,3vw,42px) + 10px)}
.menu-row .num{flex:0 0 auto;width:34px}
.menu-row .t{flex:0 0 auto;font-family:var(--display);font-size:clamp(24px,2.6vw,34px)}
.menu-row .d{flex:1;color:var(--muted);font-size:13.5px;min-width:0}
.menu-row .go{flex:0 0 auto;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);font-weight:500}
@media(max-width:760px){
  .menu-row{flex-wrap:wrap;gap:10px}
  .menu-row .d{flex:1 1 100%;order:3}
}

/* green marble block for the bar */
.marble{background:var(--marble);color:var(--paper);position:relative;overflow:hidden}
.marble::before{
  content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    radial-gradient(60% 44% at 18% 22%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(50% 40% at 82% 72%, rgba(168,129,63,.10), transparent 62%);
}
.marble > *{position:relative;z-index:1}
.marble .kicker{color:var(--brass)}
.marble h2 em{color:var(--brass)}
.marble p.body{color:rgba(255,255,255,.74)}
.marble .rule{background:rgba(255,255,255,.18)}
.bar-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,5vw,72px);align-items:center}
.bar-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bar-shots img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bar-lead{margin-bottom:14px}
.bar-lead img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* reserve */
.reserve-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,4.4vw,64px);align-items:start}
.timetable{border-top:1px solid var(--ink)}
.timetable .row{
  display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);
  font-size:13.5px;
}
.timetable .d{letter-spacing:.05em}
.timetable .dots{flex:1;border-bottom:1px dotted var(--rule-strong);transform:translateY(-4px)}
.timetable .t{color:var(--muted);font-variant-numeric:tabular-nums}
.booking{border:1px solid var(--ink);background:var(--paper);min-height:660px;padding:10px;overflow:hidden}
.booking iframe{width:100%;height:640px;min-height:640px;border:0;display:block;background:var(--paper)}
.booking-slot{
  min-height:516px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:44px 32px;border:1px dashed var(--rule-strong);
}
.booking-slot .note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);max-width:40ch;line-height:2.1}

/* visit */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.6vw,70px);align-items:center}
.vcard{border:1px solid var(--ink);padding:clamp(28px,3.6vw,48px);background:var(--paper)}
.vcard .corno{width:19px;color:var(--ink);margin-bottom:24px}
.vcard .addr{font-family:var(--display);font-size:clamp(23px,2.4vw,30px);line-height:1.45}
.vcard .meta{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.vcard .meta div{display:flex;gap:16px;padding:7px 0;font-size:13.5px}
.vcard .meta .k{width:66px;flex:0 0 66px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);padding-top:4px;font-weight:500}
.vcard .meta a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong);transition:border-color .3s}
.vcard .meta a:hover{border-color:var(--terra)}
.visit-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.visit-photos img{width:100%;aspect-ratio:4/5;object-fit:cover}
.visit-photos img:last-child{margin-top:38px}

/* footer */
footer{background:var(--marble);color:var(--paper);padding:clamp(56px,7vw,92px) 0 34px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(26px,3.4vw,52px);padding-bottom:52px}
.foot-brand .corno{width:21px;color:var(--paper);margin-bottom:20px}
.foot-brand .word{
  height:13px;aspect-ratio:1920/190;background:currentColor;
  -webkit-mask:url(/assets/img/wordmark.png) no-repeat left center/contain;
  mask:url(/assets/img/wordmark.png) no-repeat left center/contain;
}
.foot-brand p{margin-top:16px;color:rgba(255,255,255,.6);font-size:13.5px;max-width:32ch}
.foot-col h4{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-bottom:18px;font-weight:500}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-col a{text-decoration:none;color:rgba(255,255,255,.72);font-size:13.5px;transition:color .3s}
.foot-col a:hover{color:var(--paper)}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.16);padding-top:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.12em;color:rgba(255,255,255,.5);
}
.foot-bottom a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.foot-bottom a:hover{border-color:var(--brass)}

/* menu pages */
.page-head{padding:clamp(56px,7vw,96px) 0 clamp(30px,4vw,48px);text-align:center}
.page-head .corno{width:19px;color:var(--ink);margin:0 auto 22px}
.sheet{border:1px solid var(--ink);padding:clamp(12px,1.6vw,20px);max-width:920px;margin:0 auto;background:var(--paper)}
.sheet img{width:100%}
.sheet-missing{padding:clamp(50px,8vw,96px) 28px;text-align:center;color:var(--muted);border:1px dashed var(--rule-strong)}
.sheet-missing code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--terra);background:var(--paper-3);padding:3px 8px}
.sheet-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}



/* responsive */
@media (max-width:1020px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-right .btn{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-media{aspect-ratio:4/3;order:-1}
  .hero-copy{padding:clamp(38px,7vw,60px) var(--gut)}
  .story-grid,.bar-grid,.reserve-grid,.visit-grid{grid-template-columns:1fr}
  .story .watermark{display:none}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:span 2}
}
@media (max-width:720px){
  .plates{grid-template-columns:repeat(6,1fr)}
  .c3,.c4,.c5{grid-column:span 3}
  .c6,.c7,.c8{grid-column:span 6}
  .story-photos .sq{margin-top:0}
  .visit-photos img:last-child{margin-top:0}
  .bar-shots{grid-template-columns:repeat(3,1fr);gap:10px}
  .foot-top{grid-template-columns:1fr}
  .foot-brand{grid-column:span 1}
  .hero .btns .btn{flex:1 1 100%;justify-content:center}
}

/* ==========================================================================
   MOTION + THE PIECES THAT BREAK THE GRID
   ========================================================================== */

.intro{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .82s cubic-bezier(.76,0,.24,1);
}
.intro .corno{width:30px;color:var(--paper);animation:pulse 1.3s ease-in-out infinite}
.intro.gone{transform:translateY(-101%)}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* one-shot reveals ---------------------------------------------------- */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-rv].in{opacity:1;transform:none}

/* images wipe open rather than fade */
.wipe{overflow:hidden}
.wipe img{
  clip-path:inset(0 0 100% 0);transform:scale(1.14);
  transition:clip-path 1.15s cubic-bezier(.76,0,.24,1),transform 1.5s cubic-bezier(.16,1,.3,1);
}
.wipe.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
.wipe[data-rv]{opacity:1;transform:none}

/* word masks for headings */
.wl{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.wl > i{
  display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
}
[data-rv].in .wl > i,.hero-title .wl.in > i,[data-hero].in > i{transform:none}
h2[data-split]{opacity:1;transform:none}
h2[data-split] .wl > i{transition-delay:calc(var(--i,0) * 40ms)}
.split-simple{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.split-simple.in{opacity:1;transform:none}

/* parallax hook */
[data-para]{transform:translate3d(0,var(--py,0px),0)}
.wipe.in img[data-para]{transform:translate3d(0,var(--py,0px),0) scale(1.06)}

/* hero entrance ------------------------------------------------------- */
[data-hero]{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
[data-hero].in{opacity:1;transform:none}
.hero-title{overflow:visible}
.hero-word{
  display:block;width:min(100%,720px);aspect-ratio:1920/190;background:currentColor;
  -webkit-mask:url(/assets/img/wordmark.png) no-repeat left center/contain;
  mask:url(/assets/img/wordmark.png) no-repeat left center/contain;
}
.hero-title .wl{overflow:hidden;display:block}
.hero-title .wl > i{display:block;transform:translateY(104%);transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s}
.hero-title .wl[data-hero]{opacity:1;transform:none}
.hero-title .wl[data-hero].in > i{transform:none}
.hero-wipe{overflow:hidden;height:100%}
.hero-wipe img{clip-path:inset(0 0 100% 0);transform:scale(1.16);transition:clip-path 1.35s cubic-bezier(.76,0,.24,1),transform 1.9s cubic-bezier(.16,1,.3,1)}
.hero-wipe.in img{clip-path:inset(0 0 0 0);transform:translate3d(0,var(--py,0px),0) scale(1.04)}
body:not(.ready){overflow:hidden}

/* nav hides on the way down ------------------------------------------- */
.nav{transition:box-shadow .3s ease}

/* folio marks in the margin ------------------------------------------- */
section{position:relative}
.folio{
  position:absolute;top:clamp(30px,4vw,54px);left:clamp(10px,1.6vw,22px);
  writing-mode:vertical-rl;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted-2);font-weight:500;pointer-events:none;
}
.folio.light{color:rgba(255,255,255,.45)}
@media(max-width:1180px){.folio{display:none}}

/* story ---------------------------------------------------------------- */
.story-grid{grid-template-columns:1fr 1.02fr;align-items:start}
.story-copy{padding-top:clamp(0px,3vw,44px)}
.story-photos{display:block;position:relative;min-height:clamp(400px,44vw,620px)}
.story-photos figure{position:absolute;margin:0}
.sp-a{width:64%;left:0;top:0}
.sp-a img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sp-b{width:46%;right:-4%;top:34%}
.sp-b img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:860px){
  .story-photos{min-height:0;display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:36px}
  .story-photos figure{position:static;width:auto}
  .sp-b{margin-top:34px}
}

/* pull quote ----------------------------------------------------------- */
.quote{background:var(--ink);color:var(--paper);padding:clamp(74px,9vw,128px) 0;text-align:center}
.quote .q{
  font-family:var(--display);font-style:normal;font-size:clamp(26px,4.2vw,54px);
  line-height:1.18;max-width:17ch;margin:0 auto;
}
.quote .q .wl > i{color:var(--paper)}
.quote .q-by{
  display:block;margin-top:30px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.42);font-weight:500;
}

/* the table rail ------------------------------------------------------- */
.table-sec{padding-bottom:clamp(50px,6vw,80px)}
.table-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:clamp(38px,5vw,62px)}
.table-head .aside{color:var(--muted);font-size:14px;max-width:36ch;padding-bottom:6px}
.table-head h2{max-width:14ch;justify-self:end;text-align:right}
@media(max-width:860px){
  .table-head{grid-template-columns:1fr}
  .table-head h2{justify-self:start;text-align:left;order:-1;max-width:none}
}
.rail{
  display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;overscroll-behavior-x:contain;
  padding:0 var(--gut) 6px;scrollbar-width:none;cursor:grab;scroll-snap-type:x proximity;
}
.rail::-webkit-scrollbar{display:none}
.rail.grabbing{cursor:grabbing}
.rp{flex:0 0 clamp(230px,25vw,330px);scroll-snap-align:start;margin:0}
.rp:nth-child(even){margin-top:clamp(18px,2.6vw,44px)}
.rp img{width:100%;aspect-ratio:4/5;object-fit:cover;pointer-events:none;user-select:none}
.rp figcaption{
  display:flex;gap:11px;align-items:baseline;padding-top:11px;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.rp figcaption i{font-family:var(--display);font-style:normal;color:var(--terra);font-size:11px}
.railfoot{display:flex;align-items:center;gap:24px;margin-top:clamp(24px,3vw,40px)}
.railfoot .hint{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2);font-weight:500;white-space:nowrap}
.railfoot .track{flex:1;height:1px;background:var(--rule);position:relative;overflow:hidden}
.railfoot .bar{position:absolute;inset:0;background:var(--terra);transform-origin:left;transform:scaleX(0);transition:transform .1s linear}

/* menus ---------------------------------------------------------------- */
.menus-h{max-width:12ch;margin-bottom:clamp(34px,4vw,54px)}
.peek{
  position:fixed;top:0;left:0;z-index:70;width:210px;pointer-events:none;
  opacity:0;transition:opacity .3s ease;will-change:transform;
}
.peek.on{opacity:1}
.peek img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:1020px){.peek{display:none}}

/* bar ------------------------------------------------------------------ */
.bar-grid{grid-template-columns:1.1fr .9fr;align-items:center}
.bar-copy{padding-left:clamp(0px,2vw,26px)}
.bar-shots{display:block;position:relative;min-height:clamp(440px,50vw,700px)}
.bar-shots figure{position:absolute;margin:0}
.bs-lead{width:62%;left:0;top:0}
.bs-lead img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bs-a{width:34%;right:2%;top:24%}
.bs-b{width:29%;left:25%;bottom:5%}
.bs-a img,.bs-b img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:860px){
  .bar-shots{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:34px}
  .bar-shots figure{position:static;width:auto}
  .bs-lead{grid-column:span 2}
  .bar-copy{padding-left:0}
}

/* room mosaic ---------------------------------------------------------- */
.room-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,60px);align-items:end;margin-bottom:clamp(36px,4.6vw,60px)}
.room-head h2{max-width:13ch}
.room-head .aside{color:var(--muted);font-size:14px;max-width:34ch;padding-bottom:6px}
@media(max-width:860px){.room-head{grid-template-columns:1fr}}
.room-mosaic{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.5vw,20px);
  padding:0 var(--gut);max-width:calc(var(--wrap) + 8vw);margin:0 auto;
}
.room-mosaic figure{margin:0;position:relative;overflow:hidden}
.room-mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.room-mosaic figcaption{
  position:absolute;left:14px;bottom:12px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.7);font-weight:500;
}
.rm-1{grid-column:1 / span 7}
.rm-1 img{aspect-ratio:3/2}
.rm-2{grid-column:8 / span 5;margin-top:clamp(30px,5vw,90px)}
.rm-2 img{aspect-ratio:4/5}
.rm-3{grid-column:2 / span 3;margin-top:clamp(12px,2vw,30px)}
.rm-4{grid-column:5 / span 3;margin-top:clamp(34px,5vw,86px)}
.rm-5{grid-column:8 / span 4;margin-top:clamp(-40px,-3vw,0px)}
.rm-3 img,.rm-4 img,.rm-5 img{aspect-ratio:1/1}
@media(max-width:860px){
  .room-mosaic{grid-template-columns:repeat(6,1fr)}
  .rm-1{grid-column:1 / span 6}
  .rm-2{grid-column:1 / span 4;margin-top:0}
  .rm-3{grid-column:5 / span 2;margin-top:0}
  .rm-4{grid-column:1 / span 3;margin-top:0}
  .rm-5{grid-column:4 / span 3;margin-top:0}
}

/* reserve -------------------------------------------------------------- */
.reserve{background:var(--paper-2);border-block:1px solid var(--rule)}
.res-h{max-width:10ch;margin-bottom:clamp(34px,4vw,54px)}
.booking-slot h3{max-width:15ch}
.slot-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.timetable .row a{color:var(--terra)}
.small a{color:var(--terra)}

/* visit ---------------------------------------------------------------- */
.vbtns{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap}
.visit-photos{display:block;position:relative;min-height:clamp(400px,42vw,600px)}
.visit-photos figure{position:absolute;margin:0}
.vp-a{width:60%;left:2%;top:0}
.vp-b{width:44%;right:0;top:30%}
.visit-photos img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:860px){
  .visit-photos{min-height:0;display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-top:34px}
  .visit-photos figure{position:static;width:auto}
  .vp-b{margin-top:34px}
}

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-hero],.split-simple{opacity:1!important;transform:none!important;transition:none!important}
  .wipe img,.hero-wipe img{clip-path:none!important;transform:none!important;transition:none!important}
  .wl > i{transform:none!important}
  .intro{display:none}
  html{scroll-behavior:auto}
}


/* ==========================================================================
   SEE THE DISH  ·  SEE THE DRINK
   Built mobile first. Phones are where this gets used, at the table.
   ========================================================================== */
.see-nav{
  position:sticky;top:76px;z-index:60;
  background:rgba(20,37,29,.92);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
}
.see-nav ul{
  list-style:none;display:flex;gap:clamp(14px,3vw,40px);
  max-width:var(--wrap);margin:0 auto;padding:15px var(--gut);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.see-nav ul::-webkit-scrollbar{display:none}
.see-nav a{
  text-decoration:none;white-space:nowrap;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.62);
  padding-bottom:5px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.see-nav a:hover,.see-nav a.on{color:var(--paper);border-color:var(--terra-2)}

.see-sec{padding:clamp(40px,5.5vw,80px) 0}
.see-sec + .see-sec{border-top:1px solid rgba(255,255,255,.09)}
.see-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(20px,2.6vw,34px)}
.see-head h2{
  font-size:clamp(26px,4vw,48px);letter-spacing:.18em;text-transform:lowercase;
  color:var(--paper);font-weight:300;
}
.see-head .ln{flex:1;height:1px;background:rgba(255,255,255,.16)}
.see-head .ct{font-size:10px;letter-spacing:.2em;color:var(--terra-2);font-weight:500}

/* the grid. two up on a phone, three on a laptop */
.see-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.2vw,18px)}
@media(min-width:760px){.see-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.see-grid{grid-template-columns:repeat(4,1fr)}}

.sc{
  position:relative;display:block;padding:0;border:0;background:#0d1a14;
  text-align:left;cursor:pointer;overflow:hidden;font:inherit;color:inherit;
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
  -webkit-tap-highlight-color:transparent;
}
.sc.in{opacity:1;transform:none}
.sc-media{display:block;position:relative;overflow:hidden}
.sc img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.sc:hover img{transform:scale(1.05)}
.sc:active{transform:scale(.985)}
.sc[data-motion] .sc-media::after{
  content:'';position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;
  background:var(--terra-2);box-shadow:0 0 0 0 rgba(217,116,52,.65);animation:pip 2.4s infinite;
}
@keyframes pip{70%{box-shadow:0 0 0 11px rgba(217,116,52,0)}100%{box-shadow:0 0 0 0 rgba(217,116,52,0)}}
.sc-cap{display:block;padding:12px 12px 15px}
.sc-n{
  display:block;font-family:var(--display);font-size:clamp(14px,1.35vw,17px);
  letter-spacing:.06em;text-transform:lowercase;color:var(--paper);line-height:1.25;
}
.sc-d{
  display:block;margin-top:5px;font-size:11.5px;line-height:1.5;
  color:rgba(255,255,255,.52);
}
@media(max-width:520px){
  .sc-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ------------------------------------------------------------- lightbox -- */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(6,12,9,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s ease;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lb.on{opacity:1}
.lb[hidden]{display:none}
.lb-in{
  margin:0;max-width:min(560px,92vw);width:100%;
  display:flex;flex-direction:column;
  transform:scale(.97);transition:transform .38s cubic-bezier(.16,1,.3,1);
}
.lb.on .lb-in{transform:none}
.lb-in img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#0d1a14;
  border:1px solid rgba(255,255,255,.14);
}
.lb-in figcaption{padding:18px 2px 0;display:flex;flex-direction:column;gap:7px}
.lb-name{
  font-family:var(--display);font-size:clamp(21px,4.6vw,28px);letter-spacing:.07em;
  text-transform:lowercase;color:var(--paper);
}
.lb-desc{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.lb-count{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-2);font-weight:500;margin-top:3px}

.lb-x{
  position:absolute;top:14px;right:14px;width:46px;height:46px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:var(--paper);
  font-size:24px;line-height:1;cursor:pointer;z-index:2;
  -webkit-tap-highlight-color:transparent;
}
.lb-x:hover{background:var(--paper);color:var(--ink)}
.lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);color:var(--paper);
  font-size:30px;line-height:1;cursor:pointer;z-index:2;
  -webkit-tap-highlight-color:transparent;
}
.lb-arrow:hover{background:var(--paper);color:var(--ink)}
.lb-p{left:max(12px,3vw)}
.lb-n{right:max(12px,3vw)}
/* on a phone the arrows sit under the image, thumbs reach them */
@media(max-width:640px){
  .lb-in{max-width:100%;padding:0 14px}
  .lb-arrow{
    top:auto;bottom:22px;transform:none;width:56px;height:52px;
  }
  .lb-p{left:14px}
  .lb-n{right:14px}
  .lb-in figcaption{padding-bottom:86px}
}
.lb-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.36);
}
@media(min-width:641px){.lb-hint{display:none}}
body.lb-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .sc{opacity:1;transform:none}
  .sc[data-motion] .sc-media::after{animation:none}
  .lb,.lb-in{transition:none}
}

/* hero video, only takes over once the file actually exists and can play */
/* The video is always rendered, never display:none. A hidden video is not
   decoded by Safari, so canplay never fires, so it never becomes visible.
   Crossfade on opacity instead: the still is on top until the film is
   genuinely playing, then it fades out and the film is underneath it. */
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:0;transition:opacity .7s ease}
.hero-media.has-video video{opacity:1}
.hero-media img#herostill{transition:opacity .7s ease}
.hero-media.has-video img#herostill{opacity:0}
.hero-wipe video{clip-path:inset(0 0 100% 0);transform:scale(1.16);transition:clip-path 1.35s cubic-bezier(.76,0,.24,1),transform 1.9s cubic-bezier(.16,1,.3,1)}
.hero-wipe.in video{clip-path:inset(0 0 0 0);transform:translate3d(0,var(--py,0px),0) scale(1.04)}
.hero-copy{padding-top:clamp(56px,7vw,96px)}

/* ==========================================================================
   BOOKING COVER
   ResDiary paints its frame before availability comes back, so for two or three
   seconds every slot reads greyed and the restaurant looks fully booked. This
   sits over it until the frame is up and the diary has had a moment.
   ========================================================================== */
.booking{position:relative}
.booking-cover{
  position:absolute;inset:0;z-index:3;
  background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  text-align:center;padding:32px;
  transition:opacity .45s ease,visibility .45s;
}
.booking-cover.gone{opacity:0;visibility:hidden;pointer-events:none}
.booking-cover .corno{width:22px;color:var(--ink);opacity:.9}
.bc-label{
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--ink);
  margin-bottom:2px;
}
.bc-sub{font-size:12px;color:var(--muted);letter-spacing:.02em;max-width:30ch;line-height:1.6}
.bc-bar{
  display:block;width:min(190px,60%);height:2px;background:var(--rule);overflow:hidden;position:relative;
}
.bc-bar i{
  position:absolute;inset:0;display:block;background:var(--terra);
  transform-origin:left;transform:scaleX(0);
  animation:bcfill 5.2s cubic-bezier(.25,.9,.35,1) forwards;
}
@keyframes bcfill{
  0%{transform:scaleX(0)}
  35%{transform:scaleX(.55)}
  70%{transform:scaleX(.82)}
  100%{transform:scaleX(.97)}
}
/* the dark menu pages would need it inverted, kept here in case the widget moves */
body.menu .booking-cover{background:var(--marble)}
body.menu .booking-cover .corno,body.menu .bc-label{color:var(--paper)}
body.menu .bc-sub{color:rgba(255,255,255,.6)}
body.menu .bc-bar{background:rgba(255,255,255,.18)}

@media (prefers-reduced-motion:reduce){
  .bc-bar i{animation:none;transform:scaleX(.6)}
  .booking-cover{transition:none}
}

/* ==========================================================================
   MENU PAGES  ·  and the shared masthead used by the see pages
   Dark, structured, on Malocchio's own green marble rather than navy and gold.
   Sticky course rail, generous type, photography between courses, and the dish
   film surfacing on hover.
   ========================================================================== */
body.menu{background:var(--marble);color:var(--paper)}
body.menu .nav{background:rgba(20,37,29,.86);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.12)}
body.menu .nav.stuck{background:rgba(12,24,18,.95)}
body.menu .brand,body.menu .brand .corno{color:var(--paper)}
body.menu .nav-links a{color:rgba(255,255,255,.74)}
body.menu .nav-links a:hover{color:var(--terra-2)}
body.menu .burger{border-color:rgba(255,255,255,.3)}
body.menu .burger span{background:var(--paper)}
body.menu .drawer{background:var(--marble)}
body.menu .btn{border-color:rgba(255,255,255,.42);color:var(--paper)}
body.menu .btn:hover{background:var(--paper);color:var(--ink)}
body.menu .btn-terra{background:var(--terra);border-color:var(--terra);color:var(--paper)}
body.menu .btn-terra:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
body.menu footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.12)}
body.menu p.body{color:rgba(255,255,255,.66)}

/* masthead */
.mh{position:relative;padding:clamp(56px,8vw,110px) 0 clamp(34px,4.5vw,58px);text-align:center;overflow:hidden}
.mh::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(194,94,40,.16),transparent 70%);
}
.mh > *{position:relative;z-index:1}
.mh .corno{width:22px;color:var(--paper);margin:0 auto 22px}
.mh .ver{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--terra-2);font-weight:500}
.mh h1{
  font-size:clamp(42px,7.4vw,96px);letter-spacing:.14em;text-transform:lowercase;
  color:var(--paper);margin-top:12px;font-weight:300;padding:0 var(--gut);
}
.mh p{
  margin:20px auto 0;max-width:52ch;font-size:15px;line-height:1.8;
  color:rgba(255,255,255,.62);padding:0 var(--gut);
}

/* sticky course rail */
.rail-nav{
  position:sticky;top:76px;z-index:60;
  background:rgba(20,37,29,.92);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
}
.rail-nav ul{
  list-style:none;display:flex;gap:clamp(16px,3vw,44px);justify-content:center;
  max-width:var(--wrap);margin:0 auto;padding:16px var(--gut);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail-nav ul::-webkit-scrollbar{display:none}
.rail-nav a{
  text-decoration:none;white-space:nowrap;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.6);
  padding-bottom:5px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.rail-nav a:hover,.rail-nav a.on{color:var(--paper);border-color:var(--terra-2)}

/* courses */
.course{padding:clamp(50px,6.5vw,92px) 0;position:relative}
.course + .course{border-top:1px solid rgba(255,255,255,.09)}
.course-head{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(26px,3.2vw,42px)}
.course-head h2{
  font-size:clamp(28px,4.2vw,54px);letter-spacing:.2em;text-transform:lowercase;
  color:var(--paper);font-weight:300;
}
.course-head .sub{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-2);font-weight:500;white-space:nowrap}
.course-head .ln{flex:1;height:1px;background:rgba(255,255,255,.16)}

.dish{
  display:grid;grid-template-columns:1fr auto;column-gap:24px;row-gap:3px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;transition:padding-left .35s cubic-bezier(.16,1,.3,1);
}
.dish:last-of-type{border-bottom:0}
.dish[data-film]{cursor:pointer}
.dish[data-film]:hover{padding-left:14px}
.dish .n{font-size:16px;font-weight:500;color:var(--paper);letter-spacing:.01em;line-height:1.45}
.dish .p{font-size:15px;color:var(--terra-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.dish .d{grid-column:1/-1;font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.6;max-width:70ch}
.dish[data-film] .n::after{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--terra-2);margin-left:10px;vertical-align:middle;opacity:.85;
}
.course .note{margin-top:16px;font-size:13px;color:rgba(255,255,255,.5);font-style:italic}

/* measure columns for wine and spirits */
.cols{display:grid;grid-template-columns:1fr repeat(var(--c,3),62px);gap:16px;align-items:baseline}
.cols.head{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);
  font-weight:500;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:6px;
}
.cols.row{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.cols .n{font-size:15px;font-weight:500;color:var(--paper)}
.cols .n i{font-style:italic;font-weight:400;color:rgba(255,255,255,.5)}
.cols .p{text-align:right;font-size:14px;color:var(--terra-2);font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .cols{grid-template-columns:1fr repeat(var(--c,3),42px);gap:9px}
  .cols .p{font-size:12.5px}.cols .n{font-size:13.5px}
}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px)}
@media(max-width:760px){.two{grid-template-columns:1fr}}

/* full-bleed plate between courses */
.interlude{position:relative;height:clamp(220px,30vw,400px);overflow:hidden;margin:0}
.interlude img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(1.06)}
.interlude figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:60px var(--gut) 22px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:500;
}

/* the dish film, pinned to the cursor */
.film{
  position:fixed;top:0;left:0;z-index:70;width:250px;pointer-events:none;
  opacity:0;transition:opacity .32s ease;will-change:transform;
  border:1px solid rgba(255,255,255,.2);background:#000;
}
.film.on{opacity:1}
.film img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.film span{
  display:block;padding:9px 12px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.75);border-top:1px solid rgba(255,255,255,.16);
}
@media(max-width:1020px),(hover:none){.film{display:none}}

.menu-foot{
  margin-top:clamp(40px,5vw,66px);padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:rgba(255,255,255,.46);font-style:italic;line-height:2;
}
.menu-switch{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(34px,4vw,54px)}

/* the corno glyph inside the ticker */
.strip-track .cg{width:9px;color:var(--paper);opacity:.9}

/* ==========================================================================
   HERO PROPORTION
   The hero was 1005px tall in a 930px viewport because the media column's
   image drove the row height instead of the grid. Result: the whole top of
   the site overflowed the fold and read as a tall empty band. Lock the row
   height, absolutely fill the media, tighten the vertical rhythm.
   ========================================================================== */
.nav-inner{height:64px}
.drawer{inset:64px 0 0}

.hero{
  height:calc(100svh - 64px);
  min-height:560px;
  max-height:880px;
}
.hero-copy{
  justify-content:center;min-height:0;
  padding-top:clamp(36px,4vw,60px);
  padding-bottom:clamp(26px,2.6vw,40px);
}
.hero .sub{margin-top:16px}
.hero .tagline{margin-top:24px}
.hero .btns{margin-top:32px}
.hero-foot{padding-top:24px;gap:22px}

.hero-media{min-height:0}
.hero-wipe{position:absolute;inset:0;height:auto}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%}

@media(max-width:860px){
  .hero{height:auto;min-height:0;max-height:none}
  .hero-wipe{position:relative;inset:auto;height:100%}
  .hero-media img,.hero-media video{position:absolute}
  .hero-copy{padding-top:clamp(28px,5.5vw,42px);padding-bottom:30px}
  .hero .btns{margin-top:26px}
  .hero-foot{padding-top:20px;gap:14px;font-size:9.5px}
}

/* Centre the hero copy properly. The foot was pinned with margin-top:auto,
   which pushed the whole group to the top of the column and left a hole
   between the buttons and the rule. Pin the foot absolutely instead, so the
   title block sits in the optical centre with even air above and below. */
.hero-copy{position:relative;padding-bottom:calc(clamp(26px,2.6vw,40px) + 74px)}
.hero{max-height:820px}
.hero-foot{
  position:absolute;margin-top:0;
  left:var(--gut);right:clamp(24px,5vw,72px);
  bottom:clamp(26px,2.6vw,40px);
}
@media(max-width:860px){
  .hero-copy{padding-bottom:30px}
  .hero-foot{position:static;left:auto;right:auto;bottom:auto;margin-top:auto}
}


/* Menu page mobile fixes.
   1. .rail-nav ul was centred AND scrollable: on a narrow screen that pushes
      the first tabs off the left edge where they cannot be reached, and the
      last ones past the right edge, so the page scrolls sideways.
   2. .course-head .sub was nowrap and ran past the viewport.
   3. The nav is 64px now, so the sticky rail has to sit at 64. */
.rail-nav{top:64px}
@media(max-width:760px){
  .rail-nav ul{justify-content:flex-start;padding-inline:var(--gut)}
  .rail-nav ul::after{content:'';flex:0 0 var(--gut)}
  .course-head{flex-wrap:wrap;row-gap:8px}
  .course-head .sub{white-space:normal;flex-basis:100%;order:3}
  .course-head .ln{flex:1 1 40px}
}

/* The hero film sits exactly where the still sits, same panel, centred.
   The 42% vertical bias was framing for the room photograph; the film is
   centre-composed, so it gets a true centre. The still stays underneath and
   is what everyone sees until the file can actually play. */
.hero-media video{object-position:center center}

/* ==========================================================================
   SEE MEDIA, LOCAL
   The 42 dish and drink films were 288MB of GIF hosted on the Wix CDN. Some
   were 25MB for a 432x540 clip, so hovering opened a black panel and sat
   there. They are now H.264 at ~300KB each, served from this site, which also
   removes the dependency on that Wix account staying alive.
   ========================================================================== */
.film video{
  position:absolute;inset:0;width:100%;
  aspect-ratio:4/5;object-fit:cover;display:none;
}
.film.has-motion video{display:block}
.film{position:fixed}
.film img{display:block}

/* card posters play their clip on hover, desktop only */
.sc-media{position:relative;overflow:hidden}
.sc-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .3s ease;
}
.sc-media.playing video{opacity:1}

/* lightbox */
.lb-in{position:relative}
#lbvid{display:none;max-width:100%;max-height:78vh;object-fit:contain}
.lb.has-motion #lbvid{display:block}
.lb.has-motion #lbimg{display:none}


/* Hero film shows by default, still sits behind it as the safety net.
   Previously the video was hidden until JS proved it could play, which meant
   any one of a dozen things failing left the panel on the photograph with no
   way to tell why. Inverted: the film is visible, the still is underneath it,
   and JS only removes the film for people who should not get it. */
.hero-media video{opacity:1}
.hero-media img#herostill{opacity:1}
.hero-media.no-video video{display:none}
.hero-media video{z-index:2}
.hero-media img#herostill{z-index:1}

/* ==========================================================================
   PROSE PAGES
   Privacy and anything else that is just text. Same green ground as the menus
   so it does not feel bolted on.
   ========================================================================== */
.doc{max-width:70ch;padding:clamp(56px,7vw,96px) var(--gut) clamp(70px,8vw,120px)}
.doc h1{
  font-size:clamp(38px,5.4vw,68px);font-weight:300;letter-spacing:.02em;
  text-transform:lowercase;margin:0 0 6px;
}
.doc .lede{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.62);margin:0 0 clamp(38px,4vw,56px)}
.doc h2{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  color:var(--terra-2);margin:clamp(34px,3.6vw,48px) 0 12px;
}
.doc p,.doc li{font-size:15px;line-height:1.72;color:rgba(255,255,255,.8)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc li{margin-bottom:7px}
.doc strong{color:#fff;font-weight:500}
.doc a{color:var(--terra-2)}
.doc .upd{
  margin-top:clamp(40px,4.4vw,60px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42);
}

/* ==========================================================================
   SEE IT NAVIGATION
   See the Drink was reachable only from a button at the foot of See the Dish,
   so most people would never find it. It is now in the header under See It,
   in the mobile drawer as its own line, and there is a switch at the top of
   both pages.
   ========================================================================== */
.has-sub{position:relative}
.has-sub > a::before{
  content:'';position:absolute;left:0;right:0;top:100%;height:18px;
}
.sub{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--paper);border:1px solid var(--rule);list-style:none;
  padding:8px 0;min-width:170px;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s cubic-bezier(.16,1,.3,1),visibility .22s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub li{display:block}
.sub a{
  display:block;padding:9px 18px;white-space:nowrap;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--ink-soft);text-decoration:none;transition:color .2s,background .2s;
}
.sub a::after{display:none}
.sub a:hover{color:var(--terra);background:var(--paper-2)}
body.menu .sub{background:var(--marble-2);border-color:rgba(255,255,255,.16)}
body.menu .sub a{color:rgba(255,255,255,.72)}
body.menu .sub a:hover{color:#fff;background:rgba(255,255,255,.07)}

.see-switch{
  display:flex;justify-content:center;gap:0;
  padding:0 var(--gut) clamp(18px,2.4vw,30px);
}
.see-switch a{
  padding:11px 26px;text-decoration:none;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.18);
  transition:color .25s,background .25s,border-color .25s;
}
.see-switch a + a{border-left:0}
.see-switch a:hover{color:#fff}
.see-switch a.on{background:var(--terra);border-color:var(--terra);color:#fff}
@media(max-width:520px){.see-switch a{flex:1 1 0;text-align:center;padding:11px 8px;font-size:9px;letter-spacing:.16em}}

/* ==========================================================================
   ALLERGENS
   The one page a customer with a real allergy needs, so it is a filterable
   table rather than another PDF. A dotted tag means the kitchen can modify
   the dish to take that allergen out.
   ========================================================================== */
.dish .alg{
  grid-column:1 / -1;margin-top:5px;display:flex;flex-wrap:wrap;gap:5px;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34);
}
.dish .dn{grid-column:1 / -1;margin-top:1px;font-size:11.5px;font-style:italic;color:rgba(255,255,255,.42)}
.course-foot{margin-top:22px;font-size:12px;font-style:italic;color:rgba(255,255,255,.45)}

.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:0 0 clamp(26px,3vw,40px);
}
.flabel{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-right:4px}
.fchips{display:flex;flex-wrap:wrap;gap:7px}
.fchip{
  padding:7px 13px;background:transparent;color:rgba(255,255,255,.66);cursor:pointer;
  border:1px solid rgba(255,255,255,.2);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  transition:background .22s,color .22s,border-color .22s;
}
.fchip:hover{color:#fff;border-color:rgba(255,255,255,.42)}
.fchip.on{background:var(--terra);border-color:var(--terra);color:#fff}
.fclear{
  margin-left:auto;background:none;border:0;cursor:pointer;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-2);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.filters.active .fclear{opacity:1;pointer-events:auto}

.arow{
  display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.09);
  transition:opacity .3s ease;
}
.arow.dim{opacity:.2}
.an{font-size:15px;color:rgba(255,255,255,.92)}
.ap{font-size:14px;color:var(--terra-2);font-variant-numeric:tabular-nums}
.at{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.tag{
  padding:2.5px 7px;border:1px solid rgba(255,255,255,.22);
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.tag.mod{border-style:dotted;color:var(--terra-2);border-color:rgba(217,116,52,.55)}
.alg-none{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3)}

.akey{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 26px}
.ak{display:flex;gap:12px;align-items:baseline;font-size:13px;color:rgba(255,255,255,.72)}
.ak b{
  min-width:34px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra-2);font-weight:500;
}
@media(max-width:520px){
  .filters{gap:8px}
  .fclear{margin-left:0}
}

/* The button row at the foot of the menu pages sat almost flush against the
   black footer, so the two blocks read as one. Give it real air underneath. */
.menu-switch{margin-bottom:clamp(70px,9vw,130px)}
body.menu main{padding-bottom:0}
.menu-foot{margin-top:clamp(56px,6.5vw,88px)}
@media(max-width:520px){
  .menu-switch{margin-bottom:clamp(52px,12vw,80px)}
  .menu-switch .btn{flex:1 1 100%;justify-content:center}
}

/* The last course was carrying a full 92px of padding straight into the
   allergen note, which read as a hole rather than a break. */
.course:last-of-type{padding-bottom:clamp(24px,3vw,40px)}

/* ==========================================================================
   MOBILE
   Everything below is about the phone, because that is where a menu is
   actually read: standing outside, sitting at the table, deciding.
   ========================================================================== */

/* 1. The dot is a real control now, not a hover hint. Make it look tappable
      and give the whole row a proper touch target. */
@media (hover:none), (max-width:1020px){
  .dish[data-film]{
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    padding-top:18px;padding-bottom:18px;
  }
  .dish[data-film]:active{background:rgba(255,255,255,.045)}
  .dish[data-film] .n::after{
    width:7px;height:7px;margin-left:9px;
    box-shadow:0 0 0 4px rgba(217,116,52,.16);
  }
}

/* 2. Section tabs were 10px text in a 26px strip. Thumb-sized now, with a
      fade on the right edge so it is obvious the row keeps going. */
@media(max-width:760px){
  .rail-nav,.see-nav{position:sticky;z-index:60}
  .rail-nav ul,.see-nav ul{padding-top:0;padding-bottom:0}
  .rail-nav a,.see-nav a{
    display:flex;align-items:center;min-height:46px;padding:0 2px 0 0;
    font-size:11px;letter-spacing:.18em;
  }
  /* NOTE: .rail-nav must stay position:sticky here. A position:relative
     override (added for the ::after fade) combined with top:64px pushed the
     whole strip 64px down over the first section heading on phones. Sticky
     elements are a containing block for absolute children, so the fade
     works without it. */
  .rail-nav::after,.see-nav::after{
    content:'';position:absolute;top:0;right:0;bottom:0;width:40px;pointer-events:none;
    background:linear-gradient(90deg,rgba(20,37,29,0),rgba(20,37,29,.96));
  }
}

/* 3. Buttons and chips to a real 44px minimum. */
@media(max-width:760px){
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .fchip{min-height:44px;padding:0 15px;display:inline-flex;align-items:center;font-size:10.5px}
  .fclear{min-height:44px;display:inline-flex;align-items:center}
  .see-switch a{min-height:46px;display:flex;align-items:center;justify-content:center}
  .nav-right .btn{padding:12px 18px}
  .drawer a{min-height:52px;display:flex;align-items:center;justify-content:center}
}

/* 4. Allergen tags were 8.5px, which is not readable at arm's length. */
@media(max-width:760px){
  .dish .alg{font-size:10px;gap:7px;margin-top:7px;color:rgba(255,255,255,.4)}
  .at .tag{font-size:9.5px;padding:3px 8px}
  .an{font-size:15.5px}
  .arow{padding:18px 0}
  .ak{font-size:13.5px}
}

/* 5. Even cards on the see-it grid. Mixed aspect ratios made the rows ragged. */
@media(max-width:1020px){
  .sc-media{aspect-ratio:1/1}
  .sc-media img,.sc-media video{width:100%;height:100%;object-fit:cover}
  .sc-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* 6. The viewer fills the phone properly and clears the notch. */
@media(max-width:640px){
  .lb-in{padding:0}
  .lb-in img,.lb-in video{max-height:70vh;width:100%;object-fit:contain}
  .lb-x{top:max(14px,env(safe-area-inset-top));right:14px;width:46px;height:46px}
  .lb-arrow{width:46px;height:46px}
  .lb figcaption{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}

/* 7. Long dish names were breaking awkwardly at narrow widths. */
@media(max-width:420px){
  .dish .n{font-size:15px;line-height:1.4;hyphens:none}
  .dish{column-gap:14px}
  .course-head h2{font-size:clamp(30px,9vw,42px)}
}

/* The viewer caption was flush to the screen edge on a phone. */
@media(max-width:640px){
  .lb figcaption{padding-inline:var(--gut)}
  .lb-arrow{bottom:max(20px,env(safe-area-inset-bottom))}
}

/* Footer links were 15 stacked targets around 20px tall, which on a phone is
   a coin toss every time. Give them a real row height and a bit of separation. */
@media(max-width:760px){
  .foot-col ul{display:flex;flex-direction:column}
  .foot-col li{margin:0}
  .foot-col a{
    display:flex;align-items:center;min-height:44px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .foot-col li:last-child a{border-bottom:0}
  .foot-bot a,.small a{display:inline-flex;align-items:center;min-height:40px}
  .brand{min-height:44px;align-items:center}
}

/* Card descriptions were 11.5px, which is below what most people can read
   comfortably at arm's length on a phone. */
@media(max-width:1020px){
  .sc-d{font-size:13px;line-height:1.5}
  .sc-n{font-size:15px}
  .lb-hint{font-size:11px}
}
@media(max-width:760px){.dish .dn{font-size:12.5px}}
/* allergen page notes sit on their own line under the dish, like the menu */
.arow .dn{grid-column:1 / -1;margin-top:2px;font-size:12px;font-style:italic;color:rgba(255,255,255,.42)}

/* ==========================================================================
   MOBILE, PART TWO
   The single column rules for the homepage sections were declared inside a
   media query early in this file, then silently overridden by later
   unqualified rules further down. Result: on a phone the story, bar, reserve
   and visit blocks stayed in two columns and squeezed the text into a
   250px gutter. These come last, so they win.
   ========================================================================== */
@media(max-width:860px){
  .story-grid,.bar-grid,.reserve-grid,.visit-grid,.room-head,.two{
    grid-template-columns:1fr;
    align-items:start;
  }
  .story-photos{
    position:static;min-height:0;
    display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;
  }
  .story-photos figure{position:static;width:auto;margin:0}
  .sp-a,.sp-b{width:auto;left:auto;right:auto;top:auto}
  .sp-b{margin-top:30px}
  .sp-a img,.sp-b img{aspect-ratio:4/5}
  .bar-shots{margin-top:30px}
  .room-head .aside{max-width:none;padding-bottom:0;margin-top:14px}
}

/* A 3.6em floated capital inside a narrow column pushes the first three lines
   into a stub. Keep it for the wide layout, drop it on a phone. */
@media(max-width:640px){
  .dropcap::first-letter{
    font-size:1em;float:none;padding:0;color:inherit;font-family:inherit;
  }
}

/* The facts row wrapped to an uneven 2 + 1. Give it a real grid. */
@media(max-width:860px){
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px;margin-top:32px}
  .fact .n{font-size:clamp(28px,8vw,38px)}
  .fact .l{font-size:9px;letter-spacing:.2em}
}
@media(max-width:380px){
  .facts{grid-template-columns:1fr}
}

/* ==========================================================================
   POPUPS
   Two of them on the see-it pages. One asks for an email, one runs the
   feedback-and-reward flow. Both are opt-in, both remember a dismissal, and
   neither fires until someone has actually engaged with the page.
   ========================================================================== */
.pop{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:var(--gut);background:rgba(6,12,9,.72);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .35s ease;
}
.pop.on{opacity:1}
body.pop-open{overflow:hidden}

.pop-in{
  position:relative;width:min(440px,100%);max-height:88vh;overflow-y:auto;
  background:var(--marble-2);border:1px solid rgba(255,255,255,.14);
  padding:clamp(30px,5vw,44px) clamp(24px,4.4vw,38px) clamp(26px,4vw,36px);
  transform:translateY(16px) scale(.98);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  text-align:center;
}
.pop.on .pop-in{transform:none}
.pop-mark{width:22px;color:#fff;margin-bottom:16px}
.pop-in h2{
  font-family:var(--display);font-weight:300;text-transform:lowercase;
  font-size:clamp(26px,4.4vw,34px);letter-spacing:.01em;margin:0 0 10px;color:#fff;
}
.pop-in h3{font-family:var(--display);font-weight:300;font-size:24px;margin:0 0 8px;color:#fff}
.pop-in p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.66);margin:0 0 20px}
.pop-x{
  position:absolute;top:8px;right:8px;width:44px;height:44px;
  background:none;border:0;color:rgba(255,255,255,.5);font-size:24px;cursor:pointer;
  line-height:1;transition:color .2s;
}
.pop-x:hover{color:#fff}
.pop-in input[type=email],.pop-in textarea{
  width:100%;padding:14px 15px;margin-bottom:11px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.2);color:#fff;
  font-family:var(--ui);font-size:15px;border-radius:0;
}
.pop-in input::placeholder,.pop-in textarea::placeholder{color:rgba(255,255,255,.34)}
.pop-in input:focus,.pop-in textarea:focus{outline:0;border-color:var(--terra-2)}
.pop-in .btn{width:100%;justify-content:center;min-height:48px}
.pop-note{font-size:11px;line-height:1.6;color:rgba(255,255,255,.4);margin:14px 0 0}
.pop-note a{color:var(--terra-2)}
.hp{position:absolute;left:-9999px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pop-done{display:none}

/* feedback flow */
.fb-c{
  padding:15px;min-height:52px;background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.86);
  font-family:var(--ui);font-size:13.5px;letter-spacing:.04em;
  transition:background .22s,border-color .22s,color .22s;
}
.fb-c:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);color:#fff}
.fb-code{
  margin:6px 0 4px;padding:18px;border:1px dashed var(--terra-2);
  font-family:var(--display);font-size:clamp(26px,6vw,34px);letter-spacing:.12em;color:var(--terra-2);
}
.fb-google{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.fb-google .btn{margin-bottom:2px}

/* the quiet way in, sits above the footer and out of the way of the grid */
.fb-tab{
  position:fixed;left:50%;transform:translateX(-50%) translateY(120%);
  bottom:0;z-index:70;cursor:pointer;
  padding:13px 22px;min-height:48px;
  background:var(--marble-2);border:1px solid rgba(255,255,255,.18);border-bottom:0;
  color:rgba(255,255,255,.72);font-family:var(--ui);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  transition:transform .5s cubic-bezier(.16,1,.3,1),background .25s,color .25s;
}
.fb-tab b{color:var(--terra-2);font-weight:500}
.fb-tab.up{transform:translateX(-50%) translateY(0)}
.fb-tab:hover{background:var(--marble);color:#fff}
@media(max-width:520px){
  .fb-tab{font-size:10px;letter-spacing:.1em;padding:12px 16px;width:100%;transform:translateY(120%)}
  .fb-tab.up{transform:translateY(0)}
  .pop-in{max-height:92vh}
}
@media (prefers-reduced-motion:reduce){
  .pop,.pop-in,.fb-tab{transition:none}
}
.fb-skip{
  display:block;width:100%;margin-top:12px;padding:12px;min-height:44px;
  background:none;border:0;cursor:pointer;
  font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);transition:color .22s;
}
.fb-skip:hover{color:rgba(255,255,255,.8)}

/* The hidden attribute only wins if nothing else sets display. .pop declares
   display:grid, which beat it, so the overlay sat invisible at opacity 0
   across the whole viewport and swallowed every tap on the page. */
.pop[hidden]{display:none}

/* --- popup, single screen version ---------------------------------------- */
.pop-lead{font-size:15px !important;color:rgba(255,255,255,.78) !important;margin-bottom:22px !important}
.pop-cta{margin-bottom:2px}
.pop-in h3{
  font-family:var(--ui);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:500;color:var(--terra-2);margin:0 0 9px;
}
.pop-or{
  position:relative;margin:26px 0 22px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.34);
}
.pop-or::before,.pop-or::after{
  content:'';position:absolute;top:50%;width:calc(50% - 26px);height:1px;
  background:rgba(255,255,255,.14);
}
.pop-or::before{left:0}.pop-or::after{right:0}

/* the private route stays out of the way until it is asked for */
.fb-private{
  margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);text-align:left;
}
.fb-private p{font-size:13px;margin-bottom:14px}
.pop-in.private .pop-note a#fbprivate{display:none}

/* success states, scoped so one form finishing does not blank the other */
.pop-in.done #jpform,.pop-in.done .pop-or + h3,.pop-in.done .pop-or ~ p:not(.pop-note){display:none}
.pop-in.done #jpdone{display:block}
.fb-private.done #fbform,.fb-private.done > p{display:none}
.fb-private.done #fbdone{display:block}
#jpdone,#fbdone{display:none}
#jpdone h3,#fbdone h3{color:#fff;font-family:var(--display);font-size:22px;letter-spacing:0;text-transform:none}

/* --- loud diary states (Romano: customers think bookings hang) ----------- */
.bc-big{font-size:clamp(17px,2.2vw,22px);letter-spacing:.14em}
.bc-dots i{animation:bcdot 1.2s infinite;display:inline-block}
.bc-dots i:nth-child(2){animation-delay:.2s}
.bc-dots i:nth-child(3){animation-delay:.4s}
@keyframes bcdot{0%,60%,100%{opacity:.2}30%{opacity:1}}
.bc-sub{
  display:block;margin-top:12px;max-width:34ch;text-align:center;
  font-size:12px;letter-spacing:.02em;text-transform:none;line-height:1.6;
  color:var(--muted);font-weight:400;
}
body.menu .bc-sub{color:rgba(255,255,255,.6)}
.bc-after{
  margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--muted);
}
.bc-after b{color:var(--ink);font-weight:500}
@media (prefers-reduced-motion:reduce){.bc-dots i{animation:none}}

/* --- group bookings form ------------------------------------------------- */
.gform{max-width:52ch}
.gl{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--terra-2);font-weight:500;margin:16px 0 6px}
.gform input,.gform textarea{
  width:100%;padding:13px 14px;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--ui);font-size:15px;border-radius:0;
}
.gform input:focus,.gform textarea:focus{outline:0;border-color:var(--terra-2)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gform .btn{margin-top:22px}
@media(max-width:480px){.g2{grid-template-columns:1fr}}
.doc .pop-done{display:none}
.doc.done .gform{display:none}
.doc.done .pop-done{display:block}

/* --- consent banner ------------------------------------------------------ */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:var(--marble);color:#fff;border-top:1px solid rgba(255,255,255,.16);
  padding:14px var(--gut) max(14px,env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  transform:translateY(110%);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.consent.on{transform:none}
.consent p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.78);max-width:56ch}
.consent p a{color:var(--terra-2)}
.consent .c-btns{display:flex;gap:8px}
.consent button{
  min-height:42px;padding:0 18px;cursor:pointer;font-family:var(--ui);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
}
.consent .c-yes{background:var(--terra);border:1px solid var(--terra);color:#fff}
.consent .c-no{background:none;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.75)}

/* --- back to top --------------------------------------------------------- */
.totop{
  position:fixed;right:max(16px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));z-index:65;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:var(--marble);color:#fff;border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 10px 28px -12px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1),background .25s;
}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--marble-2)}
.totop svg{width:15px;height:15px;display:block}
/* the see pages slide a full-width tab up from the bottom on phones;
   step over it rather than sitting on top of it */
@media(max-width:520px){
  .fb-tab.up ~ .totop{bottom:calc(58px + env(safe-area-inset-bottom))}
}
/* while the consent banner is up it owns the bottom of the screen */
body:has(.consent.on) .totop{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.totop{transition:opacity .35s ease}}