/* ================================================================
   Studio d'ingegneria Simone Garlandini — foglio di stile unico
   Bianco / nero · accenti Le Corbusier · Futura (Jost) · IBM Plex Mono per i dati
   Sezioni: 0 caratteri · 1 variabili · 2 base · 3 intestazione · 4 mappa viva · 5 hero
            6 riquadri · 7 attività · 8 esempi di lavoro · 9 profilo · 10 contatto
            11 footer · 12 pagine di testo · 13 movimento ridotto e stampa
   ================================================================ */

/* ———— 0. caratteri, serviti da qui (nessuna richiesta a Google) ————
   Jost (OFL) come font variabile 300–500 · IBM Plex Mono (OFL) 400 · solo il sottoinsieme latino, in woff2 */
@font-face{font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ———— 1. variabili ———— */
:root{
  --paper:#ffffff;
  --ink:#111111;
  --ink-70:rgba(17,17,17,.7);
  --ink-50:rgba(17,17,17,.5);
  --hair:rgba(17,17,17,.14);
  /* Le Corbusier — Polychromie architecturale (codici ufficiali, sRGB) */
  --lc-jaune:#f2bb1d;         /* 4320W le jaune vif — accento */
  --lc-ceruleen-59:#7aa7cb;   /* 4320N bleu céruléen 59 — acque, Garlandini SA */
  --lc-ceruleen-31:#3e6e90;   /* 32030 bleu céruléen 31 — calo di popolazione */
  --lc-vermillon-59:#a33a29;  /* 4320A rouge vermillon 59 — crescita di popolazione */
  --lc-rubia:#901442;         /* 32101 rouge rubia — confine comunale */
  --lc-sienne:#68443c;        /* 32120 terre sienne brûlée 31 — curve di livello */
  --lc-vert:#406e58;          /* 32040 vert anglais — hover del logo */
  --lc-ocre:#eacfa6;          /* 32060 ocre */
  --lc-vert-pale:#becbb7;     /* 32042 vert anglais pâle */
  --lc-ceru-pale:#c6d5cc;     /* 32034 céruléen pâle */
  --lc-outr-pale:#b6c6ce;     /* 32023 outremer pâle */
  --lc-sienne-pale:#e2cbb5;   /* 32123 terre sienne pâle */
  --lc-gris-clair:#b5b5af;    /* 32013 gris clair 31 */
  --accent:var(--lc-jaune);
  --tone:var(--ink);                  /* colore pieno della sezione per hover e selezione (ridefinito nei riquadri colorati) */
  --logo-linea:var(--lc-rubia);       /* logo: linea come il confine comunale della mappa */
  --logo-area:var(--lc-ceruleen-31);  /* logo: quadrato come la campitura delle aree */
  --sans:"Futura PT",Futura,Jost,"Century Gothic",sans-serif;
  /* due sole misure per tutto il maiuscoletto spaziato e i micro-dati in mono */
  --lbl:.74rem;  --lbl-ls:.22em;       /* etichette: menu, sezioni, selettore, ambiti, pastiglie */
  --micro:.66rem; --micro-ls:.2em;     /* micro: voci del contatto, legende, didascalie, riga legale */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(1.25rem,4.5vw,4rem);      /* margine laterale */
  --gap:clamp(.8rem,1.4vw,1.4rem);      /* spazio fra i riquadri */
  --r:28px;                             /* raggio dei riquadri */
  --maxw:1600px;
  --nav-h:5.5rem;
  --glass:rgba(255,255,255,.86);        /* schede traslucide sulla mappa */
}

/* ———— 2. base ———— */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:1.05rem;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:300;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
em{font-style:normal;font-weight:400}
::selection{background:var(--tone);color:var(--paper)}   /* testo selezionato nel tono della sezione: nero sul bianco, colore pieno nei riquadri */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:100}
.skip:focus{left:var(--gut)}
.eyebrow{font-size:var(--lbl);letter-spacing:var(--lbl-ls);text-transform:uppercase;font-weight:400;color:var(--ink-70)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin-inline:auto}
.section{padding:clamp(3rem,7vh,5.5rem) var(--gut)}
/* etichetta di sezione (ATTIVITÀ, ESEMPI DI LAVORO, …) */
.switch-row{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem 1.4rem;margin-bottom:var(--gap)}
.switch-row h2{display:flex;align-items:center;gap:.8rem;font-size:var(--lbl);letter-spacing:var(--lbl-ls);text-transform:uppercase;font-weight:500;color:var(--ink)}
/* ogni etichetta ha un segno della grammatica del logo (punto, linea, area, punto con cerchio) e un filetto fino al margine */
.switch-row .mk{width:1.3rem;height:.65rem;flex:none;overflow:visible}
.switch-row .rule{flex:1 1 2rem;height:1px;background:var(--ink);opacity:.18;transform-origin:left center}
/* logo B: punto · linea · area sopra il wordmark, tutto centrato (viewBox del simbolo ritagliato sui segni, 56:16) */
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;text-decoration:none;color:inherit}
.brand .sig{width:2.6rem;height:calc(2.6rem * 16 / 56);flex:none}
.brand .wm{display:flex;flex-direction:column;align-items:center;line-height:1.05}
/* il margine negativo compensa la spaziatura dopo l'ultima lettera, così il testo è davvero centrato */
.brand .wm b{font-weight:500;font-size:.98rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;margin-right:-.2em}
.brand .wm small{font-size:.5rem;letter-spacing:.32em;text-transform:uppercase;font-weight:300;margin-top:.28rem;opacity:.75;white-space:nowrap;margin-right:-.32em}
.brand .sig path{stroke:var(--logo-linea);stroke-dasharray:16;stroke-dashoffset:0}
.brand .sig rect{fill:var(--logo-area)}
/* hover: la linea si ritraccia dal punto al quadrato (punto → linea → area) */
.brand:hover .sig path,.brand:focus-visible .sig path{animation:traccia .6s ease-out}
@keyframes traccia{from{stroke-dashoffset:16}to{stroke-dashoffset:0}}
/* etichette a pillola (affiliazioni, link, formazione) */
.chips{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.chips a,.chip{position:relative;text-decoration:none;font-size:var(--lbl);letter-spacing:var(--lbl-ls);text-transform:uppercase;font-weight:400;padding:.45rem .85rem;border-radius:999px;border:1px solid rgba(17,17,17,.35);cursor:default;transition:background .25s,border-color .25s,color .25s}
.chips a{cursor:pointer}
.chips a:hover,.chip:hover,.chip:focus-visible{background:var(--tone);border-color:var(--tone);color:var(--paper);outline:none}

/* ———— 3. intestazione: in cima solo il menu centrato; allo scorrimento logo a sinistra e menu a destra ———— */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;padding:0 var(--gut);background:var(--paper);box-shadow:0 1px 0 var(--hair);transition:box-shadow .4s}
.nav.solid{box-shadow:0 1px 0 var(--ink)}
.nav-in{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:2rem}
.nav .brand{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.nav.solid .brand{opacity:1;visibility:visible;transition:opacity .35s ease}
.nav.solid .nav-in{justify-content:flex-end}
.nav-links{display:flex;align-items:center;gap:2.2rem;list-style:none;margin:0;padding:0;animation:navfade .4s ease}
.nav.solid .nav-links{animation:navfade2 .4s ease}
/* due animazioni identiche con nomi diversi: così la dissolvenza riparte quando l'intestazione cambia stato */
@keyframes navfade{from{opacity:0}to{opacity:1}}
@keyframes navfade2{from{opacity:0}to{opacity:1}}
.nav-links a{font-size:var(--lbl);letter-spacing:var(--lbl-ls);text-transform:uppercase;font-weight:400;text-decoration:none;padding:.35rem 0;border-bottom:1px solid transparent;transition:border-color .2s}
.nav-links a:hover,.nav-links a[aria-current="true"]{border-color:currentColor}
.lang{display:flex;gap:.6rem;font-size:var(--lbl);letter-spacing:var(--lbl-ls);text-transform:uppercase;font-weight:400}
.lang a{text-decoration:none;opacity:.55}
.lang a[aria-current="true"]{opacity:1;border-bottom:1px solid var(--accent)}
.nav-toggle{all:unset;display:none;cursor:pointer;font-size:var(--lbl);letter-spacing:var(--lbl-ls);text-transform:uppercase;font-weight:400;padding:.4rem 0}
.nav-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:860px){
  .nav .brand{position:static;transform:none;opacity:1;visibility:visible}
  .nav-in,.nav.solid .nav-in{justify-content:space-between}
  .nav-toggle{display:inline-block}
  .nav-links,.nav.solid .nav-links{display:none;position:fixed;inset:var(--nav-h) 0 0 0;background:var(--paper);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:2rem var(--gut);animation:none}
  .nav.open .nav-links{display:flex}
  .nav-links a{font-size:1.6rem;letter-spacing:.06em;text-transform:none;font-weight:300;padding:.7rem 0;border-bottom:1px solid var(--hair);width:100%}
  .nav-links li{width:100%}
  .nav-links .lang{padding-top:1rem;border:0}
}

/* ———— 4. mappa viva (hero e mappa dei contatti) ———— */
.geo{position:relative;width:100%;height:100%;overflow:hidden;background:var(--paper)}
.geo .stage{position:absolute;inset:0;overflow:hidden}
.geo .layer{position:absolute;inset:0}
.geo .layer img{position:absolute;display:block;pointer-events:none;user-select:none}
.geo .l-svg{width:100%;height:100%;overflow:visible}
.geo .l-svg *{vector-effect:non-scaling-stroke}
.geo .veil{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .8s ease}
.geo.switching .veil{opacity:1}
/* fase 0 ortofoto: solo dissolvenze di opacità (niente zoom, filtri o visibility: evitano scatti) */
.l-ortho{opacity:0;will-change:opacity;transition:opacity 3s cubic-bezier(.4,0,.2,1)}
.geo.ready .l-ortho{opacity:1}
.geo[data-stage="2"] .l-ortho{opacity:.25}
.geo[data-stage="3"] .l-ortho,.geo[data-stage="4"] .l-ortho{opacity:0}
/* fase 1 abitanti STATPOP: cerchi proporzionali per fasce di taglia + confine comunale */
.boundary{fill:none;stroke:var(--lc-rubia);stroke-width:2;stroke-dasharray:7 4;stroke-linejoin:round;opacity:0;transition:opacity 2s ease .8s}
.geo:not([data-stage="0"]) .boundary{opacity:1}
.cells-band{opacity:0;transition:opacity 1.4s ease}
.geo:not([data-stage="0"]) .cells-band{opacity:1}
.cell{fill:none;stroke:var(--ink);stroke-opacity:.12;stroke-width:.5;opacity:0;transition:opacity 2s ease}
.geo[data-stage="3"] .cell,.geo[data-stage="4"] .cell{opacity:1}
.dot{fill:var(--accent);stroke:var(--ink);stroke-width:.6}
/* fase 2 curve di livello: emergono in ordine di quota */
.contour{fill:none;stroke:var(--lc-sienne);stroke-width:.45;stroke-opacity:.5;stroke-linejoin:round;opacity:0;transition:opacity 1.4s ease}
.contour.index{stroke-width:.8;stroke-opacity:.7}
.contour.scree{stroke-dasharray:2 3}
.contour.lake{stroke:var(--lc-ceruleen-59);stroke-opacity:.6}
.geo[data-stage="2"] .contour,.geo[data-stage="3"] .contour,.geo[data-stage="4"] .contour{opacity:1}
.g-contours{transition:opacity 2.5s ease}
.geo[data-stage="4"] .g-contours{opacity:.4}
/* fase 3 swissTLM3D: acque → strade → edifici */
.tlm{opacity:0;transition:opacity 1.8s cubic-bezier(.4,0,.2,1)}
.geo[data-stage="3"] .tlm,.geo[data-stage="4"] .tlm{opacity:1}
.geo[data-mode="sequence"][data-stage="3"] .g-roads{transition-delay:1.1s}
.geo[data-mode="sequence"][data-stage="3"] .g-bld{transition-delay:2.2s}
.water-a{fill:var(--lc-ceruleen-59);fill-opacity:.22;stroke:var(--lc-ceruleen-59);stroke-width:.8;stroke-opacity:.6}
.water-l{fill:none;stroke:var(--lc-ceruleen-59);stroke-linecap:round;stroke-linejoin:round}
.water-l.river{stroke-width:1.6}
.water-l.stream{stroke-width:.7;stroke-opacity:.8}
.road{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}
.road.motorway{stroke-width:2.2}
.road.primary{stroke-width:1.7}
.road.secondary,.road.tertiary{stroke-width:1.3}
.road.minor{stroke-width:.9}
.road.service{stroke-width:.55;stroke-opacity:.8}
.road.path,.road.track,.road.footway{stroke-width:.5;stroke-dasharray:3 2.5;stroke-opacity:.7}
.road.rail{stroke-width:1.1;stroke-dasharray:6 3}
.bld{fill:var(--ink);fill-opacity:.82;fill-rule:evenodd}
/* fase 4 variazione decennale: la base si attenua, i cerchi prendono il colore (via d3) */
.geo[data-stage="4"] .g-bld{opacity:.38}
.geo[data-stage="4"] .g-roads{opacity:.4}
.geo[data-stage="4"] .g-water{opacity:.6}
.geo[data-stage="4"] .tlm{transition:opacity 2.5s ease;transition-delay:0s}
/* marcatore della sede (mappa dei contatti) */
.marker{fill:var(--accent);stroke:var(--ink);stroke-width:1.5}
.marker-ring{fill:none;stroke:var(--accent);stroke-width:1;opacity:.6;transform-box:fill-box;transform-origin:center;animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.3);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.geo.traced .marker-ring{animation:none;opacity:0}   /* con GSAP il cerchio si allarga una volta sola (motion.js, e) */
/* ——— carta del contatto (data-mode="static"): carta di base completa + lingua del logo ——— */
.geo[data-mode="static"] .contour{stroke-width:.4;stroke-opacity:.35}
.geo[data-mode="static"] .contour.index{stroke-width:.7;stroke-opacity:.5}
/* copertura e uso del suolo, nei pâle Le Corbusier */
.land{stroke:none}
.land.wood{fill:var(--lc-vert-pale);fill-opacity:.85}
.land.grass,.land.pitch,.land.sports,.land.cemetery,.land.camp_site{fill:var(--lc-vert-pale);fill-opacity:.45}
.land.farmland{fill:var(--lc-ocre);fill-opacity:.55}
.land.wetland{fill:var(--lc-ceru-pale);fill-opacity:.7}
.land.school{fill:var(--lc-sienne-pale);fill-opacity:.5}
.land.parking{fill:var(--lc-gris-clair);fill-opacity:.3}
.geo[data-mode="static"] .water-a{fill-opacity:.4;stroke-opacity:.5}
.geo[data-mode="static"] .bld{fill-opacity:.26;stroke:var(--ink);stroke-opacity:.18;stroke-width:.5}
/* strade bianche con bordo grigio; sentieri e ferrovia tratteggiati */
.geo[data-mode="static"] .road{stroke:var(--paper);stroke-opacity:1}
.geo[data-mode="static"] .road.casing{stroke:var(--ink);stroke-opacity:.3}
.geo[data-mode="static"] .road.service{stroke-width:2}      .geo[data-mode="static"] .road.casing.service{stroke-width:3}
.geo[data-mode="static"] .road.minor{stroke-width:3.6}      .geo[data-mode="static"] .road.casing.minor{stroke-width:5}
.geo[data-mode="static"] .road.tertiary{stroke-width:4.4}   .geo[data-mode="static"] .road.casing.tertiary{stroke-width:6}
.geo[data-mode="static"] .road.secondary{stroke-width:5}    .geo[data-mode="static"] .road.casing.secondary{stroke-width:6.8}
.geo[data-mode="static"] .road.primary{stroke-width:5.6}    .geo[data-mode="static"] .road.casing.primary{stroke-width:7.6}
.geo[data-mode="static"] .road.motorway{stroke-width:6.6}   .geo[data-mode="static"] .road.casing.motorway{stroke-width:8.8}
.geo[data-mode="static"] .road.path,.geo[data-mode="static"] .road.track,.geo[data-mode="static"] .road.footway{stroke:var(--ink);stroke-opacity:.4;stroke-width:.7}
.geo[data-mode="static"] .road.rail{stroke:var(--ink);stroke-opacity:.6;stroke-width:1.4}
/* lingua del logo: punto = sede, linea = la sua via, area = il suo edificio */
.focus-area{fill:var(--logo-area);stroke:none}
.focus-line{fill:none;stroke:var(--logo-linea);stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
/* etichette: alone bianco per leggerle sopra la carta */
.g-labels text{font-family:var(--sans);font-size:10.5px;font-weight:400;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.g-labels .lbl-mono{font-family:var(--mono);font-size:10px;letter-spacing:.02em}
.g-labels .lbl-water{font-style:italic;font-size:12px;letter-spacing:.12em;fill:var(--lc-ceruleen-31)}
.g-labels .lbl-street{font-size:9px;letter-spacing:.03em;fill:var(--ink-70);stroke-width:2.5px}
.g-labels .lbl-place{font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;fill:var(--ink-50)}
.g-labels .lbl-stop{font-size:10px}
.g-labels .stop{fill:var(--paper);stroke:var(--ink);stroke-width:1.3}
.g-labels .scalebar path{fill:none;stroke:var(--ink);stroke-width:1}
.g-labels .callout rect{fill:var(--paper);stroke:rgba(17,17,17,.18);stroke-width:1}
.g-labels .callout text{stroke:none}

/* ———— 5. hero: testata con logo e cornice della mappa ———— */
.hero2{padding:calc(var(--nav-h) + clamp(1.6rem,4vh,3rem)) var(--gut) 0}
.masthead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;margin:0 0 clamp(1.6rem,3.5vh,2.6rem)}
.motion .masthead,.motion .hero2 .frame{visibility:hidden}   /* finché motion.js non prepara l'apertura: prima il logo, poi la cornice della mappa */
.masthead .brand.big{margin:0;font-size:inherit;line-height:inherit;gap:1.1rem}
.masthead .brand.big .sig{width:4.6rem;height:calc(4.6rem * 16 / 56)}
.masthead .brand.big .wm b{font-size:clamp(1.2rem,2.2vw,1.6rem)}
.masthead .brand.big .wm small{font-size:clamp(.58rem,1vw,.74rem)}
/* ambiti a coppie: quando non stanno su una riga vanno a capo fra le coppie, senza punto a inizio riga */
.masthead .ambiti{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .9rem;margin:0;font-size:var(--lbl);letter-spacing:var(--lbl-ls);text-transform:uppercase;font-weight:400;color:var(--ink-70)}
.masthead .ambiti .pair{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .9rem}
/* ogni punto separatore sta dentro la voce che lo segue, così entra insieme a lei (motion.js) */
.masthead .ambiti .pair span+span::before,.masthead .ambiti .pair+.pair span:first-child::before{content:"·";margin-right:.9rem;opacity:.5}
.hero2 .frame{position:relative;border-radius:var(--r);overflow:hidden;height:min(72vh,820px);min-height:440px;background:var(--paper);border:1px solid var(--hair)}
.hero2 .frame .geo{height:100%}
.hero2 .ui{position:absolute;inset:0;pointer-events:none;color:var(--ink)}
.geo.ready[data-stage="0"] .ui{color:#fff}
.hero2 .ui > *{pointer-events:auto}
/* schede traslucide sulla mappa */
.glass{background:var(--glass);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero2 .tl{position:absolute;left:1.6rem;top:1.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.hero2 .caption{padding:.55rem .9rem;border-radius:16px;font-family:var(--mono);font-size:var(--micro);line-height:1.7;font-variant-numeric:tabular-nums}
.hero2 .caption .cap-src{opacity:.7}
.hero2 .caption .again{all:unset;cursor:pointer;border-bottom:1px solid currentColor;margin-left:1.2rem;padding-bottom:1px}
.hero2 .caption .again:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hero2 .badge{display:inline-flex;align-items:center;gap:.7rem;padding:.55rem .9rem;border-radius:999px}
.hero2 .badge .pulse{width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);display:inline-block;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,187,29,.6)}60%{box-shadow:0 0 0 .45rem rgba(242,187,29,0)}}
/* barre di avanzamento: una per fase, quella attiva si riempie nel tempo della fase (--dur impostato da JS) */
.hero2 .bars{display:flex;gap:.3rem}
.hero2 .bars b{position:relative;display:block;width:1.6rem;height:3px;border-radius:2px;background:rgba(17,17,17,.18);overflow:hidden}
.hero2 .bars b::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:none}
.hero2 .bars b.done::after{transform:scaleX(1)}
.hero2 .bars b.on::after{transform:scaleX(1);transition:transform var(--dur,5s) linear}
/* legende in alto a destra: cerchi proporzionali (dalla fase 1) e colori della variazione (fase 4) */
.hero2 .keys{position:absolute;right:1.6rem;top:1.4rem;display:flex;flex-direction:column;align-items:stretch;gap:.6rem;padding:.7rem .9rem .6rem;border-radius:16px;opacity:0;transition:opacity 1.2s ease .8s}
.geo:not([data-stage="0"]) .keys{opacity:1}
.hero2 .keys small{display:block;font-size:var(--micro);letter-spacing:var(--micro-ls);text-transform:uppercase;font-weight:400;opacity:.75;margin-top:.35rem}
.hero2 .sizes svg{display:block;overflow:visible}
.hero2 .sizes circle{fill:none;stroke:var(--ink);stroke-width:.7}
.hero2 .sizes line{stroke:var(--ink);stroke-width:.5;stroke-dasharray:2 2;opacity:.6}
.hero2 .sizes text{font-family:var(--mono);font-size:9.5px;fill:var(--ink)}
.hero2 .colors{display:none;padding-top:.6rem;border-top:1px solid rgba(17,17,17,.15)}
.geo[data-stage="4"] .colors{display:block;animation:fadein .8s ease}
.hero2 .colors .bar{height:8px;border-radius:2px;background:linear-gradient(90deg,var(--lc-ceruleen-31),#efe9dc,var(--lc-vermillon-59))}
.hero2 .colors .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;margin-top:.25rem}
/* lista delle fasi in basso a destra */
.hero2 .legend{position:absolute;right:1.6rem;bottom:1.4rem;display:grid;grid-template-columns:auto auto;gap:.4rem .9rem;align-items:center;font-size:var(--micro);letter-spacing:var(--micro-ls);text-transform:uppercase;font-weight:400}
.legend .g{width:22px;height:14px;display:block}
.legend .g *{stroke:currentColor;fill:currentColor}
.legend .grad{border-radius:2px;background:linear-gradient(90deg,var(--lc-ceruleen-31),#efe9dc,var(--lc-vermillon-59))}
.legend .row{display:contents}
.legend .row > *{opacity:.38;transition:opacity .6s ease}
.legend .row.on > *{opacity:1}
@media (max-width:860px){
  .hero2 .frame{height:60vh;min-height:380px}
  .hero2 .tl{left:1.2rem;top:1.2rem}
  .hero2 .keys{display:none}
  /* sui telefoni la lista mostra solo la fase in corso */
  .hero2 .legend{left:auto;right:1.2rem;bottom:1.2rem;grid-template-columns:auto auto;gap:.3rem .6rem;padding:.45rem .8rem;border-radius:999px;background:var(--glass);color:var(--ink)}
  .geo.ready[data-stage="0"] .ui .legend{color:var(--ink)}
  .hero2 .legend .row{display:none}
  .hero2 .legend .row.on{display:contents}
  /* qui gli ambiti non stanno su una riga: una coppia per riga */
  .masthead .ambiti{flex-direction:column;align-items:center}
  .masthead .ambiti .pair+.pair span:first-child::before{display:none}
}
@media (max-width:480px){
  .masthead .brand.big{gap:.8rem}
  .masthead .brand.big .sig{width:3.4rem;height:calc(3.4rem * 16 / 56)}
  .masthead .brand.big .wm b{font-size:1rem;letter-spacing:.14em;margin-right:-.14em}
  .masthead .ambiti,.masthead .ambiti .pair{font-size:var(--micro);letter-spacing:.14em;gap:.3rem .6rem}   /* spaziatura ridotta: una coppia deve stare su una riga */
  .masthead .ambiti .pair span+span::before,.masthead .ambiti .pair+.pair span:first-child::before{margin-right:.6rem}
}

/* ———— 6. riquadri ———— */
.tile{position:relative;border-radius:var(--r);background:var(--paper);border:1px solid var(--hair);padding:clamp(1.4rem,2.4vw,2.4rem);overflow:hidden;display:flex;flex-direction:column;gap:1rem;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(17,17,17,.35)}
.tile.ocre{background:var(--lc-ocre);border-color:transparent}
.tile.vert{background:var(--lc-vert-pale);border-color:transparent}
.tile.ceru{background:var(--lc-ceru-pale);border-color:transparent}
.tile.outr{background:var(--lc-outr-pale);border-color:transparent}
.tile.sienne{background:var(--lc-sienne-pale);border-color:transparent}
/* tono pieno della stessa famiglia del colore pâle, per hover e selezione */
.tile.sienne,.tile.ocre{--tone:var(--lc-sienne)}
.tile.vert{--tone:var(--lc-vert)}
.tile.ceru,.tile.outr{--tone:var(--lc-ceruleen-31)}
.tile h3{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:400}
.tile p{max-width:38ch;text-wrap:pretty}
.tile .eyebrow{color:inherit;opacity:.7}
.tile .glyph{width:3.6rem;height:3.6rem;color:currentColor}

/* ———— 7. attività: selettore + bento ———— */
.switch{display:inline-flex;gap:.3rem;padding:.3rem;border:1px solid var(--hair);border-radius:999px}
.switch button{all:unset;cursor:pointer;padding:.55rem 1.1rem;border-radius:999px;font-size:var(--lbl);letter-spacing:var(--lbl-ls);text-transform:uppercase;font-weight:400;transition:background .25s,color .25s}
.switch button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.switch button:hover:not([aria-selected="true"]){background:var(--lc-gris-clair)}   /* nero il selezionato, grigio l'hover */
.switch button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:480px){.switch button{padding:.5rem .8rem;font-size:var(--micro);letter-spacing:.14em;white-space:nowrap}}   /* le due voci su una riga anche sul telefono */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);animation:fadein .45s ease}
.bento[hidden]{display:none}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bento .t1{grid-column:span 7}
.bento .t2{grid-column:span 5}
.bento .t3{grid-column:span 5}
.bento .t4{grid-column:span 7}
.bento .tile{min-height:16rem}
.bento .tile p{color:inherit;opacity:.8}
.bento.par .p{grid-column:span 4;min-height:12rem}
.bento.par .p h3{font-size:1.25rem}
.bento.par .p.ceru59{background:var(--lc-ceruleen-59);border-color:transparent}
.bento.par .p.gris{background:var(--lc-gris-clair);border-color:transparent}
.bento.par .p.ceru59{--tone:var(--lc-ceruleen-31)}
.bento.par .p .chips{margin-top:auto;padding-top:.6rem}
@media (max-width:860px){.bento > *{grid-column:span 6!important}.bento.par .p:last-child{grid-column:1/-1!important}.bento .tile{min-height:0}}   /* due colonne; l'ultimo «In parallelo» a tutta larghezza */
@media (max-width:600px){.bento > *{grid-column:1/-1!important}}

/* ———— 8. esempi di lavoro: riquadri verticali in un binario orizzontale ———— */
#esempi{overflow-x:hidden;overflow-x:clip}
.rail-head .arrows{display:flex;gap:.4rem;align-self:center;margin-left:auto}
.rail-head .arrows button{all:unset;cursor:pointer;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-size:1.1rem;line-height:1;transition:background .25s,opacity .25s}
.rail-head .arrows button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.rail-head .arrows button:disabled{opacity:.25;cursor:default;background:none}
.rail-head .arrows button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.refrail{margin:0 calc(50% - 50vw) 0 -1rem;padding:.4rem calc(50vw - 50%) 1.2rem 1rem;list-style:none;display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:1rem;scrollbar-width:none;cursor:grab}
.refrail::-webkit-scrollbar{display:none}
.refrail.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.refrail.dragging .tile{transform:none;box-shadow:none}
.refrail:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r)}
.refrail .ref{flex:0 0 max(15rem,calc((100% - 3.4*var(--gap))/4.4));scroll-snap-align:start;aspect-ratio:3/4;padding:1.3rem 1.4rem 1.5rem;gap:.5rem;justify-content:flex-end;color:var(--paper);background:var(--lc-ceru-pale);border-color:transparent}
/* ortofoto a tutto riquadro (4 tessere fuse su canvas da site.js), velatura scura in basso per il testo */
.refrail .mosaic{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--lc-ceru-pale)}
.refrail .mosaic .grid{position:absolute;top:0;bottom:0;left:50%;height:100%;aspect-ratio:1;transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.refrail .mosaic .grid.fused{display:block}
.refrail .mosaic img,.refrail .mosaic canvas{width:100%;height:100%;object-fit:cover;display:block}
.refrail .ref:hover .mosaic .grid{transform:translateX(-50%) scale(1.05)}
.refrail .mosaic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.28) 0%,rgba(17,17,17,0) 30%,rgba(17,17,17,0) 40%,rgba(17,17,17,.8) 100%)}
.refrail .mosaic figcaption{position:absolute;left:1.1rem;top:1.1rem;padding:.35rem .75rem;border-radius:999px;background:var(--glass);border:1px solid var(--hair);color:var(--ink);font-family:var(--mono);font-size:var(--micro)}   /* come il link della carta del contatto */
.refrail .ref > *:not(.mosaic){position:relative;z-index:2}
/* blocco del titolo alto cinque righe (il titolo più lungo), ancorato in basso: i titoli partono tutti dalla stessa quota */
.refrail .ref .body{display:flex;flex-direction:column;min-height:calc(5 * 1.2 * 1.25rem)}
.refrail .ref h3{font-size:1.25rem;font-weight:400;line-height:1.2;text-wrap:balance;color:var(--paper)}
@media (max-width:860px){.rail-head .arrows{display:none}.refrail .ref{flex-basis:min(72vw,17rem)}}

/* ———— 9. profilo: foto · riquadro (testo, formazione, affiliazioni) ———— */
.about2{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:stretch}
.about2 .portrait{grid-column:span 3;border-radius:var(--r);overflow:hidden;min-height:20rem;background:var(--lc-ceru-pale)}
.about2 .portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}
.about2 .profile{grid-column:span 9;display:grid;grid-template-columns:7fr 5fr;gap:1.2rem clamp(1.4rem,3vw,3rem);align-items:start}
.about2 .text-col{display:flex;flex-direction:column;gap:1rem;min-width:0}
.about2 .name{grid-column:1/-1;font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:300}
.about2 .lead{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.3;max-width:40ch;text-wrap:pretty}
.about2 .prose{opacity:.85;max-width:60ch}
.about2 .prose p{max-width:none}
.about2 .prose p + p{margin-top:.8rem}
.about2 .creds{display:flex;flex-direction:column;gap:1.8rem;min-width:0;padding-top:.25rem}
.about2 .aff .eyebrow{display:block;margin-bottom:.7rem}
/* scheda della formazione che appare sopra l'etichetta */
.about2 .tip{position:absolute;left:0;bottom:calc(100% + .6rem);z-index:5;width:max(18rem,26ch);max-width:min(30rem,70vw);padding:.9rem 1.1rem;border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 18px 40px -18px rgba(17,17,17,.45),0 0 0 1px var(--hair);text-transform:none;letter-spacing:0;font-size:.86rem;line-height:1.45;font-weight:300;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1);text-wrap:pretty}
.about2 .tip::after{content:"";position:absolute;left:1.1rem;top:100%;border:6px solid transparent;border-top-color:var(--paper)}
.about2 .tip b{display:block;font-weight:500;margin-bottom:.15rem}
.about2 .tip small{display:block;opacity:.7;margin-top:.3rem;font-size:.78rem}
.about2 .chip:hover .tip,.about2 .chip:focus-visible .tip,.about2 .chip:focus-within .tip{opacity:1;transform:none}
@media (hover:none){.about2 .chip:active .tip{opacity:1;transform:none}}
@media (max-width:1100px){.about2 .profile{grid-template-columns:1fr}.about2 .creds{padding-top:.4rem}}
@media (max-width:900px){.about2 .portrait{grid-column:span 4;max-height:30rem}.about2 .profile{grid-column:span 8}}
@media (max-width:640px){.about2 .portrait,.about2 .profile{grid-column:1/-1}.about2 .portrait{max-height:26rem}.about2 .tip{left:auto;right:0}.about2 .tip::after{left:auto;right:1.1rem}}

/* ———— 10. contatto ———— */
.contact2{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap)}   /* la carta più grande: si vedono le fermate vicine */
.contact2 dl{margin:.4rem 0 0;display:grid;grid-template-columns:6.5rem 1fr;gap:.9rem 1rem;font-size:1.05rem}
.contact2 dt{font-size:var(--micro);letter-spacing:var(--micro-ls);text-transform:uppercase;font-weight:400;opacity:.65;padding-top:.25rem}
.contact2 dd{margin:0}
.contact2 dd a{text-decoration:none;border-bottom:1px solid rgba(17,17,17,.3);padding-bottom:.05em}
.contact2 dd a:hover{border-color:var(--lc-vert);border-bottom-width:2px}
.contact2 .maptile{padding:0;min-height:26rem}
.contact2 .maptile .geo{position:absolute;inset:0;height:100%}
.contact2 .maplink{position:absolute;top:1rem;right:1rem;z-index:3;padding:.35rem .75rem;border-radius:999px;background:var(--glass);border:1px solid var(--hair);font-family:var(--mono);font-size:var(--micro);color:var(--ink);text-decoration:none;transition:background .25s,color .25s}
.contact2 .maplink:hover{background:var(--ink);color:var(--paper)}
.contact2 .maptile figcaption{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:var(--micro);color:var(--ink-70);background:var(--glass);padding:.5rem .8rem;border-radius:999px}
@media (max-width:860px){.contact2{grid-template-columns:1fr}.contact2 dl{grid-template-columns:5.5rem 1fr}}

/* ———— 11. footer: riquadro chiaro ———— */
.footer{position:relative;margin:0 var(--gut) var(--gut);border-radius:var(--r);background:var(--paper);border:1px solid var(--hair);padding:clamp(2.2rem,4vw,3.4rem) clamp(1.6rem,3vw,3rem) 1.6rem}
.footer .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem clamp(1.4rem,3vw,3rem);align-items:start}
.footer .fcol{display:flex;flex-direction:column;gap:.8rem;min-width:0}
.footer .brand{align-self:flex-start}
.footer .eyebrow{margin-bottom:.2rem}
.footer .fl{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;list-style:none;margin:0;padding:0}
.footer .fl a,.footer .fad a{font-size:.95rem;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.footer .fl a:hover,.footer .fad a:hover{border-color:var(--ink)}
.footer .fad{font-style:normal;font-size:.95rem;line-height:1.7}
/* riga legale: tre voci su due righe ciascuna, nelle stesse colonne del blocco sopra */
.footer .fbottom{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:1rem clamp(1.4rem,3vw,3rem);margin-top:1rem;padding-top:1.4rem;border-top:1px solid var(--hair)}
.footer .legal{font-family:var(--mono);font-size:var(--micro);line-height:1.6;color:var(--ink-50)}
.footer .legal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.footer .legal a:hover,.footer .legal a[aria-current]{border-color:currentColor}
/* torna all'inizio: nell'angolo in alto a destra del riquadro, alla quota del logo */
.footer .top{all:unset;position:absolute;top:clamp(2.2rem,4vw,3.4rem);right:clamp(1.6rem,3vw,3rem);cursor:pointer;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-size:1rem;transition:background .25s}
.footer .top:hover{background:var(--ink);color:var(--paper)}
.footer .top:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:1000px){.footer .wrap,.footer .fbottom{grid-template-columns:1fr 1fr}.footer .fbrand{grid-column:1/-1}}
@media (max-width:600px){.footer .wrap,.footer .fbottom{grid-template-columns:1fr}}

/* ———— 12. pagine di testo (legale.html): intestazione sempre compatta, riquadri bianchi larghi come una colonna di lettura ———— */
.sub .nav .brand{opacity:1;visibility:visible}
.sub .nav-in{justify-content:flex-end}
.page{padding:calc(var(--nav-h) + clamp(2rem,5vh,3.5rem)) var(--gut) clamp(3rem,7vh,5.5rem)}
.page section+section{margin-top:clamp(2.5rem,6vh,4rem)}
.page .tile.text{max-width:68ch;gap:0}
.page .prose{opacity:.9}
.page .prose p+p,.page .prose h3+p{margin-top:.6rem}
.page .prose h3{font-size:1.1rem;font-weight:500;line-height:1.3;margin-top:1.6rem}
.page .prose a,.page .kv a{text-decoration:none;border-bottom:1px solid rgba(17,17,17,.3);padding-bottom:.05em;transition:border-color .2s}
.page .prose a:hover,.page .kv a:hover{border-color:var(--ink)}
.page .prose .mono{font-size:.92em}
.page .meta{font-family:var(--mono);font-size:var(--micro);color:var(--ink-50);margin-top:1.6rem}
/* coppie etichetta / valore, come nel riquadro del contatto */
.kv{margin:0;display:grid;grid-template-columns:7rem 1fr;gap:.9rem 1rem}
.kv dt{font-size:var(--micro);letter-spacing:var(--micro-ls);text-transform:uppercase;font-weight:400;opacity:.65;padding-top:.25rem}
.kv dd{margin:0}
@media (max-width:480px){.kv{grid-template-columns:1fr;gap:.2rem 0}.kv dd+dt{margin-top:.9rem}}

/* ———— 13. movimento ridotto e stampa ———— */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .layer,.boundary,.cells-band,.ui,.veil,.contour,.g-contours,.tlm,.g-roads,.g-water,.g-bld{transition:none!important}
  .nav-links,.nav.solid .nav-links,.bento,.hero2 .badge .pulse,.marker-ring,.brand:hover .sig path,.brand:focus-visible .sig path{animation:none}
  .hero2 .bars b.on::after{transition:none}
  .refrail{scroll-behavior:auto}
  .refrail .mosaic .grid,.tile{transition:none}
}
@media print{
  .nav,.hero2 .frame,.rail-head .arrows,.footer .top{display:none}
  .tile{break-inside:avoid;box-shadow:none}
  .refrail{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
}