/* Disorder Public House · the house of smash
   Stampa su nero: carta consumata, inchiostro bianco, mezzatinta.
   Token, layout, hero scrub, motion. Tutto transform/opacity. */

:root{
  --ink:#0c0c0b;              /* la carta: mai #000, tinta verso il caldo della ripresa */
  --sheet:rgba(14,14,13,.9);  /* il foglio sopra la carta: lascia un fantasma della pinta */
  --paper:#ece8df;            /* l'inchiostro bianco, 15.9:1 sul foglio */
  --paper-2:#a19d94;          /* testo secondario, 7.1:1 sul foglio, 5:1 sul punto peggiore della pinta */
  --rule:#2a2926;             /* filetti */
  --rule-strong:#6b675f;      /* bordi interattivi, 3.4:1 */
  --ember:#f2b134;            /* il cheddar: solo prezzi e numeri che contano */

  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --body:"Karla",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --gutter:clamp(16px,4vw,64px);
  --navh:clamp(52px,8vh,74px);
  --edge:clamp(26px,5.5vh,60px);
  /* la pinta: alta quanto la finestra permette, mai piu' larga di un terzo della pagina */
  --pinth:min(78vh,118vw);
  --pintw:calc(var(--pinth) * .5932);
  --lane:calc(var(--pintw) + 7vw);
  --halftone:url("halftone.svg");
  --tshadow:0 1px 2px rgba(8,8,7,.95),0 3px 12px rgba(8,8,7,.8),0 10px 44px rgba(8,8,7,.8);
}
@supports (height:1svh){:root{--pinth:min(78svh,118vw)}}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.55;
  opacity:0;transition:opacity .9s var(--ease-out);
}
body.ready{opacity:1}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:.005em;text-transform:uppercase}
p{margin:0}
:focus-visible{outline:2px solid var(--paper);outline-offset:4px;border-radius:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:12px;left:12px;z-index:100;padding:10px 14px;background:var(--paper);color:var(--ink);font-weight:700;border-radius:2px;transform:translateY(-200%);transition:transform .3s var(--ease-out)}
.skip:focus{transform:none}

/* ---------- Il fondo ----------
   Due livelli ricavati dall'immagine del cliente: la carta senza la pinta, e
   la pinta sola, bianca con la trasparenza presa dalla luminanza. Separati,
   la pinta puo' restare nascosta dietro la hero e comparire quando il panino
   se ne va. --pint lo scrive il JS sullo scroll, solo su questo elemento. */
/* alto quanto lo schermo con la barra del browser nascosta: quando la barra va e
   viene (sul telefono, soprattutto in fondo alla pagina) il fondo non cambia
   misura, la pinta non salta e il canvas non si ridisegna da capo */
.bg{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:0;pointer-events:none;overflow:hidden;--pint:0}
.bg .paper{position:absolute;inset:0;background:url("paper.webp") center/cover no-repeat}
/* la carta viva (WebGL, vedi main.js): quando e' pronta disegna lei carta e pinta, e i due livelli CSS restano come riserva */
.bg .paper-gl{position:absolute;inset:0;width:100%;height:100%;display:none}
.bg.gl .paper-gl{display:block}
.bg.gl .pint{visibility:hidden}
.bg .pint{
  position:absolute;left:50%;top:52%;height:var(--pinth);width:auto;max-width:none;
  opacity:var(--pint);
  transform:translate(-50%,-50%) translateY(calc((1 - var(--pint))*5vh)) scale(calc(.95 + .05*var(--pint)));
  will-change:transform,opacity;
}
/* pulviscolo: due strati di polvere di stampa che salgono lentissimi */
.bg .dust{position:absolute;left:0;right:0;top:0;bottom:-600px;background-repeat:repeat;will-change:transform}
.bg .d1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cg fill='%23ece8df'%3E%3Ccircle cx='40' cy='70' r='1' opacity='.5'/%3E%3Ccircle cx='190' cy='30' r='.7' opacity='.35'/%3E%3Ccircle cx='330' cy='120' r='1.2' opacity='.45'/%3E%3Ccircle cx='480' cy='60' r='.8' opacity='.3'/%3E%3Ccircle cx='110' cy='250' r='.9' opacity='.4'/%3E%3Ccircle cx='270' cy='300' r='.6' opacity='.3'/%3E%3Ccircle cx='420' cy='260' r='1.1' opacity='.4'/%3E%3Ccircle cx='520' cy='390' r='.7' opacity='.35'/%3E%3Ccircle cx='60' cy='430' r='.8' opacity='.3'/%3E%3Ccircle cx='220' cy='480' r='1.3' opacity='.4'/%3E%3Ccircle cx='370' cy='420' r='.6' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");background-size:560px 560px;opacity:.55;animation:dust1 140s linear -40s infinite}
.bg .d2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Cg fill='%23ece8df'%3E%3Ccircle cx='30' cy='40' r='.6' opacity='.4'/%3E%3Ccircle cx='160' cy='110' r='.5' opacity='.3'/%3E%3Ccircle cx='300' cy='70' r='.7' opacity='.35'/%3E%3Ccircle cx='90' cy='220' r='.5' opacity='.3'/%3E%3Ccircle cx='240' cy='260' r='.8' opacity='.4'/%3E%3Ccircle cx='350' cy='330' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");background-size:380px 380px;opacity:.45;animation:dust2 90s linear -25s infinite}
@keyframes dust1{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-560px,0)}}
@keyframes dust2{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-380px,0)}}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter)}
/* il fondo sfocato sta su un livello a parte: un backdrop-filter sulla nav la renderebbe il riquadro
   di riferimento del menu mobile (position:fixed), che da meta' pagina resterebbe chiuso dentro la barra */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,12,11,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.nav.solid::before{opacity:1}
html.menu-open{overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.brand svg{width:20px;height:27px;color:var(--paper)}
.nav ul{display:flex;gap:clamp(14px,2vw,30px);margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.nav ul a{position:relative;padding:6px 0;color:var(--paper-2);transition:color .3s}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav ul a:hover,.nav ul a:focus-visible{color:var(--paper)}
.nav ul a:hover::after{transform:scaleX(1)}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.menu-btn span{position:relative;display:block;width:22px;height:2px;background:var(--paper);transition:transform .35s var(--ease-out),background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--paper);transition:transform .35s var(--ease-out)}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}
.nav.open .menu-btn span{background:transparent}
.nav.open .menu-btn span::before{transform:translateY(7px) rotate(45deg)}
.nav.open .menu-btn span::after{transform:translateY(-7px) rotate(-45deg)}

/* bottoni: timbri, non pillole. Il primario e' inchiostro pieno */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:2px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1;transition:transform .45s var(--ease-out),background .3s,color .3s,border-color .3s;position:relative;isolation:isolate}
.btn-primary{background:var(--paper);color:var(--ink);font-weight:700}
/* all'hover il timbro lascia la sua ombra a mezzatinta */
.btn-primary::after{content:"";position:absolute;inset:0;transform:translate(0,0);background:radial-gradient(circle,var(--paper) 1.1px,transparent 1.5px) 0 0/5px 5px;z-index:-1;opacity:0;transition:transform .45s var(--ease-out),opacity .3s}
.btn-primary:hover{transform:translate(-3px,-3px)}
.btn-primary:hover::after{opacity:.55;transform:translate(6px,6px)}
.btn-ghost{border:1px solid var(--rule-strong);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper);transform:translateY(-2px)}

/* ---------- Hero ---------- */
.hero{position:relative;z-index:1;height:340vh}   /* 2,4 schermate di scroll: la hero non deve far aspettare le informazioni */
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--gap:clamp(10px,1.8vh,26px)}
/* il filmato a tutto schermo. Il bordo basso sfuma nella carta del fondo,
   cosi quando la hero si sgancia non c'e' uno spigolo che passa sulla pinta */
.panel{position:absolute;inset:0;background:var(--ink);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%)}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background:center/cover no-repeat}
.stage video{opacity:0;transition:opacity .8s var(--ease-out);transform:translateZ(0);will-change:transform;pointer-events:none}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.stage-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,11,.78) 0,rgba(12,12,11,.3) 16%,rgba(12,12,11,0) 30%,rgba(12,12,11,0) 64%,rgba(12,12,11,.45) 84%,rgba(12,12,11,.7) 100%)}
.ring{position:absolute;right:14px;bottom:14px;width:30px;height:30px;color:var(--paper);opacity:.8;z-index:2;transition:opacity .5s}
.ring circle{transition:stroke-dashoffset .2s linear}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);opacity:0;transition:opacity .6s}
.stage.cue-on .cue{opacity:1}
.cue i{width:1px;height:34px;background:linear-gradient(var(--paper-2),transparent);animation:cueDrop 2.4s var(--ease-in-out) infinite}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}41%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* bande: sopra e sotto il panino, mai sopra */
.band{position:absolute;left:50%;transform:translateX(-50%);width:min(780px,88vw);text-align:center;pointer-events:none;opacity:0;text-shadow:var(--tshadow);--k:0}
.band .btn{text-shadow:none;pointer-events:auto}
.band>*{position:relative}
.band.on{pointer-events:auto}

.b1{top:calc(var(--navh) + var(--gap));display:flex;flex-direction:column-reverse;align-items:center}
.b1 .kicker{display:block;font-family:var(--mono);font-size:clamp(12px,1vw,15px);letter-spacing:.24em;text-transform:uppercase;color:var(--paper-2);margin-bottom:10px}
.wordmark{font-family:var(--display);font-size:clamp(46px,min(10vw,12.5vh),150px);line-height:.9;letter-spacing:.02em;text-transform:uppercase}

.b2,.b3,.b4{bottom:var(--edge)}
.b2 .line,.b3 .line{font-family:var(--display);font-size:clamp(24px,min(3.2vw,5.4vh),52px);line-height:1.04;text-transform:uppercase}
.b2 .line{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*var(--jy,0px)))}
.b3 .w{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-28px))}
.b3 .sub{margin-top:14px;font-size:clamp(17px,1.5vw,22px);color:var(--paper-2);white-space:nowrap;margin-inline:auto}
/* la frase sta su una riga; sui telefoni non ci entra e va a capo in due righe pari */
@media (max-width:540px){.b3 .sub{white-space:normal;max-width:30ch;text-wrap:balance}}
.b3 .sub .w{transform:translateY(calc((1 - var(--kc))*-14px))}

.b1 .w{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.b1 .w.em{--ov:.24;--sd:.16;--ss:2.6}

.b4 h2{font-size:clamp(28px,min(4.2vw,6vh),66px)}
.b4 h2 .w{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*26px))}
.b4 .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px));margin-top:16px;font-size:clamp(17px,1.5vw,22px);color:var(--paper-2);max-width:32ch;margin-inline:auto}
.b4 .row{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px));display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}

/* hero statico (telefono, portrait, reduced motion) */
.static{display:none;flex-direction:column;align-items:center;text-align:center;text-shadow:var(--tshadow)}
.static .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-2)}
.static .title{font-family:var(--display);font-size:clamp(64px,20vw,140px);line-height:.9;text-transform:uppercase;margin-top:6px}
.static .sub{margin-top:12px;color:var(--paper-2);max-width:34ch}
.static .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.static .btn{text-shadow:none}

/* ---------- Le finestre: niente foglio, si vede la pinta ---------- */
main{position:relative;z-index:1}
.window{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--lane) minmax(0,1fr);align-items:center;padding:0 var(--gutter);text-shadow:var(--tshadow)}
.window .side{min-width:0}
.window .left{grid-column:1;justify-self:end;text-align:right}
.window .right{grid-column:3;justify-self:start}

.strip{min-height:135vh}
.strip .intro{font-family:var(--display);font-size:clamp(24px,2.6vw,46px);line-height:1.06;text-transform:uppercase;max-width:15ch;margin-left:auto}
.nums{display:grid;gap:clamp(22px,4vh,40px)}
.nums div{display:flex;flex-direction:column;gap:4px}
.nums b{font-family:var(--display);font-weight:400;font-size:clamp(44px,5vw,84px);line-height:1;color:var(--ember)}
.nums span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);max-width:18ch}

.finale{min-height:100vh;min-height:100svh;grid-template-rows:auto auto;align-content:center;row-gap:clamp(16px,3vh,32px);padding-top:var(--navh);padding-bottom:6vh}
.finale-title{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:end;font-size:clamp(56px,8.4vw,170px);line-height:.86}
@supports not (grid-template-columns:subgrid){.finale-title{grid-template-columns:minmax(0,1fr) var(--lane) minmax(0,1fr)}}
.finale-title .l{grid-column:1;justify-self:end}
.finale-title .r{grid-column:3;justify-self:start}
.finale .side{display:flex;flex-direction:column;gap:16px;font-size:clamp(16px,1.3vw,20px);color:var(--paper-2)}
.finale .left{align-items:flex-end}
.finale .right{align-items:flex-start}
.finale .btn{text-shadow:none}
.finale .tel{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--paper)}
.finale .tel a{display:inline-block;padding:10px 0;border-bottom:1px solid var(--rule-strong);transition:border-color .3s}
.finale .tel a:hover{border-color:var(--paper)}

/* ---------- Il foglio ----------
   Le sezioni stanno su un nero appena piu' fitto della carta, che entra ed
   esce a mezzatinta: punti che crescono finche' non si toccano, come la
   schiuma e i riflessi della pinta. E' la firma del sito. */
.sheet{position:relative;background:var(--sheet);margin:121px 0}
.sheet::before,.sheet::after{content:"";position:absolute;left:0;right:0;height:121px;background:var(--halftone) 0 0/11px 121px repeat-x;pointer-events:none}
.sheet::before{bottom:100%}
.sheet::after{top:100%;transform:scaleY(-1)}

.section{position:relative;padding:clamp(72px,9vw,140px) var(--gutter)}
.wrap{max-width:1240px;margin:0 auto}
.kicker{font-family:var(--mono);font-size:clamp(15px,1.35vw,20px);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-2);display:flex;align-items:center;gap:12px}
.kicker svg{width:12px;height:12px;color:var(--paper);flex:none}
.h2{font-size:clamp(44px,6.5vw,104px);margin-top:14px}
.lede{margin-top:22px;font-size:clamp(17px,1.4vw,21px);color:var(--paper-2);max-width:52ch}

/* divisore: una riga di mezzatinta, piena al centro e sfinita ai lati */
.rule{height:12px;margin:0 var(--gutter);background:url("rule.svg") center/1200px 12px no-repeat;opacity:0;transform:scaleX(.3);transition:opacity 1s var(--ease-out),transform 1.6s var(--ease-out)}
.rule.in{opacity:1;transform:none}

/* entrate sequenziate */
.rev{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out)}
.rev.in{opacity:1;transform:none}
.seq .part{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform 1s var(--ease-out)}
.seq.in .part{opacity:1;transform:none}
.seq.in .part:nth-child(1){transition-delay:0s}.seq.in .part:nth-child(2){transition-delay:.09s}.seq.in .part:nth-child(3){transition-delay:.18s}.seq.in .part:nth-child(4){transition-delay:.27s}.seq.in .part:nth-child(5){transition-delay:.36s}.seq.in .part:nth-child(6){transition-delay:.45s}.seq.in .part:nth-child(7){transition-delay:.54s}.seq.in .part:nth-child(8){transition-delay:.63s}.seq.in .part:nth-child(9){transition-delay:.72s}.seq.in .part:nth-child(10){transition-delay:.81s}.seq.in .part:nth-child(11){transition-delay:.9s}.seq.in .part:nth-child(12){transition-delay:.99s}
.seq.in.done .part:nth-child(n){transition-delay:0s}
.finale-title .r.rev{transition-delay:.12s}
.finale .right.rev{transition-delay:.2s}

/* birre */
.birre .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.sticky{position:sticky;top:110px}
.tap-group+.tap-group,.menu-group+.menu-group{margin-top:44px}
.tap-group h3,.menu-group h3{font-size:clamp(22px,2.2vw,32px);display:flex;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--rule-strong)}
.tap-group h3 small,.menu-group h3 small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--paper-2);text-transform:uppercase}
.taps{list-style:none;margin:0;padding:0}
.taps li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "meta meta";gap:2px 16px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline;position:relative}
.taps li::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:2px;background:var(--paper);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease-out)}
.taps li:hover::before{transform:scaleY(1)}
.taps .name{grid-area:name;font-weight:700;font-size:17px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.taps .name .pump{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--rule-strong);border-radius:2px;color:var(--paper-2)}
.taps .price{grid-area:price;font-family:var(--mono);font-size:14px;color:var(--ember);white-space:nowrap}
.taps .meta{grid-area:meta;font-size:14px;color:var(--paper-2)}
.taps .meta i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.04em;margin-left:8px}
.note{margin-top:22px;font-size:14px;color:var(--paper-2);display:flex;gap:10px;align-items:flex-start}
.note svg{width:10px;height:10px;color:var(--paper);flex:none;margin-top:6px}

/* cucina: come le birre, il racconto fermo a sinistra e il menu a destra */
.cucina .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.menu{list-style:none;margin:36px 0 0;padding:0}
.menu li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "desc desc";gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.menu .name{grid-area:name;font-family:var(--display);font-size:clamp(22px,2vw,30px);text-transform:uppercase}
.menu .price{grid-area:price;font-family:var(--mono);color:var(--ember);white-space:nowrap}
.menu .desc{grid-area:desc;color:var(--paper-2);font-size:15px}
.menu.sides li .name{font-family:var(--body);font-weight:700;font-size:16px;text-transform:none}
.menu-group .menu{margin-top:0}
/* i menu' completi: il riquadro ambra, con l'elenco dentro */
.deal{margin-top:36px;padding:22px 22px 18px;border:1px solid var(--ember);border-radius:2px;position:relative;overflow:hidden}
.deal::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(242,177,52,.22) 1px,transparent 1.5px) 0 0/6px 6px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}
.deal>*{position:relative}
.deal h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;font-size:clamp(24px,2.4vw,34px);color:var(--ember)}
.deal .lab{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2)}
.deal .menu{margin-top:10px}
.deal .menu li:last-child{border-bottom:0}
.deal .menu .name{font-family:var(--body);font-weight:700;font-size:17px;text-transform:none}

/* eventi: testata e righe da manifesto, niente colonne gemelle */
.eventi .cta{margin-top:28px}   /* finche' il calendario vive su Instagram: le righe .events restano pronte */
.events{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;border-top:1px solid var(--rule-strong)}
.events li{display:grid;grid-template-columns:150px 110px minmax(0,1fr);gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule);position:relative}
.events li::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.events li:hover::before{transform:scaleX(1)}
.events .date{font-family:var(--display);font-size:clamp(28px,3vw,44px);text-transform:uppercase;line-height:1}
.events .date small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--paper-2);margin-top:4px}
.events .type{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2)}
.events .what{font-size:17px}
.events.past li{opacity:.6}
.archive{margin-top:28px}
.archive summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);padding:10px 0;min-height:44px}
.archive summary::-webkit-details-marker{display:none}
.archive summary svg{width:12px;height:12px;transition:transform .4s var(--ease-out)}
.archive[open] summary svg{transform:rotate(45deg)}
.archive summary:hover{color:var(--paper)}

/* contatti */
.contatti .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px)}
.hours{list-style:none;margin:28px 0 0;padding:0}
.hours li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px}
.hours li b{font-family:var(--mono);font-weight:400;font-size:14px;color:var(--paper);white-space:nowrap}
.hours li.today b{color:var(--ember)}
.hours li.today span::after{content:"oggi";font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-left:10px}
.address{margin-top:28px;display:grid;gap:14px;font-style:normal}
.address a{display:inline-flex;align-items:center;gap:10px;font-weight:700;padding:4px 0;min-height:44px}
.address a svg{width:16px;height:16px;color:var(--paper)}
.address a span{border-bottom:1px solid transparent;transition:border-color .3s}
.address a:hover span{border-color:var(--paper)}
.faq{border-top:1px solid var(--rule-strong)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-family:var(--display);font-size:clamp(20px,2vw,28px);text-transform:uppercase;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:14px;height:14px;flex:none;color:var(--paper);transition:transform .4s var(--ease-out)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;color:var(--paper-2);max-width:60ch}
.faq .a a{color:var(--paper);border-bottom:1px solid var(--rule-strong);transition:border-color .3s}
.faq .a a:hover{border-color:var(--paper)}

/* footer: un ultimo lembo di foglio */
.foot{position:relative;z-index:1;background:var(--sheet);margin-top:121px;padding:34px var(--gutter) 30px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--paper-2)}
.foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:121px;background:var(--halftone) 0 0/11px 121px repeat-x;pointer-events:none}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 32px;align-items:baseline}
.foot .social{grid-column:2;grid-row:1;justify-self:end}
.foot .legal{grid-column:2;grid-row:2;justify-self:end;text-align:right}
.foot .piva{white-space:nowrap}
.foot b{color:var(--paper);font-weight:400;text-transform:uppercase}
.foot .social{display:flex;gap:18px}
.foot .social a{display:inline-block;padding:12px 0;border-bottom:1px solid transparent;transition:border-color .3s}
.foot .social a:hover{border-color:var(--paper)}
/* fra tablet e portatile piccolo le due colonne si dividono lo spazio a meta', e la partita IVA va a capo da sola */
@media (max-width:1024px){
  .foot .wrap{grid-template-columns:1fr 1fr}
  .foot .sep{display:none}
  .foot .piva{display:block;margin-top:4px}
}
/* su schermi stretti tutto in colonna, a sinistra */
@media (max-width:860px){
  .foot .wrap{grid-template-columns:1fr;gap:12px}
  .foot .social,.foot .legal{grid-column:1;grid-row:auto;justify-self:start;text-align:left}
  .foot .sep{display:none}
  .foot .piva{display:block;margin-top:4px}
}

/* ---------- Pausa a tab nascosta ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- Schermo verticale: il panino si apre anche qui ----------
   Il filmato e' orizzontale: a tutto schermo il panino uscirebbe dai lati.
   Si ridimensiona per stare nella larghezza, sotto il menu, e sfuma sopra e
   sotto nella carta del fondo (il pannello diventa trasparente). */
@media (orientation:portrait){
  .panel{background:transparent}
  .poster,.stage video{top:var(--navh);bottom:auto;height:min(140vw,68vh);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%)}
}
@supports (height:1svh){@media (orientation:portrait){.poster,.stage video{height:min(140vw,68svh)}}}

/* ---------- Gate statico: identici in JS ----------
   Dal 23 set 2026 il telefono ha lo scrub (scelta del cliente): restano statici
   solo i telefoni in orizzontale troppo bassi per le bande e reduced motion. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,5vh,44px);padding:calc(68px + 4vh) var(--gutter) 7vh;overflow:visible}
  .stage video,.band,.ring,.cue,.stage-veil{display:none}
  .panel{position:relative;inset:auto;width:100%;max-width:900px;margin:0 auto;height:auto;aspect-ratio:16/9;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 55%,transparent 100%)}
  .poster{background-image:url("hero-ending.jpg");top:0;bottom:0;height:100%;-webkit-mask-image:none;mask-image:none}
  .static{display:flex}
}
@media (max-height:560px){.cue,.ring{display:none}}

/* ---------- Reduced motion: stati finali ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  body{opacity:1}
  .rev,.seq .part{opacity:1;transform:none}
  .rule{opacity:1;transform:none}
  .bg .pint{transform:translate(-50%,-50%)}
  .bg .dust{display:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .birre .grid,.cucina .grid,.contatti .grid{grid-template-columns:1fr}
  .sticky{position:static}
  .faq{margin-top:clamp(40px,5vw,72px)}
  .b2,.b3,.b4{width:min(52vw,560px)}
}
@media (orientation:portrait){.b2,.b3,.b4{width:min(88vw,560px)}}
@media (max-width:860px){
  .nav ul{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:8px;background:rgba(12,12,11,.97);font-size:22px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out)}
  .nav ul a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  .nav.open ul{opacity:1;pointer-events:auto}
  .menu-btn{display:inline-flex;position:relative;z-index:2}
  .brand{position:relative;z-index:2}
  /* finestre su schermi stretti: la pinta occupa il centro, il testo va sopra e sotto */
  .window{grid-template-columns:1fr;justify-items:center;text-align:center}
  .window .left,.window .right{grid-column:1;justify-self:center;text-align:center}
  /* uno schermo intero di sola pinta, poi il foglio sale dal basso */
  .strip{min-height:0;padding:calc(100vh + 40px) 0 0}
  @supports (height:1svh){.strip{padding-top:calc(100svh + 40px)}}
  .strip .side{width:100%;background:var(--sheet);padding:0 var(--gutter) 28px;position:relative}
  .strip .side.left{padding-top:8px}
  .strip .side.left::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:121px;background:var(--halftone) 0 0/11px 121px repeat-x}
  .strip .intro{margin:0 auto;max-width:18ch}
  .strip .nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:12px;border-top:1px solid var(--rule)}
  .strip .nums b{font-size:clamp(34px,11vw,56px)}
  .strip .nums span{font-size:10px;letter-spacing:.1em}
  .sheet{margin-top:0}
  .sheet::before{display:none}
  /* la chiusa: VIENI sopra la pinta, STASERA sotto, quando la parola e' al centro dello schermo */
  .finale{display:flex;flex-direction:column;align-items:center;min-height:0;padding:14vh 0 0}
  .finale-title{display:flex;flex-direction:column;align-items:center;gap:calc(var(--pinth) * 1.06);font-size:clamp(64px,22vw,130px);margin-bottom:6vh}
  .finale .side{width:100%;align-items:center!important;gap:12px;background:var(--sheet);padding:0 var(--gutter) 22px;position:relative}
  .finale .side.left{padding-top:10px}
  .finale .side.left::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:121px;background:var(--halftone) 0 0/11px 121px repeat-x}
  .finale .side.right{padding-bottom:36px}
  .foot{margin-top:0}
  .foot::before{display:none}
}
@media (max-width:720px){
  .events li{grid-template-columns:1fr;gap:6px}
  .events .date{font-size:30px}
  .taps li,.menu li{grid-template-columns:minmax(0,1fr) auto}
}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav ul a{min-height:44px;display:inline-flex;align-items:center}
}