/* Disposed Studio — la landing (index.php). Una tavola d'architetto: tipografia,
   bianco, fotografia, e micro-dettagli che hanno un senso (righello A–L,
   cartiglio, numero di tavola, nord). Nessun menu, nessun piede.
   LA GRIGLIA: 12 colonne larghe un «modulo»; il quadretto di fondo e' largo
   esattamente un modulo e parte dal margine, cosi' ogni bordo dei contenuti
   cade su una linea della carta. --l-modulo lo misura site.js (la larghezza vera,
   senza barra di scorrimento); il valore qui sotto e' la riserva.
   Le regole della pagina stanno su body.landing; i pezzi su .landing, cosi' il DS
   li mostra senza fondo e rumore. Colori e caratteri da site.css. */

/* le curve di tutte le animazioni: partono decise e arrivano piano, mai a scatto */
.landing{
  --l-dolce:cubic-bezier(.22, 1, .36, 1); --l-dolce-io:cubic-bezier(.65, 0, .35, 1);
  --l-colonne:12;
  --l-modulo:calc((100vw - 2 * var(--gutter)) / var(--l-colonne));
  --l-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --l-grigio:color-mix(in srgb, var(--nero) 55%, var(--bianco));
  --l-filo:1px solid color-mix(in srgb, var(--nero) 16%, transparent);
}
@media (max-width: 767px){ .landing{ --l-colonne:6 } }   /* sul telefono il modulo e' doppio */

body.landing{
  --l-riga:color-mix(in srgb, var(--nero) 5%, transparent);
  font-size:17px; line-height:1.5; color:var(--nero);
  background-color:var(--bianco);
  background-image:linear-gradient(var(--l-riga) 1px, transparent 1px), linear-gradient(90deg, var(--l-riga) 1px, transparent 1px);
  background-size:var(--l-modulo) var(--l-modulo);
  background-position:var(--gutter) 0;
}

/* il rumore: una grana fissa sopra tutto, che si sposta a scatti lenti.
   Sposta un livello gia' dipinto (transform), non ridipinge: costa poco. */
body.landing::after{
  content:""; position:fixed; inset:-50%; z-index:50; 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='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:l-grana 1.2s steps(6) infinite;
}
@keyframes l-grana{
  0%{ transform:translate(0, 0) } 20%{ transform:translate(-3%, 2%) } 40%{ transform:translate(2%, -4%) }
  60%{ transform:translate(-4%, -1%) } 80%{ transform:translate(3%, 3%) } 100%{ transform:translate(0, 0) }
}
@media (prefers-reduced-motion: reduce){ body.landing::after{ animation:none } }

/* overflow-x:clip: il tavolo del marchio e' largo 1000px veri prima che marchio.js lo
   scali, e un telefono allargherebbe la pagina per farcelo stare */
.landing main{ max-width:none; padding:0; overflow-x:clip }

/* ---------- l'ingresso ----------
   Il resto entra appena il marchio e' disegnato (.pronto, site.js). Se lo script
   non arriva, entra comunque dopo 4 secondi; senza script, o con «meno movimento»,
   e' li' da subito. */
.landing .l-dopo{ animation:l-entra 1.6s var(--l-dolce) 4s both }
body.pronto .l-dopo{ animation:l-entra 1.6s var(--l-dolce) .3s both }   /* subito dopo il marchio */
@keyframes l-entra{ from{ opacity:0; translate:0 24px } to{ opacity:1; translate:none } }
@media (scripting: none), (prefers-reduced-motion: reduce){ .landing .l-dopo, body.pronto .l-dopo{ animation:none } }
/* anche cio' che appare scorrendo (data-rivela, site.css) arriva piu' piano */
.landing [data-rivela]{ transition:opacity 1.4s var(--l-dolce), translate 1.4s var(--l-dolce) }

/* ---------- la griglia ---------- */
.landing .l-griglia{ display:grid; grid-template-columns:repeat(var(--l-colonne), var(--l-modulo)); padding-inline:var(--gutter) }
.landing .l-griglia > *{ padding-right:var(--s-6); min-width:0 }   /* il testo non tocca la linea dopo */
@media (max-width: 767px){ .landing .l-griglia > *{ grid-column:1 / -1 !important; padding-right:0 } }

/* il righello: A–L sulle dodici colonne, come i riferimenti ai bordi di un foglio */
.l-righello{ position:fixed; top:0; left:0; right:0; z-index:30; display:grid; grid-template-columns:repeat(12, var(--l-modulo)); padding-inline:var(--gutter);
  height:22px; pointer-events:none; font:500 9px/22px var(--l-mono); letter-spacing:.12em; color:color-mix(in srgb, var(--nero) 32%, transparent) }
.l-righello span{ border-left:1px solid color-mix(in srgb, var(--nero) 18%, transparent); padding-left:5px; height:7px; line-height:16px }
@media (max-width: 767px){ .l-righello{ display:none } }

/* ---------- tipografia: un solo corpo per le etichette, titoli stretti e serrati ---------- */
.landing .l-etichetta{ font:500 11px/1.5 var(--l-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--l-grigio); margin:0 }
.landing .l-n{ color:var(--rosso) }   /* il numero di sezione: l'unico rosso del testo */
.landing .l-lead{ font:400 clamp(20px, 1.8vw, 26px)/1.35 var(--font-text); letter-spacing:-.01em; margin:0 0 var(--s-4); max-width:30ch }
.landing .l-sezione{ padding-block:calc(var(--l-modulo) * 1.5) }
.landing .l-sezione > .l-etichetta{ grid-column:1 / span 3 }

/* le foto: tengono il posto, piatte, senza cornici */
.landing .foto{ margin:0 }   /* niente fondo grigio: finche' la foto arriva si vede la carta */
.landing .foto img, .landing .foto video{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; background:none }
.landing .foto img.rotta{ visibility:hidden }
.landing .foto.alta{ aspect-ratio:4/5 } .landing .foto.larga{ aspect-ratio:3/2 } .landing .foto.quadra{ aspect-ratio:1 } .landing .foto.lunga{ aspect-ratio:16/9 }
.landing .l-disegno{ background:var(--bianco) }
.landing .l-disegno img{ object-fit:contain; mix-blend-mode:multiply }
/* la parallasse: la foto e' un poco piu' grande della sua finestra e scorre piu' lenta (site.js) */
.landing .finestra{ overflow:hidden }
.landing .finestra > .foto{ scale:1.08 }

/* ---------- apertura ---------- */
.landing .l-apertura{ min-height:100vh; min-height:100dvh; display:grid; grid-template-rows:1fr auto; padding-block:var(--s-12) var(--s-8) }
.landing .l-marchio{ display:grid; place-items:center; padding-inline:var(--gutter) }
.landing .l-marchio .marchio-home{ width:min(100%, 62dvh * var(--formato)) }
@media (max-width: 767px){ .landing .l-marchio .marchio-home{ width:min(100%, 56dvh * var(--formato-m)) } }
.landing .l-sotto{ align-items:end }
.landing .l-intro{ grid-column:1 / span 5; font:400 clamp(19px, 1.6vw, 23px)/1.35 var(--font-text); letter-spacing:-.01em; margin:0 }
.landing .l-categorie{ grid-column:9 / span 4; text-align:right }
@media (max-width: 767px){ .landing .l-categorie{ text-align:left; margin-top:var(--s-4) } }

/* ---------- un progetto: copertina, testata col cartiglio, sequenza ---------- */
.landing .l-progetto{ padding-bottom:var(--l-modulo) }
.landing a.l-apri-foto{ display:block; color:inherit }
.landing .l-copertina .foto{ max-height:92vh; width:100% }
.landing .l-testa{ padding-block:calc(var(--l-modulo) * .75) var(--l-modulo); row-gap:var(--s-6); align-items:start }
.landing .l-testa > .l-etichetta{ grid-column:1 / -1 }
.landing .l-testa h2, .landing .l-titoletto{ font:500 clamp(46px, 5.6vw, 100px)/.9 var(--font-text); font-stretch:86%; letter-spacing:-.04em; margin:0 }
.landing .l-testa h2{ grid-column:1 / span 7 }
.landing .l-testa .l-cartiglio{ grid-column:9 / span 4; margin-right:0 }
.landing .l-testa .l-testo{ grid-column:5 / span 5 }
.landing .l-titoletto{ font-size:clamp(36px, 3.6vw, 64px) }
.landing .l-testo p{ max-width:40ch; margin:0 0 var(--s-3) }
/* il cartiglio: righe sottili, monospazio, come nella tabellina di una tavola */
.landing .l-cartiglio{ margin:0; padding:0; border:var(--l-filo); align-self:start; font:500 11px/1.4 var(--l-mono); letter-spacing:.06em; text-transform:uppercase }
.landing .l-cartiglio div{ display:grid; grid-template-columns:8.5em 1fr; border-bottom:var(--l-filo) }
.landing .l-cartiglio div:last-child{ border-bottom:0 }
.landing .l-cartiglio dt{ color:var(--l-grigio); padding:var(--s-2) var(--s-3); border-right:var(--l-filo) }
.landing .l-cartiglio dd{ margin:0; padding:var(--s-2) var(--s-3); color:var(--nero) }
/* la sequenza: il posto lo decide il formato della foto (index.php), allineata al modulo */
.landing .l-sequenza{ row-gap:clamp(48px, 7vw, 120px); align-items:start }
.landing .l-pezzo{ padding-right:0 }
.landing .l-pezzo:nth-child(even){ margin-top:clamp(48px, 10vw, 160px) }   /* il passo: la seconda scende */
.landing .l-scheda{ grid-column:1 / span 4; display:grid; gap:var(--s-6) }
@media (max-width: 767px){
  /* sul telefono una colonna sola: le orizzontali a tutta larghezza, le verticali
     un po' piu' strette e alternate a sinistra e a destra. Niente coppie sfalsate. */
  .landing .l-sequenza{ grid-template-columns:1fr; row-gap:var(--s-8) }
  .landing .l-sequenza > .l-pezzo{ grid-column:1 / -1 !important; margin-top:0 }
  .landing .l-sequenza > .l-pezzo:has(.alta){ width:78% }
  .landing .l-sequenza > .l-pezzo:has(.alta):nth-child(even){ justify-self:end }
}

/* ---------- la planimetria: una tavola anche lei ---------- */
.landing .l-pianta{ padding-block:var(--l-modulo); align-items:start }
.landing .l-pianta figure{ grid-column:5 / span 8; margin:0; padding-right:0 }
.landing .l-lente-area{ position:relative; background:var(--bianco); padding:clamp(16px, 3vw, 48px); border:var(--l-filo) }
.landing .l-pianta .foto{ background:none; aspect-ratio:auto }
.landing .l-pianta .foto img{ height:auto; max-height:80vh; object-fit:contain }
.landing .l-nord{ position:absolute; top:var(--s-4); right:var(--s-4); width:24px; height:34px; fill:var(--nero); pointer-events:none }
.landing .l-nord text{ font:600 10px var(--l-mono); text-anchor:middle; fill:var(--nero) }
.landing .l-pianta figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-3) var(--s-6); align-items:baseline; margin-top:var(--s-3) }
.landing .l-apri{ font:500 11px var(--l-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--nero); text-underline-offset:.3em; min-height:44px; display:inline-flex; align-items:center }
.landing .l-apri:hover{ text-decoration-color:var(--rosso) }

/* ---------- cosa facciamo: righe sottili sulle colonne ---------- */
.landing .l-servizi ol{ grid-column:4 / span 9; list-style:none; margin:0; padding:0 0 0 0; border-top:var(--l-filo) }
.landing .l-servizi li{ display:grid; grid-template-columns:var(--l-modulo) calc(var(--l-modulo) * 3) minmax(0, 1fr); align-items:baseline; padding:var(--s-6) 0; border-bottom:var(--l-filo) }
.landing .l-num{ font:500 11px var(--l-mono); letter-spacing:.1em; color:var(--rosso) }
.landing .l-servizi h3{ font:500 clamp(26px, 2.6vw, 40px)/1 var(--font-text); font-stretch:88%; letter-spacing:-.03em; margin:0; padding-right:var(--s-6) }
.landing .l-servizi p{ margin:0; max-width:46ch; padding-right:var(--s-6) }
@media (max-width: 767px){ .landing .l-servizi li{ grid-template-columns:3em 1fr; gap:var(--s-2) 0 } .landing .l-servizi p{ grid-column:2 } }

/* ---------- il claim, il manifesto, il contatto ---------- */
.landing .l-claim p{ grid-column:1 / -1; font:500 clamp(52px, 10vw, 180px)/.88 var(--font-text); font-stretch:84%; letter-spacing:-.05em; margin:0; max-width:11ch }
.landing .l-manifesto{ grid-column:4 / span 8 }
.landing .l-manifesto p:not(.l-lead){ font:400 clamp(22px, 2.2vw, 32px)/1.38 var(--font-text); letter-spacing:-.012em; margin:0 0 var(--s-6); max-width:38ch }
.landing .l-contatto{ align-items:start }   /* etichetta e testo partono dalla stessa riga, come nelle altre sezioni */
.landing .l-contatto-corpo{ grid-column:4 / span 9 }
/* 6.5vw: un indirizzo di ~25 caratteri sta su una riga anche a 390px; piu' lungo, va a capo dove serve */
.landing .l-email{ display:inline-block; font:500 clamp(22px, 6.5vw, 112px)/1 var(--font-text); font-stretch:88%; letter-spacing:-.035em; color:var(--nero); text-decoration:underline 2px; text-underline-offset:.14em; overflow-wrap:anywhere }
.landing .l-email:hover, .landing .l-email:focus-visible{ text-decoration-color:var(--rosso) }
.landing .l-legale{ font:500 11px var(--l-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--l-grigio); margin:var(--s-12) 0 0 }
.landing .l-legale a{ color:inherit; text-underline-offset:.2em }

/* ---------- il contatore: progetto e foto al centro dello schermo ---------- */
.l-contatore{ position:fixed; left:var(--gutter); bottom:var(--s-6); z-index:40; margin:0; padding:var(--s-2) var(--s-3); background:var(--bianco);
  font:500 12px/1 var(--font-text); letter-spacing:.14em; text-transform:uppercase; font-variant-numeric:tabular-nums;
  opacity:0; translate:0 8px; transition:opacity .8s var(--l-dolce), translate .8s var(--l-dolce); pointer-events:none }
.l-contatore.acceso{ opacity:1; translate:none }

/* ---------- le foto si aprono a tendina quando arrivano ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .landing .l-apre .foto{ clip-path:inset(100% 0 0 0); transition:clip-path 1.6s var(--l-dolce-io) }
  .landing .l-apre .foto img{ transform:scale(1.12); transition:transform 2.4s var(--l-dolce) }
  .landing .l-apre.visto .foto{ clip-path:inset(0) }
  .landing .l-apre.visto .foto img{ transform:none }
  .landing .l-apre[data-rivela]:not(.visto){ opacity:1; translate:none }   /* la tendina basta: niente dissolvenza in piu' */
}

/* ---------- la lente sulla planimetria ---------- */
.landing .l-lente-area{ position:relative; cursor:zoom-in }
.landing .l-lente{ position:absolute; width:220px; height:220px; border-radius:50%; pointer-events:none; opacity:0; transition:opacity .4s var(--l-dolce);
  background-color:var(--bianco); background-repeat:no-repeat; box-shadow:0 0 0 1px var(--nero), 0 0 0 7px var(--bianco), 0 0 0 8px color-mix(in srgb, var(--nero) 20%, transparent) }
.landing .l-lente::after{ content:""; position:absolute; inset:calc(50% - 10px); background:var(--rosso); mask:url(icone/plus.svg) center / contain no-repeat }
.landing .lente-on .l-lente{ opacity:1 }
@media (max-width: 767px){ .landing .l-lente{ width:150px; height:150px } }
.landing .l-pianta figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-3) var(--s-6); align-items:baseline }
.landing .l-apri{ font-size:15px; color:var(--nero); text-underline-offset:.2em; min-height:44px; display:inline-flex; align-items:center }
.landing .l-apri:hover{ text-decoration-color:var(--rosso) }

/* ---------- il cursore: un mirino da tavolo tecnico (site.js) ----------
   Croce sottile rossa e coordinate in monospazio; sopra le cose dice cosa fanno
   (VIEW, OPEN, ZOOM) e la croce ruota di 45°. Solo col mouse e senza «meno
   movimento»: e' site.js a mettere .cursore. */
/* !important: i ritagli del marchio hanno un cursore loro (.marchio-home .cut, piu' specifico) */
body.cursore, body.cursore *{ cursor:none !important }
.l-scia{ position:fixed; inset:0; width:100vw; height:100vh; z-index:61; pointer-events:none }
.l-mirino{ position:fixed; left:0; top:0; z-index:62; pointer-events:none; opacity:0; transition:opacity .4s var(--l-dolce) }
.l-mirino.acceso{ opacity:1 }
.l-croce{ position:absolute; left:-13px; top:-13px; width:26px; height:26px; transition:rotate .6s var(--l-dolce), scale .6s var(--l-dolce) }
.l-croce::before, .l-croce::after{ content:""; position:absolute; background:var(--rosso) }
.l-croce::before{ left:12.5px; top:0; width:1px; height:26px }
.l-croce::after{ top:12.5px; left:0; width:26px; height:1px }
.l-mirino.sopra .l-croce{ rotate:45deg; scale:1.3 }
.l-coord{ position:absolute; left:18px; top:14px; white-space:nowrap; font:500 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.08em;
  color:var(--rosso); background:color-mix(in srgb, var(--bianco) 85%, transparent); padding:2px 4px; font-variant-numeric:tabular-nums }
.l-mirino.sopra .l-coord{ color:var(--bianco); background:var(--rosso) }

/* ---------- la galleria a cilindro (site.js) ----------
   Si apre cliccando una foto: fondo nero, le foto intere una al centro e le vicine
   sopra e sotto, appena piegate come su un cilindro; scorre in verticale senza
   fine (rotella, trascinamento, frecce, ↑ ↓) e si ferma sempre su una foto. */
html.galleria-aperta{ overflow:hidden }
.l-galleria{ position:fixed; inset:0; z-index:58; background:color-mix(in srgb, var(--nero) 97%, transparent); color:var(--bianco);
  display:grid; grid-template-rows:auto 1fr auto; opacity:0; transition:opacity .6s var(--l-dolce); touch-action:none }
.l-galleria.aperta{ opacity:1 }
.l-galleria[hidden]{ display:none }
.l-galleria-testa, .l-galleria-piede{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); padding:var(--s-4) var(--gutter); position:relative; z-index:2 }
.l-galleria .l-etichetta{ color:color-mix(in srgb, var(--bianco) 60%, transparent) }
.l-galleria .l-etichetta b{ color:var(--bianco); font-weight:500 }
.l-galleria button{ font:500 11px var(--l-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--bianco); background:none;
  border:1px solid color-mix(in srgb, var(--bianco) 30%, transparent); min-height:44px; min-width:44px; padding:0 var(--s-4); cursor:pointer;
  transition:border-color .4s var(--l-dolce), color .4s var(--l-dolce) }
.l-galleria button:hover, .l-galleria button:focus-visible{ border-color:var(--bianco) }
.l-galleria button:focus-visible{ outline:2px solid var(--rosso); outline-offset:2px }
.l-galleria-cilindro{ position:relative; overflow:hidden; perspective:2000px; cursor:grab;
  -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent) }
.l-galleria-cilindro:active{ cursor:grabbing }
.l-g-foto{ position:absolute; left:0; right:0; top:50%; height:var(--l-g-alta); margin:calc(var(--l-g-alta) / -2) 0 0; display:grid; place-items:center;
  will-change:transform, opacity; transform-origin:50% 50%; pointer-events:none }
/* l'altezza dalla variabile e non 100%: dentro la cella della griglia la percentuale
   non si risolve e le foto uscivano dalla cornice, ognuna di una misura diversa */
.l-g-foto img{ max-width:min(92vw, 1600px); max-height:var(--l-g-alta); width:auto; height:auto; object-fit:contain; border-radius:0; background:none; user-select:none }
.l-galleria{ --l-g-alta:76vh }
@media (max-width: 767px){ .l-galleria{ --l-g-alta:62vh } }

/* ---------- micro-animazioni ----------
   Piccole, lente, mai a scatto; tutte spente con «meno movimento».
   Le fa partire .visto (data-rivela, site.js) quando il pezzo entra nello schermo. */
@media (prefers-reduced-motion: no-preference){
  /* la testata di un progetto: una riga sottile si traccia sotto TAV., poi il cartiglio riga per riga */
  .landing .l-testa > .l-etichetta{ position:relative; padding-bottom:var(--s-3) }
  .landing .l-testa > .l-etichetta::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:color-mix(in srgb, var(--nero) 16%, transparent);
    transform:scaleX(0); transform-origin:0 50%; transition:transform 1.6s var(--l-dolce-io) .2s }
  .landing .l-testa.visto > .l-etichetta::after{ transform:none }
  .landing .l-testa .l-cartiglio div{ opacity:0; translate:0 6px; transition:opacity .9s var(--l-dolce), translate .9s var(--l-dolce) }
  .landing .l-testa.visto .l-cartiglio div{ opacity:1; translate:none }
  .landing .l-testa .l-cartiglio div:nth-child(2){ transition-delay:.08s } .landing .l-testa .l-cartiglio div:nth-child(3){ transition-delay:.16s }
  .landing .l-testa .l-cartiglio div:nth-child(4){ transition-delay:.24s } .landing .l-testa .l-cartiglio div:nth-child(5){ transition-delay:.32s }
  .landing .l-testa .l-cartiglio div:nth-child(6){ transition-delay:.4s }

  /* il claim: le parole entrano una alla volta (data-parole, site.js) */
  .landing .l-claim [data-parole] .parola{ transition-duration:1.1s; transition-timing-function:var(--l-dolce); transition-delay:calc(var(--i) * 90ms) }

  /* cosa facciamo: le righe in sequenza; al passaggio il nome scivola e il numero si riempie */
  .landing .l-servizi li:nth-child(2){ transition-delay:.1s } .landing .l-servizi li:nth-child(3){ transition-delay:.2s } .landing .l-servizi li:nth-child(4){ transition-delay:.3s }
  .landing .l-servizi h3{ transition:translate .7s var(--l-dolce) }
  .landing .l-servizi li:hover h3{ translate:8px 0 }
  .landing .l-num{ display:inline-block; transition:background-color .5s var(--l-dolce), color .5s var(--l-dolce); padding:1px 3px; margin-left:-3px }
  .landing .l-servizi li:hover .l-num{ background:var(--rosso); color:var(--bianco) }

  /* le foto: al passaggio l'immagine si avvicina di pochissimo, piano */
  .landing .l-apri-foto .foto img{ transition:scale 1.4s var(--l-dolce) }
  .landing .l-apri-foto:hover .foto img{ scale:1.03 }

  /* l'email: la sottolineatura si ritira e si ridisegna da sinistra */
  .landing .l-email{ text-decoration:none; background:linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom:.06em;
    transition:background-size .8s var(--l-dolce-io), color .5s var(--l-dolce) }
  .landing .l-email:hover, .landing .l-email:focus-visible{ background-size:0 2px; background-position:100% 100% }

  /* «View the plan»: la freccia avanza */
  .landing .l-apri span{ display:inline-block; transition:translate .6s var(--l-dolce) }
  .landing .l-apri:hover span{ translate:6px 0 }

  /* il righello: la colonna sotto il mirino (site.js mette .qui) */
  .l-righello span{ transition:color .4s var(--l-dolce), border-color .4s var(--l-dolce) }
  .l-righello span.qui{ color:var(--rosso); border-color:var(--rosso) }
}

/* ---------- responsive: telefono, schermi bassi, schermi grandi ---------- */
@media (max-width: 767px){
  /* sul telefono le scritte piccole crescono un poco: si leggono anche senza occhiali */
  .landing .l-etichetta, .landing .l-cartiglio, .landing .l-legale, .landing .l-apri, .landing .l-num, .l-contatore{ font-size:12px }
  .landing .l-cartiglio div{ grid-template-columns:7.5em 1fr }
  /* l'email: un bersaglio da almeno 44px per il dito */
  .landing .l-email{ padding-block:10px }
  /* la planimetria: meno cornice, piu' disegno */
  .landing .l-lente-area{ padding:var(--s-2) }
  .landing .l-pianta figure{ margin-top:var(--s-6) }
  .landing .l-testa .l-cartiglio{ margin-top:var(--s-2) }
  .landing .l-testa .l-testo{ margin-top:var(--s-2) }
}
/* telefono in orizzontale e finestre basse: l'apertura sta nello schermo, il marchio usa l'altezza */
@media (max-height: 520px) and (orientation: landscape){
  .landing .l-apertura{ padding-block:var(--s-4) }
  .landing .l-marchio .marchio-home{ width:min(100%, 72dvh * var(--formato)) }
  .landing .l-intro{ font-size:16px }
  .landing .l-etichetta, .landing .l-cartiglio, .landing .l-legale, .landing .l-apri, .landing .l-num, .l-contatore{ font-size:12px }
  .l-righello{ display:none }
  .landing .l-copertina .foto{ max-height:100vh }
}
/* schermi grandi: le scritte piccole non restano minuscole */
@media (min-width: 1600px){
  .landing .l-etichetta, .landing .l-cartiglio, .landing .l-legale, .landing .l-apri, .landing .l-num{ font-size:12.5px }
  .l-righello{ font-size:10px }
}
/* iPhone con la tacca: i pezzi fissi stanno dentro i margini sicuri */
.l-contatore{ left:max(var(--gutter), env(safe-area-inset-left)); bottom:max(var(--s-6), env(safe-area-inset-bottom)) }
.l-galleria-testa{ padding-top:max(var(--s-4), env(safe-area-inset-top)); padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)) }
.l-galleria-piede{ padding-bottom:max(var(--s-4), env(safe-area-inset-bottom)); padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)) }
.landing .l-griglia{ padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right)) }
/* schermi touch (tablet compresi): si leggono da vicino, col dito; le scritte piccole a 12px */
@media (hover: none){
  .landing .l-etichetta, .landing .l-cartiglio, .landing .l-legale, .landing .l-apri, .landing .l-num, .l-contatore{ font-size:12px }
}