@font-face{font-family:"Newsreader";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/newsreader-300-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;src:url(fonts/newsreader-300-italic.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-400-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-500.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-600.woff2) format("woff2")}

/* Layout: la scansione 3D resta fissa dietro la pagina; ogni capitolo è una "stanza" di scroll e la telecamera percorre un tragitto che passa tra le colonne. Look scuro unico, scelto apposta (sera, luce calda sulla pietra). */
:root{
  --notte:#100e0c;          /* fondo, ombra delle volte */
  --calce:#efe9df;          /* testo principale, intonaco */
  --pietra:#b3a693;         /* testo secondario, tufo */
  --muschio:#b9c49a;        /* unico accento: il verde del giardino */
  --vetro:rgba(16,14,12,.58);
  --filo:rgba(239,233,223,.14);
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --testo:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--notte);color:var(--calce)}
body{font:400 16px/1.6 var(--testo);overflow-x:hidden;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
#scena{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:pan-y}
.velo{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(to top,rgba(16,14,12,.92) 0%,rgba(16,14,12,.35) 34%,transparent 58%),
    radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(8,7,6,.7) 100%)}
.grana{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

header{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:calc(16px + env(safe-area-inset-top,0px)) 24px 16px}
.marchio{font:400 24px/1 var(--display);letter-spacing:.005em;color:var(--calce);text-decoration:none;display:flex;align-items:baseline;gap:12px}
.marchio em{font-style:italic;color:var(--muschio)}
.marchio small{font:500 12px/1 var(--testo);color:var(--pietra);letter-spacing:.02em}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--testo);color:var(--notte);background:var(--calce);
  border:1px solid var(--calce);border-radius:3px;padding:12px 18px;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--muschio);border-color:var(--muschio)}
.btn.contorno{background:transparent;color:var(--calce);border-color:var(--filo)}
.btn.contorno:hover{border-color:var(--calce);background:transparent}
:focus-visible{outline:2px solid var(--muschio);outline-offset:3px}

/* percorso: le tappe sono in ordine reale di visita */
nav.percorso{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:6;display:grid;gap:4px}
nav.percorso a{display:grid;grid-template-columns:auto 44px;align-items:center;gap:12px;padding:6px 0;color:var(--pietra);
  text-decoration:none;font-size:13px;transition:color .4s}
nav.percorso a span{text-align:right}
nav.percorso a i{height:1px;background:var(--filo);position:relative;overflow:hidden}
nav.percorso a i::after{content:"";position:absolute;inset:0;background:var(--muschio);transform:scaleX(var(--p,0));transform-origin:left}
nav.percorso a.attivo{color:var(--calce)}

main{position:relative;z-index:2}
section{min-height:170vh;padding-inline:24px;display:flex;align-items:flex-start}
.pannello{position:sticky;top:calc(100vh - var(--h,360px) - 40px);max-width:460px;margin-top:40vh}
.capitolo{display:flex;gap:14px;align-items:baseline;margin:0 0 14px;color:var(--muschio);font-size:13px;font-weight:500}
.capitolo b{font:italic 400 15px/1 var(--display);color:var(--pietra)}
h1,h2{font-family:var(--display);font-weight:300;line-height:.98;margin:0 0 18px;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(52px,8.6vw,124px)}
h2{font-size:clamp(40px,5.4vw,68px)}
h1 em,h2 em{font-style:italic;color:var(--muschio)}
p{margin:0 0 12px;color:var(--pietra);max-width:56ch}
.dato{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:4px 28px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--filo)}
.dato dt{font-size:12px;color:var(--pietra)}
.dato dd{margin:0;font:400 22px/1.1 var(--display);color:var(--calce);font-variant-numeric:tabular-nums}

section.hero{min-height:150vh}
section.hero .pannello{max-width:820px;margin-top:52vh}
.suggerimento{display:flex;align-items:center;gap:12px;margin-top:26px;color:var(--pietra);font-size:14px}
.suggerimento i{width:1px;height:40px;background:var(--filo);position:relative;overflow:hidden}
.suggerimento i::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:var(--muschio);animation:scende 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes scende{from{transform:translateY(-100%)}to{transform:translateY(260%)}}

.azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.zona{margin-top:16px;border:1px dashed var(--filo);border-radius:4px;padding:14px 16px;font-size:14px;color:var(--pietra);transition:border-color .3s,color .3s}
.zona.sopra{border-color:var(--muschio);color:var(--calce)}
#file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

footer{position:relative;z-index:2;background:var(--notte);border-top:1px solid var(--filo);
  padding:44px 24px calc(44px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;font-size:13px}
footer p{font-size:13px;margin:0;max-width:90ch}
footer a{color:var(--calce)}

/* caricamento */
#carica{position:fixed;inset:0;z-index:20;background:var(--notte);display:grid;place-items:center;transition:opacity 1.2s ease,visibility 1.2s}
#carica.via{opacity:0;visibility:hidden}
.carica-box{width:min(320px,80vw);display:grid;gap:14px}
.carica-box .marchio{font-size:30px}
.barra{height:1px;background:var(--filo);overflow:hidden}
.barra i{display:block;height:100%;background:var(--muschio);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.carica-riga{display:flex;justify-content:space-between;color:var(--pietra);font-size:13px;font-variant-numeric:tabular-nums}

/* barra fissa su telefono */
.mobile-cta{display:none}
@media (max-width:760px){
  header{padding-inline:16px}
  header .btn{display:none}
  nav.percorso{display:none}
  section{padding-inline:16px;min-height:160vh}
  .pannello{max-width:none;width:100%;margin-top:55vh;top:calc(100vh - var(--h,360px) - 92px - env(safe-area-inset-bottom,0px))}
  section.hero .pannello{margin-top:48vh}
  .dato{grid-template-columns:repeat(3,1fr);gap:4px 14px}
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:7;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(16,14,12,.94);border-top:1px solid var(--filo)}
  .mobile-cta .btn{flex:1;justify-content:center}
  footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.suggerimento i::after{animation:none}#carica{transition:none}}