/* ============================================================
   MONEY CLUB MILANO — design system
   Ink / Bone / Brass. One accent. No pure black. No Inter.
   ============================================================ */
:root{
  color-scheme: dark;

  --ink:      #0B0B0C;
  --onyx:     #111113;
  --coal:     #17171A;
  --slate:    #232327;

  --bone:     #EDE9E1;
  --ash:      #A39C8E;   /* 5.99:1 on --ink */
  --ash-dim:  #8F897D;   /* 4.67:1 on --ink */

  --brass:    #C9A24B;
  --brass-lo: #8C6E2C;
  --brass-hi: #E3C57F;

  --line:     transparent;
  --line-str: transparent;

  /* beige/ottone in gradiente — sostituisce il beige piatto */
  --grad:      linear-gradient(102deg, #7E6026 0%, #C9A24B 22%, #F2DEAE 50%, #C9A24B 76%, #8C6E2E 100%);
  --grad-soft: linear-gradient(100deg, #C9A24B 0%, #F2DEAE 46%, #C9A24B 100%);

  /* superfici al posto delle righe */
  --surf:   rgba(237,233,225,.045);
  --surf-2: rgba(237,233,225,.085);

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --ui: "Montserrat", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1440px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background: var(--brass); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- grain: fixed, pointer-events none, never on scrollers ---------- */
.grain{
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ---------- shared type ---------- */
.wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gut); }

.label{
  font-family: var(--ui);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ash);
}
.label--brass{ color: var(--brass); }

.display{
  font-family: var(--display);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0;
}
.display em{ font-style: italic; font-weight: 400; }
.display .brass{ color: var(--brass); }

.h-sec{ font-size: clamp(33px, 4.6vw, 66px); }
.lede{
  font-size: clamp(16px, 1.35vw, 19px);
  color: #C4BEB3;
  line-height: 1.62;
  max-width: 56ch;
}
.small{ font-size: 14px; color: var(--ash); line-height:1.65; }

.rule{ height:1px; background: var(--line); border:0; margin:0; }


/* ---------- accento in gradiente ---------- */
.display em, .display .brass, .hero h1 em, .label--brass,
.stat b i, .menu .eur, .fmt__price span b, .cf__cap .day, .partner__t,
.mark__c, .fmt__n span{
  background: var(--grad-soft);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not (background-clip: text){
  .display em, .display .brass, .hero h1 em, .label--brass,
  .stat b i, .menu .eur, .fmt__price span b, .cf__cap .day, .partner__t,
  .mark__c, .fmt__n span{ color: var(--brass); background: none; }
}

/* ---------- buttons ---------- */
.btn{
  position: relative;
  display: inline-flex; align-items:center; gap:12px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .35s var(--ease),
              color .35s var(--ease), border-color .35s var(--ease);
  will-change: transform;
}
.btn svg{ width:14px; height:14px; flex:none; }
.btn--solid{ background: var(--grad); color: #14100A; font-weight: 600; }
.btn--solid:hover{ filter: brightness(1.12); }
.btn--ghost{ background: var(--surf); color: var(--bone); }
.btn--ghost:hover{ background: var(--surf-2); color: var(--brass-hi); }
.btn:active{ transform: scale(.975) translateY(1px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 60;
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck{
  background: rgba(11,11,12,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height: 76px;
}
.mark{ display:flex; align-items:baseline; gap:9px; }
.mark__logo{ height: 30px; width:auto; display:block; opacity:.96; }
.mark__logo--foot{ height: 34px; }
.mark__loc{
  font-weight: 500;
  font-size: 8.5px; letter-spacing:.3em; text-transform:uppercase; color: var(--ash-dim);
  margin-left: 4px; align-self:center;
}
.nav__links{ display:flex; gap: 26px; }
.nav__links a{
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500;
  color: #A9A398;
  position:relative; padding-block: 6px;
  transition: color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav__links a:hover{ color: var(--bone); }
.nav__links a:hover::after{ transform: scaleX(1); }
.nav__cta{ display:flex; align-items:center; gap:16px; }
.nav__tel{ font-size:12px; letter-spacing:.06em; color: var(--ash); transition:color .3s var(--ease); }
.nav__tel:hover{ color: var(--brass); }
.burger{
  display:none; background:none; border:1px solid var(--line); border-radius:999px;
  width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;
}
.burger span{ display:block; width:16px; height:1px; background:var(--bone); position:relative; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:16px; height:1px; background:var(--bone);
  transition: transform .4s var(--ease);
}
.burger span::before{ top:-5px; } .burger span::after{ top:5px; }

.sheet{
  position: fixed; inset:0; z-index:70;
  background: rgba(11,11,12,.97);
  backdrop-filter: blur(20px);
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--gut);
  transform: translateY(-100%);
  transition: transform .7s var(--ease);
}
.sheet.is-open{ transform:none; }
.sheet a{
  font-family: var(--display); font-size: 40px; line-height:1.35; letter-spacing:-.02em;
  color: var(--bone);
}
.sheet a em{ font-style:italic; color: var(--brass); }
.sheet__close{
  position:absolute; top:22px; right: var(--gut);
  background:none; border:1px solid var(--line); border-radius:999px; width:42px;height:42px; cursor:pointer;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
#gl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-2; display:block;
  opacity:0; transition: opacity 1.6s var(--ease);
}
.hero__photo{
  position:absolute; inset:0; z-index:-3;
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  filter: saturate(.80) contrast(1.06) brightness(.76);
  --scrub: 0;
  transform: scale(calc(1.16 - 0.14 * var(--scrub)));
  will-change: transform, filter;
}
#gl.is-live{ opacity:1; }
/* static fallback ground so the hero is never empty */
.hero__fallback{
  position:absolute; inset:0; z-index:-4;
  background:
    radial-gradient(58% 62% at 72% 46%, rgba(201,162,75,.20), transparent 62%),
    radial-gradient(90% 70% at 84% 88%, rgba(140,110,44,.16), transparent 70%),
    linear-gradient(180deg, #0E0E10 0%, #0B0B0C 60%, #08080A 100%);
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(11,11,12,.94) 0%, rgba(11,11,12,.80) 34%, rgba(11,11,12,.18) 62%, rgba(11,11,12,.55) 100%),
    linear-gradient(180deg, rgba(11,11,12,.85) 0%, transparent 26%, transparent 62%, rgba(11,11,12,.92) 100%);
}
.hero__in{
  width:100%; max-width: var(--maxw); margin-inline:auto;
  padding: 148px var(--gut) 118px;
  display:grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: end;
}
.hero__eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom: 30px; }
.hero__eyebrow .dot{ width:5px;height:5px;border-radius:50%;background:var(--brass); flex:none;
  box-shadow:0 0 0 0 rgba(201,162,75,.5); animation: beat 3.2s var(--ease-io) infinite; }
@keyframes beat{ 0%,72%,100%{ box-shadow:0 0 0 0 rgba(201,162,75,.45);} 36%{ box-shadow:0 0 0 7px rgba(201,162,75,0);} }

.hero h1{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(42px, 6.4vw, 96px);
  line-height: .90;
  letter-spacing: -.03em;
  margin: 0 0 30px;
}
.hero h1 em{ font-style: italic; font-weight: 400; color: var(--brass); }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{ display:block; transform: translateY(105%); }
.hero.is-in h1 .ln > span{ transform:none; transition: transform 1.1s var(--ease); }
.hero.is-in h1 .ln:nth-child(2) > span{ transition-delay:.09s; }
.hero.is-in h1 .ln:nth-child(3) > span{ transition-delay:.18s; }

.hero__sub{ max-width: 43ch; font-size: clamp(15px,1.25vw,17.5px); color:#BDB7AC; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 36px; }

.hero__side{ padding-bottom: 8px; will-change: transform, opacity, filter; }
.hero__side dl{ margin:0; display:grid; gap:0; }
.hero__side .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding: 14px 0; border-top:1px solid var(--line);
}
.hero__side dt{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ash-dim);
  font-weight: 500; }
.hero__side dd{ margin:0; font-family: var(--display); font-size: 19px; letter-spacing:-.01em;
  font-variant-numeric: tabular-nums; }
.hero__side dd small{ font-family:var(--ui); font-size:11px; color:var(--ash); letter-spacing:.1em; }

.hero__foot{
  position:absolute; left:0; right:0; bottom:0;
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(11,11,12,.7));
}
.hero__foot .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:58px; }
.scrollcue{ display:flex; align-items:center; gap:10px; color:var(--ash-dim); }
.scrollcue i{
  display:block; width:9px; height:9px; border-right:2px solid var(--brass);
  border-bottom:2px solid var(--brass); transform: rotate(45deg);
  animation: cue 2.2s var(--ease-io) infinite;
}
@keyframes cue{ 0%,100%{ transform: rotate(45deg) translate(0,0); opacity:.45 } 50%{ transform: rotate(45deg) translate(3px,3px); opacity:1 } }


/* ---------- scroll-scrub intro ----------
   A tall track with a sticky hero: scroll position drives the reveal
   instead of the page moving. Native scrolling stays in charge, so the
   visitor is never trapped and keyboard, trackpad and touch all work. */
.hero-track{ position: relative; height: 250vh; }
.hero{ position: sticky; top: 0; height: 100dvh; min-height: 100dvh; }
.hero__in{ will-change: transform; }
#heroCopy{ will-change: transform, opacity, filter; }
.hero__tagline{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding-inline: var(--gut);
  text-align:center; pointer-events:none;
  opacity:0; will-change: transform, opacity, filter;
}
.hero__tagline p{
  font-size: clamp(30px, 4.6vw, 68px); line-height:1.02; margin:0;
  text-shadow: 0 8px 40px rgba(0,0,0,.7);
}
.hero__tagline em{ color: var(--brass); }
.hero__prog{ height:1px; background: rgba(237,233,225,.12); }
.hero__prog i{
  display:block; height:100%; width:100%; transform: scaleX(0); transform-origin: left center;
  background: var(--grad);
}
#scrollcue{ transition: opacity .45s var(--ease); }
@media (max-width: 720px){ .hero-track{ height: 200vh; } }


/* ---------- lockup partner ---------- */
.lam-mark{ height:34px; width:auto; opacity:.90; display:block; }
.hero__partner{
  display:flex; align-items:center; gap:16px; margin-top: 30px;
  padding-top: 20px; border-top:1px solid var(--line); max-width: 430px;
}
.hero__partner .lam-mark{ height:44px; }
.sec-head .lam-head{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.sec-head .lam-head .lam-mark{ height:46px; }
.sec-head .lam-head .label{ margin:0; }

.partner{ border-block:1px solid var(--line); background:#0D0D0F; }
.partner__in{
  display:flex; align-items:center; gap: clamp(24px,4vw,56px);
  padding-block: clamp(34px,5vh,54px);
}
.partner__in .lam-mark{ height:64px; flex:none; }
.partner__t{
  margin:0 0 8px; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color: var(--brass); font-weight: 500;
}
.partner__d{ margin:0; font-size:15px; color:#BDB7AC; line-height:1.6; max-width: 62ch; }
.foot-lam{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.foot-lam .lam-mark{ height:38px; }
.foot-lam span{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ash-dim);
  font-weight: 500; }
@media (max-width: 720px){
  .partner__in{ flex-direction:column; align-items:flex-start; gap:22px; }
  .partner__in .lam-mark{ height:52px; }
  .hero__partner{ max-width:none; }
}


/* ---------- sponsor più in evidenza ---------- */
.nav__lam{ display:flex; align-items:center; gap:12px; margin-left:22px; }
.nav__lam .x{ font-family: var(--display); font-size:15px; color: var(--ash-dim); }
.nav__lam .lam-mark{ height:30px; }
.hero__cobrand{
  display:flex; align-items:center; gap:18px; margin-bottom: 26px;
  background: var(--surf); border-radius: 999px; padding: 10px 22px 10px 18px;
  width: max-content; max-width:100%;
}
.hero__cobrand .lam-mark{ height:46px; }
.partner{ background: #0E0E11; }
.partner__in{ flex-direction: column; text-align:center; align-items:center; gap:26px;
  padding-block: clamp(52px,8vh,92px); }
.partner__in .lam-mark{ height: clamp(78px, 9vw, 118px); opacity:1; }
.partner__d{ font-size: clamp(16px,1.5vw,20px); max-width: 48ch; color:#CFC9BE; }
.partner__t{ font-size:11px; letter-spacing:.32em; }
@media (max-width: 1200px){ .nav__lam{ display:none; } }
@media (max-width: 720px){
  .partner__in{ align-items:center; text-align:center; }
  .hero__cobrand{ gap:14px; padding: 9px 18px 9px 15px; }
  .hero__cobrand .lam-mark{ height:38px; }
}

/* ---------- marquee ---------- */
.marquee{
  border-block:1px solid var(--line);
  overflow:hidden; background: var(--onyx);
  padding-block: 16px;
}
.marquee__t{ display:flex; width:max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__t{ animation-play-state: paused; }
@keyframes slide{ to{ transform: translateX(-50%);} }
.marquee__t span{
  font-family: var(--display); font-size: clamp(20px,2.4vw,34px); font-style:italic; font-weight:400;
  padding-inline: 26px; white-space:nowrap; color:#8E887C;
}
.marquee__t span:nth-child(even){ font-style:normal; color: var(--brass); font-weight:500; }

/* ============================================================
   SECTIONS
   ============================================================ */
section{ position:relative; }
.sec{ padding-block: clamp(88px, 13vh, 168px); }

.sec-head{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.72fr); gap: clamp(28px,5vw,88px); align-items:end; }
.sec-head .label{ display:block; margin-bottom:26px; }

/* -- il luogo -- */
.luogo{ background: linear-gradient(180deg, var(--ink), #0D0D0F); }
.stats{ margin-top: clamp(56px, 9vh, 110px); display:grid; grid-template-columns: repeat(3, 1fr); }
.stat{ border-top:1px solid var(--line); padding: 26px 26px 0 0; }
.stat:not(:first-child){ padding-left: 26px; border-left:1px solid var(--line); }
.stat b{
  display:block; font-family:var(--display); font-weight:500;
  font-size: clamp(38px,5.2vw,72px); line-height:1; letter-spacing:-.03em; color:var(--bone);
}
.stat b i{ font-style:normal; color: var(--brass); font-size:.42em; vertical-align: super; letter-spacing:0; }
.stat p{ margin:14px 0 0; font-size:13px; color:var(--ash); max-width: 24ch; line-height:1.55; }

/* -- format: staggered asymmetric, not three equal cards -- */
.notti{ background: var(--ink); }
.formats{ margin-top: clamp(48px,8vh,96px); display:grid; grid-template-columns: repeat(12,1fr); gap: 4px 32px; }
.fmt{ position:relative; border-top:1px solid var(--line); padding-top: 22px; }
.fmt:nth-child(1){ grid-column: 1 / span 5; }
.fmt:nth-child(2){ grid-column: 7 / span 4; margin-top: clamp(0px, 9vw, 118px); }
.fmt:nth-child(3){ grid-column: 2 / span 6; margin-top: clamp(24px, 5vw, 76px); }
.fmt__n{
  font-family: var(--display); font-size: 13px; letter-spacing:.1em; color: var(--brass);
  display:flex; justify-content:space-between; align-items:baseline;
}
.fmt__n em{ font-style:normal; color:var(--ash-dim); font-family:var(--ui); font-size:10.5px; letter-spacing:.24em; }
.frame{ display:block; overflow:hidden; background: var(--coal); }
.frame > img{ width:100%; height:100%; object-fit:cover; }
.fmt figure{ margin: 20px 0 0; overflow:hidden; background: var(--coal); position:relative; }
.fmt figure .frame{ aspect-ratio: 4/5; }
.fmt figure img{
  transform: scale(1.05);
  transition: transform 1.3s var(--ease), filter .8s var(--ease);
  filter: saturate(.78) contrast(1.05) brightness(.86);
}
.fmt:nth-child(2) figure .frame{ aspect-ratio: 3/4; }
.fmt:nth-child(3) figure .frame{ aspect-ratio: 16/10; }
.fmt:hover figure img{ transform: scale(1); filter: saturate(.92) contrast(1.03) brightness(1); }
figure figcaption{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color: rgba(237,233,225,.55);
  font-weight: 500;
}
.fmt h3{ font-family: var(--display); font-weight:500; font-size: clamp(28px,3.4vw,46px);
  line-height:1; letter-spacing:-.025em; margin: 22px 0 12px; }
.fmt p{ margin:0; font-size:14.5px; color:#B3ADA2; max-width: 34ch; line-height:1.6; }
.fmt__price{
  margin-top:18px; display:flex; flex-wrap:wrap; gap:8px;
}
.fmt__price span{
  border:1px solid var(--line); border-radius:999px; padding: 6px 13px;
  font-size:11px; letter-spacing:.1em; color:#CFC9BE;
  font-weight: 400;
}
.fmt__price span b{ color: var(--brass); font-weight: 600; }

/* -- cucina: zig-zag -- */
.cucina{ background: linear-gradient(180deg,#0D0D0F, var(--ink)); }
.zig{ display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(28px,4vw,64px); align-items:center; }
.zig__media{ grid-column: 1 / span 5; position:relative; }
.zig__media .frame{ aspect-ratio: 4/5; }
.zig__media img{ filter: saturate(.82) contrast(1.06) brightness(.92); }
.zig__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(237,233,225,.10), inset 0 -90px 90px -60px rgba(11,11,12,.9);
}
.zig__body{ grid-column: 7 / span 6; }
.menu{ margin: 38px 0 0; padding:0; list-style:none; }
.menu li{
  display:flex; align-items:baseline; gap: 14px;
  padding: 15px 0; border-top:1px solid var(--line);
}
.menu li:last-child{ border-bottom:1px solid var(--line); }
.menu .dish{ font-family:var(--display); font-size: clamp(19px,1.9vw,25px); letter-spacing:-.015em; }
.menu .dot{ flex:1; border-bottom:1px dotted rgba(237,233,225,.2); transform: translateY(-4px); }
.menu .eur{ font-weight: 500; font-size:14px; color: var(--brass);
  letter-spacing:.04em; font-variant-numeric: tabular-nums; }
.menu .eur.n{ color: var(--ash-dim); font-size:11px; letter-spacing:.2em; text-transform:uppercase; }

/* -- piazza: full bleed parallax -- */
.piazza{ position:relative; min-height: 88vh; display:grid; align-items:center; overflow:hidden; }
.piazza__bg{ position:absolute; inset:-12% 0; z-index:-2; }
.piazza__bg img{ width:100%; height:100%; object-fit:cover;
  filter: saturate(.65) contrast(1.10) brightness(.58); }
.piazza::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.62) 46%, rgba(11,11,12,.35) 100%),
              linear-gradient(180deg, rgba(11,11,12,.9), transparent 30%, transparent 70%, rgba(11,11,12,.9));
}
.piazza__card{ max-width: 620px; }
.specs{ margin:34px 0 0; padding:0; list-style:none; display:grid; gap:0; }
.specs li{ display:flex; gap:16px; align-items:baseline; padding:13px 0; border-top:1px solid var(--line); }
.specs li:last-child{ border-bottom:1px solid var(--line); }
.specs .k{ min-width:130px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ash-dim);
  font-weight: 500; }
.specs .v{ font-size:15px; color:#CFC9BE; }

/* -- eventi -- */
.eventi{ background: var(--ink); }
.eventi .zig__media{ grid-column: 8 / span 5; order:2; }
.eventi .zig__media .frame{ aspect-ratio: 5/6; }
.eventi .zig__body{ grid-column: 1 / span 6; order:1; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.chips span{ border:1px solid var(--line); border-radius:999px; padding:8px 15px; font-size:11.5px;
  letter-spacing:.09em; color:#BDB7AC; }

/* -- prenota -- */
.prenota{ background: linear-gradient(180deg, var(--ink), #0A0A0B); }
.book{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: clamp(36px,6vw,96px); align-items:start; }
form{ display:grid; gap: 22px; margin-top: 44px; max-width: 620px; }
.f-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.field{ display:grid; gap:8px; }
.field label{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ash);
  font-weight: 500; }
.field input, .field select, .field textarea{
  background: transparent; border:0; border-bottom:1px solid var(--line);
  color: var(--bone); font-family: var(--ui); font-size: 15.5px; padding: 10px 0;
  transition: border-color .35s var(--ease);
  border-radius:0;
}
.field select{ appearance:none; background-image:
  linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%);
  background-position: right 6px center, right 1px center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.field select option{ background: var(--coal); color: var(--bone); }
.field textarea{ resize: vertical; min-height: 74px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-bottom-color: var(--brass); }
.field .hint{ font-size:11.5px; color: var(--ash-dim); }
.field .err{ font-size:11.5px; color:#E0785F; min-height:0; display:none; }
.field.is-bad input, .field.is-bad select{ border-bottom-color:#E0785F; }
.field.is-bad .err{ display:block; }
.form-note{ font-size:12px; color: var(--ash-dim); line-height:1.6; }
.form-ok{
  display:none; align-items:center; gap:12px; border:1px solid var(--line-str);
  padding: 15px 18px; border-radius: 4px; background: rgba(201,162,75,.06); font-size:14px;
}
.form-ok.is-on{ display:flex; }
.form-ok svg{ width:17px;height:17px; flex:none; color: var(--brass); }

.contact{ border-top:1px solid var(--line); }
.contact .row{ display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.contact .row .k{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ash-dim);
  font-weight: 500; padding-top:4px; }
.contact .row .v{ text-align:right; font-size:15px; color:#D6D0C5; line-height:1.55; }
.contact .row .v a:hover{ color:var(--brass); }
.hours{ display:grid; gap:5px; justify-items:end; }
.hours i{ font-style:normal; display:grid; grid-template-columns: 92px 118px; font-size:14px;
  text-align:left; font-variant-numeric: tabular-nums; }
.hours i b{ color: var(--ash); font-weight: 400; }

/* ---------- footer ---------- */
footer{ background:#08080A; border-top:1px solid var(--line); padding-block: 54px 34px; }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; }
.foot-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.foot-nav a{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); }
.foot-nav a:hover{ color:var(--brass); }
.foot-bot{ margin-top: 40px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:11.5px; color:var(--ash-dim); }


/* ============================================================
   COVERFLOW — le serate della settimana
   ============================================================ */
.serate{ background: linear-gradient(180deg, var(--ink) 0%, #0E0E11 45%, var(--ink) 100%); overflow:hidden; }
.cf{ --cf-card: clamp(178px, 23vw, 288px); position:relative; margin-top: clamp(34px, 5vh, 62px); }
.cf__frame{
  cursor: grab; overflow: hidden; padding-block: 42px; outline:none;
  perspective: calc(var(--cf-card) * 3);
  touch-action: pan-y;
}
.cf__frame:active{ cursor: grabbing; }
.cf__frame:focus-visible{ outline: 2px solid var(--brass); outline-offset: -6px; }
.cf__stage{
  position: relative; user-select:none;
  height: calc(var(--cf-card) / 0.849);
  transform-style: preserve-3d;
}
.cf__card{
  position:absolute; left:50%; top:0;
  width: var(--cf-card); aspect-ratio: 900 / 1060;
  overflow:hidden; border-radius: 3px;
  background: var(--coal);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(237,233,225,.09);
  will-change: transform, opacity;
}
.cf__card img{ width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none; }
.cf__card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(11,11,12,.10), transparent 34%, rgba(11,11,12,.42));
}
.cf__nav{
  position:absolute; top:50%; z-index:200; transform: translateY(-50%);
  width:46px; height:46px; border-radius:999px; cursor:pointer;
  background: rgba(17,17,19,.72); border:1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.cf__nav:hover{ border-color: var(--brass); background: rgba(17,17,19,.94); }
.cf__nav svg{ width:17px; height:17px; }
.cf__nav--prev{ left: clamp(10px, 4vw, 54px); }
.cf__nav--next{ right: clamp(10px, 4vw, 54px); }

.cf__cap{ margin-top: 26px; text-align:center; }
.cf__cap .day{
  display:block; font-size:10.5px; letter-spacing:.30em; text-transform:uppercase;
  color: var(--brass); font-weight: 500; margin-bottom:12px;
}
.cf__cap .name{
  font-family: var(--display); font-weight:500; font-size: clamp(26px, 3.4vw, 44px);
  line-height:1; letter-spacing:-.025em; margin:0;
}
.cf__cap .kind{ margin: 12px 0 0; font-size:13.5px; color:#B3ADA2; }
.cf__cap > *{ animation: capIn .55s var(--ease) both; }
@keyframes capIn{ from{ opacity:0; transform: translateY(7px);} }
.cf__dots{ display:flex; justify-content:center; gap:9px; margin-top: 26px; }
.cf__dots button{
  width:7px; height:7px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background: var(--bone); opacity:.24; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cf__dots button[aria-current="true"]{ opacity:1; background: var(--brass-hi); transform: scale(1.35); }
@media (max-width: 720px){
  .cf__nav{ display:none; }
  .cf__frame{ padding-block: 26px; }
}


/* ============================================================
   INSTAGRAM
   ============================================================ */
.ig{ background: var(--ink); }
.ig__head{ display:flex; align-items:center; gap:18px; margin-top: clamp(30px,5vh,52px); flex-wrap:wrap; }
.ig__av{
  width:64px; height:64px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--coal); position:relative;
  box-shadow: 0 0 0 1px var(--line-str), 0 0 0 5px var(--ink), 0 0 0 6px rgba(201,162,75,.30);
}
.ig__av img{ width:38px; height:auto; opacity:.95; }
.ig__id{ display:grid; gap:3px; }
.ig__handle{
  font-size:15px; letter-spacing:.01em; color: var(--bone);
  font-weight: 600;
}
.ig__handle:hover{ color: var(--brass); }
.ig__stats{ font-size:12.5px; color: var(--ash); font-variant-numeric: tabular-nums; }
.ig__stats b{ color:#CFC9BE; font-weight: 500; }
.ig__spacer{ flex:1; }

.ig__grid{
  margin-top: clamp(26px,4vh,44px);
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.ig__t{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background: var(--coal); }
.ig__t img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(.82) brightness(.9);
  transform: scale(1.02);
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.ig__t::after{
  content:""; position:absolute; inset:0;
  background: rgba(11,11,12,.45);
  opacity:0; transition: opacity .45s var(--ease);
}
.ig__t .mark-ig{
  position:absolute; inset:0; margin:auto; width:26px; height:26px; z-index:2;
  opacity:0; transform: scale(.82); color: var(--brass);
  transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.ig__t:hover img, .ig__t:focus-visible img{ transform: scale(1.09); filter: saturate(1) brightness(1); }
.ig__t:hover::after, .ig__t:focus-visible::after{ opacity:1; }
.ig__t:hover .mark-ig, .ig__t:focus-visible .mark-ig{ opacity:1; transform:none; }
.ig__foot{ display:flex; justify-content:center; margin-top: 34px; }
@media (max-width: 720px){
  .ig__grid{ grid-template-columns: repeat(2, 1fr); gap:3px; }
  .ig__av{ width:54px; height:54px; }
  .ig__av img{ width:32px; }
}

/* ---------- mobile action bar ---------- */
.dock{
  position: fixed; left:0; right:0; bottom:0; z-index:65;
  display:none; gap:1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(110%);
  transition: transform .55s var(--ease);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dock.is-up{ transform:none; }
.dock a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding: 16px 10px; background: rgba(17,17,19,.94);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight: 500;
}
.dock a svg{ width:14px; height:14px; }
.dock a.pri{ background: var(--grad); color:#14100A; font-weight:600; }


/* ============================================================
   NIENTE RIGHE — le divisioni passano da spazio e superficie
   ============================================================ */
.rule{ display:none; }

.stat{ border:0 !important; padding: 0 32px 0 0; }
.stat:not(:first-child){ padding-left: 0; border:0 !important; }
.stats{ gap: clamp(28px,4vw,64px); }

.menu li{ border:0 !important; padding: 13px 0; gap: 18px; }
.menu .dot{ display:none; }
.menu li .dish{ flex:1; }

.specs li{ border:0 !important; padding: 9px 0; }
.contact{ border:0 !important; }
.contact .row{ border:0 !important; padding: 13px 0; }

.hero__side .row{ border:0 !important; padding: 12px 0; }
.hero__partner{ border:0 !important; padding-top: 0; }
.hero__foot{ border:0 !important; }
.hero__prog{ background: transparent; }

.marquee{ border:0 !important; }
.partner{ border:0 !important; }
.fmt{ border:0 !important; padding-top: 0; }
.nav.is-stuck{ border-bottom-color: transparent !important; }
footer{ border:0 !important; }
.foot-bot{ border:0 !important; padding-top: 34px; }
.zig__media::after{ box-shadow: inset 0 -90px 90px -60px rgba(11,11,12,.9) !important; }
.cf__card{ box-shadow: 0 30px 60px -24px rgba(0,0,0,.9); }

/* chip e controlli: pieni, non contornati */
.fmt__price span, .chips span{
  border:0; background: var(--surf); color:#CFC9BE;
  transition: background-color .3s var(--ease);
}
.fmt__price span:hover, .chips span:hover{ background: var(--surf-2); }
.cf__nav, .burger, .sheet__close{ border:0; background: rgba(28,28,32,.86); }
.cf__nav:hover{ background: rgba(40,38,32,.96); }

/* campi: superficie morbida al posto della sottolineatura */
.field input, .field select, .field textarea{
  background: var(--surf); border:0; border-radius: 10px;
  padding: 13px 15px;
  transition: background-color .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  background: rgba(201,162,75,.12);
}
.field.is-bad input, .field.is-bad select{ background: rgba(224,120,95,.14); }
.field select{
  background:
    linear-gradient(45deg, transparent 50%, var(--ash) 50%) calc(100% - 19px) center / 5px 5px no-repeat,
    linear-gradient(135deg, var(--ash) 50%, transparent 50%) calc(100% - 14px) center / 5px 5px no-repeat,
    var(--surf);
  padding-right: 38px;
}
.field select:focus{
  background:
    linear-gradient(45deg, transparent 50%, var(--brass) 50%) calc(100% - 19px) center / 5px 5px no-repeat,
    linear-gradient(135deg, var(--brass) 50%, transparent 50%) calc(100% - 14px) center / 5px 5px no-repeat,
    rgba(201,162,75,.12);
}
.form-ok{ border:0; background: rgba(201,162,75,.09); border-radius: 10px; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform: translateY(26px); }
.rv.is-in{ opacity:1; transform:none; transition: opacity .9s var(--ease), transform 1s var(--ease); }
.rv.d1.is-in{ transition-delay:.08s } .rv.d2.is-in{ transition-delay:.16s } .rv.d3.is-in{ transition-delay:.24s }

/* ============================================================
   RESPONSIVE — hard single-column collapse
   ============================================================ */
@media (max-width: 1080px){
  .nav__links{ display:none; }
  .nav__tel{ display:none; }
  .nav__cta > .btn{ display:none; }
  .burger{ display:flex; }
  .dock{ display:flex; }
  footer{ padding-bottom: calc(34px + 62px); }
  .hero__in{ grid-template-columns: 1fr; gap: 46px; padding-top: 118px; padding-bottom: 96px; }
  .hero__side{ max-width: 460px; }
  .sec-head{ grid-template-columns:1fr; gap: 26px; align-items:start; }
  .zig, .eventi .zig{ grid-template-columns: 1fr; }
  .zig__media, .zig__body, .eventi .zig__media, .eventi .zig__body{ grid-column: 1 / -1; }
  .eventi .zig__media{ order:1; } .eventi .zig__body{ order:2; }
  .zig__media .frame, .eventi .zig__media .frame{ aspect-ratio: 16/10; }
  .book{ grid-template-columns:1fr; }
  .formats{ grid-template-columns: 1fr; gap: 0; }
  .fmt, .fmt:nth-child(1), .fmt:nth-child(2), .fmt:nth-child(3){
    grid-column: 1 / -1; margin-top: 0; padding-top: 26px; padding-bottom: 42px;
  }
  .fmt figure .frame, .fmt:nth-child(2) figure .frame, .fmt:nth-child(3) figure .frame{ aspect-ratio: 16/10; }
}
@media (max-width: 720px){
  .hero__scrim{ background:
    linear-gradient(180deg, rgba(11,11,12,.93) 0%, rgba(11,11,12,.80) 40%, rgba(11,11,12,.62) 66%, rgba(11,11,12,.96) 100%); }
  .stats{ grid-template-columns:1fr; }
  .stat, .stat:not(:first-child){ padding: 22px 0 26px; border-left:0; }
  .f-row{ grid-template-columns:1fr; }
  .contact .row{ flex-direction:column; gap:6px; }
  .contact .row .v{ text-align:left; }
  .hours i{ justify-content:flex-start; }
  .sheet a{ font-size: 30px; }
  .hero__foot .wrap{ height:52px; }
  .menu .dish{ font-size:18px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
  .hero h1 .ln > span{ transform:none; }
  .hero-track{ height: auto; }
  .hero{ position: relative; }
  .hero__photo{ animation: none; }
  .hero__tagline{ display:none; }
}