/* ── caratteri ──────────────────────────────────────────────────────────
   Giacomo:  ha 9 lettere (C E F I L N O S x) e tutte le cifre. E' un font
             di marchio: qui sta dove e' completo, cioe' i numeri e + 111 & INFO.
   Caveat:   la calligrafia, per le annotazioni dei progetti.
   TTNorms:  etichette e testo.
   La didascalia sotto la foto e' in sans di sistema, come nel sito originale. */

@font-face{font-family:'Giacomo';src:url('fonts/giacomo.woff') format('woff');font-display:swap}
/* MelawanRindu e' la versione demo: sostituisce la punteggiatura con una
   filigrana "DEMO FONT". Qui la usiamo solo per "behind the design", che di
   punteggiatura non ne ha — esattamente come nel sito originale. */
@font-face{font-family:'MelawanRindu';src:url('fonts/melawan-rindu.woff2') format('woff2');font-display:swap}
@font-face{font-family:'TTNorms';src:url('fonts/tt-norms-light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'TTNorms';src:url('fonts/tt-norms-bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#231f20;
  --paper:#f7f3ed;
  --ox:#6e2725;
  --graphite:#6b635c;
  --rule:#ddd3c3;
  --hand:'Caveat','Bradley Hand',cursive;
  --body:'TTNorms','Helvetica Neue',Helvetica,Arial,sans-serif;
  --num:'Giacomo','TTNorms',sans-serif;
  --bordo:1vw;
  --banda:2.9rem;
  /* dove si ferma il foglio del progetto, in % della scena. Lo legge anche
     app.js per posare l'asterisco sempre sotto questa linea. */
  --foglio:11;   /* la fascia in fondo: marchi + didascalia */
  /* i parametri esatti del sito originale, da script.js righe 25-26
     e da .landingpage.openinfo::before */
  --sfoca-contenuto:blur(5px) opacity(40%);
  --sfoca-copertina:blur(3px) opacity(35%);
  --sfoca-velo:blur(2px);
  --t:480ms cubic-bezier(.2,.9,.25,1);     /* salite e discese: prima 620ms */
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:var(--paper) url('Background.webp') center/cover no-repeat;
  border:var(--bordo) solid var(--ink);
  color:var(--ink);
  font-family:var(--body);font-weight:300;
  cursor:cell;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:cell}
:focus-visible{outline:1px solid var(--ox);outline-offset:3px}
/* le zone di click larghe mezzo schermo non devono prendere il riquadro del
   browser: da tastiera si accende la freccia, che e' un segnale migliore */
.sfoglia:focus,.sfoglia:focus-visible,
.lato:focus,.lato:focus-visible,
.copertina button:focus,.copertina button:focus-visible,
.linguetta:focus,.linguetta:focus-visible,
.pagine:focus,.pagine:focus-visible{outline:none}
.sfoglia:focus-visible,.lato:focus-visible{opacity:1}
.copertina button:focus-visible{opacity:.82}
img{display:block}
.scena{position:absolute;inset:var(--bordo);overflow:hidden}

/* ═══ LA COPERTINA — lo schizzo a caso, si clicca per entrare ═════════ */
.copertina{
  position:absolute;inset:0;z-index:5;
  opacity:1;transition:opacity .45s ease;
}
body:not([data-vista="copertina"]) .copertina{opacity:0;pointer-events:none}
.copertina button{
  position:absolute;inset:0;width:100%;
  cursor:pointer;transition:opacity .2s;
}
.copertina button:hover{opacity:.82}
#schizzo{
  max-width:37vh;max-height:46vh;width:auto;
  position:absolute;top:45%;left:50%;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .4s;
}
#schizzo.c-e{opacity:1}
.sottotitolo{
  width:43vh;max-width:min(43vh,80vw);
  position:absolute;top:65%;left:50%;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .4s;
}
.sottotitolo.c-e{opacity:1}

/* ═══ IL LIBRO — clicchi e passa alla foto dopo ══════════════════════ */
.libro{
  position:absolute;inset:0;z-index:6;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--paper) url('Background.webp') center/cover no-repeat;
  transform:translateY(100%);pointer-events:none;
  transition:transform var(--t), filter .3s ease;
}
/* sale da sotto come la griglia */
body[data-vista="libro"] .libro,
body[data-vista="album"] .libro{transform:translateY(0);pointer-events:auto}
/* il libro sotto non si muove: sale solo il foglio */

/* i numeri — a sinistra, in Giacomo */
.numeri{
  padding:1.6vh 0 0 1.4vw;text-align:left;
  font-family:var(--num);font-size:1.7rem;line-height:1;
  color:var(--ink);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;user-select:none;
}

/* la foto, sempre al centro. Le taglie sono quelle del sito: big/medium/small */
.palco{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:1vh 3vw var(--banda)}
.lastra{
  position:absolute;top:1vh;left:3vw;right:3vw;bottom:var(--banda);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 260ms linear;pointer-events:none;   /* prima 340ms */
}
.lastra.viva{opacity:1}
.lastra img{width:auto;height:auto;object-fit:contain;max-height:100%}
.lastra.big    img{max-width:min(70vw,100%)}
.lastra.medium img{max-width:min(50vw,100%)}
.lastra.small  img{max-width:min(32vw,100%)}

/* zone di click invisibili: sinistra indietro, destra avanti */
.sfoglia{position:absolute;top:0;bottom:0;z-index:3;background:none}
.sfoglia.pre{left:0;width:42%}
.sfoglia.suc{right:0;width:58%}


/* ═══ L'ALBUM — si scende, una cosa per volta ════════════════════════ */
.album{
  position:absolute;left:0;right:0;top:calc(var(--foglio) * 1%);bottom:0;z-index:10;
  transform:translateY(100%);transition:transform var(--t);
  /* un foglio: stesso fondo della griglia, opaco, con la sua riga in alto */
  background:var(--paper) url('Background.webp') center/cover no-repeat;
  border-top:1px solid var(--ink);
  display:flex;flex-direction:column;
}
/* sopra resta una striscia di libro, quella da cui sei sceso */
body[data-vista="album"] .album{transform:translateY(0)}
.linguetta{
  position:absolute;left:0;right:0;top:0;height:3.4%;
  transform:translateY(-100%);
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;z-index:12;
}
body[data-vista="album"] .linguetta{height:calc(var(--foglio) / (100 - var(--foglio)) * 100%);pointer-events:auto}

.album-corpo{flex:1;display:flex;min-height:0}
.pagine{
  flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;overscroll-behavior:contain;
}
.pagine::-webkit-scrollbar{display:none}

/* ── il feed del progetto ─────────────────────────────────────────────
   Foto di misure diverse su 12 colonne, con un ritmo che si ripete:
   grande / coppia sfalsata / piccola a destra / media a sinistra / coppia.
   Scorrendo non e' mai una fila di foto tutte uguali. */
/* Griglia classica a 12 colonne. Il contenuto si appoggia a tre guide —
   margine sinistro (colonna 2), mezzeria (colonna 7), margine destro
   (colonna 12) — e le linee restano appena visibili, come un segno di
   costruzione lasciato sul foglio. */
.feed{
  position:relative;
  --corridoio:2.2vw;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--corridoio);row-gap:7vh;align-items:start;
  padding:6vh 6vw 18vh;
}
.voce{margin:0;min-width:0}
.voce img{display:block;width:100%;height:auto}
/* sotto la foto: il numero di figura, e sotto la didascalia in minuscoletto */
.voce figcaption{margin-top:1vh;display:block}
.voce .fig{
  display:block;font-family:var(--hand);font-style:normal;
  font-size:17px;line-height:1;color:var(--ink);
}
.voce .testo-dida{
  display:block;margin-top:.5vh;
  font-family:var(--body);font-weight:700;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--graphite);line-height:1.7;max-width:34ch;
}
/* ogni foto comincia e finisce su una delle tre linee, mai in mezzo */
.r0{grid-column:2 / 12}
.r1{grid-column:2 / 7}
.r2{grid-column:7 / 12;margin-top:16vh}
.r3{grid-column:9 / 12}
.r4{grid-column:2 / 6}
.r5{grid-column:2 / 7;margin-top:6vh}
.r6{grid-column:7 / 12}

/* L'apertura lavora su due estremi: il nome enorme, trattato come
   un'immagine e tagliato dal bordo, e i dati minuscoli nel margine. */
.intro{grid-column:1 / -1;margin-bottom:2vh}
.intro h1{
  font-family:var(--body);font-weight:700;
  font-size:clamp(64px,13vw,190px);line-height:.82;letter-spacing:-.045em;
  margin:0 0 0 -2vw;                 /* esce dal margine: lo taglia il foglio */
  white-space:nowrap;will-change:transform;
}
/* il nome non ci sta tutto: scorrendo scivola di lato e si legge fino in fondo */
.intro{min-height:34vh}
/* i dati stanno di lato, scritti in verticale lungo il margine sinistro,
   e restano al loro posto mentre il progetto scorre */
.scheda{
  grid-column:1 / 2;justify-self:start;align-self:start;
  position:sticky;top:7vh;z-index:2;
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.scheda ul{display:flex;align-items:center;gap:2.4rem;margin:0;padding:0}
.scheda li{
  list-style:none;
  font-family:var(--body);font-weight:700;font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--graphite);line-height:1;white-space:nowrap;
}
.scheda li b{font-family:var(--num);font-weight:400;font-size:15px;letter-spacing:.1em;color:var(--ox)}
.intro-testo{grid-column:2 / 7;padding-top:1.2vh}
.intro-testo .nota{
  margin-top:1.2vh;font-family:var(--body);font-weight:700;font-size:9px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--graphite);
}
.intro-testo p{
  font-family:var(--body);font-weight:300;
  font-size:15px;line-height:1.75;color:var(--ink);margin:0;max-width:44ch;
}
/* i respiri di testo nel mezzo, spostati verso destra */
.respiro{grid-column:7 / 12;align-self:center;padding-left:1.6vw}
.respiro h2{
  font-family:var(--hand);font-weight:400;
  font-size:clamp(26px,4.4vh,42px);line-height:1.05;margin:0 0 1.2vh;
}
.respiro p{
  font-family:var(--body);font-weight:300;
  font-size:clamp(13px,1.8vh,16px);line-height:1.8;color:var(--graphite);
  margin:0;max-width:40ch;
}

.lato{
  position:absolute;top:50%;transform:translateY(-50%);z-index:13;
  font-family:var(--num);font-size:1.4rem;color:var(--ox);
  opacity:.28;transition:opacity .2s;padding:12px 8px;
}
.lato:hover,.lato:focus-visible{opacity:1}
.lato.pre{left:.4vw}
.lato.suc{right:.4vw}
.giu{
  position:absolute;left:50%;bottom:1.2vh;transform:translateX(-50%);
  z-index:13;color:var(--ox);opacity:.55;transition:opacity .4s;pointer-events:none;
}
.album.mosso .giu{opacity:0}

/* ═══ L'INVITO ══════════════════════════════════════════════════════
   Un asterisco bordeaux nel margine della foto che respira: chiede di essere
   cliccato. Cliccato, un segno frulla e resta come x, fermo: chiude cio' che
   ha aperto. Posizione calcolata in app.js sulla foto effettivamente mostrata.
   Si comporta come la foto: stessa dissolvenza quando cambia foto, stessa
   salita quando arriva il libro, stessa sfocatura sotto info e contatto. */
.invito{
  position:absolute;top:0;left:0;z-index:14;
  font-family:var(--num);font-weight:400;font-size:44px;line-height:1;color:var(--ox);
  padding:8px;margin:0;
  opacity:0;pointer-events:none;
  transition:opacity 260ms linear, transform var(--t), filter .3s ease;
}
/* per sparire di colpo prima di rientrare sfumando con la foto nuova */
.invito.salta{transition:transform var(--t), filter .3s ease}
.invito.c-e{opacity:1;pointer-events:auto}
/* due + incrociati: un asterisco scritto a mano. Il secondo e' un filo
   storto e piu' piccolo, come quando lo si traccia con la penna. */
.invito .segno{
  display:block;position:relative;transform-origin:50% 52%;
  animation:respiro 2.8s ease-in-out infinite;
}
.invito .braccio{
  display:block;transform-origin:50% 52%;
  transition:transform .55s cubic-bezier(.2,.9,.25,1), opacity .4s ease;
}
.invito .braccio.due{position:absolute;inset:0;transform:rotate(41deg) scale(.92)}
@keyframes respiro{
  0%,100%{transform:rotate(0) scale(1)}
  28%{transform:rotate(-11deg) scale(1.36)}
  56%{transform:rotate(6.5deg) scale(1.1)}
}
/* col mouse sopra non si ferma: si emoziona. Respiro piu' veloce e piu' ampio */
.invito:hover .segno,.invito:focus-visible .segno{animation:emozione 1.7s ease-in-out infinite}
@keyframes emozione{
  0%,100%{transform:rotate(-1deg) scale(1.04)}
  27%{transform:rotate(-13deg) scale(1.44)}
  56%{transform:rotate(7deg) scale(1.12)}
  80%{transform:rotate(-4deg) scale(1.24)}
}
.invito:focus-visible{outline:none}
/* Aperto il progetto smette di chiamare. Un solo movimento: il + sfuma via,
   l'altro segno frulla su se stesso e resta, fermo, come x. Non si sposta. */
body[data-vista="album"] .invito .segno{animation:none}
body[data-vista="album"] .invito .braccio.uno{opacity:0;transform:scale(.7)}
body[data-vista="album"] .invito .braccio.due{transform:rotate(45deg) scale(1)}
.invito.frulla .braccio.due{animation:frullo .7s linear 1}
/* Un giro solo, che si ferma sulla x. L'ultimo tratto non ruota piu':
   il segno si limita a posarsi (da un filo piu' grande alla sua misura). */
@keyframes frullo{
  0%  {transform:rotate(41deg)  scale(.92); animation-timing-function:cubic-bezier(.3,.6,.35,1)}
  78% {transform:rotate(405deg) scale(1.1); animation-timing-function:ease-out}
  100%{transform:rotate(405deg) scale(1)}     /* 405 = 45 + un giro: nessuno scatto alla fine */
}
/* fuori dal libro sta giu' con lui: sale e scende insieme alla foto */
body:not([data-vista="libro"]):not([data-vista="album"]) .invito{
  transform:translateY(calc(100vh - 2 * var(--bordo)));pointer-events:none;
}
/* sotto info e contatto si sfoca come la foto */
body[data-pannello] .invito{filter:var(--sfoca-contenuto);pointer-events:none}

/* ═══ LA GRIGLIA — come nel sito originale ═══════════════════════════ */
.griglia{
  position:absolute;inset:0;z-index:20;
  transform:translateY(100%);transition:transform var(--t),opacity .3s ease;
  opacity:0;pointer-events:none;
  overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:var(--paper) url('Background.webp') center/cover no-repeat;
  /* scorre dietro ai marchi, che hanno il loro velo; il riempimento in
     fondo serve solo perche' l'ultima fila non resti coperta */
  padding:0 4% 3.2rem;
}
.griglia::-webkit-scrollbar{display:none}
body[data-vista="griglia"] .griglia{transform:translateY(0);opacity:1;pointer-events:auto}
.griglia-int{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  grid-auto-rows:auto;gap:1rem;margin-top:6vh;align-items:center;
}
.gt{
  position:relative;overflow:hidden;cursor:cell;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:.70em;
}
.gt img{width:100%;height:auto;object-fit:contain;max-width:100%;max-height:24rem}

/* ═══ INFO / CONTATTO ═══════════════════════════════════════════════ */
.velo{
  position:absolute;inset:0;z-index:38;
  background:transparent;
  backdrop-filter:var(--sfoca-velo);-webkit-backdrop-filter:var(--sfoca-velo);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
body[data-pannello] .velo{opacity:1;pointer-events:auto}
.libro,.griglia,.album{transition:filter .3s ease, opacity .45s ease, transform var(--t)}
body[data-pannello] .libro,
body[data-pannello] .griglia,
body[data-pannello] .album{filter:var(--sfoca-contenuto)}
#schizzo,.sottotitolo{transition:opacity .4s, filter .3s ease}
body[data-pannello] #schizzo,
body[data-pannello] .sottotitolo{filter:var(--sfoca-copertina)}

/* Niente contenitore con z-index attorno a #p-info: creerebbe un contesto
   di impilamento e il mix-blend-mode non troverebbe piu' niente sotto con
   cui fondersi (il testo resterebbe bianco su carta). */
#p-info,#p-contatto{display:none;z-index:39}
body[data-pannello="info"] #p-info{display:block}
body[data-pannello="contatto"] #p-contatto{display:flex}

#p-info{
  position:absolute;top:0;left:0;right:5vw;bottom:10vh;
  max-width:87%;max-height:72vh;padding:1.4vh 0 0 1.3vw;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  color:#fff;mix-blend-mode:difference;
}
#p-info::-webkit-scrollbar{display:none}
#p-info p{
  font-family:sans-serif;font-weight:400;font-size:1.8em;line-height:normal;
  margin:0 0 .55em;cursor:text;     /* paragrafi corti, con un po' d'aria fra l'uno e l'altro */
}
#p-info .process-hint{
  position:fixed;bottom:6vh;left:0;right:0;
  text-align:center;cursor:cell;opacity:.6;transition:opacity .2s;
}
#p-info .process-hint:hover{opacity:1}
#p-info .process-hint a{color:inherit;text-decoration:none;cursor:cell}
#p-info .process-hint a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
#p-info .process-hint p{
  /* misure prese dal sito originale: MelawanRindu 1.3em = 20.8px, peso 400 */
  font-family:'MelawanRindu','Caveat',cursive;font-weight:400;
  font-size:1.3em;line-height:normal;
  letter-spacing:.04em;text-transform:lowercase;margin:0;
}

/* il contatto sta al centro e non usa il difference */
#p-contatto{
  position:absolute;inset:0;
  align-items:center;justify-content:center;
  color:var(--ink);
}
#p-contatto form{width:min(480px,80vw)}
/* 1.8em come .infotext p nell'originale: i campi ereditano da qui,
   ed e' quello che da' al form la sua forma (28.8px, non 16px) */
#p-contatto p{font-family:sans-serif;font-size:1.8em;line-height:normal;margin:0 0 .35em}
#p-contatto input,
#p-contatto textarea{
  background:transparent;border:none;border-bottom:1px solid var(--ink);
  color:var(--ink);font-family:sans-serif;font-size:inherit;
  width:100%;outline:none;padding:.3em 0;display:block;
  box-sizing:border-box;caret-color:var(--ink);
}
#p-contatto input::placeholder,
#p-contatto textarea::placeholder{color:rgba(35,31,32,.45)}
#p-contatto textarea{resize:none;min-height:4em}
#p-contatto button{
  background:transparent;border:1px solid var(--ink);color:var(--ink);
  font-family:sans-serif;font-weight:400;font-size:1em;cursor:pointer;
  padding:.3em 1.2em;margin-top:.5em;
  transition:background .2s,border-color .2s,color .2s;
}
#p-contatto button:hover,
#p-contatto button:focus-visible{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
#contactStatus{opacity:.7;font-size:.9em;margin-top:.5em}

/* ═══ I MARCHI E LA DIDASCALIA ══════════════════════════════════════ */
/* La riga in fondo ha il suo velo, con lo stesso blur del pannello info:
   quello che ci scorre dietro si sfoca e si sbianca, cosi' + 111 & INFO e
   la didascalia restano leggibili anche sopra una foto scura. */
.velo-marchi{
  position:absolute;left:0;right:0;bottom:0;z-index:45;pointer-events:none;
  /* alto quasi il doppio della fascia, cosi' la sfumatura ha spazio per
     spegnersi: niente bordo netto, la foto si perde piano nella carta */
  height:calc(var(--banda) * 1.12);
  background:linear-gradient(to top,
    rgba(247,243,237,.46) 0%,
    rgba(247,243,237,.28) 55%,
    rgba(247,243,237,0)   100%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  /* la maschera sfuma anche la sfocatura, non solo il velo di carta:
     la parte piena e' corta, cosi' la transizione e' quasi tutta sfumata */
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 20%, transparent 100%);
          mask-image:linear-gradient(to top, #000 0%, #000 20%, transparent 100%);
  /* si accende solo con la griglia aperta: nel libro sotto c'e' solo carta */
  opacity:0;transition:opacity .3s ease;
}
body[data-vista="griglia"] .velo-marchi{opacity:1}

/* Una riga sola allineata per BASELINE: i marchi in Giacomo e la didascalia
   in sans stanno cosi' sulla stessa riga di scrittura, senza aggiustare
   altezze a mano (era quello a non tornare: i due font hanno metriche diverse).
   Misure dal sito originale: marchi 32px, 15px dai bordi, didascalia 16px. */
.marchi{
  position:absolute;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:baseline;justify-content:space-between;
  padding:0 15px 0;pointer-events:none;
}
.marchi .sinistra,.marchi .destra{flex:none;display:flex;align-items:baseline}
.marchi .sinistra{gap:17px}
.marchi .destra{gap:8px}
.marchi button{
  pointer-events:auto;
  font-family:var(--num);font-weight:400;font-size:32px;line-height:1;
  color:var(--ox);transform-origin:center;transition:transform .3s,opacity .2s;
}
.marchi .destra button{color:var(--ink)}
#btnLibro{
  font-size:35.2px;
  /* Giacomo ha un solo peso: il tratto si ispessisce con un contorno dello
     stesso colore, che segue la forma disegnata a mano */
  -webkit-text-stroke:.65px currentColor;   /* a meta' fra l'originale (0) e 1.3px */
}
#btnInfo{font-size:25.6px;padding-left:12.8px}

.marchi .dida{
  position:absolute;left:0;right:0;bottom:15px;
  margin:0;padding:0 120px;
  font-family:sans-serif;font-weight:400;font-size:16px;line-height:1.2;
  color:var(--ink);text-align:center;
  opacity:1;transition:opacity .3s ease, filter .3s ease;pointer-events:none;
}
.dida .gruppo{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;
  max-width:100%;
}
.dida .testo{
  display:block;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .25s ease;
}
/* fuori dal libro la didascalia non ha senso */
body:not([data-vista="libro"]) .marchi .dida{opacity:0}
/* con info o contatto aperti si sfoca come il resto del contenuto,
   esattamente come nell'originale, dove sta dentro .container */
body[data-pannello] .marchi .dida{filter:var(--sfoca-contenuto)}
/* il + diventa x solo quando il libro e' davvero aperto */
body[data-vista="libro"] #btnLibro,
body[data-vista="album"] #btnLibro{transform:rotate(-45deg)}
/* le tre stanghette si coricano quando la griglia e' aperta */
body[data-vista="griglia"] #btnGriglia{
  transform:rotate(-90deg) scale(.8);
  /* rimpicciolito all'80% il tratto si assottiglia: un contorno dello stesso
     colore gli restituisce lo spessore che ha quando e' in piedi */
  -webkit-text-stroke:1px currentColor;
}

/* ═══ CELLULARE ══════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* su cellulare la didascalia sta su una riga sua, quindi la fascia e' piu' alta */
  :root{--banda:4.5rem}
  body{border-width:3vw}
  .numeri{font-size:1.4rem;padding-top:1.2vh}
  .lastra.big img,.lastra.medium img,.lastra.small img{max-width:100%}
  .marchi{padding:0 12px 6px}
  .marchi button{font-size:28px}
  #btnLibro{font-size:30.8px}
  .invito{font-size:38px}
  #btnInfo{font-size:22px}
  /* su schermo stretto non c'e' spazio per marchi e didascalia sulla stessa
     riga: la didascalia sale sopra, a tutta larghezza */
  .marchi .dida{padding:0 12px;bottom:2.4rem;font-size:12.5px}
  .sfoglia{display:none}
  .feed{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:3vw;row-gap:4.5vh;padding:4vh 4vw 14vh}
  .r0{grid-column:1 / 7}
  .r1{grid-column:1 / 6}
  .r2{grid-column:2 / 7;margin-top:0}
  .r3{grid-column:3 / 7}
  .r4{grid-column:1 / 5}
  .r5{grid-column:1 / 5;margin-top:0}
  .r6{grid-column:2 / 7}
  .intro{grid-column:1 / 7}
  .intro h1{font-size:clamp(42px,15vw,90px);margin-left:-3vw}
  /* su schermo stretto non c'e' margine per la verticale: tornano in riga */
  .scheda{
    grid-column:1 / 7;position:static;
    writing-mode:horizontal-tb;transform:none;
  }
  .scheda ul{flex-wrap:wrap;gap:1.2rem}
  .intro-testo{grid-column:1 / 7;padding-top:2vh}
  .respiro{grid-column:2 / 7;padding-left:0}
  .griglia{padding:0 3% 3.4rem}
  .griglia-int{grid-template-columns:repeat(auto-fill,minmax(33%,1fr));gap:.4rem;margin-top:5vh}
  .gt{margin:.3em}
  #p-info{right:2vw;bottom:10vw;max-height:70vh;padding:2vh 3vw 0 4vw}
  #p-info p,#p-contatto p{font-size:.9em}
  #p-info .process-hint{bottom:12vh}
  #schizzo{max-width:60vw;max-height:38vh}
  .sottotitolo{width:70vw;max-width:70vw}
}

@media (prefers-reduced-motion:reduce){
  .invito .segno,.invito:hover .segno,.invito:focus-visible .segno,
  .invito.frulla .braccio.due{animation:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* all'apertura diretta di un indirizzo (refresh, link ricevuto) il sito si
   presenta gia' nello stato giusto, senza rifare le salite */
body.subito *,body.subito *::before,body.subito *::after{transition:none !important}

/* Le tre superfici che scorrono portano la texture di carta a tutto schermo:
   su un livello proprio il browser le sposta senza ridisegnarle a ogni fotogramma. */
.libro,.album,.griglia{will-change:transform}

/* versione senza progetti: niente asterisco, niente album */
.senza-progetti .invito,.senza-progetti .album{display:none !important}

/* campo nascosto per i bot del form di contatto: le persone non lo vedono */
#p-contatto .trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Send spento finche' l'email non e' riconosciuta */
#p-contatto button[type="submit"]:disabled{opacity:.3;cursor:not-allowed}
#p-contatto button[type="submit"]:disabled:hover{background:transparent;color:var(--ink)}
/* la nota sotto il campo email, e la correzione proposta */
#p-contatto .nota-email{margin:-.1em 0 .6em;min-height:1.3em;font-family:sans-serif;font-size:max(14px,.42em);color:var(--graphite)}
#p-contatto .nota-email .proponi{
  border:0;padding:0;margin:0;font-size:1em;background:none;
  color:var(--ox);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;
}
#p-contatto .nota-email .proponi:hover{background:none;color:var(--ox)}