/* Casello San Calogero, redesign 2026
   Motion: scene agganciate con position: sticky e curve calcolate in CSS da custom property
   scritte dal JS (stessa grammatica di Carlino, CIS e BlueFish). Tema: ferrovia e casello.
   Il JS scrive: su html --sh, --L, --y, --prog; su ogni .scena --s, --in, --out, --k.
   Ogni elemento animato ha la classe .m e un inizio --a (in schermi) e una durata --w. */

/* ---------- Font (OFL, file in fonts/) ---------- */
@font-face{font-family:'Fraunces';src:url(../fonts/fraunces-opsz.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url(../fonts/golos-text.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}

@font-face{font-family:'Fraunces';src:url(../fonts/fraunces-opsz-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

/* ---------- Token ---------- */
:root{
  --calce:#F8F4EC;
  --calce-2:#EFE8DA;
  --pietra:#E2D7C1;
  --pietra-2:#CDBFA4;
  --ink:#1C1814;
  --ink-2:#47423C;
  --muted:#615C56;
  --ocra:#C8A24B;
  --ocra-dk:#8F6E1E;
  --ocra-chiaro:#E9D39A;
  --campo:#5A6940;
  --ferro:#221E1B;
  --ferro-2:#2E2925;
  --linea:rgba(28,24,20,.14);
  --linea-chiara:rgba(248,244,236,.2);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --testata:76px;
  --gutter:clamp(20px,4vw,56px);
  --max:1320px;
  --sh:calc(100svh - var(--testata));
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:light;scroll-padding-top:var(--testata)}
body{font-family:var(--sans);font-size:17px;line-height:1.62;color:var(--ink);background:var(--calce);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(200,162,75,.28)}
:focus-visible{outline:2px solid var(--ocra-dk);outline-offset:3px;border-radius:2px}
.scuro :focus-visible,.hero :focus-visible,.sottohero :focus-visible,.piede :focus-visible{outline-color:var(--ocra)}
html[lang="en"] [data-it],html:not([lang="en"]) [data-en]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:var(--calce);padding:12px 18px;font-size:14px;font-weight:600;border-radius:0 0 4px 4px;transition:top .2s}
.salta:focus{top:0}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sez{padding-block:clamp(88px,11vw,168px);position:relative}
.sez--alt{background:var(--calce-2)}
.sez--stretta{padding-block:clamp(64px,8vw,112px)}
.scuro{background:var(--ferro);color:var(--calce)}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144;letter-spacing:-.018em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(44px,7.2vw,116px);line-height:.96;letter-spacing:-.028em}
h2{font-size:clamp(36px,4.7vw,72px)}
h3{font-size:clamp(26px,2.5vw,38px);line-height:1.08}
h4{font-size:clamp(22px,1.8vw,27px);line-height:1.12;letter-spacing:-.01em}
p{text-wrap:pretty}
.lead{font-family:var(--serif);font-size:clamp(22px,2.1vw,31px);line-height:1.32;letter-spacing:-.01em;font-variation-settings:'opsz' 48;color:var(--ink)}
.scuro .lead{color:var(--calce)}
.testo{max-width:62ch;color:var(--ink-2)}
.testo p+p{margin-top:1.05em}
.scuro .testo{color:rgba(248,244,236,.78)}
.nota{font-size:13px;color:var(--muted);letter-spacing:.01em}
.scuro .nota{color:rgba(248,244,236,.55)}
/* maschera delle parole: spazio per discendenti e sporgenze del corsivo (g, p, f) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.18em .12em .26em;margin:-.18em -.12em -.26em}
.w>span{display:inline-block}

/* Occhiello come cartello di stazione: due rotaie e traversine prima del testo */
.cartello{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ocra-dk);margin-bottom:22px}
.cartello::before{content:"";width:34px;height:11px;flex:none;background:
  linear-gradient(currentColor,currentColor) 0 1px/100% 1.5px no-repeat,
  linear-gradient(currentColor,currentColor) 0 8.5px/100% 1.5px no-repeat,
  repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 7px) 2px 0/100% 100% no-repeat}
.scuro .cartello,.hero .cartello,.sottohero .cartello{color:var(--ocra)}
.titolo-sez{max-width:18ch}
.titolo-sez+.testo,.titolo-sez+.lead{margin-top:clamp(22px,2.6vw,36px)}

/* ---------- Bottoni ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 24px;border-radius:2px;font-size:15px;font-weight:600;letter-spacing:.01em;background:var(--ink);color:var(--calce);transition:background .3s,color .3s,transform .4s var(--ease)}
.btn:hover{background:var(--ocra-dk)}
.btn .freccia{transition:transform .5s var(--ease)}
.btn:hover .freccia{transform:translateX(4px)}
.btn--chiaro{background:var(--calce);color:var(--ink)}
.btn--chiaro:hover{background:var(--ocra);color:var(--ink)}
.btn--linea{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn--linea:hover{background:var(--ink);color:var(--calce)}
.scuro .btn--linea:hover,.hero .btn--linea:hover{background:var(--calce);color:var(--ink)}
.link{display:inline-flex;gap:10px;align-items:center;font-weight:600;font-size:15px;border-bottom:1.5px solid currentColor;padding-bottom:3px;transition:color .3s,gap .4s var(--ease)}
.link:hover{color:var(--ocra-dk);gap:14px}
.scuro .link:hover{color:var(--ocra)}
.azioni{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-top:clamp(28px,3vw,40px)}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:2px;box-shadow:inset 0 0 0 1px currentColor;color:var(--ocra-dk)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:lampeggia 1.6s steps(1) infinite}
@keyframes lampeggia{50%{opacity:.25}}

/* ---------- Logo ---------- */
.logo{display:block;height:auto;overflow:visible;
  --l-ink:var(--ink);--l-carta:var(--calce);--l-vetro:var(--ink);--l-croce:var(--calce)}
.logo .pf{fill:var(--l-carta);transition:fill .5s}
.logo .pi{fill:var(--l-ink);transition:fill .5s}
.logo .ps{fill:none;stroke:var(--l-ink);stroke-width:2;stroke-linejoin:round;transition:stroke .5s}
.logo .ps-sq{stroke-linecap:square}
.logo .pc{stroke:var(--l-croce);stroke-width:2;transition:stroke .5s}
.logo .l-vetro,.logo .l-porta-vano{fill:var(--l-vetro);transition:fill .5s}
.logo *{transform-box:fill-box}
/* lampada del casellante: al passaggio la finestra si accende */
.marchio:hover .logo .l-vetro,.marchio:focus-visible .logo .l-vetro{fill:var(--ocra)}
.marchio:hover .l-traversina{animation:traversa .5s var(--ease) both;animation-delay:calc(var(--n) * 45ms)}
@keyframes traversa{0%{transform:translateX(0)}40%{transform:translateX(-3px)}100%{transform:translateX(0)}}

/* Costruzione del logo, pezzo per pezzo */
@media (prefers-reduced-motion:no-preference){
  .costruisci .l-base{animation:l-base .7s var(--ease) both}
  .costruisci .l-q{animation:l-cade .55s var(--ease) both;animation-delay:calc(.18s + var(--n) * 70ms)}
  .costruisci .l-muro{animation:l-sale .8s var(--ease-io) .3s both}
  .costruisci .l-marcapiano{animation:l-base .6s var(--ease) .72s both}
  .costruisci .l-porta-vano{animation:l-porta .6s var(--ease) .8s both;transform-origin:50% 100%}
  .costruisci .l-porta .ps{stroke-dasharray:1;stroke-dashoffset:1;animation:l-traccia .7s var(--ease) .8s forwards}
  .costruisci .l-concio{animation:l-concio .5s var(--ease) both;animation-delay:calc(.95s + var(--n) * 60ms)}
  .costruisci .l-vetro{animation:l-vetro 1.2s var(--ease) 1.25s both}
  .costruisci .l-finestra{animation:l-cade .6s var(--ease) 1.2s both}
  .costruisci .l-tetto{animation:l-tetto .8s cubic-bezier(.34,1.4,.64,1) 1.45s both}
  .costruisci .l-nome .l-lettera{animation:l-lettera .7s var(--ease) both;animation-delay:calc(1.05s + var(--n) * 50ms)}
  .costruisci .l-rotaie{animation:l-base .8s var(--ease) 1.6s both}
  .costruisci .l-binario--sx .l-rotaie{transform-origin:100% 50%}
  .costruisci .l-binario--dx .l-rotaie{transform-origin:0 50%}
  .costruisci .l-traversina{animation:l-porta .4s var(--ease) both;animation-delay:calc(1.75s + var(--n) * 55ms);transform-origin:50% 50%}
  .costruisci .l-sotto .l-lettera{animation:l-sfuma .6s var(--ease) both;animation-delay:calc(1.8s + var(--n) * 22ms)}
}
.l-porta .ps{stroke-dasharray:none}
.costruisci .l-porta polyline{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes l-base{from{transform:scaleX(0)}}
@keyframes l-cade{from{transform:translateY(-10px);opacity:0}}
@keyframes l-sale{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes l-porta{from{transform:scaleY(0)}}
@keyframes l-traccia{to{stroke-dashoffset:0}}
@keyframes l-concio{from{transform:translateY(-12px) rotate(-8deg);opacity:0}}
@keyframes l-vetro{0%{fill:var(--l-vetro);opacity:0}45%{fill:var(--ocra);opacity:1}100%{fill:var(--l-vetro)}}
@keyframes l-tetto{from{transform:translateY(-22px);opacity:0}}
@keyframes l-lettera{from{transform:translateY(55%);opacity:0}}
@keyframes l-sfuma{from{opacity:0}}

/* ---------- Intro (solo homepage, una volta per sessione) ---------- */
.intro{position:fixed;inset:0;z-index:150;background:var(--calce);display:grid;place-items:center;pointer-events:none}
.intro .logo{width:min(560px,78vw)}
.intro-binario{position:absolute;left:0;right:0;bottom:12svh;height:14px;opacity:.5;
  background:linear-gradient(var(--ink),var(--ink)) 0 2px/100% 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 10px/100% 1.5px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 22px);
  transform-origin:0 50%;animation:l-base 2.2s var(--ease-io) .2s both}
.intro.via{animation:intro-via .9s var(--ease-io) forwards}
@keyframes intro-via{to{clip-path:inset(0 0 100% 0)}}
html:not(.js) .intro,.intro[hidden]{display:none}

/* ---------- Testata ---------- */
.testata{position:fixed;inset:0 0 auto;z-index:100;height:var(--testata);color:var(--calce);transition:background .5s,color .5s,box-shadow .5s;
  --l-ink:var(--calce);--l-carta:transparent;--l-vetro:transparent;--l-croce:var(--calce)}
.testata-in{height:100%;display:flex;align-items:center;gap:28px}
.marchio{flex:none;display:block;width:clamp(178px,15vw,220px);margin-right:auto}
.marchio .logo{width:100%;--l-ink:inherit}
.testata .logo{--l-ink:currentColor;--l-carta:var(--t-carta,transparent);--l-vetro:var(--t-vetro,transparent);--l-croce:currentColor}
.testata.solida,.senza-hero .testata{background:rgba(248,244,236,.94);color:var(--ink);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);box-shadow:0 1px 0 var(--linea);--t-carta:var(--calce);--t-vetro:var(--ink)}
.testata.solida .logo .pc,.senza-hero .testata .logo .pc{stroke:var(--calce)}
.nav ul{display:flex;gap:clamp(14px,1.8vw,30px);list-style:none}
.nav a{position:relative;font-size:14.5px;font-weight:500;padding:8px 0;opacity:.86;transition:opacity .3s}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:none}
.nav .presto{opacity:.55;cursor:default;display:inline-flex;gap:8px;align-items:center}
.nav .presto small,.menu-mobile .presto small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:2px 6px;border-radius:2px;box-shadow:inset 0 0 0 1px currentColor}
.lingua{display:flex;gap:2px}
.lingua button{min-width:36px;height:32px;font-size:12.5px;font-weight:600;letter-spacing:.08em;border-radius:2px;opacity:.6;transition:opacity .3s,background .3s}
.lingua button[aria-pressed="true"]{opacity:1;box-shadow:inset 0 0 0 1px currentColor}
.menu-bottone{display:none;width:44px;height:44px;position:relative}
.menu-bottone span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.menu-bottone span:first-child{top:18px}.menu-bottone span:last-child{top:25px}
.menu-bottone[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-bottone[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* Binario di avanzamento: il carrello percorre la pagina */
.testata-binario{position:absolute;left:0;right:0;bottom:-1px;height:7px;opacity:0;transition:opacity .5s;pointer-events:none;
  background:linear-gradient(currentColor,currentColor) 0 3px/100% 1px no-repeat;color:var(--pietra-2)}
.testata.solida .testata-binario,.senza-hero .testata-binario{opacity:1}
.testata-binario i{position:absolute;left:0;top:0;height:7px;width:calc(var(--prog,0) * 100%);
  background:linear-gradient(var(--ocra-dk),var(--ocra-dk)) 0 3px/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--ocra-dk) 0 1px,transparent 1px 9px) 0 0/100% 7px no-repeat}
.testata-binario i::after{content:"";position:absolute;right:-5px;top:0;width:10px;height:7px;border-radius:1px;background:var(--ocra-dk)}

.menu-mobile{position:fixed;inset:var(--testata) 0 0;z-index:99;background:var(--calce);color:var(--ink);padding:28px var(--gutter) 40px;overflow:auto}
.menu-mobile ul{list-style:none;border-top:1px solid var(--linea)}
.menu-mobile li{border-bottom:1px solid var(--linea)}
.menu-mobile a,.menu-mobile .presto{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-family:var(--serif);font-size:30px;letter-spacing:-.01em}
.menu-mobile .presto{opacity:.5}
.menu-mobile .lingua{margin-top:28px}

/* ---------- Binario (divisore che scorre con la pagina) ---------- */
.binario{position:relative;height:16px;color:var(--pietra-2);overflow:hidden}
.binario::before{content:"";position:absolute;inset:0;
  background:linear-gradient(currentColor,currentColor) 0 3px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 11px/100% 1.5px no-repeat;
  transform-origin:0 50%;transform:scaleX(var(--trac,1));transition:transform 1.6s var(--ease-io)}
.binario::after{content:"";position:absolute;inset:0 -40px;
  background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 24px);
  transform:translateX(calc(mod(var(--y,0) * -0.35, 24) * 1px));opacity:var(--trav,1);transition:opacity 1s .6s}
@supports not (width:calc(mod(10, 3) * 1px)){.binario::after{transform:none}}
.rivela .binario[data-rivela]:not(.visibile){--trac:0;--trav:0}
.scuro .binario{color:rgba(248,244,236,.25)}

/* Striscia di parole che corre come un convoglio */
.convoglio{position:relative;overflow:hidden;border-top:1px solid var(--linea-chiara);color:rgba(248,244,236,.82);background:rgba(28,24,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.convoglio-riga{display:flex;gap:0;width:max-content;padding:15px 0;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  animation:convoglio 70s linear infinite}
.convoglio-riga>span{display:inline-flex;align-items:center;gap:22px;padding-right:22px}
.convoglio-riga>span::after{content:"";width:22px;height:8px;background:linear-gradient(currentColor,currentColor) 0 1px/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 0 6px/100% 1px no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 5px);opacity:.6}
@keyframes convoglio{to{translate:-50% 0}}

/* ---------- Hero homepage ---------- */
.hero{position:relative;color:var(--calce);background:var(--ferro)}
.hero .palco{position:relative;height:100svh;min-height:560px;overflow:hidden;display:flex;flex-direction:column}
.hero-foto{position:absolute;inset:0;overflow:hidden}
.hero-foto figure{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.hero-foto figure.attiva{opacity:1}
.hero-foto img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 7s linear}
.hero-foto figure.attiva img{transform:scale(1.02)}
.hero-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,24,20,.55) 0,rgba(28,24,20,.05) 26%,rgba(28,24,20,.18) 52%,rgba(28,24,20,.82) 100%),linear-gradient(90deg,rgba(28,24,20,.55),rgba(28,24,20,0) 62%)}
.hero-testo{position:relative;margin-top:auto;padding-bottom:clamp(36px,6vh,72px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,5vw,80px);align-items:end}
.hero h1{max-width:12ch}
.hero-intro{font-size:clamp(16px,1.2vw,18.5px);line-height:1.6;color:rgba(248,244,236,.84);max-width:42ch}
.hero-intro .azioni{margin-top:24px}
.hero-dots{display:flex;gap:8px;margin-bottom:18px}
.hero-dots button{width:34px;height:20px;position:relative}
.hero-dots button::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(248,244,236,.3)}
.hero-dots button::after{content:"";position:absolute;left:0;top:9px;height:2px;width:0;background:var(--calce)}
.hero-dots button[aria-current="true"]::after{animation:barra 6s linear forwards}
@keyframes barra{to{width:100%}}
.hero-indizio{position:absolute;right:var(--gutter);top:50%;writing-mode:vertical-rl;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(248,244,236,.7);display:flex;align-items:center;gap:14px}
.hero-indizio::after{content:"";width:1px;height:60px;background:linear-gradient(var(--calce),transparent);animation:indizio 2.2s var(--ease-io) infinite}
@keyframes indizio{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:no-preference){
  /* stato iniziale finché la pagina non è pronta (dopo l'intro del logo in homepage) */
  .js:not(.pronto) .hero h1 .w>span,.js:not(.pronto) .sottohero h1 .w>span{transform:translateY(110%)}
  .js:not(.pronto) .hero-foto,.js:not(.pronto) .sottohero-foto{clip-path:inset(100% 0 0 0)}
  .js:not(.pronto) .hero .cartello,.js:not(.pronto) .hero-intro,.js:not(.pronto) .sottohero .cartello,.js:not(.pronto) .convoglio,.js:not(.pronto) .hero-indizio{opacity:0}
  .pronto .hero-foto,.pronto .sottohero-foto{animation:sipario 1.5s var(--ease-io) both,avvicina 2.8s var(--ease) both}
  .pronto .hero-velo{animation:sfuma-da 1.6s var(--ease) .3s both}
  .pronto .hero .cartello,.pronto .sottohero .cartello{animation:sale .9s var(--ease) .65s both}
  .pronto .hero h1 .w>span,.pronto .sottohero h1 .w>span{animation:parola 1.2s var(--ease) both;animation-delay:calc(.75s + var(--n,0) * 70ms)}
  .pronto .hero-intro{animation:sale 1s var(--ease) 1.35s both}
  .pronto .convoglio{animation:sale-convoglio 1s var(--ease) 1.2s both}
  .pronto .hero-indizio{animation:sfuma-da 1s var(--ease) 2s both}
}
@keyframes sipario{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes avvicina{from{transform:scale(1.2)}to{transform:none}}
@keyframes sfuma-da{from{opacity:0}}
@keyframes sale{from{opacity:0;transform:translateY(18px)}}
@keyframes sale-convoglio{from{opacity:0;transform:translateY(100%)}}
@keyframes parola{from{transform:translateY(110%)}to{transform:none}}
@keyframes sfuma{to{opacity:1}}

/* ---------- Sottohero (pagine interne) ---------- */
.sottohero{position:relative;height:min(92svh,980px);min-height:520px;color:var(--calce);background:var(--ferro);overflow:hidden;display:flex;flex-direction:column}
.sottohero-foto{position:absolute;inset:0}
.sottohero-foto img,.sottohero-foto video{width:100%;height:100%;object-fit:cover;transform:translateY(calc(var(--hp,0) * 18%)) scale(calc(1.06 + var(--hp,0) * .08))}
.sottohero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,24,20,.64) 0,rgba(28,24,20,.08) 30%,rgba(28,24,20,.72) 100%);pointer-events:none}
.sottohero .wrap{position:relative;z-index:1;margin-top:auto;padding-bottom:clamp(40px,7vh,84px);transform:translateY(calc(var(--hp,0) * -60px));opacity:calc(1 - var(--hp,0) * 1.4)}
.sottohero h1{max-width:14ch}
.sottohero .convoglio{position:relative;z-index:1}

/* ---------- Teatro: scene agganciate ---------- */
.teatro .scena{height:calc(var(--sh) * var(--k,3));position:relative}
.teatro .scena.dissolve + .scena.dissolve{margin-top:calc(-1 * var(--sh))}
.teatro .scena>.palco{position:sticky;top:var(--testata);height:var(--sh);min-height:0;overflow:hidden}
.teatro .scena.dissolve + .scena.dissolve>.palco{box-shadow:0 -24px 48px -28px rgba(28,24,20,.35)}
.teatro .scena.spenta>.palco{visibility:hidden}
.teatro .scena.dissolve>.palco>*{transform:translateY(calc(var(--out,0) * -60px))}
.palco-centro{height:100%;display:flex;align-items:center}
.palco-centro>.wrap{padding-block:clamp(24px,5vh,56px)}

/* Curva di ogni elemento: --s nella finestra [--a, --a + --w], smussata t²(3 − 2t) */
.teatro .m{--t:clamp(0,calc((var(--s,0) - var(--a,0)) / var(--w,.3)),1);--e:calc(var(--t) * var(--t) * (3 - 2 * var(--t)))}
.teatro .m-titolo .w>span{transform:translateY(110%);transition:transform .85s var(--ease);transition-delay:calc(var(--dl,0s) + var(--n,0) * 45ms)}
.teatro .m-su{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .85s var(--ease);transition-delay:var(--dl,0s)}
.teatro .m-sx{opacity:0;transform:translateX(-20px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:var(--dl,0s)}
.teatro .m-diaframma{clip-path:inset(50% 0 50% 0);transition:clip-path 1s var(--ease-io);transition-delay:var(--dl,0s)}
.teatro .m-diaframma img{transform:scale(1.18);transition:transform 1.8s var(--ease);transition-delay:var(--dl,0s)}
.teatro .entrata .m-titolo .w>span,.teatro .entrata .m-su,.teatro .entrata .m-sx,.teatro .entrata .m-diaframma img{transform:none}
.teatro .entrata .m-su,.teatro .entrata .m-sx{opacity:1}
.teatro .entrata .m-diaframma{clip-path:inset(0 0 0 0)}
.hero-foto figure{transform:translateY(calc(var(--hp,0) * 14%)) scale(calc(1 + var(--hp,0) * .08))}
.hero-testo{transform:translateY(calc(var(--hp,0) * -70px));opacity:calc(1 - var(--hp,0) * 1.3)}

/* ---------- Homepage: allora e oggi ---------- */
.allora{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,110px);align-items:center;width:100%}
.allora-foto{position:relative;display:grid;aspect-ratio:1/1;max-height:calc(var(--sh) - 170px);width:auto;margin-inline:auto;max-width:100%}
.allora-cambio{grid-area:1/1;display:grid;position:relative;--a:.6;--w:1.05}
.allora-foto figure{grid-area:1/1;position:relative;overflow:hidden;background:var(--pietra)}
.allora-foto img{width:100%;height:100%;object-fit:cover}
.allora-foto .prima img{filter:grayscale(1) sepia(.35) contrast(1.05)}
.allora-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;font-size:13.5px;color:var(--calce);background:linear-gradient(transparent,rgba(28,24,20,.72))}
.allora-foto .etichetta{position:absolute;top:16px;left:16px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:var(--calce);color:var(--ink);padding:6px 10px;border-radius:2px}
.teatro .allora-foto .dopo{clip-path:inset(0 0 0 calc((1 - var(--e)) * 100%))}
.teatro .allora-foto .prima figcaption,.teatro .allora-foto .prima .etichetta{opacity:clamp(0,calc(1 - var(--e) * 2.5),1)}
.teatro .allora-foto .dopo figcaption,.teatro .allora-foto .dopo .etichetta{opacity:clamp(0,calc(var(--e) * 2.5 - 1.5),1)}
.allora-foto .taglio{position:absolute;top:0;bottom:0;width:2px;background:var(--calce);left:calc((1 - var(--e,1)) * 100%);box-shadow:0 0 0 1px rgba(28,24,20,.2);display:none}
.teatro .allora-foto .taglio{display:block;opacity:calc(var(--e) * (1 - var(--e)) * 4)}
.tappe{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(28px,4vh,48px);padding-top:26px}
.tappe::before{content:"";position:absolute;left:0;right:0;top:4px;height:10px;opacity:.45;background:linear-gradient(var(--ink),var(--ink)) 0 1px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 8px/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 8px)}
.tappe::after{content:"";position:absolute;left:0;top:4px;height:10px;width:calc(var(--e,1) * 100%);background:linear-gradient(var(--ocra-dk),var(--ocra-dk)) 0 1px/100% 1.5px no-repeat,linear-gradient(var(--ocra-dk),var(--ocra-dk)) 0 8px/100% 1.5px no-repeat}
.tappe{--a:.15;--w:1.25}
.teatro .tappe{opacity:0;transition:opacity .7s var(--ease) .3s}
.teatro .entrata .tappe{opacity:1}
.tappa{position:relative;--soglia:clamp(.3,calc((var(--e,1) - var(--f)) * 12 + .3),1);opacity:var(--soglia)}
.tappa::before{content:"";position:absolute;top:-28px;left:0;width:14px;height:14px;border-radius:50%;background:var(--calce);box-shadow:inset 0 0 0 2px var(--ocra-dk)}
.tappa b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(30px,2.6vw,42px);line-height:1;letter-spacing:-.02em}
.tappa>span{font-size:13.5px;color:var(--muted)}

/* ---------- Homepage: tre binari ---------- */
.binari{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(28px,5vh,56px)}
.carrozza{position:relative;display:flex;flex-direction:column;background:var(--calce);border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px var(--linea);transition:box-shadow .4s,transform .6s var(--ease)}
.carrozza:hover{box-shadow:0 0 0 1px var(--ink),0 22px 40px -24px rgba(28,24,20,.4);transform:translateY(-4px)}
.carrozza figure{overflow:hidden;aspect-ratio:4/3;max-height:30svh;width:100%}
.carrozza img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.carrozza:hover img{transform:scale(1.05)}
.carrozza-testo{padding:clamp(18px,2vh,26px) 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.carrozza-n{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ocra-dk)}
.carrozza-n i{font-style:normal;color:var(--muted);letter-spacing:.06em}
.carrozza p{font-size:15px;color:var(--ink-2);line-height:1.55}
.carrozza .link{margin-top:auto;align-self:flex-start}
.teatro .binari .carrozza{--w:.36}
.teatro .carrozza figure{clip-path:inset(100% 0 0 0);transition:clip-path .9s var(--ease-io) var(--dl,0s)}
.teatro .carrozza figure img{transform:scale(1.15);transition:transform 1.6s var(--ease) var(--dl,0s)}
.teatro .carrozza .carrozza-testo{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease) calc(var(--dl,0s) + .15s),transform .85s var(--ease) calc(var(--dl,0s) + .15s)}
.teatro .entrata .carrozza figure{clip-path:inset(0 0 0 0)}
.teatro .entrata .carrozza figure img,.teatro .entrata .carrozza .carrozza-testo{transform:none}
.teatro .entrata .carrozza .carrozza-testo{opacity:1}

/* ---------- Promotore ---------- */
.promotore{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:center;width:100%}
.promotore-foto{position:relative;overflow:hidden;aspect-ratio:4/5;max-height:calc(var(--sh) - 120px);background:var(--pietra);width:100%;margin-inline:auto}
.promotore-foto img{width:100%;height:100%;object-fit:cover;object-position:40% 20%}
.promotore-nome{font-family:var(--serif);font-size:clamp(30px,3vw,46px);line-height:1.05;letter-spacing:-.02em;margin-top:clamp(22px,3vh,34px)}
.promotore-ruolo{font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--ocra-dk);margin-top:8px}
.promotore .testo{margin-top:clamp(18px,2.5vh,28px)}
.promotore-dati{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin-top:clamp(22px,3vh,34px);padding-top:20px;border-top:1px solid var(--linea);font-size:14.5px}
.promotore-dati dt{color:var(--muted)}
.promotore-dati dd{font-weight:500}

/* ---------- PNRR ---------- */
.pnrr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center;width:100%}
.pnrr-targa{background:var(--calce);padding:clamp(10px,1.2vw,16px);border-radius:2px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.pnrr-targa img{width:100%;max-height:calc(var(--sh) - 180px);object-fit:contain}
.teatro .pnrr-targa{--a:-.6;--w:1.1;transform-origin:50% 100%;transform:perspective(1100px) rotateX(calc((1 - var(--e)) * 42deg)) rotateZ(calc((1 - var(--e)) * -4deg)) translateY(calc((1 - var(--e)) * 90px)) scale(calc(.9 + var(--e) * .1));opacity:clamp(0,calc(var(--e) * 1.8),1)}

/* ---------- Intestazioni di sezione e testi ---------- */
.intesta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.intesta .testo{justify-self:end}
.due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center}
.due--testo-largo{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.due--alto{align-items:start}
.figura{position:relative;overflow:hidden;background:var(--pietra);border-radius:2px}
.figura img{width:100%;height:100%;object-fit:cover}
.didascalia{margin-top:14px;font-size:13.5px;color:var(--muted);max-width:60ch;display:flex;gap:12px}
.didascalia::before{content:"";flex:none;width:18px;height:1px;background:currentColor;margin-top:.8em}
.scuro .didascalia{color:rgba(248,244,236,.6)}

/* Numeri come tabelle chilometriche */
.cippi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,6vw,88px);border-top:1px solid var(--linea)}
.cippo{padding:28px 28px 8px 0;position:relative}
.cippo+.cippo{padding-left:28px;border-left:1px solid var(--linea)}
.cippo b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(46px,5.2vw,84px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cippo>span{display:block;margin-top:14px;font-size:14.5px;color:var(--muted);max-width:30ch}

/* Rivelazione all'ingresso in vista */
.rivela [data-rivela]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--ritardo,0ms)}
/* il ritaglio va sui figli: IntersectionObserver ignora un elemento ritagliato a zero */
.rivela [data-rivela="diaframma"],.rivela [data-rivela="basso"]{opacity:1;transform:none}
.rivela [data-rivela="diaframma"]>*{clip-path:inset(50% 0 50% 0);transition:clip-path 1.4s var(--ease-io),transform 1.8s var(--ease)}
.rivela [data-rivela="diaframma"]>img{transform:scale(1.18)}
.rivela [data-rivela="basso"]>*{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease-io);transition-delay:var(--ritardo,0ms)}
.rivela [data-rivela].visibile{opacity:1;transform:none}
.rivela [data-rivela="diaframma"].visibile>*,.rivela [data-rivela="basso"].visibile>*{clip-path:inset(0 0 0 0)}
.rivela [data-rivela="diaframma"].visibile>img{transform:none}
.rivela [data-rivela="binario"]{opacity:1;transform:none}

/* ---------- Orario: elenco a righe (mestieri, criteri) ---------- */
.orario{border-top:1.5px solid var(--ink);margin-top:clamp(36px,5vw,64px)}
.orario-riga{display:grid;grid-template-columns:110px minmax(0,.7fr) minmax(0,1.3fr);gap:24px;align-items:baseline;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--linea);position:relative}
.orario-riga::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:100%;background:var(--ocra-dk);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease)}
.orario-riga:hover::after{transform:none}
.orario-n{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--ocra-dk);font-variant-numeric:tabular-nums}
.orario-riga p{color:var(--ink-2);max-width:56ch}
.orario-intesta{display:grid;grid-template-columns:110px minmax(0,.7fr) minmax(0,1.3fr);gap:24px;padding:10px 0;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Vetrina: un elemento alla volta (casello, pezzo per pezzo) ---------- */
.vetrina{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center;width:100%}
.vetrina-foto{position:relative;display:grid;height:calc(var(--sh) - 150px);max-height:760px}
.pezzo-foto{grid-area:1/1;margin:0;overflow:hidden;background:var(--pietra);clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease-io);border-radius:2px}
.pezzo-foto img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.6s var(--ease)}
.pezzo-foto.attivo,.pezzo-foto.passato{clip-path:inset(0 0 0 0)}
.pezzo-foto.attivo{z-index:2}
.pezzo-foto.attivo img{transform:none}
.vetrina-schede{display:grid}
.scheda{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .8s var(--ease);pointer-events:none}
.scheda.attivo{opacity:1;transform:none;transition-delay:.15s;pointer-events:auto}
.scheda-n{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ocra-dk);margin-bottom:16px;font-variant-numeric:tabular-nums}
.scheda h3{font-size:clamp(32px,3.2vw,52px);margin-bottom:20px}
.scheda p{color:var(--ink-2);max-width:54ch;font-size:16.5px}
.scheda p+p{margin-top:.9em}
.scheda-figura{display:none}
.fermate{position:relative;display:flex;justify-content:space-between;margin-top:clamp(28px,4vh,44px);padding-top:30px;list-style:none;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.fermate::before{content:"";position:absolute;left:6px;right:6px;top:4px;height:10px;opacity:.4;background:linear-gradient(var(--ink),var(--ink)) 0 1px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 8px/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 8px)}
.fermate::after{content:"";position:absolute;left:6px;top:4px;height:10px;width:calc(var(--corsa,0) * (100% - 12px));background:linear-gradient(var(--ocra-dk),var(--ocra-dk)) 0 1px/100% 1.5px no-repeat,linear-gradient(var(--ocra-dk),var(--ocra-dk)) 0 8px/100% 1.5px no-repeat;transition:width .7s var(--ease)}
.fermate li{position:relative;flex:1;text-align:center;transition:color .4s}
.fermate li:first-child{text-align:left}.fermate li:last-child{text-align:right}
.fermate li::before{content:"";position:absolute;top:-30px;left:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;background:var(--calce-2);box-shadow:inset 0 0 0 2px var(--pietra-2);transition:box-shadow .4s,background .4s}
.fermate li:first-child::before{left:0;margin:0}.fermate li:last-child::before{left:auto;right:0;margin:0}
.fermate li.fatto::before{box-shadow:inset 0 0 0 2px var(--ocra-dk)}
.fermate li.attivo{color:var(--ink)}
.fermate li.attivo::before{background:var(--ocra-dk);box-shadow:0 0 0 4px rgba(143,110,30,.18)}
.sez--alt .fermate li::before{background:var(--calce-2)}

/* ---------- Tracciato della linea (ferrovia) ---------- */
.tracciato{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,88px);align-items:center;width:100%}
.mappa{position:relative;width:100%}
.mappa svg{width:100%;height:auto;max-height:calc(var(--sh) - 90px);overflow:visible;display:block}
.mappa .traccia-fondo{fill:none;stroke:var(--pietra-2);stroke-width:2;stroke-dasharray:2 7}
.mappa .traccia{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--e,1))}
.mappa .traccia-trav{fill:none;stroke:var(--ink);stroke-width:9;stroke-dasharray:1.5 7;opacity:.25}
.mappa .stazione{opacity:clamp(0,calc((var(--e,1) - var(--f)) * 14 + .0),1);transition:opacity .2s}
.mappa .stazione circle{fill:var(--calce);stroke:var(--ink);stroke-width:2.5}
.mappa .stazione text{font-family:var(--sans);font-size:15px;font-weight:500;fill:var(--ink)}
.mappa .stazione .sub{font-size:12.5px;font-weight:400;fill:var(--muted)}
.mappa .stazione--casello circle{fill:var(--ocra);stroke:var(--ink)}
.mappa .stazione--casello text{font-weight:700}
.mappa .alone{fill:none;stroke:var(--ocra);stroke-width:2;opacity:.6;transform-origin:center;transform-box:fill-box;animation:alone 2.4s var(--ease) infinite}
@keyframes alone{from{transform:scale(.6);opacity:.8}to{transform:scale(2.2);opacity:0}}
.mappa .treno{fill:var(--ocra-dk)}
.mappa-legenda{display:flex;gap:22px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.mappa-legenda>span{display:inline-flex;align-items:center;gap:8px}
.mappa-legenda i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink);background:var(--calce)}
.mappa-legenda i.oro{background:var(--ocra)}

/* ---------- Corsa orizzontale (cronologia, interventi) ---------- */
.corsa{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,36px)}
.corsa-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.corsa-contatore{font-family:var(--serif);font-size:clamp(28px,2.6vw,40px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.corsa-contatore small{font-family:var(--sans);font-size:13px;color:var(--muted);letter-spacing:.06em;margin-left:6px}
.corsa-vista{overflow:hidden;margin-inline:calc((100vw - 100%) / -2);padding-inline:calc((100vw - 100%) / 2)}
.corsa-treno{display:flex;gap:clamp(16px,1.6vw,26px);width:max-content}
.teatro .corsa-vista{overflow:clip}
.teatro .corsa-treno{transform:translate3d(calc(var(--p,0) * var(--dist,0) * -1px),0,0);will-change:transform}
html:not(.teatro) .corsa-vista{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:14px;scrollbar-width:thin}
html:not(.teatro) .corsa-treno>*{scroll-snap-align:start}
.corsa-binario{position:relative;height:14px;color:var(--pietra-2)}
.corsa-binario::before{content:"";position:absolute;inset:0;background:linear-gradient(currentColor,currentColor) 0 2px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 10px/100% 1.5px no-repeat,repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 14px)}
.corsa-binario i{position:absolute;left:0;top:0;bottom:0;width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;background:linear-gradient(var(--ocra-dk),var(--ocra-dk)) 0 2px/100% 1.5px no-repeat,linear-gradient(var(--ocra-dk),var(--ocra-dk)) 0 10px/100% 1.5px no-repeat}
.corsa-binario i::after{content:"";position:absolute;right:-9px;top:-1px;width:18px;height:16px;border-radius:2px;background:var(--ocra-dk)}
html:not(.teatro) .corsa-binario{display:none}

/* Carte degli interventi */
.intervento{flex:none;width:clamp(260px,22vw,340px);display:flex;flex-direction:column;background:var(--calce);border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px var(--linea);text-align:left;cursor:pointer;transition:box-shadow .4s,transform .6s var(--ease)}
.intervento:hover{box-shadow:0 0 0 1px var(--ink),0 24px 44px -26px rgba(28,24,20,.45);transform:translateY(-4px)}
.intervento figure{height:clamp(190px,34svh,380px);overflow:hidden;background:var(--pietra);width:100%}
.intervento img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.intervento:hover img{transform:scale(1.05)}
.intervento-testo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.intervento-n{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra-dk)}
.intervento h3{font-size:clamp(21px,1.6vw,25px)}
.intervento p{font-size:14px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.intervento .apri{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
.solo-dettaglio{display:none}

/* Cronologia */
.anno{flex:none;width:clamp(280px,26vw,400px);padding:26px 0 0;position:relative}
.anno::before{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--calce);box-shadow:inset 0 0 0 2px var(--ink)}
.anno::after{content:"";position:absolute;top:6px;left:22px;right:0;height:1px;background:var(--linea)}
.anno b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(64px,7vw,120px);line-height:.9;letter-spacing:-.04em;margin:18px 0 18px;font-variant-numeric:tabular-nums;color:var(--ink)}
.anno h4{margin-bottom:12px}
.anno p{font-size:15.5px;color:var(--ink-2);max-width:34ch}
.anno--casello::before{background:var(--ocra);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 5px rgba(200,162,75,.25)}
.anno--casello b{color:var(--ocra-dk)}

/* ---------- Archivio ---------- */
.archivio-capo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(40px,5vw,72px)}
.archivio-capo blockquote{font-family:var(--serif);font-size:clamp(24px,2.4vw,36px);line-height:1.25;letter-spacing:-.012em}
.archivio-capo cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:13.5px;color:rgba(248,244,236,.6)}
.archivio{columns:3 280px;column-gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,3vw,44px)}
.foto-archivio{break-inside:avoid;margin-bottom:clamp(14px,1.6vw,24px);display:block;width:100%;text-align:left;cursor:zoom-in}
.foto-archivio .figura{background:var(--ferro-2)}
.foto-archivio img{filter:grayscale(.2) sepia(.15);transition:filter .6s,transform 1.2s var(--ease)}
.foto-archivio:hover img{filter:none;transform:scale(1.03)}
.foto-archivio .figura{display:block}
.foto-archivio .didascalia-archivio{display:flex;flex-direction:column;gap:2px;margin-top:10px;font-size:13.5px;color:rgba(248,244,236,.82)}
.foto-archivio .didascalia-archivio small{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ocra)}

/* ---------- Galleria paesaggio ---------- */
.paesaggio{display:grid;grid-template-columns:2fr 1fr 1.4fr 2fr;gap:clamp(10px,1.2vw,18px);margin-top:clamp(56px,7vw,100px);align-items:end}
.paesaggio figure{position:relative}
.paesaggio .figura{height:clamp(220px,30vw,440px)}
.paesaggio figcaption{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Prossima fermata ---------- */
.prossime{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--linea)}
.prossima{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(36px,5vw,72px) var(--gutter);background:var(--calce-2);transition:background .5s}
.prossima:hover{background:var(--ink);color:var(--calce)}
.prossima small{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ocra-dk);display:flex;align-items:center;gap:12px}
.prossima:hover small{color:var(--ocra)}
.prossima strong{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,52px);line-height:1.04;letter-spacing:-.02em}
.prossima>span{max-width:44ch;color:var(--muted);transition:color .5s}
.prossima:hover>span{color:rgba(248,244,236,.7)}
.prossima .freccia{position:absolute;right:var(--gutter);top:clamp(36px,5vw,72px);font-size:28px;transition:transform .6s var(--ease)}
.prossima:hover .freccia{transform:translateX(8px)}

/* ---------- Visita ---------- */
.pagina-capo{padding-top:calc(var(--testata) + clamp(48px,7vw,104px))}
.passi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(40px,5vw,72px);position:relative;padding-top:34px}
.passi::before{content:"";position:absolute;left:0;right:0;top:4px;height:10px;opacity:.4;background:linear-gradient(var(--ink),var(--ink)) 0 1px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 8px/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 8px)}
.passo{position:relative}
.passo::before{content:"";position:absolute;top:-34px;left:0;width:14px;height:14px;border-radius:50%;background:var(--calce);box-shadow:inset 0 0 0 2px var(--ocra-dk)}
.passo .orario-n{display:block;margin-bottom:10px}
.passo p{color:var(--ink-2);margin-top:10px;max-width:36ch}
.modulo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin-top:clamp(28px,3vw,40px)}
.campo{display:flex;flex-direction:column;gap:8px}
.campo--largo{grid-column:1/-1}
.campo label{font-size:13.5px;font-weight:600}
.campo label small{font-weight:400;color:var(--muted)}
.campo input,.campo textarea{font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--pietra-2);border-radius:2px;background:#fff;color:var(--ink);transition:border-color .3s,box-shadow .3s}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--ocra-dk);box-shadow:0 0 0 3px rgba(143,110,30,.18)}
.campo .errore{font-size:12.5px;color:#A3341F;font-weight:500}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:#A3341F}
.modulo .invia{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.esito{grid-column:1/-1;padding:16px 18px;border-radius:2px;font-weight:500}
.esito--ok{background:rgba(90,105,64,.12);color:#3E4A2A}
.esito--ko{background:rgba(163,52,31,.1);color:#7D2716}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Bottega ---------- */
.prodotti{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(40px,5vw,64px)}
.prodotto{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:300px;padding:24px;background:var(--calce);box-shadow:0 0 0 1px var(--linea);border-radius:2px;overflow:hidden}
.prodotto::after{content:attr(data-segno);position:absolute;right:-6px;bottom:-34px;font-family:var(--serif);font-size:150px;line-height:1;color:var(--calce-2);pointer-events:none;letter-spacing:-.05em}
.prodotto .badge{align-self:flex-start;position:relative;z-index:1}
.prodotto-etichetta{position:relative;z-index:1;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.prodotto h4{position:relative;z-index:1}
.prodotto p{position:relative;z-index:1;font-size:14.5px;color:var(--ink-2);margin-top:8px}
.iscriviti{display:flex;gap:10px;margin-top:22px;max-width:520px}
.iscriviti input{flex:1;min-width:0;font:inherit;padding:14px 16px;border:1px solid var(--pietra-2);border-radius:2px;background:#fff}
.iscriviti input:focus{outline:none;border-color:var(--ocra-dk);box-shadow:0 0 0 3px rgba(143,110,30,.18)}

/* ---------- Trasparenza ---------- */
.dati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--linea-chiara)}
.dati div{padding:22px 24px 22px 0;border-bottom:1px solid var(--linea-chiara)}
.dati div:nth-child(even){padding-left:24px;border-left:1px solid var(--linea-chiara)}
.dati dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra)}
.dati dd{margin-top:8px;font-size:17px;font-variant-numeric:tabular-nums}

/* ---------- Dialog ---------- */
.dettaglio{border:0;padding:0;margin:auto;width:min(1080px,calc(100vw - 32px));max-height:calc(100svh - 32px);background:var(--calce);color:var(--ink);border-radius:2px;overflow:auto;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.dettaglio::backdrop{background:rgba(28,24,20,.72);backdrop-filter:blur(4px)}
.dettaglio[open]{animation:apri .6s var(--ease)}
@keyframes apri{from{opacity:0;transform:translateY(30px)}}
.dettaglio-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(640px,calc(100svh - 32px))}
.dettaglio-in figure{background:var(--pietra);min-height:300px}
.dettaglio-in figure img{width:100%;height:100%;object-fit:cover;max-height:calc(100svh - 32px)}
.dettaglio-testo{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.dettaglio-testo p{color:var(--ink-2)}
.dettaglio--foto .dettaglio-in{grid-template-columns:1fr;min-height:0}
.dettaglio--foto figure img{object-fit:contain;background:var(--ferro);max-height:calc(100svh - 140px)}
.dettaglio--foto .dettaglio-testo{padding:18px 24px 22px}
.dettaglio-testo small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra-dk);margin-bottom:4px}
.dettaglio-chiudi{position:sticky;top:0;float:right;margin:10px 10px -54px 0;z-index:2;width:44px;height:44px;border-radius:50%;background:var(--calce);box-shadow:0 0 0 1px var(--linea);font-size:22px;line-height:1}
.dettaglio-nav{display:flex;gap:10px;margin-top:10px}
.dettaglio-nav button{height:42px;padding:0 16px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--linea);font-size:14px;font-weight:600}
.dettaglio-nav button:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- Piede ---------- */
.piede{background:var(--ferro);color:rgba(248,244,236,.78);padding-top:clamp(72px,8vw,120px);font-size:15px}
.piede .binario{color:rgba(248,244,236,.18);margin-bottom:clamp(48px,6vw,80px)}
.piede-griglia{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.7fr));gap:clamp(28px,4vw,64px)}
.piede .logo{width:min(300px,100%);--l-ink:var(--calce);--l-carta:transparent;--l-vetro:transparent;--l-croce:var(--calce)}
.piede-brand p{margin-top:22px;max-width:36ch}
.piede h2{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ocra);margin-bottom:16px}
.piede ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.piede a:hover{color:var(--calce)}
.piede .presto{opacity:.55}
.piede-fondo{margin-top:clamp(56px,6vw,88px);padding:28px 0 36px;border-top:1px solid var(--linea-chiara);font-size:12.5px;line-height:1.7;color:rgba(248,244,236,.55)}
.piede-fondo p+p{margin-top:10px}

/* ---------- Senza teatro (telefono, schermi bassi, movimento ridotto) ---------- */
html:not(.teatro) .scena .palco{padding-block:clamp(72px,10vw,128px)}
html:not(.teatro) .hero .palco{padding:0}
html:not(.teatro) .vetrina{grid-template-columns:1fr}
html:not(.teatro) .vetrina-foto,html:not(.teatro) .fermate{display:none}
html:not(.teatro) .vetrina-schede{gap:56px}
html:not(.teatro) .scheda{grid-area:auto;opacity:1;transform:none;pointer-events:auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:start}
html:not(.teatro) .scheda-figura{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--pietra)}
html:not(.teatro) .scheda-figura img{width:100%;height:100%;object-fit:cover}
html:not(.teatro) .allora-foto{aspect-ratio:auto;grid-template-columns:1fr 1fr;gap:12px;max-height:none}
html:not(.teatro) .allora-cambio{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:12px}
html:not(.teatro) .allora-foto figure{grid-area:auto;aspect-ratio:1/1}
html:not(.teatro) .corsa{height:auto}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav ul{gap:16px}.nav a{font-size:13.5px}
  .piede-griglia{grid-template-columns:1fr 1fr}
  .piede-brand{grid-column:1/-1}
}
@media (max-width:980px){
  :root{--testata:68px}
  .nav,.testata-in>.lingua{display:none}
  .menu-bottone{display:block}
  .hero-testo{grid-template-columns:1fr;gap:20px}
  .hero-indizio{display:none}
  .allora,.promotore,.pnrr,.tracciato,.due,.due--testo-largo,.intesta,.archivio-capo,.dettaglio-in{grid-template-columns:1fr}
  .intesta .testo{justify-self:start}
  .binari{grid-template-columns:1fr}
  .carrozza figure{max-height:none}
  .promotore-foto{max-width:460px;margin:0}
  .prodotti{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paesaggio{grid-template-columns:1fr 1fr}
  .orario-riga,.orario-intesta{grid-template-columns:64px 1fr}
  .orario-riga p{grid-column:2}
  .orario-intesta span:last-child{display:none}
  .mappa svg{max-height:none}
  .dettaglio-in figure img{max-height:50svh}
}
@media (max-width:720px){
  body{font-size:16.5px}
  .cippi{grid-template-columns:1fr}
  .cippo+.cippo{padding-left:0;border-left:0;border-top:1px solid var(--linea)}
  .passi,.modulo,.prossime,.dati{grid-template-columns:1fr}
  .dati div:nth-child(even){padding-left:0;border-left:0}
  html:not(.teatro) .scheda{grid-template-columns:1fr}
  .prodotti{grid-template-columns:1fr}
  .tappe{grid-template-columns:repeat(3,1fr)}
  .piede-griglia{grid-template-columns:1fr}
  .iscriviti{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .hero h1 .w>span,.sottohero h1 .w>span{transform:none!important}
  .hero-intro,.hero-dots{opacity:1!important}
  .convoglio-riga{transform:none}
}

/* Fondo sul palco, non sulla scena: nella dissolvenza la scena dopo copre la precedente solo con l'opacità del suo palco */
.scena{background:transparent!important}
.scena>.palco{background:var(--fondo,var(--calce))}
html:not(.teatro) .corsa-contatore{display:none}
@media (max-width:980px){
  .hero-velo{background:linear-gradient(180deg,rgba(28,24,20,.5) 0,rgba(28,24,20,.1) 22%,rgba(28,24,20,.55) 45%,rgba(28,24,20,.88) 100%)}
}
@media (min-width:981px) and (max-height:820px){
  .scena--vetrina .intesta .testo{display:none}
  .scheda h3{font-size:clamp(28px,2.6vw,38px);margin-bottom:12px}
  .scheda p{font-size:15px;line-height:1.55}
  .scheda-n{margin-bottom:10px}
  .fermate{margin-top:20px}
}


/* =====================================================================
   v2: immagini smussate, gerarchia dei testi, più ferrovia, più immagini
   ===================================================================== */
:root{
  --r:18px;--r-s:12px;
  --treno-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 26'%3E%3Cg fill='%231C1814'%3E%3Crect x='0' y='6' width='33' height='13' rx='2.5'/%3E%3Crect x='33' y='13' width='5' height='2'/%3E%3Crect x='38' y='6' width='33' height='13' rx='2.5'/%3E%3Crect x='71' y='13' width='5' height='2'/%3E%3Crect x='76' y='2' width='16' height='17' rx='2'/%3E%3Crect x='88' y='8' width='30' height='11' rx='5.5'/%3E%3Crect x='106' y='2' width='5' height='7' rx='1'/%3E%3Crect x='117' y='14' width='4' height='3'/%3E%3Crect x='0' y='19' width='122' height='1.5'/%3E%3C/g%3E%3Cg fill='%23F8F4EC'%3E%3Crect x='4' y='9' width='7' height='5' rx='1'/%3E%3Crect x='13' y='9' width='7' height='5' rx='1'/%3E%3Crect x='22' y='9' width='7' height='5' rx='1'/%3E%3Crect x='42' y='9' width='7' height='5' rx='1'/%3E%3Crect x='51' y='9' width='7' height='5' rx='1'/%3E%3Crect x='60' y='9' width='7' height='5' rx='1'/%3E%3Crect x='79' y='5' width='10' height='6' rx='1'/%3E%3C/g%3E%3Cg fill='%231C1814'%3E%3Ccircle cx='7' cy='21.5' r='3.5'/%3E%3Ccircle cx='26' cy='21.5' r='3.5'/%3E%3Ccircle cx='45' cy='21.5' r='3.5'/%3E%3Ccircle cx='64' cy='21.5' r='3.5'/%3E%3Ccircle cx='83' cy='21.5' r='3.5'/%3E%3Ccircle cx='96' cy='21.5' r='3.5'/%3E%3Ccircle cx='109' cy='21.5' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  --treno-ocra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 26'%3E%3Cg fill='%238F6E1E'%3E%3Crect x='0' y='6' width='33' height='13' rx='2.5'/%3E%3Crect x='33' y='13' width='5' height='2'/%3E%3Crect x='38' y='6' width='33' height='13' rx='2.5'/%3E%3Crect x='71' y='13' width='5' height='2'/%3E%3Crect x='76' y='2' width='16' height='17' rx='2'/%3E%3Crect x='88' y='8' width='30' height='11' rx='5.5'/%3E%3Crect x='106' y='2' width='5' height='7' rx='1'/%3E%3Crect x='117' y='14' width='4' height='3'/%3E%3Crect x='0' y='19' width='122' height='1.5'/%3E%3C/g%3E%3Cg fill='%23F8F4EC'%3E%3Crect x='4' y='9' width='7' height='5' rx='1'/%3E%3Crect x='13' y='9' width='7' height='5' rx='1'/%3E%3Crect x='22' y='9' width='7' height='5' rx='1'/%3E%3Crect x='42' y='9' width='7' height='5' rx='1'/%3E%3Crect x='51' y='9' width='7' height='5' rx='1'/%3E%3Crect x='60' y='9' width='7' height='5' rx='1'/%3E%3Crect x='79' y='5' width='10' height='6' rx='1'/%3E%3C/g%3E%3Cg fill='%238F6E1E'%3E%3Ccircle cx='7' cy='21.5' r='3.5'/%3E%3Ccircle cx='26' cy='21.5' r='3.5'/%3E%3Ccircle cx='45' cy='21.5' r='3.5'/%3E%3Ccircle cx='64' cy='21.5' r='3.5'/%3E%3Ccircle cx='83' cy='21.5' r='3.5'/%3E%3Ccircle cx='96' cy='21.5' r='3.5'/%3E%3Ccircle cx='109' cy='21.5' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  --treno-calce:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 26'%3E%3Cg fill='%23F8F4EC'%3E%3Crect x='0' y='6' width='33' height='13' rx='2.5'/%3E%3Crect x='33' y='13' width='5' height='2'/%3E%3Crect x='38' y='6' width='33' height='13' rx='2.5'/%3E%3Crect x='71' y='13' width='5' height='2'/%3E%3Crect x='76' y='2' width='16' height='17' rx='2'/%3E%3Crect x='88' y='8' width='30' height='11' rx='5.5'/%3E%3Crect x='106' y='2' width='5' height='7' rx='1'/%3E%3Crect x='117' y='14' width='4' height='3'/%3E%3Crect x='0' y='19' width='122' height='1.5'/%3E%3C/g%3E%3Cg fill='%23221E1B'%3E%3Crect x='4' y='9' width='7' height='5' rx='1'/%3E%3Crect x='13' y='9' width='7' height='5' rx='1'/%3E%3Crect x='22' y='9' width='7' height='5' rx='1'/%3E%3Crect x='42' y='9' width='7' height='5' rx='1'/%3E%3Crect x='51' y='9' width='7' height='5' rx='1'/%3E%3Crect x='60' y='9' width='7' height='5' rx='1'/%3E%3Crect x='79' y='5' width='10' height='6' rx='1'/%3E%3C/g%3E%3Cg fill='%23F8F4EC'%3E%3Ccircle cx='7' cy='21.5' r='3.5'/%3E%3Ccircle cx='26' cy='21.5' r='3.5'/%3E%3Ccircle cx='45' cy='21.5' r='3.5'/%3E%3Ccircle cx='64' cy='21.5' r='3.5'/%3E%3Ccircle cx='83' cy='21.5' r='3.5'/%3E%3Ccircle cx='96' cy='21.5' r='3.5'/%3E%3Ccircle cx='109' cy='21.5' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Immagini e superfici smussate */
.figura,.carrozza,.intervento,.pezzo-foto,.allora-foto figure,.promotore-foto,.pnrr-targa,.scheda-figura,.prodotto,.dettaglio,.foto-archivio .figura,.allora-cambio,.fase{border-radius:var(--r);overflow:hidden}
.allora-foto{border-radius:var(--r)}
.pnrr-targa img{border-radius:calc(var(--r) - 8px)}
.dettaglio-in figure{overflow:hidden}
.campo input,.campo textarea,.iscriviti input{border-radius:var(--r-s)}
.btn{border-radius:999px;padding:0 26px}
.badge,.allora-foto .etichetta,.nav .presto small,.menu-mobile .presto small{border-radius:999px}
.allora-foto .etichetta{padding:6px 12px}
.prossime{gap:0;background:none;padding:clamp(16px,2vw,28px) var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(12px,1.4vw,20px);background:var(--calce)}
.prossima{border-radius:var(--r);padding-inline:clamp(28px,3vw,48px)}
.prossima .freccia{right:clamp(28px,3vw,48px)}
.lingua button{border-radius:999px}
.dettaglio-chiudi{border-radius:50%}

/* Gerarchia dei testi */
.cartello b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);font-variation-settings:'opsz' 14;margin-right:-2px}
.scuro .cartello b,.hero .cartello b,.sottohero .cartello b{color:var(--calce)}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300;font-variation-settings:'opsz' 144;letter-spacing:-.01em}
h2 em{color:var(--ocra-dk)}
.scuro h2 em{color:var(--ocra-chiaro)}
.hero h1 em,.sottohero h1 em{color:var(--ocra-chiaro)}
h2{font-weight:400;line-height:1}
.titolo-sez{max-width:16ch}
.testo{font-size:16.5px;line-height:1.68}
.testo p:first-child{color:var(--ink)}
.scuro .testo p:first-child{color:var(--calce)}
.capolettera::first-letter{float:left;font-family:var(--serif);font-style:italic;font-weight:300;font-size:3.6em;line-height:.82;margin:.06em .1em 0 0;color:var(--ocra-dk)}
.lead{font-weight:350}
.occhio{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.5vw,23px);line-height:1.35;color:var(--ink-2);margin-top:14px;max-width:34ch}
@media (min-width:981px){
  .due--alto>:first-child{position:sticky;top:calc(var(--testata) + 48px)}
}

/* Il convoglio di parole: ogni parola è una carrozza agganciata */
.convoglio-riga{padding:13px 0 15px;gap:0}
.convoglio-riga>span{position:relative;padding:7px 16px 9px;margin-right:30px;border:1px solid rgba(248,244,236,.35);border-radius:5px;gap:0}
.convoglio-riga>span::after{content:"";position:absolute;right:-31px;top:50%;width:30px;height:1.5px;background:rgba(248,244,236,.45);opacity:1}
.convoglio-riga>span::before{content:"";position:absolute;left:12px;right:12px;bottom:-5px;height:6px;background:radial-gradient(circle,rgba(248,244,236,.6) 2.2px,transparent 2.6px) left/9px 6px no-repeat,radial-gradient(circle,rgba(248,244,236,.6) 2.2px,transparent 2.6px) right/9px 6px no-repeat}

/* Treni */
.testata-binario i::after{width:44px;height:10px;right:-46px;top:-4px;border-radius:0;background:var(--treno-ocra) center/contain no-repeat}
.corsa-binario i::after{display:none}
.binario .corre{position:absolute;left:0;bottom:2px;width:96px;height:20px;background:var(--treno-ink) center/contain no-repeat;transform:translateX(-120px);opacity:0;z-index:1}
.binario{height:26px;overflow:hidden}
.binario::before{top:10px}
.binario::after{top:10px}
.binario.visibile .corre{animation:corre 10s cubic-bezier(.45,0,.4,1) .6s forwards}
.piede .binario.visibile .corre{animation:corre 16s cubic-bezier(.4,0,.45,1) .8s forwards}
.scuro .binario .corre,.piede .binario .corre{background-image:var(--treno-calce)}
@keyframes corre{0%{transform:translateX(-120px);opacity:1}100%{transform:translateX(calc(100vw + 40px));opacity:1}}
/* Treno di foto: carrozze agganciate su un binario, guidate dallo scroll */
.fototreno{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,96px) clamp(40px,5vw,72px);background:var(--fondo,var(--calce))}
.fototreno-riga{display:flex;align-items:flex-end;gap:28px;width:max-content;padding-inline:var(--gutter);transform:translate3d(calc(var(--q,0) * -1 * var(--dq,0) * 1px),0,0);will-change:transform}
.fototreno figure{position:relative;flex:none;height:clamp(240px,42vh,460px);border-radius:var(--r);overflow:visible}
.fototreno figure img{height:100%;width:auto;border-radius:var(--r);object-fit:cover;display:block}
.fototreno figure.alta{height:clamp(300px,54vh,600px)}
.fototreno figure+figure::before{content:"";position:absolute;left:-28px;bottom:42px;width:28px;height:2px;background:var(--ink)}
.fototreno figure::after{content:"";position:absolute;left:18px;right:18px;bottom:-12px;height:10px;background:radial-gradient(circle,var(--ink) 4px,transparent 4.6px) left/12px 10px no-repeat,radial-gradient(circle,var(--ink) 4px,transparent 4.6px) 30px 0/12px 10px no-repeat,radial-gradient(circle,var(--ink) 4px,transparent 4.6px) right/12px 10px no-repeat,radial-gradient(circle,var(--ink) 4px,transparent 4.6px) calc(100% - 30px) 0/12px 10px no-repeat}
.fototreno-binario{position:relative;margin-top:16px;height:12px;color:var(--ink);opacity:.4;background:linear-gradient(currentColor,currentColor) 0 1px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 9px/100% 1.5px no-repeat,repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 16px);
  background-position:0 1px,0 9px,calc(var(--q,0) * -400px) 0}
.fototreno figcaption{position:absolute;left:14px;top:14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--calce);color:var(--ink);padding:6px 11px;border-radius:999px}
.fototreno-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,3vw,44px)}
.fototreno-testa .occhio{margin:0}
@media (prefers-reduced-motion:reduce){.fototreno-riga{transform:none;overflow-x:auto;width:auto}}
@media (max-width:980px){.fototreno{overflow-x:auto}.fototreno-riga{transform:none}}

/* Tratte del tracciato: il testo segue il treno */
.tratta-n{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra-dk);margin-bottom:10px}
.tratta+.tratta{margin-top:1.1em}
.teatro .tracciato .testo{display:grid}
.teatro .tracciato .tratta{grid-area:1/1;transition:opacity .5s,transform .7s var(--ease)}
.teatro .tracciato .tratta+.tratta{margin-top:0}
.teatro .tracciato .tratta:first-child{opacity:clamp(0,calc((1.2 - var(--s,0)) * 6),1)}
.teatro .tracciato .tratta:last-child{opacity:clamp(0,calc((var(--s,0) - 1.2) * 6),1);transform:translateY(calc(clamp(0,calc((1.4 - var(--s,0)) * 5),1) * 16px))}
.tracciato-dati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:22px;border-radius:var(--r-s);overflow:hidden;background:var(--linea)}
.tracciato-dati div{background:var(--calce-2);padding:12px 14px}
.tracciato-dati dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tracciato-dati dd{font-family:var(--serif);font-size:19px;line-height:1.2;margin-top:4px}

/* Linea del tempo compatta (Corleone) */
.linea-tempo{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);position:relative;padding-top:30px}
.linea-tempo::before{content:"";position:absolute;left:0;right:0;top:4px;height:10px;opacity:.4;background:linear-gradient(var(--ink),var(--ink)) 0 1px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 8px/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 8px)}
.linea-tempo li{position:relative;padding-right:16px}
.linea-tempo li::before{content:"";position:absolute;top:-30px;left:0;width:14px;height:14px;border-radius:50%;background:var(--calce);box-shadow:inset 0 0 0 2px var(--ocra-dk)}
.linea-tempo li.oro::before{background:var(--ocra)}
.linea-tempo b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,30px);line-height:1.05;letter-spacing:-.015em}
.linea-tempo li>span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.45}

/* Fasi del cantiere nella corsa degli interventi */
.fase{flex:none;width:clamp(200px,15vw,240px);align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:24px 22px;background:var(--ink);color:var(--calce)}
.fase b{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(64px,6vw,96px);line-height:.9;color:var(--ocra)}
.fase strong{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2vw,30px);line-height:1.05;letter-spacing:-.01em}
.fase div>span{display:block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,244,236,.6)}
.corsa-fase{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra-dk);text-align:right;margin-top:6px}
html:not(.teatro) .corsa-fase{display:none}
.paesaggio{max-width:1600px;margin-inline:auto}
.paesaggio .figura{height:clamp(260px,34vw,560px)}

@media (max-width:980px){
  .linea-tempo{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .linea-tempo::before{display:none}
  .prossime{grid-template-columns:1fr;row-gap:12px}
}


/* =====================================================================
   v3: leggibilità
   ===================================================================== */
body{font-size:17.5px}
.testo{font-size:17px;line-height:1.7;color:#3D3833}
.nota,.didascalia{font-size:14.5px}
.didascalia{color:#55504A}
.lead{font-weight:400}
h1 em,h2 em,h3 em{font-weight:380}
h2 em{color:#7E6018}
.hero h1,.sottohero h1{text-shadow:0 2px 30px rgba(20,16,12,.35)}
.hero h1 em,.sottohero h1 em{color:#F1DEAC}
.hero .cartello,.sottohero .cartello{color:var(--calce)}
.hero .cartello::before,.sottohero .cartello::before{color:var(--ocra)}
.hero-intro{color:rgba(248,244,236,.95);font-size:clamp(16.5px,1.2vw,19px)}
.hero-velo{background:linear-gradient(180deg,rgba(28,24,20,.6) 0,rgba(28,24,20,.08) 24%,rgba(28,24,20,.2) 46%,rgba(28,24,20,.86) 100%),linear-gradient(90deg,rgba(28,24,20,.62),rgba(28,24,20,0) 66%)}
.sottohero::after{background:linear-gradient(180deg,rgba(28,24,20,.62) 0,rgba(28,24,20,.1) 28%,rgba(28,24,20,.3) 55%,rgba(28,24,20,.82) 100%)}
.carrozza p,.intervento p{font-size:15.5px;color:#3D3833}
.carrozza-n,.intervento-n,.scheda-n,.tratta-n,.corsa-fase{font-size:13px}
.tappa>span,.linea-tempo li>span,.cippo>span,.promotore-dati,.mappa-legenda{font-size:15px}
.tappa{--soglia:clamp(.5,calc((var(--e,1) - var(--f)) * 12 + .5),1)}
.mappa .stazione text{font-size:17px}
.mappa .stazione .sub{font-size:14px;fill:#55504A}
.fermate{font-size:13px;color:#55504A}
.scheda p{font-size:17px;color:#3D3833}
.foto-archivio .didascalia-archivio{font-size:14.5px;color:rgba(248,244,236,.9)}
.scuro .testo{color:rgba(248,244,236,.86)}
.piede{font-size:15.5px;color:rgba(248,244,236,.85)}
.piede-fondo{font-size:13.5px;color:rgba(248,244,236,.62)}


/* v4: leggibilità delle testate */
.hero-foto img,.sottohero-foto img,.sottohero-foto video{filter:brightness(.8) saturate(.92)}
.hero-velo{background:
  linear-gradient(180deg,rgba(20,16,12,.55) 0,rgba(20,16,12,.12) 20%,rgba(20,16,12,.35) 42%,rgba(20,16,12,.84) 70%,rgba(20,16,12,.92) 100%),
  linear-gradient(90deg,rgba(20,16,12,.55) 0,rgba(20,16,12,.25) 45%,rgba(20,16,12,0) 75%)}
.sottohero::after{background:
  linear-gradient(180deg,rgba(20,16,12,.55) 0,rgba(20,16,12,.12) 22%,rgba(20,16,12,.38) 45%,rgba(20,16,12,.86) 76%,rgba(20,16,12,.9) 100%),
  linear-gradient(90deg,rgba(20,16,12,.5) 0,rgba(20,16,12,0) 65%)}
.hero h1,.sottohero h1{text-shadow:0 2px 18px rgba(12,10,8,.5),0 0 60px rgba(12,10,8,.35)}
.hero-intro p,.hero .cartello,.sottohero .cartello{text-shadow:0 1px 12px rgba(12,10,8,.7)}
.hero-intro{color:#FBF8F2;font-size:clamp(17px,1.25vw,19.5px);line-height:1.6}
.hero .cartello,.sottohero .cartello{font-size:13px}
@media (max-width:980px){
  .hero-velo{background:linear-gradient(180deg,rgba(20,16,12,.55) 0,rgba(20,16,12,.2) 18%,rgba(20,16,12,.7) 42%,rgba(20,16,12,.93) 70%,rgba(20,16,12,.95) 100%)}
}


/* v5: marcatori centrati sul binario */
.tappa::before{top:-24px}
.fermate li::before{top:-27px}
.passo::before{top:-32px}
.linea-tempo li::before{top:-28px}
.tappa::before,.fermate li::before,.passo::before,.linea-tempo li::before{z-index:1}

/* v5: scheda del progetto */
.scheda-dati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linea);border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--linea)}
.scheda-dati>div{background:var(--calce);padding:18px 20px}
.scheda-dati>div.largo{grid-column:1/-1}
.scheda-dati dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra-dk)}
.scheda-dati dd{margin-top:6px;font-family:var(--serif);font-size:clamp(19px,1.5vw,23px);line-height:1.25;font-variant-numeric:tabular-nums}
.linea-tempo--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.confronti{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(12px,2vw,24px)}
.confronti+.confronti{margin-top:clamp(64px,8vw,120px)}
.confronto-quadro{position:relative;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--linea),0 30px 60px -40px rgba(28,24,20,.35);user-select:none}
.confronto-quadro>img{display:block;width:100%;height:auto}
.confronto-prima{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);background:#fff}
.confronto-prima img{width:100%;height:100%;object-fit:cover;display:block}
.confronto-maniglia{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--ocra-dk);pointer-events:none}
.confronto-maniglia::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--ocra-dk);color:var(--calce);display:grid;place-items:center;font-size:18px;font-weight:600;letter-spacing:-.05em;box-shadow:0 6px 18px rgba(28,24,20,.3)}
.confronto-cursore{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.confronto-cursore:focus-visible+*,.confronto-quadro:focus-within .confronto-maniglia::after{box-shadow:0 0 0 4px rgba(143,110,30,.3)}
.confronto-etichetta{position:absolute;top:14px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--calce);padding:7px 12px;border-radius:999px;pointer-events:none}
.confronto-etichetta.sx{left:14px}.confronto-etichetta.dx{right:14px;background:var(--ocra-dk)}
.ambienti h3{font-size:clamp(26px,2.2vw,34px);margin-bottom:18px}
.ambienti dl>div{padding:16px 0;border-top:1px solid var(--linea)}
.ambienti dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra-dk);margin-bottom:8px}
.ambienti dd{font-size:16.5px;line-height:1.45;padding-left:18px;position:relative}
.ambienti dd+dd{margin-top:6px}
.ambienti dd::before,.voci li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1.5px;background:var(--ocra-dk)}
.voci{list-style:none;border-top:1px solid var(--linea)}
.voci li{position:relative;padding:11px 0 11px 18px;border-bottom:1px solid var(--linea);font-size:16.5px;line-height:1.4}
.voci li::before{top:1.3em}
.cifre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-bottom:clamp(40px,5vw,64px)}
.cifre>div{background:var(--calce-2);border-radius:var(--r);padding:clamp(20px,2.2vw,30px)}
.cifre>div.oro{background:var(--ink);color:var(--calce)}
.cifre>div>span{display:block;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ocra-dk)}
.cifre>div.oro>span{color:var(--ocra)}
.cifre b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.4vw,52px);letter-spacing:-.02em;line-height:1.05;margin:14px 0 10px;font-variant-numeric:tabular-nums}
.cifre small{font-size:14px;color:var(--muted)}
.cifre>div.oro small{color:rgba(248,244,236,.65)}
.barre{list-style:none;--max:149230.57}
.barre>li{padding:16px 0 18px;border-top:1px solid var(--linea)}
.barre-testa{display:flex;justify-content:space-between;align-items:baseline;gap:24px;font-size:16.5px}
.barre-testa small{font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--muted);margin-left:8px}
.barre-testa b{font-family:var(--serif);font-weight:400;font-size:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.barre>li>i{display:block;height:10px;margin-top:10px;border-radius:999px;background:var(--calce-2);position:relative;overflow:hidden}
.barre>li>i::after{content:"";position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--ocra-dk);width:max(6px,calc(var(--v) / var(--max) * 100%));transform-origin:0 50%;transform:scaleX(var(--riempi,1));transition:transform 1.6s var(--ease)}
.rivela .barre:not(.visibile)>li>i::after{--riempi:0}
.barre>li:nth-child(2)>i::after{transition-delay:.15s}.barre>li:nth-child(3)>i::after{transition-delay:.25s}.barre>li:nth-child(n+4)>i::after{transition-delay:.35s}
.barre-sotto{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 20px;margin-top:14px;font-size:14.5px;color:var(--muted)}
.barre-sotto b{display:block;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
@media (max-width:980px){
  .confronti,.cifre{grid-template-columns:1fr}
  .linea-tempo--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barre-sotto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scheda-dati{grid-template-columns:1fr}
}


/* v6: corsa degli interventi più leggera */
.corsa-binario b{position:absolute;inset:0;transform:translate3d(calc(var(--p,0) * 100%),0,0);pointer-events:none}
.corsa-binario b::after{content:"";position:absolute;left:-2px;top:-6px;width:64px;height:14px;background:var(--treno-ocra) center/contain no-repeat}
.scorre .corsa-treno,.scorre .fototreno-riga{pointer-events:none}
.teatro .corsa-treno{backface-visibility:hidden}
.intervento{contain:layout paint}
.intervento img{transition:transform .8s var(--ease)}
.cifre--due{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
@media (max-width:980px){.cifre--due{grid-template-columns:1fr}}
.linea-tempo--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.linea-tempo--4{grid-template-columns:repeat(2,minmax(0,1fr))}}