/* ============================================================================
   LIBERTINO
   Black ground, cream Didone, the red logo exactly as it is. Red otherwise
   used like lipstick: a line, a glow, one full screen for the wine.
============================================================================ */
:root{
  --black:#0B0807; --black-2:#140E0C; --oxblood:#2E0907;
  --red:#C41E16; --logo-red:#EF3523; --red-glow:rgba(196,30,22,.45);
  --cream:#EEE3D1; --cream-dim:rgba(238,227,209,.64); --cream-faint:rgba(238,227,209,.12);
  --pad:clamp(22px, 6vw, 104px); --max:1160px;
  --display:"Noto Serif Display", "Bodoni 72", Didot, Georgia, serif;
  --ui:"Jost", Futura, "Futura PT", "Century Gothic", -apple-system, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --safe-b:env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .intro{display:none!important} }
body{ margin:0; background:var(--black); color:var(--cream); font-family:var(--ui); font-weight:400;
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
/* the condensed Didone, as on the menu: headings, numbers, and the italic asides */
h1,h2,h3,h4, .eyebrow, .entry, .meaning, .hero-line, .line, .pizza-word, .pizza-copy, .pair-copy,
.prices span, .week .n, .pizza-note em, .bottle .wn, .bottle .maker, .dish h4{ font-family:var(--display); }
h1,h2,h3{ font-stretch:62.5%; font-weight:800; }
.eyebrow, .entry, .hero-line, .line, .pizza-copy, .pair-copy, .bottle .maker, .pizza-note em{ font-stretch:78%; }
.meaning{ font-stretch:78%; }
.prices span, .dish h4, .week .n{ font-stretch:72%; }
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor label{ cursor:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:700; line-height:1.02; text-wrap:balance; }
h2{ font-size:clamp(40px,6.6vw,96px); letter-spacing:0; line-height:.98; }
p{ margin:0; }
[hidden]{ display:none !important; }
.eyebrow{ display:block; font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(17px,1.6vw,21px);
  color:var(--red); margin-bottom:18px; letter-spacing:.01em; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; z-index:100; background:var(--cream); color:var(--black); padding:10px 16px; }
:focus-visible{ outline:2px solid var(--red); outline-offset:4px; }

/* ---------------------------------------------------------------- texture */
.grain{ position:fixed; inset:-50%; width:200%; height:200%; z-index:55; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(3) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1.5%)} 66%{transform:translate(1.5%,-2%)} 100%{transform:translate(0,0)} }
@media (max-width:760px){ .grain{ animation:none; opacity:.045; } }   /* phones: same look, no battery */

.cursor{ position:fixed; left:0; top:0; width:8px; height:8px; border-radius:50%; background:var(--red);
  z-index:80; pointer-events:none; transform:translate(-50%,-50%); display:none;
  transition:width .25s var(--ease), height .25s var(--ease), background .25s, opacity .3s; }
.cursor.on{ width:44px; height:44px; background:rgba(196,30,22,.16); border:1px solid var(--red); }
.cursor.hidden{ opacity:0; }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block; } }

.progress{ position:fixed; inset:0 0 auto 0; height:1px; z-index:70; background:var(--cream-faint); }
.progress span{ display:block; height:100%; width:0; background:var(--red); }
.ribbon{ position:fixed; left:50%; top:10px; transform:translateX(-50%); z-index:85; font-family:var(--ui); font-size:11px;
  letter-spacing:.1em; background:#F3C64A; color:#000; padding:6px 12px; }

/* ------------------------------------------------------------------ intro */
.intro{ position:fixed; inset:0; z-index:90; background:var(--black); display:grid; place-content:center; justify-items:center; gap:24px;
  transition:opacity .9s ease, visibility .9s; }
.intro.gone{ opacity:0; visibility:hidden; }
.intro-mark{ width:min(520px,72vw); opacity:0; transform:scale(1.04); filter:blur(6px);
  animation:arrive 1.5s var(--ease) .15s forwards; }
.intro-rule{ height:1px; width:0; background:var(--red); animation:draw 1.1s var(--ease) .85s forwards; }
@keyframes arrive{ to{ opacity:1; transform:none; filter:none; } }
@keyframes draw{ to{ width:min(56vw,480px); } }

/* ---------------------------------------------------------------- buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; font-family:var(--ui); font-size:11px;
  font-weight:600; letter-spacing:.3em; text-transform:uppercase; text-decoration:none; padding:15px 30px;
  color:var(--black); background:var(--cream); border:1px solid var(--cream); cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.btn:hover{ background:var(--red); border-color:var(--red); color:var(--cream); transform:translateY(-1px); }
.btn-big{ padding:19px 46px; font-size:12px; min-height:56px; }
.btn-line{ background:transparent; color:var(--cream); border-color:rgba(238,227,209,.38); }
.btn-line:hover{ background:var(--red); color:var(--cream); border-color:var(--red); }

/* ---------------------------------------------------------------- top bar */
.bar{ position:fixed; inset:1px 0 auto 0; z-index:60; display:flex; align-items:center; gap:34px;
  padding:18px var(--pad); transition:background .4s ease, padding .4s ease, border-color .4s ease; border-bottom:1px solid transparent; }
.bar-solid{ background:rgba(11,8,7,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); padding:11px var(--pad); border-color:var(--cream-faint); }
.bar-mark img{ height:16px; width:auto; }
.bar-nav{ display:flex; gap:28px; margin-left:auto; }
.bar-nav a{ font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  text-decoration:none; color:var(--cream-dim); position:relative; }
.bar-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--red); transition:right .3s var(--ease); }
.bar-nav a:hover{ color:var(--cream); } .bar-nav a:hover::after{ right:0; }
.bar .btn-line{ min-height:40px; padding:10px 18px; font-size:10px; }
.bar-toggle{ display:none; width:44px; height:44px; background:none; border:0; padding:0; position:relative; color:var(--cream); }
.bar-toggle span{ position:absolute; left:11px; right:11px; height:1px; background:currentColor; transition:transform .35s var(--ease); }
.bar-toggle span:first-child{ top:18px; } .bar-toggle span:nth-child(2){ top:26px; }
.bar-toggle[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.bar-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
.bar-toggle b{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:900px){ .bar{ gap:6px; } .bar-nav{ display:none; } .bar-toggle{ display:block; order:3; margin-right:-10px; } .bar .btn-line{ margin-left:auto; } }
.sheet{ position:fixed; inset:0; z-index:58; background:rgba(11,8,7,.97); display:flex; flex-direction:column; justify-content:center;
  gap:6px; padding:90px var(--pad) calc(40px + var(--safe-b)); }
.sheet a:not(.btn){ font-family:var(--display); font-stretch:62.5%; font-weight:700; font-size:clamp(40px,11vw,64px); line-height:1.1; text-decoration:none; }
.sheet a:not(.btn):active{ color:var(--logo-red); }
.sheet .btn{ margin-top:30px; }

/* ------------------------------------------------------------------- hero */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:grid; isolation:isolate; overflow:hidden; }
.hero picture, .hero-img{ position:absolute; inset:0; width:100%; height:100%; }
.hero-img{ object-fit:cover; z-index:-2; transform:scale(1.07); transition:transform 7s var(--ease); }
.hero.ready .hero-img{ transform:scale(1); }
.hero-wash{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,8,7,.55) 0%, rgba(11,8,7,0) 28%, rgba(11,8,7,.18) 52%, rgba(11,8,7,.93) 80%, rgba(11,8,7,1) 100%); }
.hero-in{ align-self:end; width:100%; text-align:center; padding:0 var(--pad) clamp(44px,7vw,84px); }
.hero-mark{ margin:0 auto 14px; width:min(820px, 86vw); clip-path:inset(0 100% 0 0); transition:clip-path 1.6s var(--ease) .1s; }
.hero.ready .hero-mark{ clip-path:inset(0 0 0 0); }
.hero-mark img{ width:100%; height:auto; filter:drop-shadow(0 6px 30px rgba(11,8,7,.7)); }
.hero-line{ font-style:italic; font-weight:400; font-size:clamp(20px,2.4vw,28px); margin-bottom:10px; }
.now b{ font-weight:400; color:var(--red); margin:0 .7em; }
.now .live{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--logo-red); margin-right:.9em; vertical-align:.12em;
  box-shadow:0 0 0 0 rgba(239,53,35,.6); animation:live 2.4s ease-out infinite; }
@keyframes live{ 0%{ box-shadow:0 0 0 0 rgba(239,53,35,.55); } 70%,100%{ box-shadow:0 0 0 9px rgba(239,53,35,0); } }
@media (prefers-reduced-motion:reduce){ .now .live{ animation:none; } }
.now{ font-family:var(--ui); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--cream);
  opacity:.88; min-height:1.4em; margin:0 auto 32px; max-width:none; line-height:1.7; }
@media (max-width:760px){
  .hero-in{ padding-bottom:calc(36px + var(--safe-b)); }
  .now{ font-size:10px; letter-spacing:.2em; margin-bottom:26px; }
  .now span{ display:block; } .now b{ display:none; }
  .hero .btn-big{ width:100%; max-width:340px; }
}

/* ------------------------------------------------------------- the spirit */
.spirit{ position:relative; padding:clamp(100px,14vw,190px) var(--pad); isolation:isolate; overflow:hidden;
  background:radial-gradient(70% 60% at 18% 32%, rgba(196,30,22,.16), transparent 70%), var(--black); }
.spirit-light{ position:absolute; z-index:-1; pointer-events:none; top:50%;
  right:max(var(--pad), calc((100vw - var(--max)) / 2 - 20px));
  width:min(560px, 44vw); aspect-ratio:900/1167; transform:translateY(-50%);
  background:url("img/leopard-cut.webp") center / contain no-repeat;
  -webkit-mask:radial-gradient(340px 340px at var(--x,55%) var(--y,40%), #000 0%, rgba(0,0,0,.6) 40%, transparent 74%);
          mask:radial-gradient(340px 340px at var(--x,55%) var(--y,40%), #000 0%, rgba(0,0,0,.6) 40%, transparent 74%);
  opacity:0; transition:opacity .8s ease; }
.spirit.lit .spirit-light{ opacity:1; }
@media (max-width:760px){
  /* on a phone she gets her own space under the words, never behind them */
  .spirit{ padding-bottom:calc(98vw + 36px); }
  .spirit-light{ right:6vw; top:auto; bottom:-20vw; transform:none; width:88vw;
    -webkit-mask:radial-gradient(230px 230px at var(--x,50%) var(--y,40%), #000 0%, rgba(0,0,0,.55) 40%, transparent 74%);
            mask:radial-gradient(230px 230px at var(--x,50%) var(--y,40%), #000 0%, rgba(0,0,0,.55) 40%, transparent 74%); }
}
.spirit-in{ max-width:var(--max); margin-inline:auto; position:relative; }
.entry{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 20px; margin-bottom:clamp(18px,2.4vw,30px); }
.entry .word{ font-family:var(--display); font-style:normal; font-stretch:62.5%; font-weight:700; font-size:clamp(64px,9.4vw,150px);
  line-height:.86; color:var(--logo-red); letter-spacing:-.005em; text-shadow:0 0 60px rgba(239,53,35,.18); }
.entry .pos{ font-family:var(--ui); font-style:normal; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--cream); opacity:.75; }
.meaning{ font-style:italic; font-size:clamp(28px,3.4vw,50px); line-height:1.12; font-weight:400; max-width:20ch; color:var(--cream); }
.rule{ width:56px; height:1px; background:var(--red); margin:clamp(34px,5vw,64px) 0; }
.story{ font-size:clamp(18px,1.45vw,21px); line-height:1.65; max-width:42ch; color:var(--cream); }

/* ------------------------------------------------------------------ pizza */
.pizza{ position:relative; background:var(--oxblood); isolation:isolate; overflow:hidden; padding:clamp(90px,12vw,170px) var(--pad); }
.pizza::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:url("img/leopard-swatch.jpg") center / 520px repeat; mix-blend-mode:multiply; opacity:.3; }
.pizza::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 70% at 30% 50%, transparent 20%, rgba(11,8,7,.7) 100%); }
.pizza-in{ max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,6vw,96px); align-items:center; }
.pizza-word{ font-style:normal; font-weight:700; font-stretch:62.5%; font-size:clamp(60px,7.2vw,124px); line-height:.86; letter-spacing:-.01em; margin:4px 0 26px; }
.pizza-copy{ font-size:clamp(22px,2.2vw,30px); margin-bottom:34px; }
.pizza-note{ display:flex; gap:20px; align-items:center; max-width:42ch; }
.pizza-note .crust{ width:96px; height:96px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  outline:1px solid rgba(238,227,209,.35); outline-offset:5px; }
.pizza-note p{ font-size:14.5px; line-height:1.7; color:var(--cream-dim); }
.pizza-note em{ font-family:var(--display); font-stretch:78%; font-size:20px; color:var(--cream); display:block; margin-top:4px; }
.pizza-img{ margin:0; position:relative; }
.pizza-img::before{ content:""; position:absolute; inset:8% 6%; border-radius:50%; background:radial-gradient(closest-side, rgba(239,53,35,.28), transparent); filter:blur(30px); z-index:-1; }
.pizza-cut{ width:112%; max-width:none; height:auto; margin-left:-2%; will-change:transform;
  filter:drop-shadow(0 46px 50px rgba(0,0,0,.6)) drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
@media (max-width:760px){
  .pizza-in{ grid-template-columns:1fr; text-align:left; }
  .pizza-img{ margin:10px calc(-1 * var(--pad)) -20px; }
  .pizza-cut{ width:108%; margin-left:-4%; }
}

/* ------------------------------------------------------- full-bleed frames */
.full{ position:relative; margin:0; min-height:72vh; display:grid; isolation:isolate; overflow:hidden; }
.full picture{ position:absolute; inset:-10% 0; z-index:-1; }
.full img{ width:100%; height:120%; object-fit:cover; will-change:transform; }
.full::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(11,8,7,.25), rgba(11,8,7,.05) 40%, rgba(11,8,7,.85) 100%); }
.full figcaption{ position:relative; z-index:1; align-self:end; padding:0 var(--pad) clamp(44px,6vw,76px); }
.full-short{ min-height:58vh; }
.line{ font-style:italic; font-size:clamp(24px,3vw,40px); }
@media (max-width:760px){ .full{ min-height:64vh; } .full-short{ min-height:46vh; } }

/* -------------------------------------------------------------- the pasta */
.cucina{ background:var(--black-2); }
.pair{ display:grid; grid-template-columns:1fr .8fr 1fr; gap:clamp(14px,2vw,28px); align-items:center;
  padding:clamp(60px,8vw,116px) var(--pad); max-width:calc(var(--max) + 2*var(--pad)); margin-inline:auto; }
.pair figure{ margin:0; overflow:hidden; }
.pair img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.4s var(--ease); }
.pair figure:hover img{ transform:scale(1.03); }
.pair-copy{ font-size:clamp(20px,1.9vw,27px); line-height:1.4; text-align:center; font-style:italic; padding:0 8px; }
@media (max-width:760px){ .pair{ grid-template-columns:1fr 1fr; } .pair-copy{ grid-column:1/-1; order:-1; padding:0 0 8px; } }

/* --------------------------------------------------------------- the room */
.sala{ background:var(--black); padding-top:clamp(80px,11vw,150px); }
.sala-head{ padding:0 var(--pad) clamp(34px,5vw,60px); max-width:calc(var(--max) + 2*var(--pad)); margin-inline:auto; }
.sala-head h2{ font-size:clamp(40px,6vw,88px); }
.sala-sub{ margin-top:22px; max-width:44ch; font-size:clamp(16px,1.3vw,19px); line-height:1.65; color:var(--cream-dim); }
.strip{ display:flex; gap:clamp(12px,1.6vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:0 var(--pad) clamp(60px,8vw,116px); scrollbar-width:none; scroll-padding:0 var(--pad); }
.strip::-webkit-scrollbar{ display:none; }
.strip.drag{ cursor:grabbing; scroll-snap-type:none; }
.strip img{ flex:0 0 auto; width:clamp(232px,30vw,420px); aspect-ratio:3/4; object-fit:cover; scroll-snap-align:start; user-select:none; -webkit-user-drag:none; }
@media (max-width:760px){ .strip img{ width:72vw; } }

/* ------------------------------------------------------------------- menu */
.menu{ background:var(--black-2); padding:clamp(80px,11vw,150px) var(--pad); }
.menu-in{ max-width:880px; margin-inline:auto; }
.menu h2{ margin-bottom:34px; }
.tabs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--cream-faint); margin-bottom:28px; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs button{ font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  background:none; border:0; color:var(--cream-dim); padding:14px 14px 16px; min-height:48px; white-space:nowrap; position:relative; }
.tabs button[aria-selected="true"]{ color:var(--cream); }
.tabs button[aria-selected="true"]::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:1px; background:var(--red); }
.dish{ display:grid; grid-template-columns:1fr auto; gap:4px 24px; padding:18px 0; border-bottom:1px solid var(--cream-faint); }
.dish h4{ margin:0; font-size:clamp(22px,2vw,27px); font-weight:500; }
.dish .price{ font-family:var(--ui); font-size:14px; font-variant-numeric:tabular-nums; color:var(--cream); align-self:start; padding-top:4px; }
.dish p{ grid-column:1/-1; font-family:var(--ui); font-size:14px; line-height:1.6; color:var(--cream-dim); }
.dish .tag{ font-family:var(--ui); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--red); margin-left:10px; vertical-align:middle; }
.dish-head{ font-family:var(--ui); font-weight:500; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--red); margin:44px 0 4px; }
.dish-head:first-child{ margin-top:8px; }
.menu-note{ font-family:var(--ui); font-size:12.5px; color:var(--cream-dim); margin-top:24px; }

/* ------------------------------------------------------------------- wine */
.cantina{ background:var(--red); color:var(--cream); }
.cantina-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:stretch; }
.cantina-copy{ padding:clamp(70px,9vw,130px) var(--pad); align-self:center; }
.cantina .eyebrow{ color:var(--cream); opacity:.8; }
.cantina-copy p{ margin-top:26px; font-size:clamp(19px,1.7vw,24px); line-height:1.5; max-width:30ch; }
.cantina-img img{ width:100%; height:100%; min-height:58vh; object-fit:cover; }
@media (max-width:760px){ .cantina-top{ grid-template-columns:1fr; } .cantina-img img{ min-height:0; aspect-ratio:4/3; } }

.pour{ padding:clamp(64px,8vw,110px) var(--pad) clamp(70px,9vw,120px); max-width:calc(var(--max) + 2*var(--pad)); margin-inline:auto; }
.pour-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,40px); }
.pour h3{ font-size:clamp(44px,5.6vw,84px); font-weight:700; font-stretch:62.5%; }
.pour-sub{ font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; }
.pour-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px,3vw,44px); }
.pour-foot{ margin-top:clamp(30px,4vw,50px); font-size:clamp(18px,1.6vw,22px); font-family:var(--display); font-style:italic; font-stretch:78%; }
.pour-foot a{ text-decoration:none; border-bottom:1px solid currentColor; }
@media (max-width:760px){ .pour-grid{ grid-template-columns:1fr; gap:44px; } .stage{ max-width:250px; } }

/* a bottle on the shelf, a glass beside it. Tap: it lifts, tips and pours */
.bottle{ --wine:#4A0A12; --glass:#0F150F; position:relative; text-align:left; cursor:pointer; background:none; border:0; padding:0;
  color:var(--cream); font:inherit; display:flex; flex-direction:column; gap:14px; }
.bottle[data-kind="white"]{ --wine:#E9D27A; --glass:#25331B; }
.bottle[data-kind="sparkling"]{ --wine:#F0DC94; --glass:#16210F; }
.bottle[data-kind="orange"]{ --wine:#D9822B; --glass:#2A1E0E; }
.bottle[data-kind="rose"]{ --wine:#F2A39A; --glass:#3B2420; }
.stage{ width:100%; height:auto; display:block; border-bottom:1px solid rgba(238,227,209,.5); }
.stage .btl{ transform:translate(62px,63px) rotate(0deg); }
.stage .gb{ fill:var(--glass); }
.stage .foil{ fill:var(--black); }
.stage .shine{ fill:rgba(255,255,255,.16); }
.stage .label{ fill:var(--cream); }
.stage .lk{ font-family:var(--display); font-style:italic; font-stretch:78%; font-size:10px; fill:#1A1210; text-anchor:middle; }
.stage .lm{ font-family:var(--ui); font-size:5px; letter-spacing:.9px; fill:#1A1210; text-anchor:middle; }
.stage .lr{ stroke:var(--red); stroke-width:.8; }
.stage .bowl, .stage .stem{ fill:rgba(255,255,255,.06); stroke:var(--cream); stroke-width:1.4; }
.stage .stem{ fill:none; }
.stage .wine{ fill:var(--wine); transform:translateY(74px); transition:transform .9s ease; }
.stage .stream{ fill:var(--wine); transform-box:fill-box; transform-origin:50% 0; transform:scaleY(0); }
.stage .bub circle{ fill:rgba(255,255,255,.75); opacity:0; }
.bottle.pour .btl{ animation:tip 3.2s var(--ease) forwards; }
.bottle.pour .stream{ animation:stream 3.2s linear forwards; }
.bottle.pour .wine{ transform:translateY(26px); transition:transform 1.5s cubic-bezier(.3,.6,.3,1) .95s; }
.bottle.pour .bub circle{ animation:bub 2.4s ease-in 2.4s infinite; }
.bottle.pour .bub circle:nth-child(2){ animation-delay:2.9s; } .bottle.pour .bub circle:nth-child(3){ animation-delay:3.4s; }
.bottle.pour .bub circle:nth-child(4){ animation-delay:3.8s; }
@keyframes tip{ 0%{ transform:translate(62px,63px) rotate(0deg); } 26%{ transform:translate(158px,128px) rotate(106deg); }
  70%{ transform:translate(158px,128px) rotate(114deg); } 100%{ transform:translate(62px,63px) rotate(0deg); } }
@keyframes stream{ 0%,27%{ transform:scaleY(0); opacity:1; } 34%{ transform:scaleY(1); } 66%{ transform:scaleY(1); opacity:1; } 74%,100%{ transform:scaleY(1); opacity:0; } }
@keyframes bub{ 0%{ opacity:0; transform:translateY(0); } 20%{ opacity:1; } 100%{ opacity:0; transform:translateY(-44px); } }
.bottle .k{ font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; opacity:.85; }
.bottle .wn{ display:block; font-family:var(--display); margin:4px 0 2px; font-size:clamp(30px,2.7vw,40px); font-weight:700; font-stretch:62.5%; line-height:1; }
.bottle .maker{ font-style:italic; font-size:19px; }
.bottle .note{ font-family:var(--ui); font-size:15px; line-height:1.6; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .8s ease, opacity .6s ease; }
.bottle.pour .note{ max-height:10em; opacity:1; transition:max-height .8s ease 1.6s, opacity .8s ease 1.8s; }
.bottle .hint{ align-self:flex-start; font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  border:1px solid rgba(238,227,209,.6); padding:9px 16px; }
.bottle:hover .hint{ background:var(--cream); color:var(--red); }
.bottle:focus-visible{ outline-offset:8px; }
@media (prefers-reduced-motion:reduce){ .bottle.pour .wine{ transition:none; } }

/* form fields, shared by the club and the events enquiry */
.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ font-family:var(--ui); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--cream-dim); }
.field input, .field select, .field textarea{ font-family:var(--ui); font-size:16px; color:var(--cream); background:transparent; border:0;
  border-bottom:1px solid rgba(238,227,209,.4); padding:12px 0; border-radius:0; min-height:48px; width:100%; }
.field textarea{ resize:vertical; min-height:90px; }
.field select option{ color:#1A1210; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--red); }
.consent{ grid-column:1/-1; display:flex; gap:12px; align-items:flex-start; font-family:var(--ui); font-size:13px; line-height:1.5; color:var(--cream-dim); cursor:pointer; padding:6px 0; }
.consent input{ width:20px; height:20px; margin:0; accent-color:var(--red); flex:0 0 auto; }

/* the club: a page torn from the wine list, cream paper and the leopard */
.club{ background:#F1E6D3; color:#1A1210; padding:clamp(80px,10vw,140px) var(--pad); position:relative; }
.club-in{ max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(30px,6vw,90px); align-items:center; }
.club-art{ margin:0; }
.club-art img{ width:100%; height:auto; }
.club .eyebrow{ color:var(--red); }
.club h2{ font-size:clamp(58px,8.6vw,132px); color:var(--logo-red); line-height:.86; }
.club-lede{ font-family:var(--display); font-style:italic; font-stretch:78%; font-size:clamp(22px,2.2vw,30px); margin:18px 0 22px; }
.club-perks{ list-style:none; margin:0 0 34px; padding:0; font-size:16px; line-height:1.5; }
.club-perks li{ padding:11px 0 11px 26px; border-top:1px solid rgba(26,18,16,.18); position:relative; }
.club-perks li:last-child{ border-bottom:1px solid rgba(26,18,16,.18); }
.club-perks li::before{ content:""; position:absolute; left:2px; top:50%; width:8px; height:8px; border-radius:50%; background:var(--red); transform:translateY(-50%); }
.club-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.club .field span{ color:rgba(26,18,16,.7); }
.club .field input{ color:#1A1210; border-bottom-color:rgba(26,18,16,.45); }
.club .consent{ color:rgba(26,18,16,.75); }
.btn-ink{ background:var(--red); color:#F6EEDD; border-color:var(--red); }
.btn-ink:hover{ background:#1A1210; border-color:#1A1210; }
.club-form .btn{ grid-column:1/-1; justify-self:start; }
.club-msg{ grid-column:1/-1; font-family:var(--ui); font-size:14px; min-height:1.4em; color:var(--red); font-weight:500; }
@media (max-width:760px){ .club-in{ grid-template-columns:1fr; } .club-art{ max-width:340px; margin:0 auto -10px; }
  .club-form{ grid-template-columns:1fr; } .club-form .btn{ width:100%; } }

/* ------------------------------------------------------------------ cakes */
.cakes{ background:var(--black-2); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr); gap:clamp(34px,6vw,96px); align-items:center;
  padding:clamp(80px,11vw,150px) max(var(--pad), calc((100vw - var(--max)) / 2)); }
.cakes h2{ font-size:clamp(40px,5.4vw,76px); }
.cakes-copy > p{ margin:24px 0 28px; font-size:clamp(18px,1.5vw,21px); color:var(--cream); opacity:.88; max-width:38ch; }
.cakes-copy .btn{ margin-top:30px; }
.cakes-art{ margin:0; justify-self:center; max-width:360px; padding:14px; background:#F6EEDD; transform:rotate(2deg); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.cakes-art img{ width:100%; height:auto; }
.prices{ list-style:none; margin:0; padding:0; font-family:var(--ui); }
.prices li{ display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--cream-faint); }
.prices li:first-child{ border-top:1px solid var(--cream-faint); }
.prices span{ font-size:26px; font-weight:500; }
.prices i{ font-style:normal; font-size:12px; letter-spacing:.14em; color:var(--cream-dim); }
.prices b{ font-weight:500; font-size:15px; font-variant-numeric:tabular-nums; min-width:4.5ch; text-align:right; }
.prices .extra span{ font-size:17px; font-style:italic; color:var(--cream-dim); }
@media (max-width:760px){ .cakes{ grid-template-columns:1fr; } .cakes-copy .btn{ width:100%; } .cakes-art{ max-width:260px; order:-1; } }

/* ------------------------------------------------------- birthdays teaser */
.feste-full{ min-height:86vh; }
.feste-full figcaption{ max-width:calc(var(--max) + 2*var(--pad)); width:100%; margin-inline:auto; }
.feste-full h2{ font-size:clamp(52px,8vw,124px); }
.feste-full p{ font-size:clamp(18px,1.6vw,22px); max-width:34ch; margin:18px 0 28px; }
.feste-full .eyebrow{ color:var(--cream); }

/* --------------------------------------------------------- before you ask */
.ask{ background:var(--oxblood); padding:clamp(80px,10vw,140px) max(var(--pad), calc((100vw - var(--max)) / 2)); position:relative; isolation:isolate; }
.ask::before{ content:""; position:absolute; inset:0; z-index:-1; background:url("img/leopard-swatch.jpg") center / 520px repeat; mix-blend-mode:multiply; opacity:.22; }
.ask h2{ font-size:clamp(48px,7vw,104px); margin-bottom:clamp(30px,4vw,56px); }
.ask-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,56px); }
.ask-grid > div{ border-top:1px solid rgba(238,227,209,.4); padding-top:22px; }
.ask .k{ display:block; font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--logo-red); margin-bottom:12px; }
.ask h3{ font-size:clamp(30px,3vw,42px); margin-bottom:12px; }
.ask p{ font-size:16.5px; line-height:1.65; color:var(--cream); opacity:.9; }
@media (max-width:760px){ .ask-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------- book */


.book{ background:var(--black); padding:clamp(90px,12vw,160px) var(--pad) clamp(90px,12vw,150px); text-align:center; }
.book .eyebrow{ margin-bottom:16px; }
.book-sub{ font-size:clamp(18px,1.6vw,22px); color:var(--cream-dim); margin:22px auto 40px; max-width:34ch; }
.week{ display:flex; justify-content:center; gap:8px; margin:0 auto 34px; max-width:900px; overflow-x:auto; scrollbar-width:none;
  padding:2px 2px 8px; scroll-snap-type:x proximity; }
.week::-webkit-scrollbar{ display:none; }
.week a{ flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-width:96px; min-height:84px; padding:14px 12px; border:1px solid rgba(238,227,209,.26); text-decoration:none; color:var(--cream);
  transition:background .25s var(--ease), border-color .25s var(--ease); }
.week a:hover{ background:var(--red); border-color:var(--red); }
.week .d{ font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--cream-dim); }
.week .n{ font-size:32px; line-height:1; font-weight:600; }
.week a:hover .d{ color:var(--cream); }
.week a.today{ border-color:var(--cream); }
@media (max-width:760px){ .week{ justify-content:flex-start; margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); }
  .week a{ min-width:84px; } .book .btn-big{ width:100%; max-width:340px; } }
.smallprint a{ color:var(--cream); }
.smallprint{ margin:26px auto 0; max-width:44ch; font-family:var(--ui); font-size:12.5px; color:var(--cream-dim); line-height:1.6; }

/* ------------------------------------------------------------------- find */
.find{ background:var(--black-2); border-top:1px solid var(--cream-faint); padding:clamp(48px,7vw,86px) var(--pad) 26px; font-family:var(--ui); }
.find-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,4vw,54px); max-width:var(--max); margin-inline:auto; }
.find-mark{ width:160px; }
.find h3{ font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--red); margin:0 0 12px; }
.find p{ font-size:14.5px; line-height:1.9; color:var(--cream-dim); }
.find a{ text-decoration:none; } .find a:hover{ color:var(--cream); }
.find-base{ display:flex; justify-content:space-between; max-width:var(--max); margin:clamp(32px,5vw,56px) auto 0; padding-top:20px;
  border-top:1px solid var(--cream-faint); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(238,227,209,.45); }
.find-base a{ color:var(--red); text-decoration:none; }
@media (max-width:900px){ .find-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .find{ padding-bottom:calc(110px + var(--safe-b)); } }
@media (max-width:520px){ .find-grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------- the button that follows */
.float{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + var(--safe-b)); z-index:60; display:none; white-space:nowrap;
  background:var(--cream); color:var(--black); text-decoration:none; font-family:var(--ui); padding:17px 40px; min-height:52px;
  font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; box-shadow:0 10px 36px rgba(0,0,0,.6); transition:opacity .3s ease; }
.float.hide{ opacity:0; pointer-events:none; }
@media (max-width:900px){ .float{ display:block; } }

/* -------------------------------------------------------------- arrive-in */
.rise{ opacity:0; transform:translateY(22px); transition:opacity 1s ease, transform 1s var(--ease); }
.rise.in{ opacity:1; transform:none; }

/* ======================================================= birthdays & events */
.ev-hero{ min-height:92vh; min-height:92svh; }
.ev-hero-in{ text-align:left; max-width:calc(var(--max) + 2*var(--pad)); margin-inline:auto; }
.ev-hero h1{ font-size:clamp(60px,10vw,160px); line-height:.86; margin-bottom:14px; }
.ev-hero .eyebrow{ color:var(--cream); }
.ev-hero .hero-line{ margin-bottom:28px; }
.ev-intro{ background:var(--black); padding:clamp(70px,9vw,130px) var(--pad); }
.ev-intro p{ max-width:28ch; margin-inline:auto; text-align:center; font-family:var(--display); font-style:italic; font-stretch:78%;
  font-size:clamp(26px,3vw,42px); line-height:1.25; }
.ev-packs{ background:var(--black-2); padding:clamp(70px,9vw,130px) var(--pad); }
.ev-packs-in{ max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); }
.pack{ display:flex; flex-direction:column; gap:12px; }
.pack img{ width:100%; aspect-ratio:4/5; object-fit:cover; margin-bottom:10px; }
.pack .k{ font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--logo-red); }
.pack h2{ font-size:clamp(40px,4.4vw,62px); }
.pack p{ font-size:16.5px; line-height:1.6; color:var(--cream); opacity:.9; }
.pack ul{ list-style:none; margin:4px 0 14px; padding:0; font-size:14.5px; color:var(--cream-dim); flex:1; }
.pack li{ padding:9px 0; border-top:1px solid var(--cream-faint); }
.pack .btn{ align-self:flex-start; }
.ev-packs-note{ max-width:var(--max); margin:clamp(34px,4vw,54px) auto 0; font-family:var(--display); font-style:italic; font-stretch:78%; font-size:clamp(20px,1.8vw,24px); }
@media (max-width:900px){ .ev-packs-in{ grid-template-columns:1fr; max-width:520px; } .pack .btn{ width:100%; } }
.ev-strip{ background:var(--black-2); padding-top:0; }
.enquire{ background:var(--black); padding:clamp(80px,10vw,140px) var(--pad); }
.enquire-in{ max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,6vw,90px); align-items:start; }
.enquire h2{ font-size:clamp(48px,6.4vw,96px); }
.enquire-copy p{ margin-top:22px; font-size:clamp(18px,1.5vw,21px); color:var(--cream); opacity:.88; max-width:32ch; }
.enquire-copy a{ color:var(--cream); }
.enquire-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.enquire-form .wide, .enquire-form .btn, .enquire-form .club-msg{ grid-column:1/-1; }
.enquire-form .btn{ justify-self:start; }
.enquire-form .club-msg{ color:var(--cream); }
.field input[type="date"]{ color-scheme:dark; }
@media (max-width:760px){ .enquire-in, .enquire-form{ grid-template-columns:1fr; } .enquire-form .btn{ width:100%; } }

/* ----------------------------------------------- house rules, under the hero */
.rules{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 0; padding:17px var(--pad); background:var(--black);
  border-bottom:1px solid var(--cream-faint); text-decoration:none; font-family:var(--ui); font-size:11px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cream); }
.rules span{ display:inline-flex; align-items:center; }
.rules span + span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--logo-red); margin:0 1.4em; }
.rules:hover{ color:var(--logo-red); }
@media (max-width:420px){ .rules{ font-size:9.5px; letter-spacing:.2em; } .rules span + span::before{ margin:0 .9em; } }

/* ------------------------------------------- the full wine list, on the red */
.lista{ background:var(--black); max-width:var(--max); margin:0 auto; padding:clamp(34px,5vw,64px); position:relative; top:clamp(-30px,-3vw,-10px); }
@media (min-width:761px){ .lista{ margin-inline:max(var(--pad), calc((100vw - var(--max)) / 2)); } }
.lista-head{ margin-bottom:22px; }
.lista h3{ font-size:clamp(40px,5vw,72px); }
.lista-head .menu-note{ margin-top:12px; }
.lista-foot{ margin-top:28px; font-family:var(--display); font-style:italic; font-stretch:78%; font-size:20px; }
.lista-foot a{ color:var(--cream); }
.pour-head .eyebrow{ color:var(--cream); opacity:.85; margin-bottom:8px; }
.pour-foot{ margin-top:clamp(30px,4vw,50px); }
.dish.fav h4{ color:var(--logo-red); }
.dish .tag{ border:1px solid var(--red); padding:3px 7px 2px; }
.menu-note a{ color:var(--cream); }
@media (max-width:760px){ .lista{ margin:0 12px; padding:30px 20px; } }

/* --------------------------------------------------------- il guardaroba */
.guardaroba{ background:var(--black-2); padding:clamp(80px,10vw,140px) max(var(--pad), calc((100vw - var(--max)) / 2)); }
.guard-head{ max-width:640px; margin-bottom:clamp(30px,4vw,56px); }
.guard-head h2{ font-size:clamp(46px,6.4vw,96px); }
.guard-head p{ margin-top:20px; font-size:clamp(18px,1.5vw,21px); color:var(--cream); opacity:.88; max-width:38ch; }
.guard-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,32px); }
.piece{ background:var(--oxblood); padding:clamp(20px,3vw,40px); position:relative; isolation:isolate; overflow:hidden; }
.piece::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 50% at 50% 40%, rgba(239,53,35,.22), transparent 70%); }
.piece-art{ width:100%; max-width:380px; display:block; margin:0 auto 18px; transition:transform 1s var(--ease); }
.piece:hover .piece-art{ transform:rotate(-3deg) scale(1.03); }
.piece h3{ font-size:clamp(30px,3vw,42px); }
.piece p{ font-size:16px; color:var(--cream-dim); margin-top:6px; }
.guard-cta{ display:flex; align-items:center; gap:22px; margin-top:clamp(28px,4vw,44px); flex-wrap:wrap; }
.guard-cta span{ font-family:var(--display); font-style:italic; font-stretch:78%; font-size:20px; }
@media (max-width:640px){ .guard-grid{ grid-template-columns:1fr; } .guard-cta .btn{ width:100%; } }
.pizza-note .wink{ display:block; margin-top:2px; font-family:var(--display); font-style:italic; font-stretch:78%; font-size:17px; color:var(--logo-red); }

/* ------------------------------------------------- the shop: buy and bag */
.buy{ margin-top:18px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.buy-price{ font-family:var(--display); font-stretch:72%; font-weight:600; font-size:28px; }
.buy-price i{ font-family:var(--ui); font-style:normal; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#F3C64A; margin-left:8px; vertical-align:middle; }
.sizes{ display:flex; gap:8px; flex-wrap:wrap; }
.sizes button{ min-width:48px; min-height:44px; padding:0 12px; background:none; color:var(--cream); border:1px solid rgba(238,227,209,.4);
  font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.12em; cursor:pointer; }
.sizes button[aria-checked="true"]{ background:var(--cream); color:var(--black); border-color:var(--cream); }
.sizes button:disabled{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }
.buy .btn:disabled{ opacity:.4; cursor:not-allowed; }
.buy-msg{ font-size:13px; color:var(--logo-red); min-height:1em; }
#bagopen b{ margin-left:8px; font-weight:600; }

.bag{ position:fixed; inset:0; z-index:75; background:rgba(11,8,7,.6); display:flex; justify-content:flex-end; }
.bag-in{ width:min(460px,100%); height:100%; overflow-y:auto; background:var(--black-2); border-left:1px solid var(--cream-faint);
  padding:26px clamp(20px,4vw,34px) calc(30px + var(--safe-b)); animation:slidein .45s var(--ease); }
@keyframes slidein{ from{ transform:translateX(30px); opacity:0; } }
.bag-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.bag-top h2{ font-size:44px; }
.bag-x{ background:none; border:0; color:var(--cream); font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; cursor:pointer; min-height:44px; }
.bag-line{ display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--cream-faint); }
.bag-line b{ display:block; font-family:var(--display); font-stretch:72%; font-weight:600; font-size:22px; }
.bag-line span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim); }
.bag-line em{ font-style:normal; font-variant-numeric:tabular-nums; font-size:15px; min-width:5ch; text-align:right; }
.qty{ display:flex; align-items:center; gap:2px; }
.qty button{ width:36px; height:36px; background:none; border:1px solid rgba(238,227,209,.3); color:var(--cream); font-size:16px; cursor:pointer; }
.qty span{ min-width:26px; text-align:center; font-variant-numeric:tabular-nums; }
.bag-empty{ color:var(--cream-dim); padding:14px 0; }
.bag-total{ display:flex; justify-content:space-between; align-items:baseline; padding:18px 0 26px; font-family:var(--display); font-stretch:72%; font-size:26px; }
.bag-form{ display:grid; gap:16px; }
.bag-note{ font-size:14px; line-height:1.55; color:var(--cream); opacity:.85; }
.bag-form .btn{ width:100%; }
.bag-form .btn:disabled{ opacity:.6; }
.bag-fine{ font-size:12px; color:var(--cream-dim); }

/* film prints: real snapshots, shown at their own shape with a lab-print border */
.strip.prints{ padding-top:14px; align-items:center; }
.strip.prints img{ width:auto; height:clamp(280px,32vw,440px); aspect-ratio:auto; object-fit:contain; padding:9px; background:#F3ECDF;
  box-shadow:0 18px 40px rgba(0,0,0,.45); transform:rotate(-1.2deg); }
.strip.prints img:nth-child(even){ transform:rotate(1deg) translateY(10px); }
.strip.prints img:nth-child(3n){ transform:rotate(-.4deg) translateY(-6px); }
@media (max-width:760px){ .strip.prints img{ width:auto; height:62vw; max-height:380px; } }

/* ==========================================================================
   RED AND CREAM (13 Oct 2026). The brand is the printed menu and the room:
   cream paper with red type, red walls. Black is kept for the night moments
   only: the hero, the definition with the leopard, the full-screen photos.
   Sections opt in with .paper or .rouge, which re-point the colour tokens so
   every component inside follows without its own rules.
   ========================================================================== */
:root{ --paper:#F1E6D3; --ink:#1A1210; }
.paper{ --cream:#1A1210; --cream-dim:rgba(26,18,16,.7); --cream-faint:rgba(26,18,16,.14);
  background:var(--paper) !important; color:var(--ink); }
.rouge{ --cream:#F6EEDD; --cream-dim:rgba(246,238,221,.82); --cream-faint:rgba(246,238,221,.3);
  background:var(--red) !important; color:#F6EEDD; }
/* photographs stay in night colours wherever they sit */
.full{ --cream:#EEE3D1; --cream-dim:rgba(238,227,209,.64); --cream-faint:rgba(238,227,209,.12); color:#EEE3D1; }

.paper .btn{ background:var(--red); border-color:var(--red); color:#F6EEDD; }
.paper .btn:hover{ background:var(--ink); border-color:var(--ink); color:#F6EEDD; }
.paper .btn-line{ background:transparent; color:var(--ink); border-color:rgba(26,18,16,.4); }
.paper .btn-line:hover{ background:var(--red); border-color:var(--red); color:#F6EEDD; }
.paper .field input, .paper .field select, .paper .field textarea{ border-bottom-color:rgba(26,18,16,.4); }
.paper .field input[type="date"]{ color-scheme:light; }
.paper .week a{ border-color:rgba(26,18,16,.24); }
.paper .week a:hover, .paper .week a:hover .d{ color:#F6EEDD; }
.paper .club-msg{ color:var(--red); }

.rouge .eyebrow, .rouge .k{ color:#F6EEDD; opacity:.85; }
.rouge .btn:hover, .rouge .btn-line:hover{ background:var(--ink); border-color:var(--ink); color:#F6EEDD; }
.rouge .btn-line{ border-color:rgba(246,238,221,.6); }
.rouge .pizza-note .wink{ color:#F6EEDD; }
.rouge .prices .extra span{ color:var(--cream-dim); }
.rouge.rules:hover{ color:var(--ink); }

/* the pizza on red: the leopard print reads as a darker red, no black vignette */
.pizza.rouge::before{ opacity:.2; }
.pizza.rouge::after{ background:radial-gradient(70% 70% at 30% 50%, transparent 35%, rgba(70,8,6,.35) 100%); }
.pizza.rouge .pizza-img::before{ background:radial-gradient(closest-side, rgba(40,4,2,.35), transparent); }
.pizza-note .crust{ outline-color:rgba(246,238,221,.5); }

/* the room on red: film prints on the wall */
.sala.rouge .sala-sub{ color:#F6EEDD; opacity:.9; }

/* the wine list is the printed list: cream paper inside the red cantina */
.lista.paper{ box-shadow:0 30px 70px rgba(60,6,4,.35); }
.lista.paper .dish.fav h4{ color:var(--red); }

/* the frame around everything */
.bar-solid{ background:rgba(46,9,7,.94); }
.find{ background:var(--oxblood); }
.ev-strip.rouge{ padding-top:14px; }
/* as on the printed menu: red headings on the cream */
.paper h2, .paper .lista-head h3, .lista.paper h3{ color:var(--logo-red); }
.paper .pair-copy{ color:var(--ink); }
.float{ background:var(--red); color:#F6EEDD; border:1px solid rgba(246,238,221,.55); }

/* black returns further down: the house rules mid-page and the footer at the end */
/* the house rules on a deeper cream, red labels, a whisper of leopard */
.ask.paper{ background:#E9DBC3 !important; border-top:1px solid rgba(26,18,16,.12); }
.ask.paper::before{ mix-blend-mode:multiply; opacity:.045; }
.ask.paper .k{ color:var(--red); opacity:1; }
.ask.paper .ask-grid > div{ border-top-color:rgba(26,18,16,.25); }
.ask.paper p{ color:var(--ink); opacity:.85; }
/* black is an accent, not the base: the frame of the page is red */
.find{ background:var(--red); --cream:#F6EEDD; --cream-dim:rgba(246,238,221,.85); --cream-faint:rgba(246,238,221,.3); color:#F6EEDD; }
.find h3, .find-base a{ color:#F6EEDD; }
.find-base{ color:rgba(246,238,221,.7); }
.bar-solid{ background:rgba(178,26,19,.96); border-color:rgba(246,238,221,.18); }
.bar-solid .btn-line:hover{ background:var(--ink); border-color:var(--ink); }
.sheet{ background:rgba(178,26,19,.98); }
.sheet .btn{ background:#F6EEDD; color:var(--red); border-color:#F6EEDD; }
body{ background:var(--paper); }

/* ================================================================= contact */
.ct-hero{ min-height:78vh; min-height:78svh; }
.ct-hero h1{ font-size:clamp(60px,10vw,150px); line-height:.86; margin-bottom:14px; }
.ct-hero .eyebrow{ color:#F6EEDD; }
.ct-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.ct-info{ padding:clamp(70px,9vw,130px) max(var(--pad), calc((100vw - var(--max)) / 2)); }
.ct-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,56px); }
.ct-grid > div{ border-top:1px solid rgba(26,18,16,.25); padding-top:22px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.ct-grid .k{ font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--red); }
.ct-grid h2{ font-size:clamp(40px,4.4vw,62px); }
.ct-grid p{ font-size:17px; line-height:1.7; }
.ct-grid p a{ color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(26,18,16,.3); }
.ct-grid p a:hover{ color:var(--red); border-color:var(--red); }
.ct-map{ background:var(--paper); line-height:0; }
.ct-map iframe{ width:100%; height:clamp(320px,45vw,480px); border:0; filter:sepia(.25) saturate(.9) contrast(1.02); }
@media (max-width:760px){ .ct-grid{ grid-template-columns:1fr; } .ct-btns .btn{ flex:1 1 100%; } }

/* the cursor wears a cream ring, so it shows on red as well as on cream and black */
.cursor{ box-shadow:0 0 0 2px #F6EEDD, 0 0 0 3px rgba(26,18,16,.18); }
.cursor.on{ box-shadow:0 0 0 1px #F6EEDD, inset 0 0 0 1px #F6EEDD; }

/* La Festa is the premium one: framed in cream on the red */
.pack-signature{ outline:1px solid rgba(246,238,221,.7); outline-offset:14px; position:relative; }
.pack-signature .k::after{ content:"Signature"; margin-left:10px; padding:3px 8px 2px; border:1px solid currentColor; font-size:9px; letter-spacing:.24em; color:#F6EEDD; }
@media (max-width:900px){ .pack-signature{ outline-offset:10px; } }

.pack-price{ font-family:var(--display) !important; font-style:italic; font-stretch:78%; font-size:22px !important; opacity:1 !important; margin-top:-4px; }

/* four packages: two by two */
.ev-packs-4{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:980px; gap:clamp(34px,4vw,56px) clamp(24px,3vw,44px); }
.ev-packs-4 .pack img{ aspect-ratio:4/3; }
.ev-packs-4 .pack-signature img{ aspect-ratio:4/3; object-position:center 60%; }
.ev-good{ max-width:980px; margin:clamp(44px,5vw,64px) auto 0; display:grid; grid-template-columns:1.4fr 1fr; gap:24px clamp(24px,3vw,44px);
  border-top:1px solid rgba(246,238,221,.4); padding-top:24px; }
.ev-good .k{ font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:#F6EEDD; opacity:.85; }
.ev-good p{ margin-top:8px; font-size:16px; line-height:1.65; }
@media (max-width:900px){ .ev-packs-4, .ev-good{ grid-template-columns:1fr; max-width:520px; } }

/* the hero photo stays behind; the words and the button sit above it and take the clicks */
.hero picture{ z-index:-2; }
.hero-in{ position:relative; z-index:1; }

/* Tutto Libertino: two spaces inside one card */
.opts{ display:flex; gap:6px; margin:2px 0 4px; flex-wrap:wrap; }
.opts button{ font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding:10px 14px; min-height:42px;
  background:transparent; color:#F6EEDD; border:1px solid rgba(246,238,221,.5); cursor:pointer; }
.opts button[aria-selected="true"]{ background:#F6EEDD; color:var(--red); border-color:#F6EEDD; }
.opt{ display:flex; flex-direction:column; gap:12px; }
.ev-good{ max-width:var(--max); }

/* Later: the disco ball turns. The photo stays still; the light moves. */
.disco-fig img{ height:100%; }
.disco-fig picture{ inset:0; }
.disco-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; mix-blend-mode:screen; }

/* ============================================================= phones only */
/* the leopard: in full view under the words, the light opens as you scroll */
.spirit.touch .spirit-light{
  -webkit-mask:radial-gradient(circle at 52% 34%, #000 var(--rv,6%), rgba(0,0,0,.55) calc(var(--rv,6%) + 12%), transparent calc(var(--rv,6%) + 30%)) !important;
          mask:radial-gradient(circle at 52% 34%, #000 var(--rv,6%), rgba(0,0,0,.55) calc(var(--rv,6%) + 12%), transparent calc(var(--rv,6%) + 30%)) !important;
  opacity:1; }
@media (max-width:760px){
  .spirit.touch{ padding-bottom:calc(112vw + 30px); }
  .spirit.touch .spirit-light{ right:4vw; left:4vw; width:auto; bottom:-6vw; }
}
/* the floating button tucks away while reading down */
.float{ transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.float.tuck{ transform:translate(-50%, 160%); }
/* course tabs stay pinned while you scroll a long list */
.menu .tabs, .lista .tabs{ position:sticky; top:calc(var(--barH, 60px) - 1px); z-index:6; background:var(--paper); margin-inline:-6px; padding-inline:6px; }

/* ===================================================== phones, round two */
/* the wine leopard melts into the paper instead of stopping on a hard line */
.club-art img{ -webkit-mask:linear-gradient(180deg, #000 80%, transparent 99%); mask:linear-gradient(180deg, #000 80%, transparent 99%); }
.club-perks li::before{ top:calc(11px + .78em); }
@media (max-width:760px){
  /* the pizza sits whole on the page, not spilling off it */
  .pizza{ padding-bottom:64px; }
  .pizza-img{ margin:26px auto 0; width:84%; }
  .pizza-cut{ width:100%; margin-left:0; }
  /* the spaghetti leopard fades into the night instead of being sliced off */
  .spirit::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:52vw; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(11,8,7,0), rgba(11,8,7,.75) 55%, var(--black) 80%); }
  /* the cantina photo as a print on the red, like the ones in La Sala */
  .cantina-img{ display:block; padding:0 var(--pad) 8px; }
  .cantina-img img{ padding:9px; background:#F3ECDF; box-shadow:0 18px 40px rgba(40,4,2,.35); transform:rotate(-1deg); }
  /* the toast: faces stay clear, words sit low on a deeper shadow */
  .feste-full{ min-height:100vh; min-height:100svh; background:#1C0B09; }
  .feste-full picture{ inset:0 0 28% 0; }
  .feste-full img{ height:100%; transform:none !important; object-position:center 30%; }
  .feste-full::after{ background:linear-gradient(180deg, rgba(11,8,7,.2), rgba(11,8,7,0) 22%, rgba(11,8,7,0) 42%, #1C0B09 72%); }
}
.pack .pack-note{ font-size:13px; line-height:1.5; color:var(--cream-dim); margin:-4px 0 18px; }

/* the baker's cakes, as prints under the price list */
.cakes .cake-strip{ grid-column:1/-1; margin-inline:calc(-1 * max(var(--pad), calc((100vw - var(--max)) / 2))); padding-inline:max(var(--pad), calc((100vw - var(--max)) / 2)); padding-bottom:18px; }
.cakes .cake-strip img{ height:clamp(260px,28vw,380px); }
.paper .cake-strip img{ background:#FBF7EF; box-shadow:0 14px 34px rgba(60,20,10,.18); }

/* ---------------------------------------------- search pages: menu, pizza, stadium */
.sub-hero{ min-height:64vh; min-height:64svh; }
.sub-hero h1{ font-size:clamp(52px,8.5vw,128px); }
.menu-page .menu-col{ max-width:760px; margin:0 auto; }
.menu-page .dish-head{ margin-top:56px; }
.menu-page .dish-head:first-child{ margin-top:0; }
.menu-title{ font-size:clamp(40px,5.4vw,76px); margin-bottom:6px; color:var(--logo-red); }
.menu-intro{ font-family:var(--ui); font-size:15px; line-height:1.6; color:var(--cream-dim); margin:6px 0 4px; }
.menu-more{ margin-top:30px; font-family:var(--ui); font-size:15px; }
.menu-more a{ color:inherit; text-decoration:underline; text-underline-offset:4px; }
.sub-cta{ text-align:center; }
.sub-cta p{ margin:12px auto 26px; max-width:40ch; }
.find-links{ display:flex; gap:22px; flex-wrap:wrap; }
.sub-pizza .pizza-text{ align-self:center; }
/* the search pages are only linked quietly from the footer */
.find-links a{ opacity:.55; font-size:.92em; }
.find-links a:last-child{ opacity:1; font-size:1em; }
@media (max-width:760px){ .find-base{ flex-direction:column; align-items:flex-start; gap:14px; } .find-links{ gap:12px 18px; } }
/* busy photos behind the words on the search pages: a deeper wash so the text reads cleanly */
.sub-hero .hero-wash{ background:linear-gradient(180deg, rgba(11,8,7,.45) 0%, rgba(11,8,7,.55) 40%, rgba(11,8,7,.88) 100%); }
/* the heading always starts well clear of the top bar */
.sub-hero{ min-height:84vh; min-height:84svh; padding-top:calc(var(--barH, 64px) + 56px); }
.sub-hero h1{ font-size:clamp(48px,7vw,110px); }