:root{
  --paper:#fbf8f2; --paper-2:#f3ede1;          /* pergamena chiara (quasi bianca, calda) */
  --ink:#1e1a12; --ink-2:#4a3d2c;              /* bruno-nero / bruno scuro */
  --blue:#5a6e84; --green:#6e9e7c;             /* ardesia / verde bosco */
  --terra:#c47a52;                             /* terracotta — highlight/CTA caldo */
  --muted:#7a6e58; --line:rgba(30,26,18,.14); --line-2:rgba(30,26,18,.28);
  --shell:1500px;                              /* larghezza massima del contenuto (sito) */
  --pad-x:clamp(28px,6vw,96px);                /* padding laterale, condiviso nav + sezioni */
  --f-sans:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',monospace;
  --f-serif:'IBM Plex Serif',Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-cp:cubic-bezier(.76,0,.24,1);   /* easing transizione cover/pin */
  --dur:.92s;                            /* durata transizione pagina */
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; }
body{ background:var(--paper); color:var(--ink); font-family:var(--f-sans); font-weight:300; -webkit-font-smoothing:antialiased; overflow:hidden; }
::selection{ background:var(--blue); color:var(--paper); }

.progress{ position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--terra),var(--green)); width:0; z-index:90; transition:width .15s linear; }

/* DECK — pagine sovrapposte, una alla volta; transizione cover/pin, scroll catturato */
.scroll{ position:fixed; inset:0; overflow:hidden; z-index:1; }
.scroll::-webkit-scrollbar{ width:0; }
.panel{ position:absolute; inset:0; transform:translateY(100%); will-change:transform;
  background:var(--paper); color:var(--ink);          /* fondo PIENO: niente trasparenze in transizione */
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--pad-x); padding-top:clamp(96px,12vh,140px); padding-bottom:clamp(60px,9vh,110px); }
.scroll.ready .panel{ transition:transform var(--dur) var(--ease-cp), opacity var(--dur) var(--ease-cp); }
.panel .cover{ position:absolute; inset:0; background:#0b1116; opacity:0; pointer-events:none; z-index:5; }
.scroll.ready .panel .cover{ transition:opacity var(--dur) var(--ease-cp); }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:calc(var(--d,0)*1ms); }
.panel.inview .reveal{ opacity:1; transform:none; }
.line-rise{ display:block; overflow:hidden; }
.line-rise>i{ display:block; font-style:inherit; transform:translateY(112%); transition:transform .95s var(--ease); transition-delay:calc(var(--d,0)*1ms); }
.panel.inview .line-rise>i{ transform:none; }
.panel-inner{ width:100%; max-width:var(--shell); margin-inline:auto; position:relative; z-index:1; opacity:.001; transition:opacity .7s ease, transform var(--dur) var(--ease-cp); transform-origin:center top; }
.panel.inview .panel-inner{ opacity:1; }

nav{ position:fixed; top:0; left:0; right:0; z-index:80; padding:22px var(--pad-x); transition:color .5s ease; }
.nav-inner{ max-width:var(--shell); margin-inline:auto; display:flex; justify-content:space-between; align-items:center; }
.brand{ display:flex; align-items:center; text-decoration:none; color:inherit; padding-left:.42em; transition:opacity .4s ease; }
.brand-logo{ height:20px; width:auto; display:block; fill:currentColor; transition:fill .5s ease; }
nav.at-logo .brand{ opacity:0; pointer-events:none; }   /* nasconde il brand sulla scheda 00 (c'è già il logo grande) */
.nav-right{ display:flex; align-items:center; gap:26px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; }
.nav-right a{ color:inherit; text-decoration:none; opacity:.62; transition:opacity .25s; }
.nav-right a:hover{ opacity:1; }
.nav-status{ display:flex; align-items:center; gap:7px; opacity:.62; }
.nav-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
nav.on-dark{ color:var(--paper); }
@media(max-width:680px){ .nav-right a.hide-sm{ display:none; } .nav-status{ display:none; } }

.dots{ position:fixed; right:clamp(14px,2.4vw,30px); top:50%; transform:translateY(-50%); z-index:80; display:flex; flex-direction:column; gap:13px; }
.dots button{ --c:var(--ink); width:10px; height:10px; padding:0; border:none; cursor:pointer; background:transparent; position:relative; }
.dots button::after{ content:""; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%; border:1px solid var(--c); transition:all .3s var(--ease); }
.dots button.active::after{ background:var(--c); width:8px; height:8px; }
.dots button:hover::after{ transform:scale(1.3); }
.dots.on-dark button{ --c:var(--paper); }
@media(max-width:680px){ .dots{ display:none; } }

/* SEZIONE 00 — LOGO (fondo scuro, lettere bianche), animazione modo G a fasce casuali */
#logo{ background:var(--ink); align-items:center; padding:0; transform:none; overflow:hidden; }
/* Il logo NON si rimpicciolisce più: resta grande e tutto il resto gli sta sotto in colonna
   (era così nella versione di luglio, ed è l'impostazione scelta dal cliente il 28/08). */
.logo-inner{ position:relative; display:flex; flex-direction:column; align-items:center; z-index:3;
  gap:clamp(12px,2.1vh,20px); transform:translateY(-10vh); }
#intro-logo{ width:min(58vw,540px); height:auto; overflow:visible; }
/* linea che cresce + "DAL 1995": cadenze identiche alla versione vecchia (1,15s e 1,45s).
   ⚠️ La linea si anima in scaleX, NON in width: animare la larghezza fa rifare il layout a
   ogni fotogramma e Chrome lo registra come spostamento. */
.intro-rule{ width:min(46vw,440px); height:1.5px; background:#fff; transform:scaleX(0); }
#logo.play .intro-rule{ animation:ruleGrow .5s ease forwards 1.15s; }
@keyframes ruleGrow{ to{ transform:scaleX(1); } }
.intro-sub{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.72); opacity:0; }
#logo.play .intro-sub{ animation:fadeUp .5s ease forwards 1.45s; }
#logo #letters-direct{ display:none; }                 /* sorgenti visibili = le fasce */
/* fill bianco sull'SVG root: i <use> delle fasce lo ereditano (i cloni non prendono il fill dai path nei defs) */
#logo #intro-logo{ fill:#fff; }
#logo #src-d path,#logo #src-a path,#logo #src-s path,#logo #src-t path{ fill:#fff; }
#logo .band{ opacity:0; transform-box:fill-box; transform-origin:center; }
#logo.play .band{ animation:gScatter .8s var(--ease) var(--gd,0s) both; }
@keyframes gScatter{
  from{ transform:translate(var(--gx,0),var(--gy,0)) rotate(var(--gr,0deg)) scale(var(--gs,1.6)); opacity:0; }
  22% { opacity:1; }
  to  { transform:none; opacity:1; }
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

/* TESTO INTRO — solo la 1ª frase, poi il link alla pagina della missione.
   ⚠️ Sta in posizione ASSOLUTA sotto il blocco del logo, come nella versione di luglio, e non
   nel flusso della colonna. Motivo misurato il 28/08: nel flusso, quando arrivano i caratteri
   il testo va a capo diversamente, la colonna cambia misura e **il logo si sposta** — CLS 0,17.
   Fuori dal flusso il riflusso del testo non muove niente. */
.intro-src{ display:none; }
.intro-field{ position:absolute; top:calc(100% + clamp(20px,3.4vh,40px)); left:50%; transform:translateX(-50%);
  width:min(90vw,760px); display:flex; flex-direction:column; align-items:center;
  gap:clamp(.9em,2.4vh,1.6em); }
.intro-lead{ text-align:center; max-width:min(90vw,760px); color:#fff;
  font-size:calc(var(--ifs,1) * clamp(1.05rem,1.9vw,1.55rem)); line-height:1.38; }
/* link alla missione: compare a frase finita */
.intro-more{ display:inline-flex; align-items:center; gap:10px; opacity:0; pointer-events:none;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terra); text-decoration:none; border-bottom:1px solid rgba(196,122,82,.45);
  padding-bottom:5px; transition:opacity .6s ease, color .25s, border-color .25s; }
.intro-more.show{ opacity:1; pointer-events:auto; }
.intro-more:hover{ color:#e0a179; border-color:#e0a179; }
.intro-more span{ transition:transform .25s var(--ease); }
.intro-more:hover span{ transform:translateX(4px); }
/* parole: "luce che scrive" (bagliore breve + risalita elastica) */
#logo .w{ display:inline-block; opacity:0; }
#logo .w:not(.em).on{ animation:introWordIn .72s cubic-bezier(.34,1.42,.64,1) both; }
@keyframes introWordIn{
  0%{   opacity:0; transform:translateY(.6em) scale(.9);  text-shadow:0 0 14px rgba(251,248,242,.9); }
  65%{  text-shadow:0 0 8px rgba(251,248,242,.35); }
  100%{ opacity:1; transform:none;                        text-shadow:0 0 0 rgba(251,248,242,0); }
}
/* terracotta: blocco unico, compare e pulsa (glow) una volta */
#logo .w.em{ font-family:var(--f-serif); font-style:italic; color:var(--terra); transition:opacity .45s ease; }
#logo .w.em.on{ opacity:1; animation:introEmPulse 1.6s ease-in-out .25s 1; }
@keyframes introEmPulse{
  0%,100%{ text-shadow:0 0 0 rgba(196,122,82,0);     color:var(--terra); }
  45%    { text-shadow:0 0 18px rgba(196,122,82,.95); color:#ecb488; }
}
/* hint scorri */
.intro-enter{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); opacity:0;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.5);
  transition:opacity .5s ease; pointer-events:none; z-index:4; }
.intro-enter.show{ opacity:1; }
@media (max-width:600px){
  .intro-field{ gap:clamp(.8em,2.4vh,1.3em); }
  .intro-lead{ font-size:calc(var(--ifs,1) * 1.05 * clamp(.98rem,4.4vw,1.22rem)); }
  .intro-sub{ font-size:.62rem; letter-spacing:.28em; }
  .intro-more{ font-size:.62rem; letter-spacing:.18em; }
}

.eyebrow{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:14px; margin-bottom:clamp(26px,5vh,52px); }
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--line-2); }
#filosofia h1{ font-weight:300; font-size:clamp(2rem,5vw,4.4rem); line-height:1.02; letter-spacing:-.02em; max-width:15ch; }
#filosofia h1 b{ font-weight:600; } #filosofia h1 .em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--terra); }
/* hero a due colonne: testo + sketch */
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; column-gap:clamp(32px,5vw,72px); row-gap:clamp(16px,2.6vh,28px); align-items:center;
  grid-template-areas:"head visual" "lead visual" "atom visual"; }
.hero-head{ grid-area:head; min-width:0; }
.hero-lead{ grid-area:lead; min-width:0; }
.hero-atom{ grid-area:atom; min-width:0; }
.hero-visual{ grid-area:visual; position:relative; margin:0; background:var(--paper); isolation:isolate; align-self:center; }
/* max-height + contain: l'immagine è caricabile dal pannello, quindi le proporzioni non sono
   garantite. Senza tetto, una foto verticale diventerebbe altissima e sborderebbe dal pannello
   (che ha altezza fissa e taglia). Con 60vh non tocca l'immagine attuale — misurato: resa da
   412 a 554px fra 1280 e 1920, sempre sotto il tetto — e salva i casi anomali. */
.hero-visual img{ width:100%; height:auto; max-height:60vh; object-fit:contain; display:block; mix-blend-mode:multiply; }
.hero-visual figcaption{ margin-top:14px; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
/* MOBILE: titolo sopra centrato · lead+immagine a due colonne · atomo+triade sotto centrati */
@media(max-width:720px){
  .hero-grid{ grid-template-columns:1fr; column-gap:0; row-gap:clamp(18px,3.4vh,30px); align-items:start;
    grid-template-areas:"head" "lead" "visual" "atom"; }
  .hero-head{ text-align:center; }
  .hero-head .eyebrow{ justify-content:center; }
  #filosofia h1{ margin-inline:auto; }
  .hero-lead{ max-width:none; }
  .hero-visual{ align-self:center; max-width:min(72vw,320px); margin-inline:auto; }
  .hero-atom{ text-align:center; }
  #filosofia .hub-dia{ margin:0 auto; max-width:min(78vw,320px); }
  #filosofia .hub-desc{ text-align:center; margin-inline:auto; }
  #filosofia .metodo-triade{ text-align:center; }
  #filosofia .scroll-hint{ display:none; }   /* su mobile crea collisione con la descrizione dell'atomo + ruba spazio */
}
.hero-foot{ display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,80px); margin-top:clamp(34px,7vh,72px); max-width:64ch; }
.hero-foot p{ font-size:clamp(.92rem,1.4vw,1.06rem); line-height:1.6; color:var(--ink-2); max-width:42ch; }
.hero-foot .meta{ font-family:var(--f-mono); font-size:.74rem; color:var(--muted); line-height:1.9; min-width:150px; }
.hero-foot .meta b{ color:var(--ink); font-weight:500; }
.scroll-hint{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--f-mono); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint .ln{ width:1px; height:34px; background:var(--line-2); position:relative; overflow:hidden; }
.scroll-hint .ln::after{ content:""; position:absolute; top:-34px; left:0; width:1px; height:34px; background:var(--ink); animation:drop 1.8s ease-in-out infinite; }
@keyframes drop{ 0%{ transform:translateY(0); } 60%,100%{ transform:translateY(68px); } }

.panel-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:clamp(26px,4.5vh,52px); flex-wrap:wrap; }
.panel-head h2{ font-weight:300; font-size:clamp(1.5rem,3.4vw,2.6rem); letter-spacing:-.01em; }
.panel-head h2 b{ font-weight:600; }
.panel-num{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--muted); }
/* ===================== PROGETTI — FISARMONICA A LAMELLE (da progetti timeline concept_09_07) ===================== */
#progetti{ --wc:clamp(38px,4.6vw,66px); --wo:clamp(300px,40vw,560px); }   /* larghezza lamella chiusa / aperta */
#progetti .panel-inner{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; height:100%; }
#progetti .stage{ position:relative; flex:1 1 auto; min-height:220px; overflow:hidden; margin-top:clamp(8px,1.6vh,18px); touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; }
#progetti .stage.dragging{ cursor:grabbing; }
#progetti .slat img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
#progetti .track{ position:absolute; top:0; left:0; height:100%; display:flex; align-items:stretch; gap:clamp(12px,1.6vw,26px); will-change:transform; }
#progetti .track:not(.ready) .slat, #progetti .track:not(.ready) .gline, #progetti .track:not(.ready) .gdot{ transition:none !important; }
/* gruppo = etichetta-anno (sfalsata) + linea che scende + lamella */
.group{ display:flex; flex-direction:column; }
.gtop{ position:relative; height:clamp(78px,13vh,124px); flex:0 0 auto; }
.glabel{ position:absolute; left:2px; font-family:var(--f-mono); font-size:clamp(.7rem,1vw,.9rem); letter-spacing:.1em; color:var(--muted); white-space:nowrap; transition:color .35s; }
.group.on .glabel{ color:var(--terra); }
.gline{ position:absolute; left:9px; width:1px; height:12px; background:var(--line); transition:background .35s, height .4s var(--ease); }
.group.on .gline{ background:var(--terra); height:calc(100% - var(--lt,20px)); }
.gdot{ position:absolute; left:9px; bottom:-4px; width:9px; height:9px; border-radius:50%; background:var(--terra); border:2px solid var(--paper); transform:translate(-50%,0); opacity:0; transition:opacity .3s; }
.group.on .gdot{ opacity:1; }
.gslats{ flex:1 1 auto; display:flex; align-items:flex-end; gap:6px; min-height:0; }
/* lamella — chiusa: più bassa e semitrasparente · aperta: piena e "sollevata" */
.slat{ position:relative; flex:0 0 var(--wc); width:var(--wc); height:90%; overflow:hidden; cursor:pointer;
  border:1px solid var(--line-2); background:var(--paper-2); filter:grayscale(.12) brightness(.95); opacity:.58;
  transition:flex-basis .55s var(--ease), width .55s var(--ease), height .5s var(--ease), filter .5s, opacity .45s, border-color .3s, box-shadow .5s; contain:paint; }
/* immagine a dimensione FISSA (= lamella aperta): la lamella ritaglia → niente ri-campionamento a ogni frame */
.slat img{ position:absolute; left:0; top:0; width:var(--wo); height:100%; object-fit:cover; }
.slat::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(30,26,18,.85),rgba(30,26,18,.05) 60%); opacity:.6; transition:opacity .4s; }
.slat.active{ flex:0 0 var(--wo); width:var(--wo); height:100%; opacity:1; border-color:var(--terra); filter:none; box-shadow:0 22px 55px rgba(30,26,18,.34); }
.slat.active::after{ opacity:.9; }
.vlabel{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; justify-content:center; padding:14px 0; transition:opacity .3s; }
.vlabel span{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.6); white-space:nowrap; }
.slat.active .vlabel{ opacity:0; }
.hlabel{ position:absolute; left:0; bottom:0; z-index:2; padding:clamp(14px,1.4vw,22px); color:#fff; opacity:0; transition:opacity .4s .1s; }
.slat.active .hlabel{ opacity:1; }
.h-cat{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; opacity:.85; }
.h-name{ font-family:var(--f-serif); font-size:clamp(1.05rem,1.7vw,1.5rem); line-height:1.1; margin-top:3px; }
.s-idx{ position:absolute; top:10px; left:11px; z-index:2; font-family:var(--f-mono); font-size:.6rem; color:rgba(255,255,255,.85); opacity:0; transition:opacity .3s; }
.slat.active .s-idx{ opacity:1; }
.s-multi{ position:absolute; top:9px; right:9px; z-index:2; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.06em; color:#fff; background:rgba(30,26,18,.5); padding:2px 7px; border-radius:2px; opacity:0; transition:opacity .3s; }
.slat.active .s-multi{ opacity:1; }
/* barra comandi progetti */
#progetti .bottombar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:clamp(10px,2vh,20px); }
.proj-hint{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
/* Porta all'elenco delle pagine progetto: serve ai visitatori e permette ai motori
   di ricerca di raggiungerle (dal deck, generato in JS, non le troverebbero). */
.proj-all{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terra); text-decoration:none; border-bottom:1px solid rgba(196,122,82,.4); padding-bottom:3px;
  white-space:nowrap; transition:border-color .25s, color .25s; }
.proj-all:hover{ color:var(--ink); border-color:var(--ink); }
@media(max-width:680px){
  /* su telefono la barra va a capo: il testo di aiuto si accorcia e il link resta visibile,
     altrimenti da mobile l'elenco dei progetti non sarebbe raggiungibile navigando */
  #progetti .bottombar{ flex-wrap:wrap; row-gap:10px; }
  .proj-hint{ order:3; flex:1 1 100%; font-size:.58rem; letter-spacing:.14em; }
  .proj-all{ order:1; }
  #progetti .tl-nav{ order:2; }
}
.tl-nav{ display:flex; gap:12px; }
.tl-nav button{ width:52px; height:52px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); border-radius:50%; cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:background .25s,color .25s,border-color .25s,transform .2s; }
.tl-nav button:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px); }
.tl-nav button:active{ transform:translateY(0); }

/* ===================== LIGHTBOX DETTAGLIO PROGETTO (galleria) ===================== */
.ov{ position:fixed; inset:0; z-index:150; background:var(--ink); color:var(--paper); display:grid; grid-template-rows:1fr auto; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.ov.open{ opacity:1; pointer-events:auto; }
.ov-main{ display:grid; grid-template-columns:1.25fr 1fr; min-height:0; }
.ov-stage{ position:relative; background:#0e0c07; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.ov-stage img{ width:100%; height:100%; object-fit:contain; display:block; }
.ov-info{ padding:clamp(26px,4vw,64px); display:flex; flex-direction:column; justify-content:center; gap:16px; overflow-y:auto; }
.ov-cat{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--terra); }
.ov-title{ font-weight:300; font-size:clamp(1.6rem,3vw,2.7rem); line-height:1.05; letter-spacing:-.01em; margin:0; }
.ov-sub{ font-family:var(--f-serif); font-style:italic; color:rgba(251,248,242,.72); font-size:1.05rem; }
.ov-textwrap{ position:relative; max-width:52ch; }
.ov-text{ white-space:pre-line; font-size:.98rem; line-height:1.6; color:rgba(251,248,242,.8); max-height:min(40vh,15.5em); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(196,122,82,.5) transparent; }
.ov-text::-webkit-scrollbar{ width:6px; }
.ov-text::-webkit-scrollbar-thumb{ background:rgba(196,122,82,.5); border-radius:3px; }
.ov-fade{ position:absolute; left:0; right:0; bottom:0; height:52px; pointer-events:none; opacity:0; transition:opacity .3s var(--ease); background:linear-gradient(to bottom, rgba(30,26,18,0), rgba(30,26,18,.97)); }
.ov-more{ position:absolute; right:2px; bottom:5px; pointer-events:none; opacity:0; transition:opacity .3s var(--ease); font-family:var(--f-mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terra); animation:ovbob 1.6s var(--ease) infinite; }
.ov-textwrap.is-scroll:not(.at-end) .ov-fade, .ov-textwrap.is-scroll:not(.at-end) .ov-more{ opacity:1; }
@keyframes ovbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
@media(prefers-reduced-motion:reduce){ .ov-more{ animation:none; } }
.ov-bozza{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); border:1px dashed rgba(196,122,82,.6); padding:5px 8px; display:inline-block; border-radius:2px; }
.ov-specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 26px; margin-top:6px; }
.ov-specs>div span{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,248,242,.45); display:block; margin-bottom:3px; }
.ov-specs>div p{ margin:0; font-size:.92rem; color:var(--paper); }
.ov-idx{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:rgba(251,248,242,.5); }
.strip{ display:flex; gap:10px; align-items:center; padding:14px clamp(20px,3vw,40px); background:#141009; border-top:1px solid rgba(251,248,242,.12); overflow-x:auto; scrollbar-width:thin; }
.strip.hidden{ display:none; }
.strip .th{ flex:0 0 auto; width:84px; height:60px; border:1px solid transparent; opacity:.5; cursor:pointer; overflow:hidden; transition:opacity .25s, border-color .25s; background:#0e0c07; }
.strip .th img{ width:100%; height:100%; object-fit:cover; display:block; }
.strip .th:hover{ opacity:.85; }
.strip .th.active{ opacity:1; border-color:var(--terra); }
.strip-lbl{ flex:0 0 auto; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,248,242,.4); margin-right:6px; }
.ov-close{ position:absolute; top:18px; right:20px; z-index:5; width:46px; height:46px; border:1px solid rgba(251,248,242,.3); background:transparent; color:var(--paper); border-radius:50%; cursor:pointer; font-size:1.1rem; }
.ov-close:hover{ background:var(--paper); color:var(--ink); }
.ov-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:50px; height:50px; border:1px solid rgba(251,248,242,.3); background:rgba(20,16,9,.4); color:var(--paper); border-radius:50%; cursor:pointer; font-size:1.2rem; }
.ov-prev{ left:18px; } .ov-next{ right:18px; }
.ov-arrow:hover{ background:var(--paper); color:var(--ink); }
@media(max-width:820px){
  #progetti{ --wc:clamp(28px,7vw,46px); --wo:min(74vw,420px); }
  .gtop{ height:clamp(64px,11vh,96px); }
  .ov-main{ grid-template-columns:1fr; grid-template-rows:44% 1fr; }
  /* su mobile: header e specifiche sempre visibili, la descrizione riempie lo spazio residuo e scorre dentro */
  .ov-info{ justify-content:flex-start; overflow:hidden; min-height:0; gap:11px; padding:18px clamp(20px,5vw,44px) 18px; }
  .ov-textwrap{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; }
  .ov-text{ max-height:none; flex:1 1 auto; min-height:0; }
  .ov-specs{ margin-top:2px; }
}

/* metodo (03): pagina CHIARA, testo scuro */
.metodo-lead{ font-weight:300; font-size:clamp(1.7rem,4vw,3.1rem); line-height:1.1; letter-spacing:-.01em; max-width:20ch; margin-bottom:clamp(34px,6vh,64px); }
.metodo-lead .em{ font-family:var(--f-serif); font-style:italic; } .metodo-lead b{ font-weight:600; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); border-top:1px solid var(--line-2); padding-top:34px; }
.step{ position:relative; }
.step .s-k{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--green); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.step .s-k::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
.step h3{ font-weight:500; font-size:1.14rem; margin-bottom:10px; letter-spacing:-.01em; }
.step p{ font-size:.88rem; line-height:1.55; color:var(--ink-2); }
.metodo-foot{ margin-top:clamp(30px,5vh,56px); display:flex; gap:clamp(30px,6vw,80px); flex-wrap:wrap; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em; color:var(--muted); }
.metodo-foot b{ color:var(--green); font-size:1.5rem; font-weight:500; display:block; margin-bottom:4px; letter-spacing:0; }
.metodo-foot .triade{ align-self:center; color:var(--terra); font-size:.95rem; letter-spacing:.1em; text-transform:none; }
@media(max-width:760px){ .steps{ grid-template-columns:repeat(2,1fr); gap:28px; } }
@media(max-width:420px){ .steps{ grid-template-columns:1fr; } }

/* KIRI — sezione chiara con accento verde + badge scuro (impostazione vecchio sito) */
#kiri{ border-left:3px solid var(--green); }
.kiri-grid{ display:grid; grid-template-columns:3fr 2fr; gap:clamp(34px,6vw,80px); align-items:center; }
.kiri-tag{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--green); display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.kiri-tag::before{ content:""; width:34px; height:1px; background:var(--green); }
.kc h2{ font-weight:300; font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.12; letter-spacing:-.02em; margin-bottom:22px; }
.kc h2 .em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--green); }
.kc p{ font-size:.92rem; line-height:1.75; color:var(--ink-2); margin-bottom:14px; max-width:46ch; }
.kiri-links{ margin-top:22px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.kiri-lnk{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); text-decoration:none; border-bottom:1px solid var(--green); padding-bottom:4px; transition:gap .3s; }
.kiri-lnk:hover{ gap:16px; }
.kbadge{ background:#fff; color:var(--ink); padding:clamp(30px,3vw,44px) clamp(28px,2.6vw,40px); position:relative; border:1px solid rgba(30,26,18,.08); box-shadow:0 14px 40px rgba(30,26,18,.07); }
.kbadge::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--green)); }
.kbadge .klogo{ display:block; width:150px; max-width:100%; height:auto; margin:0 0 18px; }
.kbadge .kbl{ font-family:var(--f-sans); font-weight:600; letter-spacing:.3em; font-size:1.5rem; color:var(--ink); margin-bottom:14px; display:block; padding-left:.3em; }
.kbadge p{ font-size:.9rem; line-height:1.7; color:var(--ink-2); }
.ktags{ margin-top:22px; display:flex; flex-wrap:wrap; gap:6px; }
.ktag{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid rgba(110,158,124,.55); color:var(--green); padding:5px 9px; }
@media(max-width:820px){
  .kiri-grid{ grid-template-columns:1fr; gap:22px; align-items:start; }
  #kiri{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
  #kiri .fili{ display:none; }
  .kiri-tag{ margin-bottom:14px; }
  .kc h2{ font-size:clamp(1.7rem,6.5vw,2.3rem); margin-bottom:14px; }
  .kc p{ margin-bottom:10px; }
  .kbadges{ display:flex; flex-direction:column; gap:14px; }
  /* card compatta: logo piccolo a sinistra, testo a destra, tag sotto */
  .kbadge{ display:flex; flex-wrap:wrap; align-items:center; column-gap:16px; row-gap:8px; padding:18px; margin-top:0 !important; box-shadow:0 8px 24px rgba(30,26,18,.06); }
  .kbadge > a{ flex:0 0 auto; line-height:0; }
  .kbadge .klogo{ width:76px; margin:0; }
  .kbadge .kbl{ margin:0; }
  .kbadge p{ flex:1 1 130px; min-width:120px; margin:0; font-size:.82rem; line-height:1.5; }
  .kbadge .ktags{ flex-basis:100%; width:100%; margin-top:2px; }
}

#contatti{ justify-content:space-between; }
.contatti-main{ margin-top:auto; margin-bottom:auto; }
.contatti-main .c-eyebrow{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:24px; }
.contatti-main h2{ font-weight:200; font-size:clamp(2.4rem,7vw,6rem); line-height:.98; letter-spacing:-.03em; margin-bottom:30px; }
.contatti-main h2 a{ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--line-2); transition:border-color .3s; }
.contatti-main h2 a:hover{ border-color:var(--blue); }
.contatti-info{ display:flex; flex-wrap:wrap; gap:14px 50px; font-family:var(--f-mono); font-size:.8rem; color:var(--ink-2); }
.contatti-info b{ color:var(--muted); font-weight:400; }
.contatti-info a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22); padding-bottom:2px; transition:border-color .25s; }
.contatti-info a:hover{ border-color:var(--terra); }
.contatti-addr{ display:block; margin-top:16px; font-family:var(--f-mono); font-size:.74rem; font-style:normal;
  letter-spacing:.06em; color:var(--muted); }
.footer{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:var(--muted); padding-top:30px; border-top:1px solid var(--line); }

/* ===================== FILIGRANA: logo zoomato dietro le sezioni ===================== */
#filosofia,#metodo,#kiri,#contatti{ overflow:hidden; }
.fili{ position:absolute; z-index:0; pointer-events:none; }
.fili svg{ display:block; height:100%; width:auto; }
.fili.wide svg{ height:auto; width:100%; }
.fili use{ fill:currentColor; }

/* ===================== CONTATTI scuro ===================== */
#contatti{ background:var(--ink); color:var(--paper); }
#contatti .c-eyebrow{ color:rgba(251,248,242,.55); }
#contatti .contatti-main h2{ color:var(--paper); }
#contatti .contatti-main h2 a{ color:var(--paper); border-bottom-color:rgba(251,248,242,.32); }
#contatti .contatti-main h2 a:hover{ border-bottom-color:var(--paper); }
#contatti .contatti-info{ color:rgba(251,248,242,.82); }
#contatti .contatti-info b{ color:rgba(251,248,242,.5); }
#contatti .contatti-addr{ color:rgba(251,248,242,.5); }
#contatti .footer{ color:rgba(251,248,242,.5); border-top-color:rgba(251,248,242,.16); }

/* ===================== METODO: hub diagramma + descrizioni all'hover ===================== */
.metodo-grid{ display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(28px,5vw,72px); align-items:center; }
.metodo-col{ min-width:0; }
.hub-dia{ width:100%; max-width:980px; height:auto; display:block; margin:0 auto; }
.metodo-intro{ max-width:30ch; margin:0 0 clamp(18px,3vh,30px); font-size:clamp(1.15rem,1.9vw,1.55rem); line-height:1.22; letter-spacing:-.01em; color:var(--ink-2); }
.metodo-intro b{ color:var(--ink); font-weight:600; }
@media(max-width:860px){ .metodo-grid{ grid-template-columns:1fr; gap:32px; } }
.hub-desc{ max-width:52ch; margin:10px auto 0; text-align:center; min-height:60px; }
.hd-t{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--green); display:block; margin-bottom:8px; }
.hd-p{ font-size:.95rem; line-height:1.5; color:var(--ink-2); }
.hd-p b{ color:var(--ink); font-weight:500; }
.dg-link{ fill:none; stroke:var(--line-2); stroke-width:2; transition:stroke .25s, stroke-width .25s; }
.dg-link.hot{ stroke:var(--terra); stroke-width:3.2; }
.core-circ{ fill:url(#coreGrad); }
.dg-node{ cursor:pointer; }
.dg-node .hit{ pointer-events:fill; }
.dg-node .dot,.dg-node .dg-nlbl{ pointer-events:none; }
.dg-node .dot{ fill:var(--terra); transition:fill .25s; }
.dg-node.hot .dot{ fill:var(--ink); filter:drop-shadow(0 0 9px rgba(196,122,82,.55)); }
.dg-nlbl{ font-family:var(--f-mono); font-size:21px; letter-spacing:1px; fill:var(--ink-2); text-transform:uppercase; }
.dg-node.hot .dg-nlbl{ fill:var(--ink); font-weight:500; }
.metodo-triade{ margin-top:clamp(16px,3vh,30px); text-align:left; font-family:var(--f-serif); font-style:italic; font-size:1.05rem; color:var(--terra); letter-spacing:.04em; }
/* SEZIONE 01 — atomo integrato nella colonna testo (a sx), immagine a dx */
.hero-lead{ font-size:clamp(.9rem,1.35vw,1.04rem); line-height:1.58; color:var(--ink-2); max-width:46ch; margin:0; }
#filosofia .hub-wrap{ margin-top:0; }
#filosofia .hub-dia{ max-width:440px; margin:0; }
#filosofia .hub-desc{ margin:6px 0 0; text-align:left; max-width:44ch; min-height:98px; }
#filosofia .metodo-triade{ margin-top:clamp(10px,1.8vh,18px); }

/* ==========================================================================
   MOBILE — le sezioni di testo diventano scorrevoli
   Il deck da' a ogni sezione l'altezza esatta dello schermo e taglia
   l'eccedenza (overflow:hidden). Su desktop lo spazio basta; su telefono no,
   e il contenuto finiva tagliato: titoli a meta', testi troncati.
   Qui le sezioni di testo diventano scorrevoli. Il JS del deck le riconosce
   da solo (activeScroller() cerca overflow-y auto/scroll) e cambia sezione
   soltanto quando si e' arrivati in fondo allo scorrimento.
   ATTENZIONE ALL'ORDINE: questo blocco deve restare DOPO la regola
   "#filosofia,#metodo,#kiri,#contatti{ overflow:hidden }", altrimenti perde
   e lo scorrimento resta disattivato (era il caso di #kiri).
   ========================================================================== */
@media(max-width:820px){
  #filosofia, #kiri, #contatti{
    overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    justify-content:flex-start;     /* con overflow attivo, centrare rende irraggiungibile la cima */
    padding-top:clamp(84px,13vh,116px);
    padding-bottom:clamp(56px,10vh,92px);
  }
  #filosofia::-webkit-scrollbar,#kiri::-webkit-scrollbar,#contatti::-webkit-scrollbar{ width:0; }
  /* il contenuto non deve piu' essere schiacciato per stare in una schermata */
  #filosofia .panel-inner,#kiri .panel-inner,#contatti .panel-inner{ margin-block:auto; }

  /* SCHEDA PROGETTO: scorre tutta la colonna di destra, non il solo paragrafo.
     Prima il testo scorreva dentro un riquadro alto poche righe, praticamente
     inutilizzabile col dito. */
  .ov-info{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .ov-textwrap{ display:block; flex:0 0 auto; max-width:none; }
  .ov-text{ max-height:none; overflow:visible; flex:none; }
  .ov-fade,.ov-more{ display:none; }
  /* le frecce stavano a meta' altezza, cioe' sopra il titolo: le sposto sulla foto */
  .ov-arrow{ top:22%; width:42px; height:42px; font-size:1.2rem; }
  .ov-prev{ left:10px; } .ov-next{ right:10px; }
  .ov-close{ width:40px; height:40px; top:12px; right:12px; }
  /* valori lunghi (es. "Progettista architettonico per conto di...") non devono sfondare */
  .ov-specs>div{ min-width:0; }
  .ov-specs>div p{ overflow-wrap:anywhere; }
}
@media(max-width:430px){
  .ov-specs{ grid-template-columns:1fr; gap:11px; }
}

/* ==========================================================================
   MOBILE — 01 Filosofia e 04 Kiri devono stare in UNA schermata
   Come il resto del sito: una sezione = una schermata, senza scorrere.
   Misurato a 390x844: Filosofia sforava di 312px, Kiri di 61px. Qui si
   recuperano riducendo margini, interlinee e le due immagini grandi
   (lo schizzo a matita e il diagramma dell'atomo).
   Lo scorrimento impostato sopra RESTA come rete di sicurezza: su schermi
   molto bassi il contenuto scorre invece di venire tagliato, ma su un
   telefono normale non si attiva perche' ci sta tutto.
   ========================================================================== */
@media(max-width:820px){
  #filosofia,#kiri{ padding-top:clamp(62px,9vh,88px); padding-bottom:clamp(24px,4vh,46px); }

  /* --- 01 Filosofia ---
     ⚠️ LA FILIGRANA VA NASCOSTA. E' un elemento in posizione assoluta alto 175vh
     che sborda dal pannello: con overflow:hidden veniva ritagliata, ma ora che il
     pannello e' scorrevole ENTRA NEL CALCOLO DELL'ALTEZZA e da sola aggiunge ~312px
     di vuoto, facendo comparire lo scorrimento anche quando il contenuto ci sta.
     #kiri la nasconde gia' da prima, ed e' il motivo per cui li' il problema non c'era. */
  #filosofia .fili{ display:none; }

  .hero-grid{ row-gap:clamp(10px,1.7vh,22px); }
  #filosofia h1{ font-size:clamp(1.5rem,6.3vw,2.1rem); line-height:1.12; }
  .hero-lead{ font-size:clamp(.82rem,3.5vw,.95rem); line-height:1.55; }
  .hero-visual{ max-width:min(62vw,260px); }
  .hero-visual img{ width:auto; max-width:100%; max-height:clamp(104px,18vh,190px);
    margin-inline:auto; object-fit:contain; }
  .hero-visual figcaption{ display:none; }
  #filosofia .hub-wrap{ margin-top:0; }
  #filosofia .hub-dia{ max-width:min(78vw,310px); }
  #filosofia .hub-desc{ min-height:0; font-size:.83rem; line-height:1.5; }

  /* --- 04 Kiri: bastano margini piu' stretti --- */
  .kiri-grid{ gap:14px; }
  .kc h2{ margin-bottom:13px; }
  .kc p{ margin-bottom:9px; line-height:1.6; }
  .kiri-links{ margin-top:13px; gap:10px; }
  .kbadges{ gap:10px; }
  .kbadge{ padding:14px 16px; }
  .kbadge .klogo{ width:66px; }
  .ktags{ margin-top:10px; }
}

/* Telefoni bassi (iPhone SE e simili, o schermo ridotto dalla barra del browser):
   stessa impaginazione, tutto un po' piu' compatto, per restare in una schermata. */
@media(max-width:820px) and (max-height:700px){
  #filosofia .hub-dia{ max-width:min(64vw,240px); }
  .hero-visual img{ max-height:clamp(78px,14vh,132px); }
  .hero-lead{ font-size:.8rem; line-height:1.45; }
  #filosofia .hub-desc{ font-size:.78rem; line-height:1.42; }
  .kc h2{ font-size:clamp(1.45rem,5.8vw,1.85rem); margin-bottom:10px; }
  .kc p{ font-size:.81rem; line-height:1.48; margin-bottom:7px; }
  .kiri-links{ margin-top:10px; gap:8px; }
  .kbadges{ gap:8px; }
  .kbadge{ padding:11px 13px; }
  .kbadge p{ font-size:.75rem; line-height:1.4; }
  .kbadge .klogo{ width:54px; }
  .ktags{ margin-top:8px; }
  .ktag{ font-size:.53rem; padding:4px 7px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html,body{ overflow:auto !important; }
  .scroll{ position:static; overflow:visible; }
  .panel{ position:relative; transform:none !important; min-height:100vh; min-height:100dvh; overflow:visible !important; }
  .panel .cover{ display:none; }
  #logo .band{ opacity:1 !important; }
  .logo-inner{ transform:none !important; }
  .intro-field{ position:relative; top:auto; bottom:auto; padding:clamp(24px,6vh,56px) 6vw; }
  #logo .w{ opacity:1 !important; transform:none !important; }
  .intro-lead.fg{ transform:none !important; }
  .intro-enter{ display:none; }
  .reveal,.panel-inner,.slat{ opacity:1 !important; transform:none !important; }
  .line-rise>i{ transform:none !important; }
}
svg .rough{ filter:url(#rough); }