/* Osteria Teatro Unione L'Entrecôte — bozza Digitam. Concetto: la locandina del cineteatro, l'entrecôte è la star. */
:root{
  --rosso:#C41E30; --rosso-scuro:#9E1526; --crema:#F8E8D2; --carta:#FBF3E6; --nero:#1E1A18;
  --giallo:#F2B33D; --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --testo:"Newsreader",Georgia,serif; --hh:80px; --pad:clamp(18px,3.4vw,56px); --max:1440px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hh) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--nero);font-family:var(--testo);font-size:clamp(17px,1.1vw,20px);line-height:1.5;font-optical-sizing:auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--giallo);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:99;background:var(--carta);color:var(--rosso);padding:10px 16px;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.disp{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:.9;letter-spacing:.005em;margin:0}
.star{width:.62em;height:.62em;flex:none;fill:currentColor}

/* ---------- header (sempre fisso, fondo rosso pieno) ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hh);background:var(--rosso);color:var(--carta);transition:box-shadow .3s}
.site-header.is-stuck{box-shadow:0 1px 0 rgba(0,0,0,.14),0 10px 28px rgba(70,0,10,.22)}
.bar{max-width:var(--max);margin:0 auto;height:100%;display:flex;align-items:center;gap:28px;padding:0 var(--pad)}
.brand{flex:none;display:block}
.brand img{height:54px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a,.nav-m a{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:19px;text-decoration:none}
.nav a{padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.nav a:hover,.nav a[aria-current="page"]{border-color:currentColor}
.actions{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:999px;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:2px solid currentColor;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn--crema{background:var(--carta);border-color:var(--carta);color:var(--rosso)}
.btn--crema:hover{background:#fff;border-color:#fff}
.btn--linea{color:var(--carta)}
.btn--linea:hover{background:var(--carta);color:var(--rosso)}
.btn--rosso{background:var(--rosso);border-color:var(--rosso);color:var(--carta)}
.btn--rosso:hover{background:var(--rosso-scuro);border-color:var(--rosso-scuro)}
.btn--nero{color:var(--nero)}
.btn--nero:hover{background:var(--nero);color:var(--carta)}
.btn--big{min-height:58px;padding:0 28px;font-size:21px}
.menu-btn{display:none;width:48px;height:48px;border:2px solid var(--carta);border-radius:999px;background:none;color:var(--carta);cursor:pointer;padding:0;align-items:center;justify-content:center}
.menu-btn span{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .25s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .25s}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.nav-m{position:absolute;top:var(--hh);left:0;right:0;background:var(--rosso);border-top:1px solid rgba(251,243,230,.25);max-height:calc(100svh - var(--hh));overflow:auto;padding:8px var(--pad) 28px;display:none;box-shadow:0 24px 40px rgba(40,0,6,.35)}
.nav-m.open{display:block}
.nav-m a{display:flex;align-items:center;min-height:56px;font-size:30px;border-bottom:1px solid rgba(251,243,230,.2)}
.nav-m a[aria-current="page"]{color:var(--giallo)}
.nav-m .btn{margin-top:20px;width:100%;font-size:20px;min-height:54px;border-bottom:2px solid}
.nav-m .btn--crema{color:var(--rosso)}
.btn-tel-s{display:none}
@media (max-width:1080px){
  .nav,.actions .btn--linea,.btn-tel-l{display:none}
  .menu-btn{display:inline-flex}
  .btn-tel-s{display:inline-flex}
  .actions{margin-left:auto}
}
@media (max-width:560px){
  :root{--hh:66px}
  .brand img{height:42px}
  .bar{gap:12px}
  .actions .btn{min-height:44px;padding:0 16px;font-size:17px}
}

/* ---------- hero ---------- */
.hero{background:var(--rosso);color:var(--carta);padding-top:var(--hh);position:relative;overflow:hidden}
.hero__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:center;padding:clamp(20px,4vh,48px) var(--pad) clamp(28px,5vh,56px);min-height:calc(100svh - var(--hh))}
.hero h1{font-size:clamp(60px,10.2vw,158px);line-height:.86;position:relative;z-index:2}
.hero h1 .l{display:block;overflow:hidden;padding:.14em 0 .04em;margin-top:-.14em}
.hero h1 .l>span{display:block}
.hero__lead{max-width:34em;margin:clamp(18px,3vh,32px) 0 0;font-size:clamp(18px,1.3vw,22px);line-height:1.45}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3.4vh,36px)}
.prove{list-style:none;margin:clamp(18px,3vh,30px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(20px,1.65vw,26px);line-height:1.1}
.prove li{display:flex;align-items:center;gap:9px}
.prove .star{color:var(--giallo);width:15px;height:15px}
.hero__stage{position:relative;height:min(calc(100svh - var(--hh) - 70px),780px);min-height:460px}
.arch{position:absolute;top:0;right:0;bottom:46px;width:min(100%,540px);border-radius:999px 999px 14px 14px;overflow:hidden;background:var(--rosso-scuro)}
.arch img{position:relative;top:-9%;width:100%;height:118%;object-fit:cover;object-position:50% 45%;will-change:transform}
.js .arch::after{content:"";position:absolute;inset:-2px -2px 0;background:linear-gradient(180deg,transparent 65%,rgba(30,0,6,.4)),repeating-linear-gradient(90deg,#7E0F1D 0 10px,#B0192C 24px,#8E1222 34px,#7E0F1D 44px);box-shadow:0 16px 24px rgba(40,0,6,.45);transition:transform .9s cubic-bezier(.7,0,.2,1) .1s}
.js.is-open .arch::after{transform:translateY(-106%)}
.hero__side{position:absolute;left:-6%;bottom:0;width:62%;max-width:360px;margin:0;z-index:3}
.hero__side img{width:100%;aspect-ratio:820/700;object-fit:cover;border-radius:10px;border:6px solid var(--carta);box-shadow:0 18px 40px rgba(60,0,10,.35)}
.hero__side figcaption{margin-top:10px;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:17px;line-height:1}
.js .hero .rise{transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.js .hero .fade{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.is-loaded .hero .rise{transform:none}
.is-loaded .hero .fade{opacity:1;transform:none}
.is-loaded .hero .l:nth-child(2)>span{transition-delay:.12s}
.is-loaded .hero .fade{transition-delay:.45s}
.is-loaded .hero .fade.d2{transition-delay:.6s}
.is-loaded .hero .fade.d3{transition-delay:.75s}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;min-height:0;padding-top:28px;row-gap:24px}
  .hero__stage{height:auto;min-height:0;aspect-ratio:4/3.9;max-height:520px;order:-1;margin:0}
  .arch{left:14%;width:auto;bottom:30px}
  .hero__side{left:0;width:50%}
  .hero__side img{border-width:4px}
  .hero__side figcaption{font-size:14px;margin-top:7px}
}
@media (max-width:560px){
  .hero__grid{padding-top:18px;gap:14px}
  .hero__lead{margin-top:12px;font-size:17px}
  .hero__stage{aspect-ratio:4/3.4}
  .hero .cta{margin-top:16px;flex-wrap:nowrap;gap:10px}
  .hero .btn--big{min-height:52px;font-size:18px;padding:0 16px}
  .hide-s{display:none}
  .prove{font-size:18px;gap:4px 18px;margin-top:14px}
}

/* ---------- sezioni ---------- */
.sez{position:relative;padding:clamp(80px,11vw,170px) 0}
.sez--crema{background:var(--crema)}
.sez--carta{background:var(--carta)}
.sez--nero{background:var(--nero);color:var(--carta)}
.sez--giallo{background:var(--giallo);color:var(--nero)}
.sez--rosso{background:var(--rosso);color:var(--carta)}
.h2{font-size:clamp(48px,6.4vw,112px)}
.h2--m{font-size:clamp(40px,4.6vw,80px)}
.rosso-t{color:var(--rosso)}
.lead{font-size:clamp(19px,1.45vw,24px);line-height:1.45}
.testo p{margin:0 0 1em;max-width:36em}
.ph{position:relative;overflow:hidden;border-radius:12px;background:#d9c7b0}
.ph img{width:100%;height:100%;object-fit:cover}
.ph--par img{position:relative;top:-8%;height:116%;will-change:transform}
.cap{font-size:15px;margin-top:10px;opacity:.85}

/* la formula */
.formula__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.formula__foto{position:relative;padding-bottom:clamp(60px,10vw,150px)}
.formula__foto .ph--a{aspect-ratio:4/3.3}
.formula__foto .ph--b{position:absolute;right:-6%;bottom:0;width:42%;aspect-ratio:2/3;border:8px solid var(--crema);border-radius:999px 999px 12px 12px}
.formula__txt{position:sticky;top:calc(var(--hh) + 40px)}
.formula__txt .h2{color:var(--rosso)}
.locandina{list-style:none;margin:clamp(26px,4vw,44px) 0;padding:0}
.locandina li{display:flex;align-items:center;gap:16px;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(26px,2.6vw,42px);line-height:1;padding:16px 0;color:var(--nero)}
.locandina li .star{color:var(--rosso);width:22px;height:22px}
.locandina li small{display:block;font-family:var(--testo);text-transform:none;font-weight:400;font-size:16px;line-height:1.3;margin-top:6px;color:#5a4a3f}
.js .locandina li{opacity:0;transform:translateX(-24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.locandina.in li{opacity:1;transform:none}
.locandina.in li:nth-child(2){transition-delay:.15s}
.locandina.in li:nth-child(3){transition-delay:.3s}
.formula .cta .btn--nero{color:var(--nero)}
@media (max-width:900px){
  .formula__grid{grid-template-columns:1fr}
  .formula__txt{position:static}
}

/* il teatro */
.teatro__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,110px);align-items:center}
.teatro__txt .h2{margin-bottom:clamp(24px,3vw,40px)}
.teatro__txt .lead{color:var(--crema)}
.teatro__txt p{color:#E9DCCB}
.fatti{list-style:none;padding:0;margin:clamp(24px,3vw,40px) 0 0;display:grid;gap:14px}
.fatti li{display:flex;gap:14px;align-items:baseline;font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(22px,1.8vw,30px);line-height:1.05;letter-spacing:.01em}
.fatti .star{color:var(--rosso);width:16px;height:16px;transform:translateY(-2px)}
.collage{position:relative;height:clamp(560px,52vw,780px)}
.collage .ph{position:absolute}
.collage .c1{left:0;top:0;width:62%;height:92%}
.collage .c3{right:0;top:46%;width:54%;aspect-ratio:3/2;border:6px solid var(--nero)}
@media (max-width:900px){
  .teatro__grid{grid-template-columns:1fr}
  .collage{height:auto}
  .collage .ph{position:relative;inset:auto;height:auto}
  .collage .c1{width:82%;aspect-ratio:3/3.4}
  .collage .c3{width:62%;margin:-22% 0 0 auto}
}

/* lo spettacolo della pizza */
.pizza__top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.pizza__top .lead{max-width:30em;margin:22px 0 0}
.stella{position:relative;width:clamp(250px,24vw,350px);aspect-ratio:1;justify-self:end;display:grid;place-items:center;text-align:center;color:var(--rosso)}
.stella svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--carta);transform:rotate(-8deg)}
.stella div{position:relative;font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:.95;transform:rotate(-8deg) translateY(6%)}
.stella b{display:block;font-size:clamp(40px,4vw,60px)}
.stella span{display:block;font-size:clamp(17px,1.4vw,20px);letter-spacing:.03em;margin-bottom:16px}
.stella small{display:block;font-family:var(--testo);text-transform:none;font-weight:500;font-size:14px;margin-top:20px;color:var(--nero)}
.piatti{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.piatto h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(28px,2.4vw,40px);line-height:1;margin:18px 0 8px}
.piatto p{margin:0;max-width:30em}
.piatto--big .ph{aspect-ratio:4/3.2}
.piatti__lista{display:grid;gap:clamp(22px,2.6vw,36px);align-content:start}
.piatti__lista .piatto{display:grid;grid-template-columns:clamp(120px,13vw,200px) 1fr;gap:20px;align-items:center}
.piatti__lista .ph{aspect-ratio:1;border-radius:999px}
.piatti__lista h3{margin-top:0}
.pizza__cta{margin-top:clamp(36px,5vw,64px)}
@media (max-width:900px){
  .pizza__top,.piatti{grid-template-columns:1fr}
  .stella{justify-self:start}
}

/* tonino e valeria */
.oste__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,6vw,110px);align-items:center}
.oste__foto{position:relative;padding-right:18%}
.oste__foto .ph--a{aspect-ratio:2/3}
.oste__foto .ph--b{position:absolute;right:0;bottom:-8%;width:46%;aspect-ratio:1;border-radius:999px;border:8px solid var(--carta)}
.oste h2{margin-bottom:clamp(18px,2vw,28px)}
.citazione{font-family:var(--testo);font-weight:400;font-size:clamp(24px,1.9vw,30px);line-height:1.3;margin:0;max-width:24em;color:var(--nero)}
.oste__chi{margin:clamp(20px,2.6vw,32px) 0 0;font-size:clamp(18px,1.3vw,21px)}
.filiera{list-style:none;padding:0;margin:clamp(28px,3.6vw,48px) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:22px 36px}
.filiera li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:17px;line-height:1.4}
.filiera img{width:30px;height:auto;margin-top:2px}
.filiera b{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:23px;line-height:1;margin-bottom:4px}
@media (max-width:900px){
  .oste__grid{grid-template-columns:1fr}
  .oste__foto{max-width:520px}
  .filiera{grid-template-columns:1fr}
}

/* eventi */
.eventi__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,100px);align-items:center}
.eventi__grid .lead{margin:24px 0 0;max-width:30em}
.biglietti{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(28px,3.6vw,48px)}
.biglietto{position:relative;background:var(--carta);color:var(--nero);border-radius:10px;padding:24px 22px 22px;-webkit-mask:radial-gradient(circle 12px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 12px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.biglietto h3{font-family:var(--display);font-weight:600;text-transform:uppercase;color:var(--rosso);font-size:clamp(26px,2.2vw,34px);line-height:1;margin:0 0 8px}
.biglietto p{margin:0;font-size:16px;line-height:1.4}
.biglietto .prezzo{display:block;font-family:var(--display);font-weight:600;color:var(--rosso);font-size:38px;line-height:1;margin-top:14px}
.biglietto .prezzo--tel{font-size:clamp(22px,1.7vw,26px);text-decoration:none}
.biglietto .prezzo--tel:hover{text-decoration:underline}
.biglietto .prezzo small{font-family:var(--testo);font-weight:400;font-size:14px;color:var(--nero);margin-left:6px}
.eventi__foto{aspect-ratio:4/4.6;border-radius:999px 999px 14px 14px}
@media (max-width:900px){
  .eventi__grid{grid-template-columns:1fr}
  .eventi__foto{max-width:520px;aspect-ratio:1}
}
@media (max-width:560px){.biglietti{grid-template-columns:1fr}}

/* contatti + piede */
.contatti{background:var(--nero);color:var(--carta);padding:clamp(72px,9vw,130px) 0 0}
.contatti__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(24px,4vw,60px);align-items:start}
.contatti h2{color:var(--carta);margin-bottom:14px}
.contatti h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:22px;letter-spacing:.04em;color:var(--giallo);margin:0 0 12px}
.contatti p{margin:0 0 10px}
.contatti a{text-decoration-color:rgba(251,243,230,.4);text-underline-offset:3px}
.tel-big{font-family:var(--display);font-weight:600;font-size:clamp(36px,3.2vw,52px);line-height:1;text-decoration:none!important;display:inline-block;margin-bottom:10px}
.piede{margin-top:clamp(56px,7vw,100px);border-top:1px solid rgba(251,243,230,.18);padding:28px 0 36px;display:flex;flex-wrap:wrap;gap:16px 36px;align-items:center;font-size:15px;color:#cdbfae}
.piede img{height:46px;width:auto}
.piede nav{display:flex;gap:22px;flex-wrap:wrap}
.piede .dx{margin-left:auto}
@media (max-width:1000px){.contatti__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.contatti__grid{grid-template-columns:1fr}.piede .dx{margin-left:0}}

/* pagine interne */
.testa{background:var(--rosso);color:var(--carta);padding:calc(var(--hh) + clamp(48px,7vw,100px)) 0 clamp(56px,7vw,100px);position:relative;overflow:hidden}
.testa__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.testa h1{font-size:clamp(56px,7.6vw,132px)}
.testa .lead{margin:22px 0 0;max-width:30em}
.testa .ph{aspect-ratio:4/3.4;border-radius:999px 999px 14px 14px}
@media (max-width:900px){.testa__grid{grid-template-columns:1fr}.testa .ph{max-width:520px;aspect-ratio:4/3}}
.carta-voce{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,6vw,100px);align-items:center;padding:clamp(48px,6vw,90px) 0}
.carta-voce:nth-of-type(even) .ph{order:2}
.carta-voce .ph{aspect-ratio:4/3.2}
.carta-voce .ph.v{aspect-ratio:3/3.6}
.carta-voce h2{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(40px,4.4vw,76px);line-height:.92;margin:0 0 18px;color:var(--rosso)}
.carta-voce p{margin:0 0 1em;max-width:34em}
.foglio{background:var(--carta);border-radius:14px;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.foglio h3{font-family:var(--display);font-weight:600;text-transform:uppercase;color:var(--rosso);font-size:clamp(26px,2.2vw,34px);line-height:1;margin:0 0 10px}
.foglio p{margin:0;font-size:17px}
@media (max-width:900px){.carta-voce{grid-template-columns:1fr}.carta-voce:nth-of-type(even) .ph{order:0}.foglio{grid-template-columns:1fr}}
.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.info h2{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:22px;color:var(--rosso);margin:0 0 14px}
.info p{margin:0 0 14px}
.info__big{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(48px,4.8vw,80px);line-height:.95;color:var(--nero);text-decoration:none;margin:0 0 16px}
.info__big--s{font-size:clamp(30px,2.5vw,42px);line-height:1.05}
a.info__big:hover{color:var(--rosso)}
.info__menu{margin-top:clamp(48px,6vw,90px);padding-top:clamp(28px,3vw,40px);border-top:2px solid var(--rosso);display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.info__menu .lead{margin:0;max-width:30em}
@media (max-width:900px){.info{grid-template-columns:1fr}}

/* movimento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .arch::after{display:none}
  .hero .rise,.hero .fade,.locandina li{transform:none!important;opacity:1!important}
}