/* ==========================================================================
   Il Bar del Buon Caffe, Piazza Gran Madre di Dio 3H, Torino
   Colori presi dal locale: la radica del bancone con le sue venature, il
   verde pistacchio delle pareti, gli inserti di alluminio spazzolato,
   il filo d'oro della tazzina.
   ========================================================================== */

:root{
  --canvas:#EFE3D0;          /* legno chiaro, il fondo del sito */
  --canvas-2:#E5D6BE;        /* la fascia piu calda */
  --panel:#F8F2E6;           /* le schede, piu chiare del fondo */

  --wood:#7C4E27;            /* la radica del bancone */
  --wood-deep:#4A2C14;       /* il legno scuro: pulsanti e piede pagina */
  --wood-hover:#63391A;

  --text-primary:#33200F;
  --text-secondary:#6A543F;
  --on-wood:#F8F2E6;
  --on-wood-2:#E0CFB6;

  --accent:#55692C;          /* il verde pistacchio, leggibile sul chiaro */
  --accent-bright:#A8BE6B;   /* il verde delle pareti */
  --gold:#7F5D20;
  --gold-bright:#C9A961;
  --alu:#8A8F8A;

  --line:rgba(74,44,20,.14);
  --line-mid:rgba(74,44,20,.26);
  --line-strong:rgba(74,44,20,.62);
  --line-on-wood:rgba(248,242,230,.18);

  --metal:linear-gradient(90deg,transparent,#C3C7C1 22%,#7E847E 50%,#C3C7C1 78%,transparent);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(20,10,4,.9),0 3px 12px rgba(20,10,4,.72),0 10px 44px rgba(20,10,4,.72);
  --shadow-card:0 1px 2px rgba(74,44,20,.07),0 14px 34px rgba(74,44,20,.10);

  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);

  --fs-display:clamp(2.4rem,6vw,4.6rem);
  --fs-h2:clamp(1.9rem,4vw,3.1rem);
  --fs-h3:clamp(1.2rem,1.9vw,1.58rem);
  --fs-body:clamp(1rem,.95rem + .3vw,1.14rem);
  --fs-label:.735rem;
}

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

html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:Karla,"Segoe UI",system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .9s var(--ease);
}
body.ready{opacity:1}

h1,h2,h3{
  font-family:Fraunces,Georgia,"Times New Roman",serif;
  font-variation-settings:"SOFT" 34,"WONK" 1;
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.016em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.16}
p{margin:0}
a{color:inherit}
::selection{background:var(--accent-bright);color:#231506}

/* ---------- il fondo, una stanza sola dietro tutto -------------------- */

.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(ellipse 54% 46% at 20% 16%,rgba(196,146,84,.30),transparent 62%),
    radial-gradient(ellipse 46% 42% at 84% 72%,rgba(168,190,107,.20),transparent 64%),
    radial-gradient(ellipse 72% 58% at 50% 110%,rgba(124,78,39,.20),transparent 70%);
  animation:envDrift 96s var(--ease) -22s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes envDrift{
  from{transform:translate3d(-2.2%,-1.4%,0) scale(1.03)}
  to{transform:translate3d(2.4%,2%,0) scale(1.09)}
}
.page{position:relative;z-index:1}

/* ---------- skip link -------------------------------------------------- */

.skip{
  position:absolute;left:12px;top:-64px;z-index:120;
  background:var(--wood-deep);color:var(--on-wood);
  padding:12px 18px;border-radius:10px;font-weight:500;
  transition:top .3s var(--ease-out);
}
.skip:focus-visible{top:12px}

/* ---------- pezzi condivisi -------------------------------------------- */

.wrap{width:min(var(--maxw),100%);margin-inline:auto;padding-inline:var(--gutter)}

.label{
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:var(--fs-label);letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);margin:0;
}
.lede{color:var(--text-secondary);max-width:62ch}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.86em 1.5em;border-radius:999px;
  font-family:Karla,system-ui,sans-serif;font-weight:500;font-size:.99rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease),transform .4s var(--ease-out),
             box-shadow .4s var(--ease);
}
.btn-primary{background:var(--wood-deep);color:var(--on-wood)}
.btn-primary:hover{background:var(--wood-hover);transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(74,44,20,.26)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary);background:transparent}
.btn-ghost:hover{border-color:var(--wood-deep);background:rgba(74,44,20,.06);transform:translateY(-2px)}
.btn svg{width:1em;height:1em;flex:none}

/* pulsanti sopra una superficie di legno o sopra il video */
.on-dark .btn-primary,.band .btn-primary,.hero-static .btn-primary{
  background:var(--accent-bright);color:#231506}
.on-dark .btn-primary:hover,.band .btn-primary:hover,.hero-static .btn-primary:hover{background:#C0D486;box-shadow:0 12px 30px rgba(168,190,107,.24)}
.on-dark .btn-ghost,.band .btn-ghost,.hero-static .btn-ghost{
  border-color:rgba(248,242,230,.5);color:var(--on-wood)}
.on-dark .btn-ghost:hover,.band .btn-ghost:hover,.hero-static .btn-ghost:hover{border-color:var(--accent-bright);color:var(--accent-bright);
  background:rgba(248,242,230,.06)}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.on-dark a:focus-visible,.band a:focus-visible,.on-dark button:focus-visible{
  outline-color:var(--accent-bright)}

@media (pointer:coarse){
  .btn{min-height:44px}
  .nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- l'elemento firma: le nervature ----------------------------- */

.ribs{display:block;width:100%;height:clamp(52px,7vw,104px);overflow:hidden;
  pointer-events:none}
.ribs svg{display:block;width:100%;height:100%}
.ribs path{
  fill:none;stroke:url(#aluGrad);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.5s var(--ease-out);
  transition-delay:calc(var(--ri,0) * 85ms);
}
.ribs.in path{stroke-dashoffset:0}
.ribs.done path{transition-delay:0s !important}
.ribs.flip{transform:scaleY(-1)}

/* ---------- barra di navigazione ---------------------------------------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:clamp(14px,3vw,34px);
  padding:13px var(--gutter);
  backdrop-filter:blur(16px) saturate(1.1);
  background:linear-gradient(to bottom,rgba(247,240,228,.90),rgba(247,240,228,.70));
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;margin-right:auto}
.brand b{
  font-family:Fraunces,Georgia,serif;
  font-weight:400;
  font-variation-settings:"SOFT" 18,"WONK" 0;
  font-size:clamp(1.14rem,2.1vw,1.46rem);
  letter-spacing:.03em;
  color:var(--gold);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand b{
    background:linear-gradient(97deg,#7A5A1E 0%,#B8933F 20%,#5E4415 44%,#A8823C 68%,#6B4E19 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  .foot .brand b{
    background:linear-gradient(97deg,#B08F45 0%,#EBD6A2 20%,#9A7530 46%,#E0C88E 70%,#A8823C 100%);
    -webkit-background-clip:text;background-clip:text;
  }
}
.brand span{
  font-family:"DM Mono",monospace;font-size:.575rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-top:.62em;
}
.foot .brand span{color:var(--gold-bright)}

.nav-links{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px)}
.nav a.nl{
  text-decoration:none;font-size:.93rem;color:var(--text-secondary);
  position:relative;padding-block:4px;transition:color .35s var(--ease);
}
.nav a.nl::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.nav a.nl:hover{color:var(--text-primary)}
.nav a.nl:hover::after,.nav a.nl[aria-current="page"]::after{transform:scaleX(1)}
.nav a.nl[aria-current="page"]{color:var(--text-primary)}

.status{
  margin:0;display:none;align-items:center;gap:.5em;
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);
  border:1px solid var(--line-mid);border-radius:999px;padding:.42em .85em;
  white-space:nowrap;background:rgba(255,255,255,.36);
}
.status.on{display:inline-flex}
.status i{width:6px;height:6px;border-radius:50%;background:var(--alu);flex:none;position:relative}
.status.open i{background:#6F8A3C}
.status.open i::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid #6F8A3C;opacity:0;animation:ping 3.4s var(--ease) -1s infinite;
}
@keyframes ping{0%{opacity:.7;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.5)}}
@media (max-width:860px){.status{display:none !important}}

@media (max-width:620px){
  .nav{flex-wrap:wrap;justify-content:center;row-gap:9px;padding:10px var(--gutter) 9px}
  .brand{margin-right:0;flex:1 0 100%;align-items:center;text-align:center}
  .brand b{font-size:1.14rem;white-space:nowrap}
  .nav-links{flex:1 0 100%;justify-content:center;gap:22px}
  .nav a.nl{font-size:.87rem;white-space:nowrap}
}

/* ---------- hero -------------------------------------------------------- */

.hero{position:relative;height:560vh}
.hero-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#241708;
}
.hero-poster,.hero-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-poster{background-size:cover;background-position:center;opacity:1;
  transition:opacity .9s var(--ease)}
.hero-stage video{opacity:0;transition:opacity .8s var(--ease);
  transform:translateZ(0);will-change:transform}
.hero-stage.video-ready video{opacity:1}
.hero-stage.video-ready .hero-poster{opacity:0}
.hero-stage.video-failed video{display:none}

.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 122% 92% at 50% 46%,rgba(14,8,3,0) 34%,rgba(14,8,3,.62) 100%);
}

.hero-bands{position:absolute;inset:0}
.band{
  position:absolute;inset:0;opacity:0;display:grid;align-items:center;
  padding:clamp(84px,12vh,150px) var(--gutter);
  color:#FBF6EC;text-shadow:var(--tshadow);pointer-events:none;
}
.band .inner{position:relative;z-index:2;width:min(var(--maxw),100%);margin-inline:auto}
.band .col{width:min(480px,44vw)}
.band h1{font-size:clamp(2rem,3.9vw,3.35rem);line-height:1.05}
.band h2{font-size:clamp(1.85rem,3.5vw,3rem)}
.band .label{color:#D8CDB8;margin-bottom:1.15em}
.band .btn{text-shadow:none;pointer-events:auto}
.band h1,.band h2{margin-bottom:.5em}
.band p.sub{color:#EFE5D4;max-width:36ch}

/* due veli, uno per colonna: la corsia centrale dove cade il caffe resta viva */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
}
.band-1::before{background:radial-gradient(ellipse 54% 76% at 21% 50%,rgba(8,4,2,.86) 0%,rgba(8,4,2,.62) 48%,rgba(8,4,2,0) 80%)}
.band-2::before{background:radial-gradient(ellipse 54% 74% at 79% 50%,rgba(8,4,2,.84) 0%,rgba(8,4,2,.58) 48%,rgba(8,4,2,0) 80%)}
.band-3::before{background:radial-gradient(ellipse 54% 74% at 21% 50%,rgba(8,4,2,.84) 0%,rgba(8,4,2,.58) 48%,rgba(8,4,2,0) 80%)}

.band-1{justify-items:start;align-items:center}
.band-2{justify-items:end;align-items:center}
.band-2 .col{text-align:right;margin-left:auto}
.band-2 p.sub{margin-left:auto}
.band-3{justify-items:start;align-items:center}

/* meccanica dello split del testo */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* banda 1: le parole cadono come cade il caffe */
.band-1 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -30px));
}
.band-1 .sub{opacity:clamp(0,(var(--k,0) - .48)*2.6,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .48)*2.6,1)) * 14px))}
/* banda 2: la crema che va a fuoco */
.blur-pair{position:relative;display:block}
.blur-pair .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0))}
.blur-pair .sharp{opacity:var(--k,0)}
.band-2 .sub{opacity:clamp(0,(var(--k,0) - .42)*2.6,1);
  transform:translateY(calc((1 - clamp(0,(var(--k,0) - .42)*2.6,1)) * 14px))}
/* banda 3: le parole si alzano e si posano, come la tazzina */
.band-3 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 26px));
}
.band-3 .sub{--ks:clamp(0,(var(--k,0) - .58)*3.4,1);
  opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 16px))}
.band-3 .cta-row{--kb:clamp(0,(var(--k,0) - .74)*4.4,1);
  opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 16px));
  margin-top:2em;display:flex;gap:14px;flex-wrap:wrap}

.hero-hud{
  margin:0;position:absolute;left:50%;bottom:clamp(18px,3.4vh,34px);transform:translateX(-50%);
  display:flex;align-items:center;gap:.7em;color:#E4D9C4;
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;pointer-events:none;
  background:rgba(14,8,3,.55);border:1px solid rgba(220,205,180,.3);
  border-radius:999px;padding:.5em .95em;backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(14,8,3,.85);
  opacity:1;transition:opacity .7s var(--ease);
}
.hero-hud.gone{opacity:0}
.ring{width:17px;height:17px;flex:none;color:var(--accent-bright);transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .18s linear}
.chev{width:13px;height:13px;flex:none;color:var(--accent-bright);
  animation:chevDrop 2.6s var(--ease) -.4s infinite}
@keyframes chevDrop{0%,100%{transform:translateY(-2px);opacity:.55}50%{transform:translateY(3px);opacity:1}}

.hero-static{display:none}

/* ---------- arredo delle sezioni ---------------------------------------- */

section{position:relative}
main [id]{scroll-margin-top:96px}
.sec{padding-block:clamp(76px,11vw,152px)}
.sec-head{margin-bottom:clamp(38px,5vw,66px)}
.sec-head .label{margin-bottom:1.4em}
.sec-head h2{max-width:17ch;margin-bottom:.6em}

.reveal > *{opacity:0;transform:translateY(16px);
  transition:opacity .85s var(--ease),transform .85s var(--ease-out);
  transition-delay:calc(var(--i,0) * 95ms)}
.reveal.in > *{opacity:1;transform:none}
.reveal.done > *{transition-delay:0s !important}

/* superfici di legno vero, con le venature del bancone */
.on-dark{color:var(--on-wood);background:var(--wood);position:relative;isolation:isolate}
.on-dark::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("legno.jpg");background-size:cover;background-position:center;
}
.on-dark::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(58,34,14,.80) 0%,rgba(78,47,21,.56) 42%,rgba(58,34,14,.82) 100%);
}
.on-dark .label{color:var(--accent-bright)}
.on-dark .lede,.on-dark p{color:var(--on-wood-2)}
.on-dark h2,.on-dark h3{color:var(--on-wood)}
.metal-top{position:absolute;left:0;right:0;top:0;height:1px;background:var(--metal);z-index:1}
.metal-bottom{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--metal);z-index:1}

/* ---------- il chiarissimo, il momento da toccare ---------------------- */

.chiar{display:grid;gap:clamp(34px,5vw,74px);align-items:center;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}
.chiar > .reveal{display:grid;gap:1.15em;align-content:start}
.chiar > .reveal h2{margin-top:.15em}
@media (max-width:880px){.chiar{grid-template-columns:1fr}}

.cup-hold{
  display:block;width:100%;max-width:340px;margin-inline:auto;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:none;
}
.cup-svg{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 18px 26px rgba(24,12,4,.42))}
.cup-track{stroke:rgba(248,242,230,.16)}
.cup-arc{stroke:var(--accent-bright)}
.cup-fill{transform-box:fill-box;transform-origin:center;
  transform:translateY(calc((1 - var(--h,0)) * 100%));transition:transform .09s linear}
.cup-milk{opacity:clamp(0,(var(--h,0) - .40)*2.5,1)}
.cup-cocoa{opacity:clamp(0,(var(--h,0) - .80)*5,1)}
.cup-rim-glow{opacity:calc(.22 + .78*var(--h,0))}
.cup-steam{opacity:calc(var(--h,0) * .8)}
.cup-arc{stroke-dasharray:var(--arc,300);
  stroke-dashoffset:calc(var(--arc,300) * (1 - var(--h,0)))}
.cup-hint{
  display:block;text-align:center;margin-top:1.4em;
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-wood-2);
  transition:color .5s var(--ease);
}
.cup-hold.done .cup-hint{color:var(--accent-bright)}

.recipe{list-style:none;margin:1em 0 0;padding:0;display:grid;gap:.85em}
.recipe li{
  display:flex;align-items:baseline;gap:.85em;color:var(--on-wood);
  font-family:Fraunces,Georgia,serif;font-size:1.16rem;font-weight:600;
  font-variation-settings:"SOFT" 34,"WONK" 1;
  opacity:0;transform:translateY(10px);
  transition:opacity .7s var(--ease),transform .7s var(--ease-out);
}
.chiar.done .recipe li{opacity:1;transform:none}
.chiar.done .recipe li:nth-child(1){transition-delay:.05s}
.chiar.done .recipe li:nth-child(2){transition-delay:.24s}
.chiar.done .recipe li:nth-child(3){transition-delay:.43s}
.recipe b{font-family:"DM Mono",monospace;font-size:.7rem;font-weight:400;
  letter-spacing:.16em;color:var(--gold-bright);flex:none}

.live .cup-rim-glow{animation:rimBreathe 7s var(--ease) -2.4s infinite alternate}
@keyframes rimBreathe{from{filter:brightness(.86)}to{filter:brightness(1.22)}}

/* ---------- cosa si trova ----------------------------------------------- */

.cards{display:grid;gap:clamp(18px,2.2vw,28px);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.cards{grid-template-columns:1fr}}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  box-shadow:var(--shadow-card);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease),
             border-color .55s var(--ease);
}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--metal);z-index:2}
.card:hover{transform:translateY(-5px);border-color:var(--line-mid);
  box-shadow:0 2px 4px rgba(74,44,20,.08),0 26px 52px rgba(74,44,20,.16)}
.card figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--canvas-2)}
.card img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform 1.3s var(--ease-out)}
.card:hover img{transform:scale(1.075)}
.card .body{padding:clamp(20px,2.3vw,30px);display:grid;gap:.7em}
.card h3{max-width:16ch}
.card p{color:var(--text-secondary);font-size:.985rem;max-width:38ch}

/* ---------- dicono di noi ------------------------------------------------ */

.says{background:var(--canvas-2);position:relative}
.says .metal-top,.says .metal-bottom{opacity:.75}
.says-grid{display:grid;gap:clamp(26px,4vw,64px);
  grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media (max-width:820px){.says-grid{grid-template-columns:1fr}}
.says-grid > *:nth-child(2){margin-top:clamp(0px,4.4vw,58px)}
@media (max-width:820px){.says-grid > *{margin-top:0 !important}}

.quote{border-left:2px solid rgba(85,105,44,.42);padding-left:clamp(18px,2vw,26px)}
.quote blockquote{margin:0;font-family:Fraunces,Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 34,"WONK" 1;
  font-size:clamp(1.24rem,1.95vw,1.7rem);line-height:1.3;max-width:24ch}
.quote figcaption{margin-top:1.15em;font-family:"DM Mono",monospace;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}

.score{display:flex;align-items:baseline;gap:.75em;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,66px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--line-mid)}
.score b{font-family:Fraunces,Georgia,serif;font-size:2.5rem;font-weight:700;
  font-variation-settings:"SOFT" 34,"WONK" 1;color:var(--gold);line-height:1}
.score span{color:var(--text-secondary);font-size:.94rem}
.stars{display:inline-flex;gap:3px;align-self:center}
.stars svg{width:15px;height:15px;color:var(--gold)}
.live .stars svg{animation:starGlint 6s var(--ease) infinite}
.live .stars svg:nth-child(2){animation-delay:-4.8s}
.live .stars svg:nth-child(3){animation-delay:-3.6s}
.live .stars svg:nth-child(4){animation-delay:-2.4s}
.live .stars svg:nth-child(5){animation-delay:-1.2s}
@keyframes starGlint{0%,88%,100%{opacity:.7}94%{opacity:1}}

/* ---------- il posto: il filmato vero del locale, al centro ------------- */

.posto2{position:relative}
/* col filmato al centro, anche il titolo sta al centro: cosi lo spazio ai lati
   e una scelta e non un buco */
.posto2 .sec-head{text-align:center}
.posto2 .sec-head h2{max-width:20ch;margin-inline:auto}
.posto2 .sec-head .lede{margin-inline:auto}

.film-solo{margin:0 auto;max-width:392px;text-align:center}
.film-media{
  position:relative;border-radius:18px;overflow:hidden;background:#2A1B0D;
  box-shadow:0 2px 6px rgba(74,44,20,.10),0 26px 56px rgba(74,44,20,.20);
}
.film-media::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--metal);z-index:2;pointer-events:none}
.film-media video{display:block;width:100%;height:auto;aspect-ratio:464/832;
  background:#2A1B0D}
.film-solo figcaption{
  margin:1.2em auto 0;color:var(--text-secondary);font-size:.95rem;max-width:34ch;
}
.duo-cta{margin-top:clamp(32px,4.2vw,56px);text-align:center}

/* didascalia sotto una foto d'archivio */
.credito{
  margin-top:.9em;font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);
}

/* ---------- vieni a trovarci --------------------------------------------- */

.cta{text-align:center;position:relative;overflow:hidden}
.cta h2{max-width:15ch;margin-inline:auto;margin-bottom:.5em}
.cta .lede{margin-inline:auto;text-align:center;max-width:48ch}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2.4em}
.cta-glow{position:absolute;left:50%;bottom:-42%;width:min(760px,120%);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(168,190,107,.34),transparent 62%);opacity:.55}
.live .cta-glow{animation:ctaBreathe 11s var(--ease) -3s infinite alternate}
@keyframes ctaBreathe{from{opacity:.34}to{opacity:.7}}

.facts{display:grid;gap:clamp(14px,2vw,24px);margin-top:clamp(44px,5vw,68px);
  grid-template-columns:repeat(3,minmax(0,1fr));text-align:left}
@media (max-width:760px){.facts{grid-template-columns:1fr}}
.fact{border-top:1px solid var(--line-mid);padding-top:1.15em;position:relative}
.fact::before{content:"";position:absolute;left:0;top:0;width:44%;height:1px;background:var(--metal)}
.fact dt{font-family:"DM Mono",monospace;font-size:var(--fs-label);letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.6em}
.fact dd{margin:0;color:var(--text-secondary);font-size:.985rem}
.fact dd a{color:var(--text-primary);text-decoration:none;
  border-bottom:1px solid var(--line-strong);transition:border-color .35s var(--ease)}
.fact dd a:hover{border-color:var(--accent)}

/* ---------- testata delle pagine interne --------------------------------- */

.phero{position:relative;padding-block:clamp(96px,15vh,178px) clamp(46px,7vw,86px);
  overflow:hidden}
.phero .label{margin-bottom:1.5em}
.phero h1{max-width:15ch;margin-bottom:.44em}
.phero .lede{font-size:clamp(1.04rem,1.3vw,1.2rem)}
.phero-glow{position:absolute;right:-14%;top:-38%;width:min(720px,86%);aspect-ratio:1;
  pointer-events:none;background:radial-gradient(circle,rgba(196,146,84,.34),transparent 62%)}
.live .phero-glow{animation:ctaBreathe 15s var(--ease) -5s infinite alternate}

/* ---------- la linea del tempo ------------------------------------------- */

.tl{position:relative;display:grid;gap:clamp(52px,7vw,104px)}
.tl::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:linear-gradient(to bottom,transparent,var(--line-mid) 12%,var(--line-mid) 88%,transparent);
}
@media (min-width:900px){.tl::before{left:clamp(112px,13vw,172px)}}

.ev{display:grid;gap:clamp(10px,1.6vw,22px);padding-left:clamp(24px,3.4vw,40px);position:relative}
@media (min-width:900px){
  .ev{grid-template-columns:clamp(112px,13vw,172px) minmax(0,1fr);
    gap:clamp(34px,4.4vw,62px);padding-left:0;align-items:baseline}
  .ev .yr{text-align:right;padding-right:20px;white-space:normal;line-height:1.35}
}
.ev .yr{font-family:"DM Mono",monospace;font-size:.86rem;letter-spacing:.14em;color:var(--gold)}
.ev::before{
  content:"";position:absolute;left:-4px;top:.6em;width:9px;height:9px;border-radius:50%;
  background:var(--canvas);border:1px solid var(--accent);
}
@media (min-width:900px){.ev::before{left:calc(clamp(112px,13vw,172px) - 4px)}}
.ev h3{margin-bottom:.5em;max-width:22ch}
.ev p{color:var(--text-secondary);max-width:58ch}
.ev p + p{margin-top:.9em}

.evfig{margin:1.8em 0 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  max-width:560px;box-shadow:var(--shadow-card)}
.evfig img{display:block;width:100%;height:auto}
.evfig.ritratto{max-width:330px}

.pull{
  border-left:2px solid var(--gold);padding:.3em 0 .3em clamp(18px,2vw,26px);
  margin-top:1.5em;font-family:Fraunces,Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 34,"WONK" 1;
  font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.34;color:var(--text-primary);
  max-width:30ch;
}

/* ---------- dove trovarci ------------------------------------------------ */

.find{display:grid;gap:clamp(24px,3.2vw,44px);
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.find{grid-template-columns:1fr}}

.infocard{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,3vw,38px);display:grid;gap:clamp(20px,2.4vw,30px);
  position:relative;box-shadow:var(--shadow-card)}
.infocard::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--metal)}
.infocard h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.1em}
.row{margin:0}
.row dt{font-family:"DM Mono",monospace;font-size:var(--fs-label);letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.65em}
.row dd{margin:0;color:var(--text-secondary)}
.row dd strong{color:var(--text-primary);font-weight:500}
.row + .row{border-top:1px solid var(--line);padding-top:clamp(18px,2.2vw,26px)}

.hours{width:100%;border-collapse:collapse;font-size:.96rem}
.hours th,.hours td{text-align:left;padding:.44em 0;color:var(--text-secondary);font-weight:400}
.hours tr.today th,.hours tr.today td{color:var(--text-primary)}
.hours tr.today th::after{content:" oggi";color:var(--accent);
  font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.hours td{text-align:right;font-family:"DM Mono",monospace;font-size:.87rem}
.hours tr + tr th,.hours tr + tr td{border-top:1px solid var(--line)}

.mapcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--panel);display:grid;position:relative;box-shadow:var(--shadow-card)}
.mapcard::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--metal);z-index:2}
.mapcard iframe{width:100%;height:clamp(320px,52vh,520px);border:0;display:block;
  filter:saturate(.9) contrast(1.02)}
.mapcard .mapfoot{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:clamp(16px,2vw,22px);border-top:1px solid var(--line)}
.mapcard .mapfoot p{color:var(--text-secondary);font-size:.93rem;max-width:34ch}

.walk{display:grid;gap:clamp(18px,2.2vw,28px);
  grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:step}
@media (max-width:820px){.walk{grid-template-columns:1fr}}
.step{border-top:1px solid var(--line-mid);padding-top:1.3em;counter-increment:step;
  position:relative}
.step::after{content:"";position:absolute;left:0;top:0;width:38%;height:1px;background:var(--metal)}
.step::before{content:counter(step,decimal-leading-zero);
  font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.16em;
  color:var(--gold);display:block;margin-bottom:.9em}
.step h3{font-size:1.1rem;margin-bottom:.5em;max-width:20ch}
.step p{color:var(--text-secondary);font-size:.96rem;max-width:36ch}

.spot{margin:clamp(34px,4.4vw,62px) auto 0;max-width:520px;text-align:center}
.spot-media{position:relative;border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-card);background:var(--canvas-2)}
.spot-media::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--metal);z-index:2;pointer-events:none}
.spot-media{aspect-ratio:3/4}
.spot-media img{display:block;width:100%;height:100%;object-fit:cover}
.spot figcaption{margin:1.05em auto 0;color:var(--text-secondary);font-size:.95rem;max-width:46ch}

.faq{display:grid;gap:0;max-width:76ch}
.faq details{border-top:1px solid var(--line-mid)}
.faq details:last-of-type{border-bottom:1px solid var(--line-mid)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15em 2.4em 1.15em 0;position:relative;
  font-family:Fraunces,Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 34,"WONK" 1;
  font-size:clamp(1.04rem,1.4vw,1.2rem);transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:2px;top:1.55em;width:11px;height:11px;
  border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);
  transform:rotate(45deg);transform-origin:70% 70%;
  transition:transform .4s var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 1.5em;color:var(--text-secondary);max-width:58ch}
.faq .ans a{color:var(--text-primary);border-bottom:1px solid var(--line-strong);
  text-decoration:none}
.faq .ans a:hover{border-color:var(--accent)}

/* ---------- piede pagina ------------------------------------------------- */

.foot{position:relative;color:var(--on-wood);background:var(--wood-deep);isolation:isolate}
.foot::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:url("legno.jpg");background-size:cover;background-position:center bottom;
}
.foot::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(45,26,10,.90),rgba(35,20,8,.96));
}
.foot .metal-top{opacity:.85}
.foot-in{display:grid;gap:clamp(26px,3.4vw,48px);padding-block:clamp(46px,6vw,76px);
  grid-template-columns:minmax(0,1.1fr) repeat(2,minmax(0,.8fr))}
@media (max-width:820px){.foot-in{grid-template-columns:1fr}}
.foot h4{font-family:"DM Mono",monospace;font-size:var(--fs-label);font-weight:400;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent-bright);margin:0 0 1.1em}
.foot p,.foot li{color:var(--on-wood-2);font-size:.95rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
.foot a{text-decoration:none;transition:color .35s var(--ease)}
.foot a:hover{color:var(--accent-bright)}
.foot .brand{margin-bottom:1.2em}
.foot-bottom{border-top:1px solid var(--line-on-wood);padding-block:1.5em;
  display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-wood-2)}

/* ---------- schermi bassi ------------------------------------------------ */

@media (max-height:560px){.hero-hud{display:none}}

/* ==========================================================================
   L'APERTURA SUL TELEFONO
   Il video scorre anche da telefono. La ripresa e centrata, quindi tagliata
   in verticale regge: si vede la macchina, il caffe che cade e la tazzina.
   Le scritte scendono in basso, sopra il bancone, con un velo dal basso al
   posto delle ellissi laterali.
   ========================================================================== */

@media (orientation: portrait) and (max-width:820px){
  .hero{height:440vh}
  .band{align-items:end;padding:clamp(80px,13vh,150px) var(--gutter) clamp(34px,6.5vh,64px)}
  /* il segnale di scorrimento si sposta in alto a destra, cosi non copre le scritte */
  .hero-hud{left:auto;right:var(--gutter);bottom:auto;top:126px;transform:none}
  .band .inner{width:100%}
  .band .col,.band-2 .col,.band-3 .col{width:100%;text-align:left;margin-left:0}
  .band-2 p.sub,.band-3 p.sub{margin-left:0}
  .band h1{font-size:clamp(1.92rem,7.6vw,2.5rem)}
  .band h2{font-size:clamp(1.78rem,7.2vw,2.35rem)}
  .band .label{margin-bottom:.9em}
  .band p.sub{max-width:32ch;font-size:.99rem}
  .band-3 .cta-row{margin-top:1.5em;gap:10px}
  .band-1::before,.band-2::before,.band-3::before{
    background:linear-gradient(to top,rgba(8,4,2,.95) 0%,rgba(8,4,2,.88) 24%,
      rgba(8,4,2,.60) 50%,rgba(8,4,2,.16) 78%,rgba(8,4,2,0) 100%);
  }
}

@media (orientation: landscape) and (pointer: coarse) and (max-height:560px){
  .hero{height:520vh}
  .band{padding-block:clamp(56px,14vh,90px)}
  .band h1{font-size:clamp(1.5rem,4.6vw,2rem)}
  .band h2{font-size:clamp(1.45rem,4.4vw,1.9rem)}
  .band p.sub{font-size:.94rem}
}

/* ==========================================================================
   LA VERSIONE FERMA. Serve in un caso solo: quando il visitatore chiede meno
   movimento dal sistema operativo. La classe la mette e la toglie hero.js,
   che ascolta la preferenza dal vivo. Parte scritta nell'HTML, cosi anche
   senza JavaScript l'apertura resta completa.
   ========================================================================== */

.hero-static-mode .hero{height:auto}
.hero-static-mode .hero-stage{display:none}
.hero-static-mode .hero-scrim{display:none}

.hero-static-mode .hero-static{
  display:grid;align-content:end;position:relative;min-height:100svh;
  color:#FBF6EC;
  padding:clamp(104px,19vh,200px) var(--gutter) clamp(44px,8vh,80px);
  background-image:linear-gradient(to top,rgba(28,15,5,.95) 4%,rgba(28,15,5,.70) 40%,rgba(28,15,5,.30) 82%),url("hero-ending.jpg");
  background-size:cover;background-position:50% 42%;
}
.hero-static-mode .hero-static .label{color:#D8CDB8;margin-bottom:1.3em}
.hero-static-mode .hero-static h1{margin-bottom:.44em;max-width:14ch}
.hero-static-mode .hero-static p{color:#EFE5D4;max-width:36ch}
.hero-static-mode .hero-static .cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:2.1em}

/* ---------- movimento ridotto -------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  body{opacity:1}
  .reveal > *{opacity:1;transform:none}
  .ribs path{stroke-dashoffset:0}
  .recipe li{opacity:1;transform:none}
  .band{opacity:0}
  .card img,.posto-img img{transform:scale(1.02)}
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}