/* Magazine verticale (I Borboni) — corte barocca: inchiostro, avorio e oro.
   Prima il telefono: liste leggibili con una mano, prezzi allineati, foto che si svelano. */

.mz {
  --paperc: #f4efe6; --paper-ink: #1b1714; --paper-mute: #7a7065; --paper-line: rgba(27, 23, 20, .14);
  --gold-m: #b38d58; --royal: #1d2a44;
  --idx-h: 52px;
  background: var(--ink); color: var(--ivory);
}
.mz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mz em { color: inherit; }
.mz-paper { background: var(--paperc); color: var(--paper-ink); --mute: var(--paper-mute); --line: var(--paper-line); }
.mz-dark { background: var(--ink); color: var(--ivory); --line: rgba(243, 238, 230, .14); }
.mz-sec { position: relative; padding: clamp(80px, 11vw, 160px) var(--gutter); }

/* ——— tipografia ——— */
.mz-brand { margin: 0; font: 500 .7rem/1 var(--sans); letter-spacing: .38em; text-transform: uppercase; opacity: .7; }
.mz-kicker { margin: 0 0 22px; font: 500 .72rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-m); }
.mz-num { display: block; margin-bottom: 14px; font: italic 400 1.1rem/1 var(--serif); color: var(--gold-m); letter-spacing: .05em; }
.mz-title { margin: 0; font: 300 clamp(2.4rem, 6.4vw, 5.2rem)/.95 var(--sans); letter-spacing: -.035em; text-transform: uppercase; }
.mz-italic, .mz-serif { margin: 12px 0 0; font: italic 400 clamp(1.15rem, 1.7vw, 1.5rem)/1.4 var(--serif); color: var(--mute); max-width: 38ch; }
.mz-serif { font-style: normal; color: inherit; }
.mz-serif em { font-style: italic; }
.mz-note { margin: 16px 0 0; font: 500 .72rem/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-m); }
.mz-aside { margin: 0 0 18px; font: italic 400 1.25rem/1.3 var(--serif); color: var(--gold-m); }
.mz-right { text-align: right; margin-top: 26px; }
.mz-head { margin-bottom: clamp(30px, 4vw, 50px); }
.mz-center { text-align: center; display: grid; justify-items: center; }

/* ——— copertina ——— */
.mz-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: end start; color: #fff; }
.mz-hero-bg { position: absolute; inset: 0; }
.mz-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 6, .45), rgba(8, 7, 6, .05) 35%, rgba(8, 7, 6, .25) 60%, rgba(8, 7, 6, .85)); }
.mz-kb { animation: mz-kb 16s ease-out both; transform-origin: 60% 40%; }
@keyframes mz-kb { from { transform: scale(1.18); } to { transform: scale(1.02); } }
.mz-hero-in { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(90px, 14vh, 140px); display: grid; gap: 16px; justify-items: start; max-width: 680px; }
.mz-logo { width: min(360px, 74vw); height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.mz-edition { margin: 0; font: italic 400 clamp(1.6rem, 3.4vw, 2.6rem)/1.05 var(--serif); letter-spacing: .02em; }
.mz-place { margin: 0; font: 500 .72rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.mz-up { opacity: 0; transform: translateY(26px); animation: mz-up 1.3s var(--ease) var(--d, 0s) both; }
@keyframes mz-up { to { opacity: 1; transform: none; } }
.mz-cue { position: absolute; z-index: 1; left: 50%; bottom: 26px; width: 1px; height: 54px; translate: -50% 0; overflow: hidden; }
.mz-cue i { position: absolute; inset: 0; background: linear-gradient(transparent, #fff); animation: mz-cue 2.2s ease-in-out infinite; }
@keyframes mz-cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* ——— indice fisso ——— */
.mz-index {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: var(--idx-h);
  padding: 0 var(--gutter); background: rgba(11, 10, 9, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(243, 238, 230, .1); transition: top .5s var(--ease);
}
.site-header:not(.away) ~ main .mz-index { top: 72px; }
.mz-sw { display: flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(243, 238, 230, .08); }
.mz-sw a { padding: 8px 14px; border-radius: 999px; font: 500 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); transition: background .4s, color .4s; }
.mz-sw a.on { background: var(--gold); color: var(--ink); }
.mz-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; mask-image: linear-gradient(90deg, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); }
.mz-chips::-webkit-scrollbar { display: none; }
.mz-chips a { flex: none; padding: 8px 12px; font: 500 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; border-radius: 999px; transition: color .3s, background .3s; }
.mz-chips a:hover { color: var(--ivory); }
.mz-chips a.on { color: var(--ivory); background: rgba(243, 238, 230, .1); }
.mz-chips a[hidden] { display: none; }
.mz-bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ——— chi siamo ——— */
.mz-about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.mz-prose { margin: 0; font: 400 clamp(1.25rem, 2vw, 1.75rem)/1.55 var(--serif); }
.mz-prose .w { opacity: .18; transition: opacity .5s; }
.mz-prose .w.on { opacity: 1; }

/* ——— frase d'apertura ——— */
.mz-statement { text-align: center; display: grid; justify-items: center; gap: 28px; padding-block: clamp(110px, 16vw, 220px); }
.mz-display { margin: 0; font: 200 clamp(2.4rem, 6.8vw, 6rem)/1.02 var(--sans); letter-spacing: -.04em; }
.mz-display em { font: italic 400 1.04em/1 var(--serif); color: var(--gold); letter-spacing: -.01em; }
.mz-statement .mz-serif { max-width: 36ch; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.6; }
.mz-welcome { margin: 0; font: 600 clamp(1rem, 1.5vw, 1.25rem)/1.4 var(--sans); letter-spacing: .1em; }
.mz-welcome span, .mz-welcome { color: var(--ivory); }

/* ——— capitoli del menù ——— */
.mz-course { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.mz-course.mz-rev .mz-side { order: -1; }
.mz-side { position: sticky; top: calc(var(--idx-h) + 40px); }
.mz-frame { position: relative; margin: 0; overflow: hidden; border-radius: 3px; background: #2a2622; }
.mz-frame .mz-par { position: absolute; inset: -8% 0; height: 116%; will-change: transform; }
.mz-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mz-pair .mz-low { margin-top: 30%; }

/* le righe del menù: nome · puntini · prezzo, descrizione sotto */
.mz-list { list-style: none; margin: 0; padding: 0; }
.mz-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 2px 10px; padding: 15px 0 14px; border-top: 1px solid var(--line); }
.mz-row:last-child { border-bottom: 1px solid var(--line); }
.mz-name { font: 400 clamp(1.02rem, 1.25vw, 1.15rem)/1.3 var(--sans); letter-spacing: -.005em; }
.mz-name strong { color: var(--gold-m); font-weight: 600; margin-right: 4px; }
.mz-dots { align-self: end; margin-bottom: .4em; height: 1px; background-image: linear-gradient(90deg, currentColor 30%, transparent 0); background-size: 6px 1px; opacity: .25; }
.mz-price { font: 400 1.3rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--gold-m); min-width: 1.4em; text-align: right; }
.mz-desc { grid-column: 1 / -1; font: italic 400 1.02rem/1.4 var(--serif); color: var(--mute); max-width: 52ch; }
.mz-row:not(:has(.mz-price)) { grid-template-columns: 1fr; }
/* le pizze hanno nomi di regine e principi: corsivo grande */
.mz-royal .mz-name { font: italic 400 clamp(1.45rem, 2vw, 1.8rem)/1.1 var(--serif); letter-spacing: 0; }
.mz-royal .mz-price { font-size: 1.5rem; }
.mz-two { columns: 2 380px; column-gap: clamp(30px, 5vw, 80px); max-width: 1180px; margin: 0 auto; }
.mz-two .mz-row { break-inside: avoid; }
.mz-dark .mz-price, .mz-dark .mz-num { color: var(--gold); }

/* righe che entrano in sequenza */
.js .mz-row { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.js .mz-row.in { opacity: 1; transform: none; }

/* ——— intermezzi a tutto schermo: la foto si allarga mentre scorri ——— */
.mz-break { position: relative; height: 190vh; background: var(--ink); }
.mz-break-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.mz-break-img { position: absolute; inset: 0; clip-path: inset(calc(var(--c, 1) * 14%) calc(var(--c, 1) * 22%) round calc(var(--c, 1) * 14px)); }
.mz-break-img img { transform: scale(calc(1.25 - (1 - var(--c, 1)) * .2)); }
.mz-break-img::after { content: ""; position: absolute; inset: 0; background: rgba(8, 7, 6, calc(.15 + (1 - var(--c, 1)) * .3)); }
.mz-break-txt { position: relative; z-index: 1; margin: 0; padding: 0 var(--gutter); text-align: center; color: #fff;
  font: italic 300 clamp(3rem, 9vw, 8.4rem)/1 var(--serif); letter-spacing: -.01em; text-shadow: 0 4px 40px rgba(0, 0, 0, .45);
  opacity: calc(1 - var(--c, 1) * 1.2); transform: translateY(calc(var(--c, 1) * 60px)); }
.mz-stackt { display: grid; justify-items: center; gap: 14px; font: inherit; }
.mz-stackt .mz-serif { color: rgba(255, 255, 255, .8); text-align: center; margin: 0; }
.mz-giant { margin: 0; font: 200 clamp(3.4rem, 11vw, 9rem)/.9 var(--sans); letter-spacing: -.05em; text-transform: uppercase; }
.mz-giant-i { margin: 6px 0 0; font: italic 300 clamp(3rem, 9vw, 7.6rem)/1 var(--serif); color: var(--gold); }

/* ——— le borboniche ——— */
.mz-collage .mz-head { text-align: center; display: grid; justify-items: center; }
.mz-trio { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 14px; max-width: 1240px; margin: 0 auto; }
.mz-t1 { grid-row: span 2; align-self: center; }
.mz-t2 { margin-top: -12%; }
.mz-long { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(30px, 6vw, 110px); padding-top: 0; }
.mz-chunk { padding-top: 34px; }
.mz-inline { display: none; }
.mz-stack { height: calc(100vh - var(--idx-h) - 80px); }
.mz-stack-in { position: relative; height: 100%; overflow: hidden; border-radius: 3px; background: #2a2622; }
.mz-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 1.6s var(--ease); }
.mz-slide.on { opacity: 1; transform: none; }

/* ——— il padellino ——— */
.mz-padellino .mz-head { margin-bottom: clamp(50px, 7vw, 100px); }
.mz-padellino .mz-giant { font-size: clamp(3rem, 9vw, 7.4rem); }

/* ——— bevande ——— */
.mz-bar-menu .mz-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) .9fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.mz-card .mz-title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.mz-card .mz-italic { font-size: 1.1rem; margin-bottom: 20px; }
.mz-card .mz-name { font-size: 1rem; }
.mz-card-img { position: sticky; top: calc(var(--idx-h) + 40px); }
.mz-wines { display: grid; grid-template-columns: 1fr 1fr; gap: 26px clamp(20px, 3vw, 44px); }
.mz-sublabel { margin: 0 0 8px; font: 600 .74rem/1 var(--sans); letter-spacing: .2em; color: var(--gold-m); }
.mz-masonry { columns: 3 300px; column-gap: clamp(24px, 4vw, 60px); max-width: 1300px; margin: 0 auto; }
.mz-masonry .mz-card { break-inside: avoid; margin-bottom: 50px; }
.mz-masonry .mz-title { margin-bottom: 16px; }

/* ——— cocktail d'autore ——— */
.mz-signature { display: grid; gap: clamp(80px, 12vw, 170px); }
.mz-sig { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); align-items: center; max-width: 1240px; margin: 0 auto; width: 100%; }
.mz-sig.mz-rev .mz-frame { order: 2; }
.mz-sig-name { margin: 0 0 18px; font: 200 clamp(2.4rem, 5.4vw, 4.6rem)/.95 var(--sans); letter-spacing: -.04em; text-transform: uppercase; }
.mz-sig .mz-serif { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.6; max-width: 34ch; }
.mz-sig .mz-serif em { color: var(--gold); }
.mz-sig .mz-italic { font-size: 1.05rem; max-width: 40ch; }
.mz-sig-price { margin: 26px 0 0; font: italic 300 3.4rem/1 var(--serif); color: var(--gold); }
.mz-tilt { transition: transform .8s var(--ease); transform-style: preserve-3d; }

/* ——— foto a tutta pagina ——— */
.mz-photo { background: var(--ink); }
.mz-full { height: 100vh; height: 100svh; border-radius: 0; }

/* ——— allergeni ——— */
.mz-allergen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); }
.mz-allergen-grid .mz-row { border-bottom: 0; }
.mz-allergen-grid .mz-desc { font-size: .95rem; }
.mz-foot-note { margin: 40px 0 0; font: italic 400 1rem/1.5 var(--serif); color: var(--mute); max-width: 80ch; }

/* ——— chiusura ——— */
.mz-close { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; text-align: center; color: #fff; }
.mz-close-bg { position: absolute; inset: 0; }
.mz-close-bg .mz-par { position: absolute; inset: -8% 0; height: 116%; }
.mz-close-bg::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .62); }
.mz-close-in { position: relative; display: grid; justify-items: center; gap: 22px; padding: 0 var(--gutter); }
.mz-close .mz-logo { width: min(260px, 60vw); }
.mz-close .mz-serif { color: rgba(255, 255, 255, .85); text-align: center; }

/* ——— comparse ——— */
.js .mz-rv { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .mz-rv.in { opacity: 1; transform: none; }
.js .mz-frame.mz-rv { clip-path: inset(12% 0 0 0); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), clip-path 1.4s var(--ease); }
.js .mz-frame.mz-rv.in { clip-path: inset(0); }

/* ——— telefono ——— */
@media (max-width: 900px) {
  .mz { --idx-h: 50px; }
  .site-header:not(.away) ~ main .mz-index { top: 64px; }
  .mz-sw a { padding: 8px 11px; }
  .mz-about, .mz-course, .mz-long, .mz-sig { grid-template-columns: 1fr; }
  .mz-course .mz-side, .mz-course.mz-rev .mz-side { position: relative; top: 0; order: -1; }
  .mz-course .mz-side .mz-frame { aspect-ratio: 4 / 3 !important; }
  .mz-pair .mz-frame { aspect-ratio: 3 / 4 !important; }
  .mz-pair .mz-low { margin-top: 18%; }
  .mz-stack { display: none; }
  .mz-inline { display: block; margin-bottom: 18px; }
  .mz-sig.mz-rev .mz-frame { order: 0; }
  .mz-trio { grid-template-columns: 1fr 1fr; }
  .mz-t1 { grid-column: 1 / -1; grid-row: auto; }
  .mz-t2 { margin-top: 0; }
  .mz-bar-menu .mz-grid3 { grid-template-columns: 1fr; gap: 56px; }
  .mz-card-img { position: relative; top: 0; order: -1; aspect-ratio: 4 / 3 !important; }
  .mz-wines { grid-template-columns: 1fr; }
  .mz-allergen-grid { grid-template-columns: 1fr; }
  .mz-break { height: 160vh; }
  .mz-break-img { clip-path: inset(calc(var(--c, 1) * 10%) calc(var(--c, 1) * 8%) round calc(var(--c, 1) * 12px)); }
  .mz-row { padding: 14px 0 13px; }
  .mz-hero { place-items: end center; }
  .mz-hero-in { justify-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-kb, .mz-up, .mz-cue i { animation: none; opacity: 1; transform: none; }
  .js .mz-rv, .js .mz-row { opacity: 1; transform: none; clip-path: none; transition: none; }
  .mz-break { height: auto; }
  .mz-break-pin { position: relative; }
  .mz-break-img { clip-path: none; }
  .mz-break-txt { opacity: 1; transform: none; }
}

/* ritocchi di leggibilità */
.mz-paper { --gold-m: #8f6b3a; }
.mz-allergens .mz-italic { max-width: 72ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.mz-stackt .mz-serif { font: italic 400 clamp(1.4rem, 2.4vw, 2.1rem)/1.3 var(--serif); }
.mz-stackt .mz-brand { color: #fff; }