/* Mattatore (concept di Duo Motion): stile del sito. I valori di base vengono da tokens.css (generato da design-system/tokens.json). */

/* ---------- font ospitati sul sito ---------- */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/InstrumentSerif-Regular.ttf) format("truetype")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/InstrumentSerif-Italic.ttf) format("truetype")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/InstrumentSans-Regular.ttf) format("truetype")}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/InstrumentSans-Italic.ttf) format("truetype")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600 700;font-display:swap;src:url(../fonts/InstrumentSans-Bold.ttf) format("truetype")}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:600 700;font-display:swap;src:url(../fonts/InstrumentSans-BoldItalic.ttf) format("truetype")}

:root{
  --curtain-img:url(../img/hero-poster-1920.webp);
  --tshadow:0 1px 2px rgba(4,8,5,.95),0 3px 12px rgba(4,8,5,.75),0 10px 44px rgba(4,8,5,.75);
  --nav-h:76px;
  --wrap:1320px;
}
/* il velluto dei sipari: la misura giusta per lo schermo, in AVIF dove il browser lo legge */
@media (min-resolution:1.4dppx) and (min-width:1000px),(min-width:2000px){:root{--curtain-img:url(../img/hero-poster-3840.webp)}}
@supports (background-image:image-set(url("a.avif") type("image/avif"))){
  :root{--curtain-img:image-set(url(../img/hero-poster-1920.avif) type("image/avif"),url(../img/hero-poster-1920.webp) type("image/webp"))}
  @media (min-resolution:1.4dppx) and (min-width:1000px),(min-width:2000px){:root{--curtain-img:image-set(url(../img/hero-poster-3840.avif) type("image/avif"),url(../img/hero-poster-3840.webp) type("image/webp"))}}
}
@media (orientation:portrait) and (max-width:1024px){:root{--curtain-img:url(../img/hero-poster-mobile-1440.webp)}}
@supports (background-image:image-set(url("a.avif") type("image/avif"))){
  @media (orientation:portrait) and (max-width:1024px){:root{--curtain-img:image-set(url(../img/hero-poster-mobile-1440.avif) type("image/avif"),url(../img/hero-poster-mobile-1440.webp) type("image/webp"))}}
}
@media (max-width:600px){:root{--nav-h:64px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--nav-h);background:var(--color-stage);overflow-x:clip}
body{background:var(--color-stage);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a,button,summary,[role="slider"]{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--color-fabric);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--color-light);color:var(--color-stage);padding:10px 16px;border-radius:6px;font-weight:500;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:max(var(--spacing-gutter),env(safe-area-inset-left)) max(var(--spacing-gutter),env(safe-area-inset-right))}
main{display:block}
main:focus{outline:none}

/* ---------- tipografia ---------- */
.h-sec{font-family:var(--font-display);font-weight:400;font-size:var(--text-h2);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;max-width:16ch}
.lede{font-size:var(--text-lede);line-height:1.55;color:var(--color-text-muted);max-width:44ch;text-wrap:pretty}
.h-sec + .lede{margin-top:1.1rem}
.note{font-size:var(--text-small);color:var(--color-text-faint);max-width:52ch;margin-top:1.4rem}
.note a{color:var(--color-light)}
.act-num{font-family:var(--font-display);font-style:italic;font-size:clamp(1.1rem,.9rem + .8vw,1.6rem);color:var(--color-light);letter-spacing:.01em}
.link-gold{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--color-light);text-decoration:none;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0% 1px no-repeat;transition:background-size .5s var(--primitive-ease-enter),color .2s}
.link-gold:hover{background-size:100% 1px;color:var(--color-light-hover)}
.link-gold svg{width:20px;height:20px}
.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.split-lines .line-in{display:block}

/* ---------- pulsanti ---------- */
.btn{--h:var(--button-height);position:relative;text-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 26px;border-radius:var(--button-radius);font-family:var(--font-body);font-size:1rem;font-weight:500;letter-spacing:.01em;text-decoration:none;white-space:nowrap;border:1px solid transparent;touch-action:manipulation;transition:background-color var(--primitive-duration-hover) ease,border-color var(--primitive-duration-hover) ease,color var(--primitive-duration-hover) ease,box-shadow .4s ease,transform var(--primitive-duration-press) var(--primitive-ease-press),translate .45s var(--primitive-ease-enter)}
.btn:active{transform:scale(.97)}
.btn .ic{width:18px;height:18px;flex:none}
.btn-gold{background:var(--button-bg);color:var(--button-fg);box-shadow:0 0 0 0 rgba(221,176,99,0)}
.btn-gold::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 30%,rgba(245,221,168,.55) 48%,transparent 66%) -150% 0/60% 100% no-repeat;pointer-events:none}
.btn-ghost{background:rgba(10,17,12,.35);color:var(--color-text);border-color:var(--button-ghost-border);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-velvet{background:var(--color-fabric);color:var(--color-paper)}
.btn-sm{--h:44px;padding:0 20px;font-size:.95rem}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:var(--button-bg-hover);box-shadow:0 0 34px -6px rgba(221,176,99,.65)}
  .btn-gold:hover::after{animation:sheen 1.1s var(--primitive-ease-enter)}
  .btn-ghost:hover{border-color:var(--color-light);color:var(--color-light-soft)}
  .btn-velvet:hover{background:var(--primitive-color-velluto-500)}
}
@keyframes sheen{to{background-position:250% 0}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}

/* ---------- livelli fissi: scintille, grana, cursore ---------- */
.embers{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:30;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:31;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:none}
.cursor-ring{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(221,176,99,.7);transition:transform .35s var(--primitive-ease-enter),background-color .35s,border-color .35s,opacity .3s}
.cursor-label{position:absolute;left:24px;top:-10px;font-size:.8rem;font-weight:500;color:var(--color-light);white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .35s var(--primitive-ease-enter);text-shadow:var(--tshadow)}
.cursor.is-link .cursor-ring{transform:scale(1.6);background:rgba(221,176,99,.12);border-color:var(--color-light)}
.cursor.is-drag .cursor-ring{transform:scale(2.1);background:rgba(221,176,99,.08)}
.cursor.has-label .cursor-label{opacity:1;transform:none}
.cursor.is-down .cursor-ring{transform:scale(.8)}
@media (hover:hover) and (pointer:fine){.js .cursor{display:block}}

/* ---------- apertura: si disegna l'arco, si scostano i teli, sale la fiamma ---------- */
.intro{display:none}
.js .intro{display:grid;position:fixed;inset:0;z-index:100;place-items:center;background:var(--color-stage-deep);animation:intro-failsafe .01s 6s forwards}
.intro-on .brand-mark{opacity:0}
.brand-mark{transition:opacity .4s,transform 1.2s var(--primitive-ease-expo)}
.intro.done{display:none!important}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden}}
.intro-sign{position:relative;z-index:2;display:grid;justify-items:center;gap:18px;color:var(--color-light)}
.intro-emblem{width:clamp(120px,22vmin,200px);height:auto;overflow:visible;filter:drop-shadow(0 0 10px rgba(221,176,99,.55)) drop-shadow(0 0 30px rgba(255,122,46,.25))}
.intro-word{display:flex;gap:.3em;font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);letter-spacing:0;padding-left:.3em;text-shadow:0 0 18px rgba(221,176,99,.6)}
.intro-word span{display:inline-block}
.intro-line{font-family:var(--font-display);font-style:italic;font-size:clamp(1rem,.9rem + .5vw,1.3rem);color:var(--color-text-muted)}
.intro-skip{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:3;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(242,230,208,.25);background:rgba(6,11,7,.4);font-size:.9rem;color:var(--color-text-muted)}
.intro-skip:hover{color:var(--color-text);border-color:var(--color-light)}
html.intro-on{overflow:hidden}

/* ---------- navigazione ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:0 var(--spacing-gutter);padding-top:env(safe-area-inset-top);transition:transform .6s var(--primitive-ease-enter),background-color .5s ease,backdrop-filter .5s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,11,7,.75),rgba(6,11,7,0));transition:opacity .5s}
.nav.solid::before{background:rgba(10,17,12,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid rgba(221,176,99,.14)}
.nav.hide{transform:translateY(-110%)}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--color-light)}
.brand-mark{width:38px;height:38px;flex:none}
.brand:hover .brand-mark{transform:rotate(-14deg) scale(1.06)}
.brand-word{font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1;letter-spacing:.14em;margin-right:-.14em;color:var(--color-text)}
.nav-links ul{display:flex;justify-content:center;gap:clamp(14px,2.4vw,34px)}
.nav-links a{position:relative;display:inline-block;padding:10px 2px;font-size:.95rem;text-decoration:none;color:var(--color-text-muted);transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--color-light);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--primitive-ease-enter)}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--color-text)}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;gap:10px}
.nav-progress{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;opacity:0;transition:opacity .4s}
.nav.solid .nav-progress{opacity:1}
.nav-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--color-fabric),var(--color-light),var(--color-light-soft));transform-origin:0 50%;transform:scaleX(var(--pg,0))}
@media (max-width:1060px){.nav-links{display:none}.nav{grid-template-columns:auto 1fr}.nav-cta{justify-self:end}}
@media (max-width:420px){.brand-word{font-size:1.2rem;letter-spacing:.1em;margin-right:-.1em}.brand-mark{width:32px;height:32px}.nav-cta .btn-sm{padding:0 14px}.brand{gap:9px}}
@media (max-width:350px){.brand-word{display:none}}

/* ---------- il filo d'oro (indice laterale) ---------- */
.thread{position:fixed;left:clamp(14px,1.6vw,28px);top:50%;z-index:40;transform:translate(-140%,-50%);opacity:0;transition:transform .9s var(--primitive-ease-expo),opacity .6s;display:none}
.thread.on{transform:translate(0,-50%);opacity:1}
.thread-line{position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:rgba(221,176,99,.22)}
.thread-line i{position:absolute;inset:0;background:var(--color-light);transform-origin:50% 0;transform:scaleY(var(--tp,0));box-shadow:0 0 8px rgba(221,176,99,.7)}
.thread ol{position:relative;display:grid;gap:22px}
.thread a{position:relative;display:flex;align-items:center;gap:14px;min-height:28px;text-decoration:none;color:var(--color-text-faint)}
.thread b{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--color-stage);border:1px solid rgba(221,176,99,.5);font-family:var(--font-display);font-style:italic;font-weight:500;font-size:0;transition:background-color .4s,border-color .4s,transform .5s var(--primitive-ease-enter)}
.thread span{font-family:var(--font-display);font-style:italic;font-size:1rem;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .45s var(--primitive-ease-enter);white-space:nowrap;text-shadow:var(--tshadow)}
.thread a:hover span,.thread a:focus-visible span,.thread a.flash span{opacity:1;transform:none}
.thread a span{background:linear-gradient(90deg,rgba(6,11,7,.85),rgba(6,11,7,.5));padding:2px 10px 2px 6px;border-radius:999px}
.thread a.on{color:var(--color-text)}
.thread a.on b{background:var(--color-light);border-color:var(--color-light);transform:scale(1.25);box-shadow:0 0 14px rgba(221,176,99,.8)}
.thread a.passed b{background:rgba(221,176,99,.6);border-color:transparent}
.thread a:not(:hover):not(:focus-visible) span{pointer-events:none}
@media (min-width:1180px) and (min-height:620px){.thread{display:block}}

/* ---------- OUVERTURE ---------- */
.hero{position:relative;height:640vh;background:var(--color-stage-deep)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18vh;background:linear-gradient(rgba(10,17,12,0),var(--color-stage));pointer-events:none;z-index:4}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--color-stage-deep)}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:center/cover no-repeat}
html:not(.js) .poster{background-image:url(../img/hero-poster-1920.webp)}
.stage video{opacity:0;transition:opacity .9s var(--primitive-ease-enter)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
/* l'immagine finale la passa main.js (con la versione): niente ripiego qui, altrimenti il browser la scarica due volte */
.poster::after{content:"";position:absolute;inset:0;background:var(--end-img,none) center/cover no-repeat;opacity:0;transition:opacity .9s}
.stage:not(.video-ready) .poster.end::after{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(6,11,7,0) 35%,rgba(6,11,7,.66) 100%),linear-gradient(180deg,rgba(6,11,7,.45) 0,rgba(6,11,7,0) 22%)}
.heat{position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;opacity:var(--heat,0);background:radial-gradient(60% 80% at 50% 120%,rgba(255,122,46,.35),rgba(255,122,46,0) 70%);mix-blend-mode:screen}
.band{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;visibility:hidden;text-shadow:var(--tshadow)}
.band.on{pointer-events:auto}
.band .col{position:absolute;width:min(40vw,600px)}
.band .col.l{left:clamp(24px,6vw,110px)}
.band .col.r{right:clamp(24px,6vw,110px);text-align:right}
.band .col::before{content:"";position:absolute;inset:-55% -35%;z-index:-1;background:radial-gradient(ellipse 56% 50% at 50% 50%,rgba(6,11,7,.72) 0%,rgba(6,11,7,.45) 46%,rgba(6,11,7,0) 76%)}
.kick{font-family:var(--font-display);font-style:italic;font-size:clamp(1.05rem,.9rem + .6vw,1.45rem);color:var(--color-light);margin-bottom:.9rem}
.h-hero{font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,1.4rem + 5.6vw,7.6rem);line-height:.96;letter-spacing:-.015em}
.b1 .col{top:50%;transform:translateY(-50%)}
.b2 .giant{position:absolute;top:50%;font-family:var(--font-display);font-style:normal;font-weight:400;font-size:clamp(4.4rem,1.2rem + 11vw,15rem);line-height:.8;letter-spacing:-.03em;color:var(--color-text);transform:translateY(-55%)}
.b2 .giant.l{left:clamp(16px,5vw,90px)}
.b2 .giant.r{right:clamp(16px,5vw,90px)}
.b2 .giant::before{content:"";position:absolute;inset:-14% -7%;z-index:-1;background:radial-gradient(ellipse 60% 56% at 50% 54%,rgba(6,11,7,.58),rgba(6,11,7,.26) 54%,rgba(6,11,7,0) 76%)}
.cuts{position:absolute;inset:0;display:grid;align-content:center;gap:.1em;padding:0 clamp(24px,6vw,110px);font-family:var(--font-display);font-size:clamp(2rem,1rem + 3.4vw,4.4rem);line-height:1.08}
.cuts li{width:max-content;max-width:100%}
.cuts li:nth-child(1){justify-self:start}
.cuts li:nth-child(2){justify-self:start;margin-left:12vw;font-style:italic}
.cuts li:nth-child(3){justify-self:end;margin-right:12vw}
.cuts li:nth-child(4){justify-self:end;font-style:italic}
/* alone scuro sotto ogni riga: stacca il testo dall'insegna al neon che passa dietro */
.cuts li{position:relative}
.cuts li::before{content:"";position:absolute;inset:-28% -7%;z-index:-1;background:radial-gradient(ellipse 58% 54% at 50% 54%,rgba(6,11,7,.66),rgba(6,11,7,.32) 52%,rgba(6,11,7,0) 76%)}
.cuts::before{content:"";position:absolute;inset:10% 0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(6,11,7,.75),rgba(6,11,7,0) 75%)}
.h-band{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,1rem + 3.6vw,5rem);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.b4 .col{bottom:clamp(40px,9vh,110px)}
.b4 .sub{font-size:var(--text-lede);color:var(--color-text-muted);margin-top:1rem}
.b4 .col.r .cta-row{justify-content:flex-end}
.b4:not(.cta-live) .cta-row{visibility:hidden}
.fx-chars .ch,.fx-words .wd{display:inline-block;will-change:transform,opacity}
.ring{position:absolute;left:clamp(24px,6vw,110px);bottom:34px;z-index:3;width:44px;height:44px;color:var(--color-light);transform:rotate(-90deg);transition:opacity .6s}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.cue{position:absolute;left:50%;bottom:28px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateX(-50%);font-size:.85rem;letter-spacing:.04em;color:var(--color-text);text-shadow:var(--tshadow);transition:opacity .5s}
.cue i{width:1px;height:42px;background:linear-gradient(var(--color-light),transparent);transform-origin:top;animation:cue 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.stage.scrolled .cue{opacity:0}

@media (orientation:portrait) and (max-width:1024px){
  .hero{height:540vh}
  html:not(.js) .poster{background-image:url(../img/hero-poster-mobile-1080.webp)}
  .poster::after{background-image:var(--end-img,none)}
  .band .col,.band .col.l,.band .col.r{left:20px;right:20px;width:auto;text-align:left}
  .band .col::before{inset:-25% -12%}
  .b1 .col{top:calc(var(--nav-h) + 4svh);transform:none}
  .h-hero{font-size:clamp(2.8rem,13vw,5.4rem)}
  .b2 .giant{font-size:clamp(3.4rem,18vw,8rem)}
  .b2 .giant.l{top:30%}
  .b2 .giant.r{top:70%}
  .cuts{font-size:clamp(1.9rem,8.6vw,3.4rem);align-content:end;padding-bottom:12svh}
  .cuts li:nth-child(2){margin-left:8vw}
  .cuts li:nth-child(3){margin-right:6vw}
  .b4{display:flex;flex-direction:column;gap:10px;padding:calc(var(--nav-h) + 3svh) 20px 0}
  .b4 .col,.b4 .col.l,.b4 .col.r{position:static;text-align:left}
  .b4 .col::before{content:none}
  .b4::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,11,7,.86) 0%,rgba(6,11,7,.55) 36%,rgba(6,11,7,0) 54%,rgba(6,11,7,0) 66%,rgba(6,11,7,.85) 100%)}
  .h-band{font-size:clamp(2rem,9vw,3.4rem)}
  .b4 .cta-row{position:absolute;left:20px;right:20px;bottom:calc(5svh + env(safe-area-inset-bottom));justify-content:stretch}
  .b4 .col.r .cta-row{justify-content:stretch}
  .b4 .cta-row .btn{flex:1 1 auto}
}
/* telefoni in orizzontale: stesso viaggio, testi più compatti */
@media (orientation:landscape) and (max-height:560px){
  .hero{height:520vh}
  .h-hero{font-size:clamp(2.2rem,12vh,3.6rem)}
  .b2 .giant{font-size:clamp(3rem,24vh,6.5rem)}
  .cuts{font-size:clamp(1.4rem,8vh,2.4rem)}
  .h-band{font-size:clamp(1.6rem,9vh,2.6rem)}
  .b4 .col{bottom:22px}
  .b4 .sub{display:none}
  .b4 .cta-row{margin-top:1rem}
  .cue,.ring{bottom:14px}
  .kick{margin-bottom:.4rem}
}

/* ---------- IL PROGRAMMA DI SALA (carta) ---------- */
.programma{position:relative;padding:var(--spacing-section) var(--spacing-gutter);background:radial-gradient(70% 60% at 50% 40%,rgba(30,85,46,.28),transparent 70%),var(--color-stage);perspective:1600px}
.playbill{position:relative;max-width:980px;margin:0 auto;padding:clamp(28px,5vw,72px) clamp(22px,5vw,80px);background:var(--playbill-bg);color:var(--playbill-fg);border-radius:2px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(122,85,32,.25) inset;transform-origin:50% 0}
.playbill::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E")}
.playbill::after{content:"";position:absolute;inset:12px;border:1px solid var(--playbill-rule);pointer-events:none}
.pb-head{position:relative;text-align:center;display:grid;justify-items:center;gap:.7rem;padding-bottom:clamp(20px,3vw,36px);border-bottom:1px solid var(--playbill-rule)}
.pb-mark{width:56px;height:56px;color:var(--playbill-accent)}
.pb-venue{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--color-ink-gold)}
.pb-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,1.2rem + 4vw,4.6rem);line-height:1;color:var(--playbill-accent);text-wrap:balance}
.pb-note{font-size:var(--text-lede);color:var(--color-ink-muted);max-width:40ch}
.pb-acts{position:relative;counter-reset:a}
.pb-acts li{border-bottom:1px solid var(--playbill-rule)}
.pb-acts a{display:grid;grid-template-columns:minmax(64px,120px) minmax(0,1fr) minmax(0,1.3fr);align-items:baseline;gap:clamp(12px,2.4vw,36px);padding:clamp(16px,2.2vw,26px) 4px;text-decoration:none;color:inherit;transition:background-color .35s}
.pb-acts a:hover{background:rgba(30,85,46,.06)}
.pb-num{font-family:var(--font-display);font-style:italic;font-size:clamp(1.6rem,1rem + 2vw,2.6rem);line-height:1;color:var(--playbill-accent)}
.pb-inter .pb-num{font-size:clamp(1rem,.8rem + .6vw,1.25rem)}
.pb-name{font-family:var(--font-display);font-size:clamp(1.5rem,1rem + 1.8vw,2.4rem);line-height:1.05;position:relative;width:fit-content}
.pb-name::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--playbill-accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--primitive-ease-enter)}
.pb-acts a:hover .pb-name::after,.pb-acts a:focus-visible .pb-name::after{transform:scaleX(1)}
.pb-desc{font-size:1rem;line-height:1.5;color:var(--color-ink-muted)}
.pb-extra{display:grid;grid-template-columns:minmax(64px,120px) 1fr;gap:clamp(12px,2.4vw,36px);padding:clamp(18px,2.4vw,28px) 4px;border-bottom:1px solid var(--playbill-rule)}
.pb-extra-t{font-family:var(--font-display);font-style:italic;color:var(--playbill-accent);font-size:1.1rem;line-height:1.3}
.pb-extra ul{display:grid;gap:6px}
.pb-extra a{color:var(--color-ink);text-decoration-color:rgba(15,34,21,.35)}
.pb-extra a:hover{color:var(--playbill-accent)}
.pb-foot{text-align:center;padding-top:clamp(18px,2.6vw,30px);font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--color-ink-gold)}
.playbill :focus-visible{outline-color:var(--playbill-accent)}
@media (max-width:720px){
  .pb-acts a{grid-template-columns:56px 1fr;row-gap:4px}
  .pb-desc{grid-column:2}
  .pb-inter .pb-num{grid-column:1 / -1;font-size:1rem}
  .pb-inter .pb-name,.pb-inter .pb-desc{grid-column:2}
  .pb-extra{grid-template-columns:1fr}
}

/* ---------- ATTI: il sipario che si apre sul titolo ---------- */
.act{position:relative}
.opener{position:relative;height:210vh;height:210svh}
.op-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--color-stage-deep)}
.op-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.op-shade{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(6,11,7,.35),rgba(6,11,7,.86) 100%),linear-gradient(180deg,rgba(10,17,12,0) 60%,var(--color-stage) 100%)}
/* 210% e non 200%: ogni telo si ferma prima della lama di luce che la foto ha al centro */
.op-cur{position:absolute;top:0;bottom:0;width:50.6%;background:var(--curtain-img) 0 50%/210% 100% no-repeat,var(--color-fabric-deep);backface-visibility:hidden}
.op-cur.l{left:0;transform-origin:0 50%}
.op-cur.r{right:0;background-position:100% 50%;transform-origin:100% 50%}
.op-cur::after{content:"";position:absolute;inset:0;opacity:var(--gather,0);background:repeating-linear-gradient(90deg,rgba(6,11,7,.55) 0 3%,rgba(6,11,7,0) 3% 6%,rgba(255,220,200,.06) 6% 7%,rgba(6,11,7,0) 7% 10%)}
.op-cur.l::before,.op-cur.r::before{content:"";position:absolute;top:0;bottom:0;width:22%;pointer-events:none}
.op-cur.l::before{right:0;background:linear-gradient(90deg,rgba(6,11,7,0),rgba(6,11,7,.5))}
.op-cur.r::before{left:0;background:linear-gradient(270deg,rgba(6,11,7,0),rgba(6,11,7,.5))}
.op-title{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.4rem;text-align:center;padding:0 20px;text-shadow:0 2px 30px rgba(6,11,7,.85),0 0 60px rgba(6,11,7,.6)}
.act-title{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(3.6rem,1rem + 11vw,12.5rem);line-height:.92;letter-spacing:-.025em;color:var(--color-text);text-wrap:balance}
.act-title .ch{display:inline-block;will-change:transform,opacity}
.swash{width:clamp(180px,26vw,340px);height:auto;overflow:visible;margin-top:.6rem}
.swash path{fill:none;stroke:var(--color-light);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(221,176,99,.6))}

/* ---------- ATTO I: IL CRUDO ---------- */
.antipasti{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);padding-block:clamp(40px,6vw,90px) var(--spacing-section)}
.antipasti figure{position:relative;overflow:hidden;border-radius:var(--photo-radius)}
.antipasti img,.collage img,.dl-photo img,.sl-grid img{width:100%;height:100%;object-fit:cover}
.cr-big{grid-column:1 / span 7;grid-row:1 / span 3;align-self:start;position:sticky;top:calc(var(--nav-h) + 24px);aspect-ratio:1080/1010}
.cr-text{grid-column:8 / span 5;grid-row:1;align-self:start}
.cr-sm.s1{grid-column:8 / span 3;grid-row:2;aspect-ratio:4/5;margin-top:clamp(20px,3vw,48px)}
.cr-sm.s2{grid-column:10 / span 3;grid-row:3;aspect-ratio:4/5;margin-top:clamp(-120px,-6vw,-40px);z-index:1;box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
@media (max-width:900px){
  .antipasti{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cr-big{grid-column:1 / -1;grid-row:auto;position:relative;top:auto}
  .cr-text{grid-column:1 / -1;grid-row:auto}
  .cr-sm.s1{grid-column:1 / span 3;grid-row:auto;margin-top:0}
  .cr-sm.s2{grid-column:4 / span 3;grid-row:auto;margin-top:40px;box-shadow:none}
}

/* listini con puntini e prezzi che rullano */
.prices{margin-top:1.8rem;display:grid;gap:2px;max-width:560px}
.prices li{display:grid;grid-template-columns:auto minmax(18px,1fr) auto;align-items:baseline;gap:.7em;padding:.62em 0;border-bottom:1px solid rgba(221,176,99,.12)}
.prices .n{font-size:1.06rem}
.prices .d{height:1px;border-bottom:1px dotted rgba(221,176,99,.55);transform:translateY(-.3em);transform-origin:0 50%}
.prices .p{font-family:var(--font-display);font-size:1.3rem;font-variant-numeric:lining-nums tabular-nums;color:var(--color-light-soft);white-space:nowrap}
.prices .p small{font-family:var(--font-body);font-size:.8rem;color:var(--color-text-faint)}
.odo-wrap{display:inline-flex;overflow:hidden;height:1.1em;line-height:1.1;vertical-align:-.12em;transition:opacity .4s}
.odo-wait{opacity:0}
.odo-col{display:flex;flex-direction:column;align-self:flex-start;flex:none;will-change:transform}
.odo-col span{display:block;height:1.1em;text-align:center}

/* ---------- ATTO II: ROLL DI CARNE ---------- */
.hscroll{position:relative;height:var(--hh,auto)}
.hs-pin{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,40px);overflow:hidden;padding-block:calc(var(--nav-h) + 10px) 30px}
.hs-ghost{position:absolute;left:0;top:50%;display:flex;gap:.5em;white-space:nowrap;font-family:var(--font-display);font-style:italic;font-size:clamp(7rem,22vw,22rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(221,176,99,.14);transform:translate(var(--gx,0),-50%);pointer-events:none;will-change:transform}
.hs-head{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(16px,3vw,60px);align-items:end}
.hs-head .lede{margin:0}
.reel{position:relative;display:flex;gap:clamp(16px,2vw,32px);padding-inline:max(var(--spacing-gutter),calc((100vw - var(--wrap)) / 2 + var(--spacing-gutter)));width:max-content;transform:translate3d(var(--hx,0),0,0);will-change:transform}
.reel:focus-visible{outline-offset:-4px}
.card{flex:none;width:clamp(260px,30vw,460px);transform:skewX(var(--sk,0deg));transition:transform .5s var(--primitive-ease-enter)}
.card .ph{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--photo-radius);background:radial-gradient(70% 70% at 50% 45%,#18291d,#0b130d)}
.card .ph img{width:118%;max-width:none;height:100%;object-fit:cover;transform:translate3d(var(--px,-8%),0,0);will-change:transform}
.card figcaption{display:flex;align-items:baseline;gap:12px;margin-top:14px;flex-wrap:wrap}
.card .cn{font-family:var(--font-display);font-size:1.45rem;line-height:1.1}
.card .cq{font-size:.9rem;color:var(--color-text-faint)}
.card b{margin-left:auto;font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--color-light-soft)}
.hs-progress{position:relative;margin:0 var(--spacing-gutter);height:1px;background:rgba(221,176,99,.18);max-width:calc(var(--wrap) - 2 * var(--spacing-gutter))}
.hs-progress i{position:absolute;inset:0;background:var(--color-light);transform-origin:0 50%;transform:scaleX(var(--hp,0))}
.quote-strip{font-family:var(--font-display);font-style:italic;font-size:var(--text-h3);line-height:1.25;color:var(--color-text-muted);max-width:30ch;padding-block:clamp(40px,6vw,80px) var(--spacing-section);text-wrap:balance}
@media (max-width:900px){.hs-head{grid-template-columns:1fr}.card{width:min(78vw,380px)}}
@media (orientation:landscape) and (max-height:560px){.hs-head .lede{display:none}.hs-head .h-sec{font-size:clamp(1.5rem,7vh,2.2rem)}.card{width:min(34vw,calc(100svh - 170px))}.card .cn{font-size:1.1rem}.hs-pin{gap:10px;padding-block:calc(var(--nav-h) - 6px) 12px}.dial-wrap{width:min(680px,100%,118vh)}.verdict{min-height:0}}

/* oggetti 3D (Three.js): una tela per piatto, montata solo quando serve */
.gl-dish{position:relative;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.gl-dish:active{cursor:grabbing}
.gl-dish canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity 1s var(--primitive-ease-enter)}
.gl-dish.loaded canvas{opacity:1}
.gl-dish::before{content:"";position:absolute;inset:18% 18% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,46,.18),rgba(255,122,46,0));pointer-events:none}
.dish-hint{position:absolute;left:50%;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(6,11,7,.62);border:1px solid rgba(221,176,99,.3);font-size:.85rem;color:var(--color-text);transform:translateX(-50%);transition:opacity .6s;pointer-events:none;white-space:nowrap}
.dish-hint svg{width:18px;height:18px;color:var(--color-light)}
.gl-dish.touched .dish-hint{opacity:0}
.dish-load{position:absolute;inset:0;display:grid;place-items:center;font-size:.9rem;color:var(--color-text-faint);pointer-events:none}
.gl-dish.loaded .dish-load{display:none}
.gl-dish:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}

/* ---------- ATTO III: LA BRACE ---------- */
.grill{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,90px);align-items:center;padding-block:clamp(40px,6vw,90px) clamp(60px,8vw,120px)}
.collage{position:relative;aspect-ratio:1/1.05}
.collage figure{position:absolute;overflow:hidden;border-radius:var(--photo-radius);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.collage .f1{left:0;top:0;width:66%;aspect-ratio:1080/1010}
.collage .f2{right:0;top:28%;width:46%;aspect-ratio:1/1;z-index:2}
.collage .f3{left:14%;bottom:0;width:38%;aspect-ratio:3/4;z-index:1}
.arch{border-radius:var(--photo-arch)!important}
.showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center;padding-bottom:clamp(60px,8vw,120px)}
/* il tomahawk resta sospeso nel buio: nessun riquadro, nessuna ombra, solo un alone caldo senza bordi */
.sc-dish{aspect-ratio:1/1.1;max-height:80vh;width:100%}
@media (max-width:900px){.grill,.showcase{grid-template-columns:1fr}.collage{max-width:560px;width:100%;margin:0 auto}.sc-dish{max-height:70svh}}

/* la brace (WebGL) */
.brace{position:relative;height:clamp(340px,62vh,640px);overflow:hidden;background:var(--color-stage)}
.brace-gl{position:absolute;inset:0;width:100%;height:100%}
.brace-fallback{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 110%,rgba(255,122,46,.55),rgba(30,85,46,.25) 45%,rgba(10,17,12,0) 75%);opacity:1;transition:opacity 1.2s}
.brace.gl-on .brace-fallback{opacity:0}
.brace::before,.brace::after{content:"";position:absolute;left:0;right:0;height:30%;z-index:1;pointer-events:none}
.brace::before{top:0;background:linear-gradient(var(--color-stage),rgba(10,17,12,0))}
.brace::after{bottom:0;height:24%;background:linear-gradient(rgba(10,17,12,0),var(--color-stage))}
.brace-line{position:absolute;left:0;right:0;top:16%;z-index:2;text-align:center;font-family:var(--font-display);font-style:italic;font-size:clamp(1.8rem,1rem + 3vw,4rem);line-height:1.1;padding:0 20px;text-shadow:0 0 30px rgba(6,11,7,.9),0 2px 6px rgba(6,11,7,.8)}
.brace-line span{display:block;font-size:.55em;color:var(--color-fire-soft);margin-top:.5em}

/* ---------- INTERMEZZO: LA COTTURA ---------- */
.cottura{position:relative;padding-block:var(--spacing-section);background:radial-gradient(60% 70% at 50% 45%,rgba(30,85,46,.24),transparent 70%)}
.ct-head{text-align:center;display:grid;justify-items:center;gap:.6rem}
.ct-head .h-sec{max-width:none}
.ct-head .lede{margin:0 auto}
.dial-wrap{position:relative;width:min(680px,100%);margin:clamp(10px,3vw,30px) auto 0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dial-wrap svg{width:100%;height:auto;overflow:visible}
.dial-lbl{font-family:var(--font-body);font-size:15px;fill:var(--color-text-muted)}
.knob{cursor:grab;transition:filter .3s}
.knob:active{cursor:grabbing}
.knob:focus{outline:none}
.knob .kring{opacity:0;transition:opacity .3s}
.knob:focus-visible .kring{opacity:1}
.kpulse{transform-box:fill-box;transform-origin:center;animation:kpulse 2.2s var(--primitive-ease-enter) infinite}
.dial-wrap.touched .kpulse{animation:none;opacity:0}
@keyframes kpulse{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.9);opacity:0}}
@media (max-width:520px){.dial-lbl{font-size:24px}}
.verdict{display:grid;justify-items:center;gap:.2rem;text-align:center;margin-top:.4rem;min-height:9.5rem}
.temp{display:flex;align-items:baseline;gap:.4rem;font-family:var(--font-display);color:var(--color-light)}
.temp-n{font-size:clamp(2.6rem,1.6rem + 3vw,4.4rem);line-height:1;font-variant-numeric:lining-nums tabular-nums;min-width:2ch;text-align:right}
.temp-u{font-style:italic;font-size:1.1rem;color:var(--color-text-muted)}
.lvl{font-family:var(--font-display);font-size:var(--text-h3);line-height:1.1}
.tip{font-size:var(--text-lede);color:var(--color-text-muted);max-width:44ch}
.dial-tools{display:flex;justify-content:center;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:1rem}
.dial-hint{font-size:var(--text-small);color:var(--color-text-faint)}
@media (hover:none) and (pointer:coarse){.dial-hint .kbd{display:none}}
.sound-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(221,176,99,.3);background:none;font-size:.9rem;color:var(--color-text-muted);transition:border-color .25s,color .25s}
.sound-btn svg{width:20px;height:20px}
.sound-btn .wave{opacity:.25;transition:opacity .3s}
.sound-btn[aria-pressed="true"]{color:var(--color-light);border-color:var(--color-light)}
.sound-btn[aria-pressed="true"] .wave{opacity:1}
.ct-finale{display:grid;justify-items:center;gap:1rem;margin-top:2rem;text-align:center;opacity:0;transform:translateY(14px);visibility:hidden;transition:opacity .9s var(--primitive-ease-enter),transform .9s var(--primitive-ease-enter),visibility 0s .9s}
.ct-finale.show{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.ct-finale p{font-family:var(--font-display);font-style:italic;font-size:var(--text-h3)}

/* ---------- ATTO IV: IL BIS ---------- */
.dolci{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:clamp(20px,3.4vw,60px);align-items:center;padding-block:clamp(40px,6vw,90px) var(--spacing-section)}
.dl-dish{aspect-ratio:1/1;width:100%}
.dl-photo{position:relative;aspect-ratio:1080/1010;overflow:visible}
.dl-photo img{border-radius:var(--photo-radius)}
.caramel{position:absolute;inset:-12%;width:124%;height:124%;pointer-events:none;overflow:visible}
.caramel path{fill:none;stroke:var(--color-light);stroke-width:1.6;stroke-linecap:round;opacity:.85}
@media (max-width:1000px){.dolci{grid-template-columns:1fr 1fr}.dl-text{grid-column:1 / -1}}
@media (max-width:640px){.dolci{grid-template-columns:1fr}.dl-dish{max-width:420px;margin:0 auto}}

/* ---------- LA CANTINA ---------- */
.cantina{position:relative;overflow:hidden;padding-block:var(--spacing-section) 0;background:radial-gradient(80% 70% at 20% 30%,rgba(30,85,46,.55),rgba(16,48,26,.4) 40%,transparent 75%),linear-gradient(180deg,var(--color-stage),#0b170e 50%,var(--color-stage))}
.cn-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,6vw,110px);align-items:center}
.glass{position:relative;justify-self:center;width:min(100%,300px)}
.glass svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.glass::after{content:"";position:absolute;left:10%;right:10%;bottom:-2%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(221,176,99,.25),transparent)}
.cn-num{font-family:var(--font-display);font-style:italic;font-size:clamp(7rem,4rem + 14vw,17rem);line-height:.8;color:var(--color-light);text-shadow:none;filter:drop-shadow(0 0 36px rgba(221,176,99,.28));margin-bottom:.4rem;font-variant-numeric:lining-nums}
.cn-num .odo-wrap{height:1em;line-height:1}
.cn-num .odo-col span{height:1em}
.stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:1.8rem;color:var(--color-text-muted)}
.stats b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,1.6rem + 1.8vw,3.2rem);line-height:1;color:var(--color-text)}
.riserve{margin-top:2.4rem;max-width:560px}
.riserve h3{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1.4rem;color:var(--color-light)}
.riserve .prices{margin-top:.6rem}
.riserve .link-gold{margin-top:1rem}
.labels{display:grid;gap:.1em;margin-top:clamp(60px,8vw,120px);padding-bottom:clamp(40px,6vw,80px);font-family:var(--font-display);font-style:italic;font-size:clamp(2.6rem,1.4rem + 5vw,6.5rem);line-height:1.12;white-space:nowrap;user-select:none}
.lb-row{display:flex;gap:.7em;width:max-content;color:transparent;-webkit-text-stroke:1px rgba(221,176,99,.45);transform:translate3d(var(--mx,0),0,0) skewX(var(--msk,0deg));will-change:transform}
.lb-row.rev{-webkit-text-stroke:0;color:rgba(242,230,208,.1)}
.lb-row span::after{content:"";display:inline-block;width:.18em;height:.18em;margin-left:.7em;border-radius:50%;background:var(--color-fabric);vertical-align:.25em}
@media (max-width:820px){.cn-grid{grid-template-columns:1fr}.glass{width:min(46vw,220px)}}

/* ---------- LA SALA ---------- */
.sala{padding-block:var(--spacing-section)}
.sl-hero{position:relative;overflow:hidden;border-radius:var(--photo-radius);aspect-ratio:16/10;min-height:520px;isolation:isolate}
.sl-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.spotlight{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle var(--sr,280px) at var(--sx,62%) var(--sy,42%),rgba(6,11,7,0) 0%,rgba(6,11,7,.18) 45%,rgba(6,11,7,.86) 100%)}
.sl-cap{position:absolute;left:0;bottom:0;z-index:2;max-width:620px;padding:clamp(22px,4vw,56px);text-shadow:var(--tshadow)}
.sl-cap::before{content:"";position:absolute;inset:-30% -20% 0 0;z-index:-1;background:radial-gradient(ellipse 80% 70% at 30% 70%,rgba(6,11,7,.78),rgba(6,11,7,0) 75%)}
.sl-cap .lede{color:var(--color-text)}
.sl-cap .link-gold{margin-top:.8rem}
.sl-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(12px,1.6vw,24px);margin-top:clamp(12px,1.6vw,24px);align-items:end}
.sl-grid figure{overflow:hidden;border-radius:var(--photo-radius)}
.sl-grid figure:nth-child(1){aspect-ratio:3/2}
.sl-grid figure:nth-child(2){aspect-ratio:3/4;border-radius:var(--photo-arch)}
.sl-grid figure:nth-child(3){aspect-ratio:3/4;border-radius:var(--photo-arch)}
.sunday{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,4vw,70px);align-items:baseline;margin-top:clamp(50px,7vw,100px);padding-top:clamp(30px,4vw,50px);border-top:1px solid var(--color-line)}
.sd-t{font-family:var(--font-display);font-style:italic;font-size:var(--text-h2);line-height:1.05;text-wrap:balance}
@media (max-width:900px){.sl-hero{aspect-ratio:auto;min-height:0;height:min(120vw,640px)}.sl-hero img{object-position:58% 50%}.sl-grid{grid-template-columns:1fr 1fr}.sl-grid figure:nth-child(1){grid-column:1 / -1}.sunday{grid-template-columns:1fr}}

/* ---------- VOCI, APP, FAQ ---------- */
.numeri{padding-block:clamp(40px,6vw,80px) var(--spacing-section)}
.nm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,90px);align-items:center}
.nm-score{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px)}
.nm-score p{display:grid;gap:10px;padding:clamp(20px,3vw,34px);border:1px solid var(--color-line);border-radius:4px;background:linear-gradient(160deg,rgba(30,85,46,.18),rgba(10,17,12,0))}
.nm-score b{font-family:var(--font-display);font-weight:400;font-size:clamp(3.4rem,2rem + 4vw,5.6rem);line-height:.9;color:var(--color-light)}
.nm-score p > span:last-child{font-size:var(--text-small);color:var(--color-text-muted)}
.nm-arc svg{width:120px;height:64px;overflow:visible}
.nm-arc path{fill:none;stroke:rgba(221,176,99,.2);stroke-width:5;stroke-linecap:round}
.nm-arc path.f{stroke:var(--color-light);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--af,0) * 100)}
@media (max-width:900px){.nm-grid{grid-template-columns:1fr}}
@media (max-width:480px){.nm-score{grid-template-columns:1fr}}
.banco{padding-block:0 var(--spacing-section)}
.banco-band{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:clamp(24px,4vw,60px);align-items:center;padding-block:clamp(36px,5vw,64px);border-block:1px solid var(--color-line)}
@media (max-width:820px){.banco-band{grid-template-columns:1fr}}
.faq-sec{padding-block:0 var(--spacing-section)}
.faq{margin-top:2rem;border-top:1px solid var(--color-line);max-width:900px}
.faq details{border-bottom:1px solid var(--color-line)}
.faq summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:18px 0;font-family:var(--font-display);font-size:var(--text-h3);line-height:1.2;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(var(--color-light),var(--color-light)) 50% 50%/100% 1.5px no-repeat,linear-gradient(var(--color-light),var(--color-light)) 50% 50%/1.5px 100% no-repeat;transition:transform .5s var(--primitive-ease-enter)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--color-light-soft)}
.ans{overflow:hidden}
.ans p{padding:0 0 22px;color:var(--color-text-muted);max-width:62ch;font-size:var(--text-lede)}
.ans a{color:var(--color-light)}

/* ---------- FINALE ---------- */
.final{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:calc(var(--nav-h) + 40px) var(--spacing-gutter) 80px;background:radial-gradient(34% 26% at 50% 40%,rgba(255,122,46,.12),rgba(255,122,46,0) 70%),radial-gradient(60% 50% at 50% 55%,rgba(30,85,46,.22),rgba(10,17,12,0) 75%)}
.fn-cur{position:absolute;top:0;bottom:0;width:50.6%;background:var(--curtain-img) 0 50%/210% 100% no-repeat,var(--color-fabric-deep);backface-visibility:hidden}
.fn-cur.l{left:0;transform-origin:0 50%;transform:scaleX(var(--fs,.08))}
.fn-cur.r{right:0;background-position:100% 50%;transform-origin:100% 50%;transform:scaleX(var(--fs,.08))}
.fn-cur::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(6,11,7,.5) 0 3%,rgba(6,11,7,0) 3% 6%);opacity:calc(1 - var(--fs,.08))}
.fn-inner{position:relative;z-index:2;display:grid;justify-items:center;gap:1.2rem;text-align:center;max-width:900px;text-shadow:var(--tshadow)}
.fn-mark{width:64px;height:64px;color:var(--color-light);filter:drop-shadow(0 0 12px rgba(221,176,99,.5))}
.h-final{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(3rem,1.4rem + 6.4vw,8.4rem);line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.h-final .ch{display:inline-block}
.fn-inner > p{font-size:var(--text-lede);color:var(--color-text-muted)}
.fn-inner .cta-row{justify-content:center}
.fn-info{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;margin-top:1.4rem;font-size:var(--text-small)}
.fn-info dt{font-family:var(--font-display);font-style:italic;color:var(--color-light)}
.fn-info dd a{color:var(--color-text);text-decoration-color:rgba(221,176,99,.5)}

/* ---------- PIÈ DI PAGINA ---------- */
.foot{padding:clamp(50px,7vw,90px) 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--color-line);background:var(--color-stage-deep)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,60px)}
.ft-brand svg{width:54px;height:54px;color:var(--color-light)}
.ft-word{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.14em;margin:.8rem 0 .4rem}
.foot h3{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1.2rem;color:var(--color-light);margin-bottom:.6rem}
.foot p{color:var(--color-text-muted);font-size:var(--text-small);line-height:1.7}
.foot a{color:var(--color-text);text-decoration-color:rgba(221,176,99,.4)}
.foot a:hover{color:var(--color-light)}
.legal{margin-top:clamp(36px,5vw,60px);padding-top:20px;border-top:1px solid rgba(221,176,99,.12);font-size:var(--text-caption)!important;color:var(--color-text-faint)!important;max-width:80ch}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1 / -1}}
@media (max-width:440px){.ft-grid{grid-template-columns:1fr}}

/* ---------- barra fissa sui telefoni ---------- */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;display:none;gap:10px;padding:8px;border-radius:999px;background:rgba(10,17,12,.86);border:1px solid rgba(221,176,99,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px -12px rgba(0,0,0,.8);transform:translateY(calc(100% + 30px));transition:transform .6s var(--primitive-ease-enter)}
.dock .btn{--h:48px;flex:1}
.dock .btn-ghost{flex:0 0 auto}
.dock.on{transform:none}
@media (max-width:760px){html{scroll-padding-bottom:96px}.dock{display:flex}.foot{padding-bottom:calc(110px + env(safe-area-inset-bottom))}}

/* ---------- POP-UP: menu (carta) e prenotazione (velluto) ---------- */
html.dlg-open{overflow:hidden}
.dlg{position:fixed;inset:0;margin:auto;padding:0;border:0;background:transparent;color:var(--color-text);overflow:hidden;overflow:clip;max-width:none;max-height:none;border-radius:6px}
.dlg::backdrop{background:rgba(4,8,5,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .5s ease}
.dlg.show::backdrop{opacity:1}
.dlg-cur{position:absolute;top:0;bottom:0;width:50.6%;z-index:5;pointer-events:none;background:var(--curtain-img) 0 50%/210% 100% no-repeat,var(--color-fabric-deep);transition:transform 1.05s var(--primitive-ease-curtain) .08s}
.dlg-cur.l{left:0}
.dlg-cur.r{right:0;background-position:100% 50%}
.dlg.show .dlg-cur.l{transform:translateX(-101%)}
.dlg.show .dlg-cur.r{transform:translateX(101%)}
.dlg.closing .dlg-cur{transition-duration:.42s;transition-delay:0s}
.dlg-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(70% 50% at 20% 0%,rgba(30,85,46,.35),transparent 70%),linear-gradient(180deg,#132119,var(--color-stage) 40%);border:1px solid var(--color-line);border-radius:6px;opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s var(--primitive-ease-enter) .28s,transform .9s var(--primitive-ease-enter) .28s}
.dlg.show .dlg-panel{opacity:1;transform:none}
.dlg-close{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid rgba(242,230,208,.35);background:rgba(6,11,7,.4);display:grid;place-items:center;transition:border-color .3s,color .3s,transform .5s var(--primitive-ease-enter)}
.dlg-close:hover{border-color:var(--color-light);color:var(--color-light-hover);transform:rotate(90deg)}
.dlg-close svg{width:22px;height:22px}
.md-kick{font-family:var(--font-display);font-style:italic;font-size:1rem;color:var(--color-light)}
.md-title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,1.6rem + 3vw,4rem);line-height:1}

/* il menu è stampato sulla carta del programma */
.menu-dlg{width:min(1120px,calc(100% - 48px));height:min(900px,calc(100svh - 48px))}
.paper{color-scheme:light;background:var(--playbill-bg);color:var(--playbill-fg);border-color:rgba(122,85,32,.35)}
.paper::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.45;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E")}
.paper .md-kick{color:var(--color-ink-gold)}
.paper .md-title{color:var(--playbill-accent)}
.paper .dlg-close{border-color:rgba(15,34,21,.3);background:transparent;color:var(--color-ink)}
.paper .dlg-close:hover{border-color:var(--playbill-accent);color:var(--playbill-accent)}
.paper :focus-visible{outline-color:var(--playbill-accent)}
.md-head{position:relative;padding:22px clamp(18px,3vw,40px) 0;border-bottom:1px solid var(--playbill-rule)}
.md-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.md-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.md-seg{position:relative;display:inline-flex;padding:4px;border-radius:999px;border:1px solid rgba(15,34,21,.25);isolation:isolate}
.md-seg button{position:relative;z-index:1;font-size:.95rem;font-weight:500;color:var(--color-ink-muted);background:none;border:0;border-radius:999px;padding:9px 18px;min-height:40px;transition:color .35s}
.md-seg button[aria-pressed="true"]{color:var(--color-paper)}
.md-seg-ink{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--playbill-accent);transition:transform .55s var(--primitive-ease-enter),width .55s var(--primitive-ease-enter),opacity .3s}
.md-search{flex:1 1 220px;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:999px;border:1px solid rgba(15,34,21,.25);background:rgba(255,255,255,.35);color:var(--color-ink-muted)}
.md-search:focus-within{border-color:var(--playbill-accent)}
.md-search svg{width:18px;height:18px;flex:none}
.md-search input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--color-ink);background:none;border:0;outline:none}
.md-search input::placeholder{color:var(--color-ink-muted)}
.md-chips{display:flex;gap:8px;overflow-x:auto;padding:14px clamp(18px,3vw,40px);margin:0 calc(-1 * clamp(18px,3vw,40px));scrollbar-width:none}
.md-chips::-webkit-scrollbar{display:none}
.md-chips a{flex:none;font-size:.9rem;text-decoration:none;color:var(--color-ink-muted);padding:8px 14px;border-radius:999px;border:1px solid rgba(15,34,21,.18);white-space:nowrap;transition:color .3s,border-color .3s,background-color .3s}
.md-chips a:hover{color:var(--color-ink);border-color:rgba(15,34,21,.45)}
.md-chips a.on{color:var(--color-paper);border-color:var(--playbill-accent);background:var(--playbill-accent)}
.md-body{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px clamp(18px,3vw,40px) 40px;scrollbar-width:thin;scrollbar-color:var(--playbill-accent) transparent}
.md-body:focus,.md-sec:focus{outline:none}
.md-body:focus-visible{outline:2px solid var(--playbill-accent);outline-offset:-2px}
.md-sec{padding-top:30px;scroll-margin-top:8px}
.md-sec h3{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(1.8rem,1.4rem + 1.4vw,2.5rem);line-height:1.1;color:var(--playbill-accent);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.md-sec h3 small{font-family:var(--font-body);font-style:normal;font-size:.85rem;color:var(--color-ink-gold)}
.md-list{margin-top:12px;columns:2 340px;column-gap:clamp(28px,4vw,64px)}
.md-list li{break-inside:avoid;display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--playbill-rule);font-size:1rem;line-height:1.35}
.md-list li .d{flex:1 0 24px;border-bottom:1px dotted rgba(15,34,21,.4);transform:translateY(-4px)}
.md-list li .p{flex:none;font-family:var(--font-display);font-size:1.12rem;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.md-list li .p small{font-family:var(--font-body);font-size:.75em;color:var(--color-ink-muted)}
.md-list .ast{color:var(--playbill-accent);font-size:.75em;margin-left:1px}
.md-count{padding-top:22px;font-size:.9rem;color:var(--color-ink-gold)}
.md-empty{padding:60px 0;text-align:center;color:var(--color-ink-muted);font-size:1.05rem}
.md-endnote{display:none;margin-top:36px;font-size:.8rem;line-height:1.55;color:var(--color-ink-muted)}
.md-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px clamp(18px,3vw,40px);border-top:1px solid var(--playbill-rule);background:rgba(230,211,179,.6)}
.md-foot p{font-size:.8rem;color:var(--color-ink-muted);max-width:60ch}
mark.hit{background:rgba(30,85,46,.18);color:inherit;border-radius:3px;padding:0 2px}
.md-sec.enter{animation:secin .6s var(--primitive-ease-enter) both}
@keyframes secin{from{opacity:0;transform:translateY(14px)}}
@media (max-width:720px){
  .menu-dlg{width:100%;height:100%;height:100dvh;border-radius:0}
  .menu-dlg .dlg-panel{border-radius:0;border:0}
  .md-head{padding-top:16px}
  .md-seg{flex:1 1 100%}
  .md-seg button{flex:1}
  .md-list{columns:1}
  .md-foot{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .md-foot p{display:none}
  .md-endnote{display:block}
  .md-foot .btn{flex:1 1 100%}
}
@media (max-height:560px){
  .menu-dlg{width:100%;height:100%;height:100dvh;border-radius:0}
  .menu-dlg .dlg-panel{border-radius:0;border:0}
  .md-head{padding-top:10px}
  .md-top{align-items:center}
  .menu-dlg .md-kick{display:none}
  .menu-dlg .md-title{font-size:1.8rem}
  .md-tools{margin-top:8px;flex-wrap:nowrap}
  .md-seg{flex:none}
  .md-seg button{padding:7px 14px;white-space:nowrap}
  .md-search{min-height:42px}
  .md-chips{padding-block:6px}
  .md-foot{padding-block:8px}
  .md-foot p{display:none}
  .md-endnote{display:block}
  .md-foot .btn{flex:1 1 100%;--h:44px}
}

/* prenotazione */
.book-dlg{width:min(880px,calc(100% - 48px));height:fit-content;max-height:calc(100svh - 48px)}
.book-dlg .dlg-panel{position:relative;inset:auto;display:block;max-height:calc(100svh - 48px);overflow-y:auto;overscroll-behavior:contain}
.bk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px clamp(20px,3.4vw,40px) 24px;border-bottom:1px solid var(--color-line)}
.bk-lede{margin-top:12px;color:var(--color-text-muted);text-wrap:balance}
.bk-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:auto;padding-top:6px}
@media (max-width:720px){
  .book-dlg{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .book-dlg .dlg-panel{max-height:calc(100dvh - 24px)}
  .bk-form{grid-template-columns:1fr}
  .bk-chat{border-left:0;border-top:1px solid var(--color-line)}
  .bk-actions{align-self:stretch}
  .bk-actions .btn{flex:1 1 100%}
}
@media (max-height:560px){
  .book-dlg{max-height:calc(100dvh - 16px)}
  .book-dlg .dlg-panel{max-height:calc(100dvh - 16px)}
  .bk-fields,.bk-chat{padding-block:16px 20px;gap:10px}
}

/* tocco: aree comode da 44 px */
@media (pointer:coarse){
  .nav-links a{padding:12px 4px}
  .foot p a{display:inline-block;padding:8px 0;margin:-8px 0}
}

/* ---------- aggiunte: elementi creati dallo script ---------- */
.split-vis{display:block}
.fx-chars .split-vis,.fx-words .split-vis{display:inline}
#smoke path{transform-box:fill-box;transform-origin:50% 100%;animation:wisp 3.8s linear infinite}
@keyframes wisp{0%{transform:translateY(0) scaleX(1);opacity:0}25%{opacity:1}100%{transform:translateY(-130px) scaleX(1.8);opacity:0}}
.temp-n.tick{animation:tick .3s var(--primitive-ease-enter)}
@keyframes tick{from{transform:translateY(-6px);opacity:.6}}
.reel .card{will-change:transform}
/* scorrimento morbido (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* le foto in <picture>: il contenitore non crea un riquadro, l'immagine resta figlia diretta per il layout */
picture{display:contents}
.stage video.hero-up{z-index:0}

/* Ripasso del contorno: un filo sottilissimo nello stesso colore del testo, per i filetti dei caratteri molto contrastati.
   Instrument Serif ha filetti robusti: sui titoli non serve. Si usa solo sui corsivi piccoli (vedi in fondo al file). */
:root{--ripasso:0px}
.h-sec,.act-num,.intro-line,.thread span,.kick,.h-hero,.b2 .giant,.cuts,.h-band,
.pb-venue,.pb-title,.pb-num,.pb-name,.pb-extra-t,.pb-foot,.act-title,.prices .p,
.card .cn,.card b,.quote-strip,.brace-line,.temp,.lvl,.ct-finale p,.cn-num,.stats b,
.riserve h3,.sd-t,.nm-score b,.faq summary,.h-final,.fn-info dt,.foot h3,
.md-kick,.md-title,.md-sec h3,.md-list li .p,.didascalia,.bis-line,.brand-word,.ft-word{-webkit-text-stroke:var(--ripasso) currentColor}
/* i piccoli testi in Instrument Sans dentro elementi in serif restano senza ripasso */
.prices .p small,.md-sec h3 small,.md-list li .p small{-webkit-text-stroke:0}

/* ---------- Mattatore: didascalie di scena, numeri della casa, banco da casa, prenotazione su WhatsApp ---------- */
/* didascalie come nei copioni: fra parentesi, in corsivo, una per sezione al massimo */
.didascalia{margin-top:1.1rem;font-family:var(--font-display);font-style:italic;font-size:clamp(1.375rem,1.15rem + .6vw,1.7rem);line-height:1.25;color:var(--color-text-muted);text-wrap:balance}
.quote-strip:has(+ .didascalia){padding-bottom:0}
.quote-strip + .didascalia{margin-top:.6rem;padding-bottom:var(--spacing-section)}
.sc-text .link-gold{margin-top:1rem}
.bis-line{margin-top:1.4rem;font-family:var(--font-display);font-style:italic;font-size:var(--text-h3);line-height:1.15;color:var(--color-light)}
.nm-grid .note{margin-top:1rem;color:var(--color-text-faint)}
.nm-score p:not(:has(.nm-arc)){align-content:end}

/* il banco da casa: una conversazione su WhatsApp, due bolle */
.chat{display:grid;gap:10px;width:min(100%,400px);padding:18px;border-radius:20px;background:rgba(6,11,7,.55);border:1px solid var(--color-line);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.chat p{max-width:30ch;padding:11px 14px 12px;border-radius:16px;font-size:.98rem;line-height:1.45;color:var(--color-text)}
.chat-in{justify-self:start;background:var(--color-panel);border-bottom-left-radius:4px}
.chat-out{justify-self:end;background:#1f5c45;border-bottom-right-radius:4px}
.chat-time{display:block;margin-top:4px;text-align:right;font-size:.78rem;color:rgba(242,230,208,.82)}

/* prenotazione dimostrativa: a sinistra le scelte, a destra il messaggio che si scrive da solo */
.bk-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bk-fields{display:grid;gap:16px;align-content:start;padding:26px clamp(20px,3.4vw,40px) 30px}
.bk-f{display:grid;gap:7px;font-size:.92rem;color:var(--color-text-muted)}
.bk-f select,.bk-f input[type=date]{width:100%;min-height:48px;padding:0 14px;border-radius:10px;border:1px solid var(--color-line);background:rgba(6,11,7,.6);color:var(--color-text);font:inherit;font-size:1rem;color-scheme:dark}
.bk-f select:focus-visible,.bk-f input[type=date]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.bk-pref{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.bk-pref legend{float:left;width:100%;margin-bottom:7px;padding:0}
.bk-pref label{position:relative;display:inline-flex}
.bk-pref input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.bk-pref span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--color-line);color:var(--color-text);transition:background-color .25s,border-color .25s,color .25s}
.bk-pref input:checked + span{background:var(--color-light);border-color:var(--color-light);color:var(--button-fg)}
.bk-pref input:focus-visible + span{outline:2px solid var(--color-focus);outline-offset:2px}
.bk-chat{display:flex;flex-direction:column;gap:14px;padding:26px clamp(20px,3.4vw,40px) 30px;border-left:1px solid var(--color-line);background:linear-gradient(180deg,rgba(30,85,46,.18),rgba(6,11,7,0))}
.bk-chat-h{display:flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.bk-chat-h svg{width:18px;height:18px;color:var(--color-light)}
.bubble{align-self:flex-end;max-width:32ch;padding:12px 16px 14px;border-radius:18px 18px 4px 18px;background:#1f5c45;color:var(--color-text);font-size:1rem;line-height:1.45;box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.bubble.sent{animation:bk-send .9s var(--primitive-ease-expo)}
@keyframes bk-send{0%{transform:none}30%{transform:translateY(-16px) scale(1.03)}100%{transform:none}}
.bk-sent{font-size:.95rem;color:var(--color-light)}
.bk-sent span{display:block;margin-top:2px;color:var(--color-text-muted)}
.bk-note{font-size:.86rem;line-height:1.5;color:var(--color-text-faint);max-width:40ch}
.bk-dm{padding:16px clamp(20px,3.4vw,40px) 22px;border-top:1px solid var(--color-line);font-size:.95rem;color:var(--color-text-muted)}
.bk-dm a{color:var(--color-light)}

/* i testi di Mattatore sono più lunghi: le due parole giganti dell'hero vanno su due altezze, i tagli un po' più piccoli */
.b2 .giant.l{top:36%}
.b2 .giant.r{top:64%}
@media (orientation:portrait) and (max-width:1024px){
  .b2 .giant.l{top:30%}
  .b2 .giant.r{top:70%}
  .cuts{font-size:clamp(1.45rem,6.4vw,2.8rem)}
}
@media (orientation:landscape) and (max-height:560px){.b2 .giant.l{top:32%}.b2 .giant.r{top:68%}}
/* prenotazione e numeri sul telefono (dopo le regole generali, che altrimenti vincerebbero) */
@media (max-width:720px){
  .bk-form{grid-template-columns:1fr}
  .bk-chat{border-left:0;border-top:1px solid var(--color-line)}
  .bk-actions{align-self:stretch}
  .bk-actions .btn{flex:1 1 100%}
}
@media (max-width:480px){.nm-score{grid-template-columns:1fr 1fr}}

/* ---------- rifiniture dopo la revisione ---------- */
/* elementi decorativi sopra i pulsanti dell'hero: non devono rubare i tocchi */
.cue,.ring{pointer-events:none}
/* la barra sul telefono: il pulsante principale si stringe invece di uscire dallo schermo */
.dock .btn{min-width:0;padding:0 16px}
.dock .btn-gold{flex:1 1 0}
@media (max-width:389px){.dock .btn{padding:0 12px;font-size:.95rem}.dock .btn .ic{display:none}}
@media (max-width:345px){.dk-x{display:none}}
/* il nome nel piede, alla misura giusta (la regola dei paragrafi del piede vinceva) */
.foot .ft-word{font-size:1.6rem;line-height:1;letter-spacing:.14em;color:var(--color-text);margin:.8rem 0 .4rem}
/* il suggerimento "Trascina" non si schiaccia nelle schede strette */
.dish-hint{width:max-content}
.dish-hint svg{flex:none}
/* il filo laterale: tra 1180 e 1600 px le etichette che si accendono coprirebbero il testo */
@media (max-width:1599px){.thread a.flash:not(:hover):not(:focus-visible) span{opacity:0}}
.thread b{box-shadow:0 0 0 3px rgba(6,11,7,.55)}
/* a capo più belli */
.h-hero,.pb-note,.fn-inner > p,.fn-info dd,.tip{text-wrap:balance}
.pb-desc,.b4 .sub{text-wrap:pretty}
/* la x della ricerca nei colori della carta */
.md-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%230f2215' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
/* la manopola sul telefono: etichette leggibili */
@media (max-width:520px){.dial-wrap{padding-inline:8px}.dial-lbl{font-size:22px}}
/* ripasso del contorno solo sui corsivi piccoli: su schermi a 1x i loro filetti si perdevano */
.fn-info dt,.pb-foot,.pb-venue,.pb-extra-t,.temp-u,.thread span,.md-kick,.kick,.act-num,.intro-line,.foot h3,.riserve h3{-webkit-text-stroke:.25px currentColor}
@media (min-resolution:2dppx){.fn-info dt,.pb-foot,.pb-venue,.pb-extra-t,.temp-u,.thread span,.md-kick,.kick,.act-num,.intro-line,.foot h3,.riserve h3{-webkit-text-stroke:.18px currentColor}}

/* il badge dei concept Duo Motion (come negli altri concept del portfolio), nei colori di Mattatore.
   Sul telefono c'è la barra di prenotazione: lì il rimando al progetto sta nel piede */
.concept{position:fixed;right:16px;bottom:16px;z-index:45;display:block;white-space:nowrap;padding:10px 16px;border-radius:99px;background:rgba(6,11,7,.86);color:var(--color-text);border:1px solid rgba(221,176,99,.3);font:600 11px/1 var(--font-body);letter-spacing:.05em;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .25s,transform .25s var(--primitive-ease-enter)}
.concept b{background:linear-gradient(90deg,#3B82F6,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.concept .cx{color:var(--color-text-muted)}
.concept::after{content:" →"}
.concept:hover{border-color:var(--color-light);transform:translateY(-2px)}
.intro-on .concept{opacity:0;pointer-events:none}
@media (max-width:760px){.concept{display:none}}

/* === LUCI DEL FOGLIO "IN CARTELLONE" === */
/* Due faretti LED chiusi in una scatola di ottone lucido, a cavallo del bordo alto del foglio, sui due vertici di
   mezzo del bordo diviso in tre parti uguali (1/3 e 2/3). Il metallo copre sopra e ai lati; il LED è una feritoia
   in basso. La luce sulla carta la calcola main.js come in fisica: ogni faretto è un fascio a cono puntato in
   basso, i due fasci si sommano. Restano fuori dai fasci, e quindi in ombra (solo la luce della sala), i due
   angoli in alto e una piccola punta al centro, fra i due fasci. Sotto ogni faretto c'è una pozza calda, sul
   bordo di ogni fascio una frangia calda come nei faretti LED veri, e verso il fondo, lontano dai faretti, la
   luce cala piano fino al bordo basso.
   - Due tele: .pb-bagliore schiarisce la carta SOTTO i testi ("screen", z-index:-1, il foglio è isolato);
     .pb-ombra porta luce e ombra SOPRA i testi ("multiply", z-index:1): carta e inchiostro scuriscono insieme
     e il contrasto resta. Sopra tutto ci sono solo i faretti.
   - Senza JavaScript le tele restano vuote (trasparenti): si vede il foglio di sempre, con i LED accesi.
   - --fx: posizione dei faretti, 1/3 su ogni schermo. main.js usa la stessa per il calcolo della luce.
   - --acceso (0-1) lo mette main.js durante l'accensione: LED e riflesso caldo sulla scatola. */
.playbill{isolation:isolate;--faro-w:clamp(54px,38px + 4.6vw,106px);--faro-h:clamp(17px,14.3px + .95vw,28px)}
.pb-luci{position:absolute;inset:0;border-radius:inherit;pointer-events:none;--fx:calc(1 / 3)}
.pb-luci canvas{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.pb-bagliore{z-index:-1;mix-blend-mode:screen}
.pb-ombra{z-index:1;mix-blend-mode:multiply}
.pb-luci span{position:absolute;display:block;pointer-events:none}
/* la scatola: ottone lucido a spigoli vivi. Sulla faccia riflessi netti (un filo di luce sullo spigolo alto, la
   sala scura, un lampo a metà); ai lati una smussatura scura con il filo chiaro verso la faccia, così si legge
   come un blocco di metallo e non come una barretta. L'ombra della scatola sulla carta è piena a LED spento e
   quasi sparisce a LED acceso: lì sotto la luce del faretto è la più forte di tutto il foglio */
.pb-faro{z-index:2;left:calc(var(--fx) * 100%);top:calc(var(--faro-h) * -.7);width:var(--faro-w);height:var(--faro-h);transform:translateX(-50%);
  border-radius:calc(var(--faro-h) * .13) calc(var(--faro-h) * .13) calc(var(--faro-h) * .06) calc(var(--faro-h) * .06);
  background:
    linear-gradient(90deg,rgba(20,12,3,.78) 0,rgba(20,12,3,.5) 2.6%,rgba(255,236,190,.55) 3.4%,rgba(255,236,190,.12) 5%,rgba(255,236,190,0) 7%,rgba(255,236,190,0) 93%,rgba(255,236,190,.1) 95%,rgba(255,236,190,.45) 96.6%,rgba(20,12,3,.5) 97.4%,rgba(20,12,3,.78) 100%),
    linear-gradient(180deg,#2a1c09 0,#f6e3b2 5%,#d2aa62 9%,#8a6127 17%,#4f3613 29%,#6d4b1c 39%,#d9b46d 48%,#fff6dc 52%,#ecd096 55%,#a47a37 64%,#6f4d1d 77%,#4a3311 88%,#2a1d0b 100%);
  box-shadow:0 0 0 .6px rgba(26,16,4,.92),inset 0 1px 0 rgba(255,240,205,.4),0 calc(var(--faro-h) * .25) calc(var(--faro-h) * .5) calc(var(--faro-h) * -.15) rgba(0,0,0,calc(.55 - .43 * var(--acceso,1)))}
.pb-faro.dx{left:calc((1 - var(--fx)) * 100%)}
/* la feritoia del LED sotto il bordo della scatola, chiusa dal metallo ai lati: spento si vede il diffusore
   opaco nel buio della scatola */
.pb-faro::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:24%;border-top:1px solid rgba(18,10,2,.85);border-radius:1px 1px 0 0;background:linear-gradient(#120b04,#4a4033)}
/* la carta illuminata si specchia nella parte bassa della scatola */
.pb-faro::after{content:"";position:absolute;inset:40% 0 0;border-radius:0 0 calc(var(--faro-h) * .08) calc(var(--faro-h) * .08);mix-blend-mode:screen;opacity:var(--acceso,1);
  background:linear-gradient(0deg,rgba(255,206,140,.5) 0,rgba(255,206,140,.16) 45%,rgba(255,206,140,0) 100%)}
/* LED acceso: il diffusore quasi bianco caldo e il bagliore appena sotto */
.pb-led{left:8.5%;right:8.5%;bottom:0;height:20%;border-radius:1px 1px 0 0;opacity:var(--acceso,1);background:linear-gradient(#fffaf0,#fff1dc);
  box-shadow:0 0 calc(var(--faro-h) * .12) calc(var(--faro-h) * .05) rgba(255,246,230,.95),0 calc(var(--faro-h) * .2) calc(var(--faro-h) * .6) calc(var(--faro-h) * .1) rgba(255,224,178,.6),0 calc(var(--faro-h) * .45) calc(var(--faro-h) * 1.3) calc(var(--faro-h) * .2) rgba(255,210,150,.28)}
/* la riga dell'orario in fondo sta dove la luce cala: il suo oro è appena più scuro (a occhio lo stesso colore),
   così resta sopra 4,5:1 di contrasto anche con la grana della carta su ogni schermo */
.playbill .pb-foot{color:#744f1d}