/* ==========================================================================
   Nannini Architettura — foglio di stile unico
   Palette e caratteri vengono da 02-biglietto/DECISIONI.md: il sito e il
   biglietto sono lo stesso progetto su due supporti.
   Contrasti verificati WCAG 2.1 AA (vedi DIREZIONE.md).
   ========================================================================== */

/* ------------------------------------------------------------------ font */
/* Due file variabili, ospitati qui: nessuna chiamata a server esterni,
   quindi nessun trasferimento di IP a terzi e nessun banner cookie. */
@font-face {
  font-family: 'Archivo';
  src: url('font/archivo-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('font/inter-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- valori */
:root {
  /* Tema scuro, per tutti (deciso il 15/09/2026: il sito e' sempre stato
     guardato e approvato cosi', ed e' coerente col biglietto a due facce scure).
     Contrasti su #171613: titolo 13,6:1 · testo 8,9:1 · tenue 4,7:1 · accento 6,0:1 */
  --carta:      #171613;
  --carta-alta: #1F1E1A;
  --titolo:     #EFEEE7;
  --testo:      #C3C2B8;
  --tenue:      #8B8A80;
  --rame:       #B0703F;   /* l'accento del biglietto: righe, filetti, claim, marcatori */
  --accento:    #C98554;   /* lo stesso rame schiarito, per i COLLEGAMENTI: 6,0:1 */
  --filetto:    #38372F;
  --filetto-fine:#2A2924;
  --scuro:      #0E0D0B;
  --su-scuro:   #EDECE4;
  --su-scuro-tenue: #A5A399;

  --colonna: 40rem;         /* misura di lettura */
  --pagina:  72rem;
  --margine: clamp(1.25rem, 5vw, 4.5rem);
  --rail:    9.5rem;        /* colonna delle etichette, come il cartiglio */

  --salto:   clamp(2.9rem, 6.5vw, 5.4rem);
  --curva:   cubic-bezier(.22,.61,.36,1);
}


/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Archivo', 'Inter', sans-serif;
  color: var(--titolo);
  font-weight: 400;
  letter-spacing: -.017em;
  line-height: 1.14;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem); font-weight: 300; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.24rem); font-weight: 600; letter-spacing: -.008em; }

p, li { max-width: var(--colonna); }
p { margin: 0 0 1.15em; }
strong { color: var(--titolo); font-weight: 600; }

a { color: var(--accento); text-decoration: none;
    text-decoration-line: underline; text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: var(--filetto);                    /* ricaduta */
    text-decoration-color: color-mix(in srgb, var(--accento) 40%, transparent);
    transition: text-decoration-color .18s var(--curva), color .18s var(--curva); }
a:hover { text-decoration-color: var(--accento); }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; border-radius: 1px; }

/* numeri sempre allineati in colonna, come sul biglietto */
.cifre, table, time, .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ------------------------------------------------------- impaginazione */
.pagina { max-width: var(--pagina); margin-inline: auto; padding-inline: var(--margine); }

.rail { display: grid; gap: 0 2.5rem; grid-template-columns: minmax(0, 1fr); } /* minmax(0): il rullino non deve allargare la colonna */
@media (min-width: 60rem) {
  .rail { grid-template-columns: var(--rail) minmax(0, 1fr); }
}

/* etichetta di sezione: stesso registro dei cartigli delle tavole */
.eti {
  font-family: 'Inter', sans-serif; font-size: .69rem; font-weight: 600; letter-spacing: .155em;
  text-transform: uppercase; line-height: 1.4; text-wrap: initial;
  color: var(--tenue); margin: 0 0 1rem; display: block;
}   /* vale anche quando l'etichetta e' un <h2>: e' il nome della sezione, per chi
       naviga per titoli, ma si veste da cartiglio */
@media (min-width: 60rem) { .eti { padding-top: .45rem; margin-bottom: 0; } }

.sezione { padding-block: var(--salto); border-top: 1px solid var(--filetto-fine); scroll-margin-top: 3.5rem; /* la testata fissa non copre il titolo */ }
.sezione:first-of-type { border-top: 0; }

/* ----------------------------------------------------------- logotipo */
/* parola unica, tutto minuscolo, 600 + 300 — come da DECISIONI.md */
.logo {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1.06rem;
  letter-spacing: -.014em; color: var(--titolo); text-decoration: none;
  display: inline-block; line-height: 1;
}
.logo span { font-weight: 300; color: #C9C7BE; }
.logo:hover { text-decoration: none; color: var(--titolo); }

/* ------------------------------------------------------------- testata */
.testata {
  position: sticky; top: 0; z-index: 20;
  background: var(--carta);                                   /* ricaduta */
  background: color-mix(in srgb, var(--carta) 88%, transparent);
  backdrop-filter: saturate(150%) blur(9px);
  border-bottom: 1px solid var(--filetto-fine);
}
.testata > div {
  max-width: var(--pagina); margin-inline: auto; padding: .85rem var(--margine);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.menu { display: flex; gap: clamp(.9rem, 2.4vw, 1.9rem); align-items: center;
        font-size: .82rem; letter-spacing: .01em; }
.menu a { color: var(--testo); text-decoration: none; padding-block: .3rem; }
.menu a:hover { color: var(--titolo); }
.menu a[aria-current="page"] { color: var(--titolo); font-weight: 600;
        box-shadow: inset 0 -2px 0 var(--rame); }

/* testo per i lettori di schermo e i motori, non per l'occhio */
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.salta {
  position: absolute; left: -9999px; top: 0;
  background: var(--scuro); color: var(--su-scuro); padding: .7rem 1rem; z-index: 50;
}
.salta:focus { left: .5rem; top: .5rem; }

/* -------------------------------------------------------------- motivo */
/* Il retino della facciata forata di Stefano, ricostruito da fotografia.
   Usato come maschera: un solo file serve sia il tema chiaro sia lo scuro. */
.motivo {
  --motivo-colore: var(--su-scuro);
  --motivo-opacita: .30;
  position: absolute; inset: 0; pointer-events: none;
  background-color: var(--motivo-colore);
  opacity: var(--motivo-opacita);
  -webkit-mask-image: url('img/motivo.svg?v=719fb4cc');  mask-image: url('img/motivo.svg?v=719fb4cc');
  -webkit-mask-size: cover;  mask-size: cover;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
}
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .motivo { background-color: transparent; background-image: url('img/motivo.svg?v=719fb4cc');
            background-size: cover; background-position: center; opacity: .22; }
}

/* --------------------------------------------------------------- testa */
.testa { position: relative; overflow: hidden; color: var(--su-scuro);
         /* in fondo il campo scuro si scioglie nel colore della pagina: niente gradino
            fra la testa e la prima sezione, su ogni pagina e su ogni schermo */
         background: linear-gradient(to top, var(--carta) 0, var(--scuro) 4rem);
         display: flex; flex-direction: column; justify-content: flex-end; }
/* il retino occupa la parte alta e sfuma nel fondo; il testo sta sotto, su campo
   pieno. E' la composizione della pagina d'attesa, e la regola del §5.2: mai testo
   sopra il motivo nudo — il motivo dietro, le scritte davanti */
.testa .motivo { inset: 0 0 auto 0; height: 64%; --motivo-opacita: .44; }
.testa::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 74%; pointer-events: none;
  background: linear-gradient(to top, var(--carta) 0, rgba(23,22,19,0) 4rem),   /* in fondo si scioglie nel colore della pagina: niente gradino */
              linear-gradient(to top, var(--scuro) 34%, rgba(33,31,27,.88) 58%,
                              rgba(33,31,27,.45) 80%, transparent 100%);
}
.testa > .pagina { position: relative; z-index: 2; width: 100%;
                   padding-block: clamp(7rem, 22vw, 15rem) clamp(2.5rem, 7vw, 4.5rem); }
.testa.alta { min-height: 64vh; min-height: 64svh; }   /* vh: ripiego per chi non conosce svh */
.testa.alta > .pagina { padding-block: clamp(3rem, 10vw, 6rem) clamp(2.4rem, 7vw, 4rem); }
@media (max-width: 34rem) {
  .testa .motivo { height: 46%; }
  .testa::after { height: 70%; }
}
.testa h1 { color: var(--su-scuro); }
.testa p { color: var(--su-scuro-tenue); }

.marchio {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: clamp(2.1rem, 1rem + 5.2vw, 4.6rem);
  letter-spacing: -.028em; line-height: 1; color: var(--su-scuro);
  margin: 0 0 1.1rem;
}
.marchio span { font-weight: 300; color: #C9C7BE; }   /* regole-uso §2: su scuro la seconda metà scende di tono */

/* Il blocco marchio: logotipo + claim. Il claim (regole-uso §4, chiuso il 29/08)
   e' EXPERIENCED ARCHITECTURE in Archivo 600, ottone, e deve cominciare e finire
   dove comincia e finisce il logotipo. Sullo schermo il corpo varia con la
   finestra, quindi la spaziatura non puo' essere un numero: le lettere sono
   distribuite con flex dentro un contenitore largo quanto il logotipo. */
.blocco-marchio { display: inline-flex; flex-direction: column; align-items: stretch;
                  font-size: clamp(2.1rem, 1rem + 5.2vw, 4.6rem); }
.blocco-marchio .marchio { font-size: 1em; margin-bottom: .32em; }
.claim {
  font-family: 'Archivo', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: .449em;            /* lo stesso rapporto del biglietto: 2,27 mm su 5,05 */
  color: var(--rame);           /* e lo stesso colore */
  margin: 0 0 2.4rem; line-height: 1;
  display: flex; justify-content: space-between;
}
.testa .claim { color: var(--rame); }
/* due direzioni sotto la presentazione, non un pulsante: chi arriva dal biglietto
   vuole vedere i lavori o parlare; il telefono resta piu' giu', per scelta */
.testa .azioni { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 1.6rem; }
.testa .azioni a { color: var(--su-scuro); font-size: .95rem; text-decoration: none;
                   border-bottom: 1px solid var(--rame); padding-bottom: .15rem; }
.testa .azioni a:hover { border-bottom-color: var(--su-scuro); }        /* vince su «.testa p», che lo faceva grigio */
.testa .sopratitolo { color: var(--rame); }
.claim > span[aria-hidden] { display: contents; }   /* le lettere restano figlie del flex */
.claim i { font-style: normal; }
.claim i.spazio { width: .55em; }

/* etichetta piccola sopra ai titoli delle pagine interne: stessa voce, altro ruolo */
.sopratitolo {
  font-size: .72rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--rame); margin: 0 0 1.4rem;
}
.testa .occhiello { max-width: 34rem; font-size: clamp(1.02rem, .95rem + .45vw, 1.22rem);
                    color: var(--su-scuro); line-height: 1.55; }

/* fascia sottile del motivo, per separare senza pesare */
.fascia { position: relative; height: 4.5rem; overflow: hidden; background: var(--scuro); }
.fascia .motivo { inset: 0; height: auto; --motivo-opacita: .34; }

/* ------------------------------------------------------------- elenchi */
.voci { list-style: none; margin: 0; padding: 0; }
.voci > li { padding-block: 1.6rem; border-top: 1px solid var(--filetto-fine); max-width: none; }
.voci > li:first-child { border-top: 0; padding-top: 0; }
.voci h3 { margin-bottom: .3rem; }
.voci p { margin: 0; color: var(--tenue); }

/* numeri di prova: fatti verificabili, la forma piu' sicura secondo il
   Codice Deontologico. Mai claim comparativi. */
.numeri { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
          margin: 0; padding: 0; }
.numeri > div { border-top: 2px solid var(--filetto-fine); padding-top: .85rem; position: relative; }
/* la riga in rame e' un elemento a se', cosi' puo' riempirsi da sinistra.
   Senza script e' gia' piena: lo script la svuota prima e la riempie all'ingresso. */
.numeri > div::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
                        background: var(--rame); transform-origin: left; transform: scaleX(1); }
.numeri > div.pronto::before { transform: scaleX(0); }
.numeri > div.pronto.attivo::before { transform: scaleX(1); transition: transform 1.5s cubic-bezier(.22,.61,.36,1); }
.n { font-variant-numeric: tabular-nums; }
.numeri dt { font-family: 'Archivo', sans-serif; font-weight: 300;
             font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem); line-height: 1; white-space: nowrap;
             color: var(--titolo); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.numeri dd { margin: .45rem 0 0; font-size: .88rem; color: var(--tenue); line-height: 1.45; }

/* --------------------------------------------------------- cronologia */
.tappa { display: grid; gap: .4rem 2.5rem; grid-template-columns: 1fr;
         padding-block: clamp(2rem, 5vw, 3.2rem); border-top: 1px solid var(--filetto-fine); }
/* anche il primo capitolo ha il filetto sopra: stacca la cronologia dall'introduzione */
@media (min-width: 60rem) { .tappa { grid-template-columns: var(--rail) minmax(0, 1fr); } }
.tappa .anno {
  font-family: 'Archivo', sans-serif; font-weight: 300; font-size: 1.6rem; line-height: 1;
  color: var(--titolo); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  padding-top: .1rem;
}
.tappa .anno small { display: block; font-size: .69rem; font-family: 'Inter', sans-serif;
                     font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
                     color: var(--tenue); margin-top: .45rem; }

/* ------------------------------------------------------------ contatti */
.recapiti { display: grid; gap: 1.6rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
            margin: 0; padding: 0; }
.recapiti dt { font-size: .69rem; font-weight: 600; letter-spacing: .155em; text-transform: uppercase;
               color: var(--tenue); margin-bottom: .3rem; }
.recapiti dd { margin: 0; font-size: 1.02rem; color: var(--titolo); }
.recapiti a { color: var(--titolo); text-decoration-color: var(--filetto); }
.recapiti a:hover { text-decoration-color: var(--accento); }

/* il telefono e' il vero pulsante di questo sito: chi cerca un architetto chiama */
.chiama {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: 'Archivo', sans-serif; font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); letter-spacing: -.015em;
  color: var(--titolo); text-decoration: none; font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--rame); padding-bottom: .2rem;
}
.chiama:hover { color: var(--titolo); text-decoration: none; border-bottom-color: var(--accento); }

/* --------------------------------------------------------------- piede */
.piede { background: var(--carta-alta); border-top: 1px solid var(--filetto);
         padding-block: clamp(2.5rem, 6vw, 4rem) 2.5rem;
         font-size: .82rem; line-height: 1.6; color: var(--tenue); }
.piede a { color: var(--tenue); text-decoration-color: var(--filetto); }
.piede a:hover { color: var(--titolo); }
.piede .blocchi { display: grid; gap: 2rem 3rem;
                  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.piede h2 { font-size: .69rem; font-family: 'Inter', sans-serif; font-weight: 600;
            letter-spacing: .155em; text-transform: uppercase; color: var(--tenue);
            margin: 0 0 .7rem; }
.piede p { max-width: 26rem; margin: 0 0 .7rem; }
.piede .albo { color: var(--testo); }
.piede .legale { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--filetto-fine);
                 display: flex; flex-wrap: wrap; gap: .8rem 2.5rem; align-items: baseline;
                 justify-content: space-between; font-size: .76rem; }
.piede .legale p:first-child { margin: 0; flex: 1 1 26rem; max-width: 46rem; }
.piede .legale p:last-child  { margin: 0; flex: 0 0 auto; white-space: nowrap; }

/* --------------------------------------------------- dato non ancora noto */
/* Segno volutamente visibile: nessuna pagina con un buco aperto puo' finire
   online per distrazione. strumenti/controlla.py li conta e blocca la messa
   in linea finche' ce n'e' anche uno solo. */
.ph {
  font-style: normal; color: var(--accento);
  border-bottom: 1px dashed var(--rame);
  background: #EFE6D4;
  background: color-mix(in srgb, var(--rame) 12%, transparent);
  padding: 0 .22em; border-radius: 1px; white-space: nowrap;
}
.piede .ph, .recapiti .ph { font-size: inherit; }

/* ------------------------------------------------------------- utilita' */
.occhiello { font-size: 1.1rem; color: var(--testo); }
.tenue { color: var(--tenue); }
.avanti { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500;
          font-size: .88rem; letter-spacing: .01em; }
.avanti::after { content: '→'; transition: transform .2s var(--curva); }
.avanti:hover::after { transform: translateX(3px); }
.stretto { max-width: var(--colonna); }
hr { border: 0; border-top: 1px solid var(--filetto-fine); margin-block: var(--salto); }

/* comparsa misurata: un solo movimento, all'apertura della pagina */
@media (prefers-reduced-motion: no-preference) {
  .sale { animation: sale .7s var(--curva) both; }
  .sale:nth-child(2) { animation-delay: .07s; }
  .sale:nth-child(3) { animation-delay: .14s; }
  @keyframes sale { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

@media print {
  .testata, .fascia, .motivo, .salta { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ---------------------------------------------------- spaziature d'uso */
/* Classi al posto degli attributi style="": cosi' la Content-Security-Policy
   puo' vietare del tutto lo stile in linea (style-src 'self', senza
   'unsafe-inline'), che e' una delle difese piu' efficaci e piu' a buon
   mercato contro l'iniezione di contenuti. */
.sp-s  { margin-top: 1.2rem; }
.sp-m  { margin-top: 1.8rem; }
.sp-l  { margin-top: 2.2rem; }
.sotto-s { margin-bottom: 1.6rem; }
/* dentro la colonna stretta della cronologia i numeri vanno rimpiccioliti,
   altrimenti «20.000 m²» va a capo e la riga di prova si spezza */
.numeri.dentro { margin-block: 1.8rem; gap: 1.6rem 2rem;
                 grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.numeri.dentro dt { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.95rem); }
.numeri.dentro dd { font-size: .82rem; }
.indirizzo { font-size: 1.15rem; color: var(--titolo); line-height: 1.5; }
.minuto { font-size: .86rem; }
.sezione.apertura { padding-top: clamp(3rem, 8vw, 5rem); }
.titolo-documento { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
.documento h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-weight: 600;
                margin-top: 2.4rem; }
.documento ul { padding-left: 1.15rem; }
.documento li { margin-bottom: .5rem; }

/* ------------------------------------------------------------- figure */
/* Le immagini della pagina studio: opere pubbliche e disegni dello studio.
   Didascalia nel registro delle etichette, mai cornici, mai ombre. */
.figura { margin: 1.8rem 0 2rem; max-width: var(--colonna); }
.figura img { display: block; width: 100%; height: auto; background: var(--filetto-fine);
              box-shadow: 0 0 0 1px var(--filetto-fine); }   /* un filo: lo schizzo su carta chiara
                                                                  altrimenti si fonde con la pagina */
.figura figcaption { margin-top: .7rem; font-size: .8rem; line-height: 1.5; color: var(--tenue); }
/* il percorso in quattro passi: quattro tessere con il filetto in rame, come i numeri */
.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem 2rem;
         grid-template-columns: repeat(2, 1fr); counter-reset: passo; }
@media (min-width: 52rem) { .passi { grid-template-columns: repeat(4, 1fr); } }
.passi li { border-top: 2px solid var(--filetto-fine); padding-top: .8rem; counter-increment: passo; position: relative; }
/* il filetto in rame si riempie da sinistra, un passo dopo l'altro: e' una sequenza.
   Senza script resta pieno (stato di base), come i numeri della home. */
.passi li::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
                   background: var(--rame); transform-origin: left; }   /* ::before e' il numero */
.passi li.pronto::after { transform: scaleX(0); }
.passi li.pronto.attivo::after { transform: scaleX(1); transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.passi li:nth-child(2).attivo::after { transition-delay: .35s; }
.passi li:nth-child(3).attivo::after { transition-delay: .7s; }
.passi li:nth-child(4).attivo::after { transition-delay: 1.05s; }
.passi li::before { content: counter(passo); display: block; font-family: 'Inter', sans-serif;
                    font-size: .68rem; letter-spacing: .12em; color: var(--tenue); margin-bottom: .5rem; }
.passi strong { display: block; font-weight: 600; color: var(--titolo); margin-bottom: .3rem; }
.passi span { font-size: .9rem; color: var(--tenue); }
/* una foto verticale da sola non deve riempire la colonna: e' un ritratto, non un manifesto */
.figura.ritratto { max-width: min(22rem, 100%); }
.figura.doppia { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* in coppia le due immagini hanno la stessa misura: stesso riquadro, ritaglio al vivo */
.figura.doppia img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.figura.doppia.quadra img { aspect-ratio: 1 / 1; }
@media (min-width: 40rem) {
  .figura.doppia { grid-template-columns: 1fr 1fr; align-items: start; }
  .figura.doppia figcaption { grid-column: 1 / -1; }
}
.figura.larga { max-width: none; }

/* citazione lunga, in evidenza: Archivo 300, senza virgolette grafiche */
.citazione { max-width: var(--colonna); margin: 2.2rem 0; padding-left: 1.4rem;
             border-left: 2px solid var(--rame); }
.citazione p { font-family: 'Archivo', sans-serif; font-weight: 300;
               font-size: clamp(1.15rem, 1.05rem + .6vw, 1.45rem); line-height: 1.4;
               color: var(--titolo); letter-spacing: -.01em; }
.citazione p:last-child { margin-bottom: 0; }

/* firma in calce al racconto */
/* la firma in calce alla lettera: come il logotipo, leggero il nome e pieno il cognome,
   un filetto in rame sopra come sulla carta intestata, luogo e anno in etichetta */
.firma { margin-top: 3.2rem; padding-top: 1.1rem; width: max-content; min-width: 13rem;
         border-top: 2px solid var(--rame);
         font-family: 'Archivo', sans-serif; font-weight: 300; font-size: 1.6rem;
         letter-spacing: -.02em; line-height: 1.1; color: var(--titolo); }
.firma b { font-weight: 600; }
.firma small { display: block; font-family: 'Inter', sans-serif; font-size: .68rem;
               letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
               color: var(--tenue); margin-top: .55rem; }

/* le due voci di edilizia dentro alla cronologia: due colonne che respirano */
.due { display: grid; gap: 1.6rem 2.5rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 48rem) { .due { grid-template-columns: 1fr 1fr; } }
.due h3 { margin-bottom: .4rem; }
.due p { margin-bottom: .6rem; }

/* l'immagine in evidenza della home, con il rimando alla pagina studio */
.vetrina { display: grid; gap: 2rem 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) { .vetrina { grid-template-columns: 5fr 6fr; } }
.vetrina .figura { margin: 0; max-width: none; }

/* Pagine interne: la testa e' piu' bassa della home, quindi il retino in
   percentuale finiva sotto al titolo (regole-uso §5.2: mai testo sul motivo
   nudo). Qui il retino ha un'altezza fissa e sfuma prima che cominci il testo. */
.testa:not(.alta) .motivo { height: clamp(12rem, 32vw, 20rem); --motivo-opacita: .42; }
.testa:not(.alta)::after {
  inset: 0 0 auto 0; height: clamp(12rem, 32vw, 20rem);
  background: linear-gradient(to top, var(--scuro) 0%, rgba(33,31,27,.9) 26%,
                              rgba(33,31,27,.45) 62%, transparent 100%);
}
.testa:not(.alta) > .pagina { padding-top: clamp(11.5rem, 31vw, 19rem); }
@media (max-width: 34rem) {
  .testa:not(.alta) .motivo, .testa:not(.alta)::after { height: clamp(9rem, 44vw, 12rem); }
  .testa:not(.alta) > .pagina { padding-top: clamp(9.5rem, 46vw, 12.5rem); }
}

/* chi risponde a quel numero, sopra al numero grande */
.chi { display: block; margin-bottom: .45rem; }

/* il numero nella testa: chi arriva dal biglietto vuole salvarlo, non cercarlo */
.testa .chiama { color: var(--su-scuro); border-bottom-color: var(--rame); }
.testa .chiama:hover { color: var(--su-scuro); border-bottom-color: var(--su-scuro); }
.testa .chi { color: var(--su-scuro-tenue); }
.testa .recapito { margin-top: 1.9rem; }

/* home su telefono: con la testa piu' bassa il claim finiva sui punti.
   Il retino si accorcia e la sfumatura arriva prima. */
@media (max-width: 34rem) {
  .testa.alta .motivo { height: 38%; }
  .testa.alta::after { height: 62%; }
  .testa.alta > .pagina { padding-top: clamp(9rem, 44vw, 12rem); }
}

/* Su telefono il motivo orizzontale in «cover» mostrava una striscia ingrandita:
   punti enormi e alberi tagliati. Qui si usa un ritaglio verticale della stessa
   facciata, ridisegnato al passo giusto per uno schermo stretto (regole-uso §5.3). */
@media (max-width: 34rem) {
  .testa .motivo {
    -webkit-mask-image: url('img/motivo-verticale.svg?v=cc66be50');  mask-image: url('img/motivo-verticale.svg?v=cc66be50');
    -webkit-mask-position: center top;  mask-position: center top;
  }
}

/* Telefono: la barra degli indirizzi che si ritira cambia l'altezza dello schermo,
   e una testa dimensionata in percentuale dello schermo si ricalcola a ogni
   scorrimento — il retino «respira» su e giù. Qui la testa e la fascia del motivo
   hanno misure fisse: niente dipende dallo schermo, niente si muove. */
@media (max-width: 34rem) {
  .testa.alta { min-height: 0; }
  .testa.alta .motivo, .testa.alta::after { height: 15rem; }
  .testa.alta::after {   /* ancorato in basso: porta con se' anche lo scioglimento nel colore della pagina */
    background: linear-gradient(to top, var(--carta) 0, rgba(23,22,19,0) 4rem),
                linear-gradient(to top, var(--scuro) 0%, rgba(33,31,27,.9) 28%,
                                rgba(33,31,27,.45) 64%, transparent 100%);
  }
  .testa.alta > .pagina { padding-top: 13.5rem; padding-bottom: 3rem; }
}

/* titoli di terzo livello che nella pagina hanno il peso visivo di un secondo:
   la gerarchia semantica segue le etichette di sezione, quella visiva no */
h3.come-h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 400; letter-spacing: -.017em; }

/* ==================================================================
   MOVIMENTO — due gesti, tutti in CSS, nessuno script.
   Chi ha «riduci movimento» attivo vede lo stato finale e basta:
   la regola globale in cima azzera le durate.
   ================================================================== */

/* 1. All'apertura il retino si compone: una tenda scura scivola via da
      sinistra e i fori appaiono come se la lamiera venisse illuminata di
      taglio. Sta fra il motivo e il testo, quindi il testo non ne risente. */
.testa::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* opaca in alto, trasparente al bordo inferiore: salendo scopre il retino dal
     basso, come un albero che cresce — il tronco sta in fondo alla fascia */
  background: linear-gradient(to top, transparent 0%, var(--scuro) 38%);
  animation: sipario 1.2s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes sipario {
  from { transform: translateY(6%); }
  to   { transform: translateY(-125%); }
}
/* il motivo stesso sale di tono mentre la tenda passa */
.testa .motivo { animation: affiora 1s ease-out both; }
@keyframes affiora {
  from { opacity: 0; }
  to   { opacity: var(--motivo-opacita); }
}
/* il testo entra dopo, non insieme */
.testa .sale { animation-delay: .25s; }
.testa .sale:nth-child(2) { animation-delay: .33s; }
.testa .sale:nth-child(3) { animation-delay: .41s; }
.testa .blocco-marchio .sale:nth-child(2) { animation-delay: .36s; }

/* 2. Scorrendo, foto e numeri affiorano quando entrano nello schermo.
      Legato allo scorrimento, non a un timer; solo dove il browser lo sa
      fare da solo. Altrove: fermi, e va bene cosi'. */
/* Ogni blocco affiora entrando nello schermo, con la stessa lingua della hero.
   Lo script segna «affiora» solo ai blocchi sotto la piega e «visto» quando entrano:
   senza script, o con «riduci movimento», tutto e' fermo e visibile. */
@media (prefers-reduced-motion: no-preference) {
  .affiora { opacity: 0; transform: translateY(14px); }
  .affiora.visto { opacity: 1; transform: none;
                   transition: opacity .7s ease-out, transform .7s var(--curva); }
}

/* 3. Il numero di telefono: la riga in rame si allunga sotto al dito */
.chiama { position: relative; border-bottom: 0; }
.chiama::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.2rem; height: 2px;
  background: var(--rame); transform-origin: left; transition: transform .35s var(--curva);
}
.chiama:hover::after, .chiama:focus-visible::after { transform: scaleX(1.06); }
.testa .chiama { border-bottom: 0; }



/* ==================================================================
   IL RULLINO — una striscia di lavori che si scorre in orizzontale.
   L'idea e' di Stefano; il costume Kodak no: qui i fori del rullino
   sono i punti della facciata, e nel margine c'e' il luogo dell'opera.
   ================================================================== */
.rullino {
  --foro: 7px; --passo: 15px;
  position: relative; margin-inline: calc(-1 * var(--margine));
  background: var(--carta-alta);
  overflow-x: auto; overflow-y: hidden;   /* niente snap: la striscia resta dove la lasci */
  scrollbar-width: none;                 /* si afferra e si trascina, la barra non serve */
  -webkit-overflow-scrolling: touch;
}
/* i fori stanno sulla pellicola, non sul contenitore: scorrono con le foto.
   Lo script regola lo spazio fra i fotogrammi perche' un giro sia un multiplo
   esatto del passo dei fori, cosi' l'anello non li fa saltare. */
.pellicola { list-style: none; margin: 0; padding: 1.6rem var(--margine);
             display: flex; gap: 1.1rem; width: max-content;
             background-image:
               radial-gradient(circle at center, var(--carta) calc(var(--foro)/2), transparent calc(var(--foro)/2 + .5px)),
               radial-gradient(circle at center, var(--carta) calc(var(--foro)/2), transparent calc(var(--foro)/2 + .5px));
             background-size: var(--passo) var(--passo);
             background-position: 0 .35rem, 0 calc(100% - .35rem);
             background-repeat: repeat-x; }
.fotogramma { max-width: none; flex: 0 0 auto; }
.fotogramma picture { display: block; }
.fotogramma img { display: block; height: clamp(11rem, 26vw, 17rem); width: auto;
                  box-shadow: 0 0 0 1px var(--filetto-fine); }
.fotogramma .margine { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
                       color: var(--tenue); margin-bottom: .5rem; }
.fotogramma .dida { display: block; font-size: .8rem; color: var(--tenue); margin-top: .55rem; max-width: 22rem; }
.fotogramma .dida strong { color: var(--titolo); font-weight: 600; }
/* entrando nello schermo i fotogrammi arrivano uno dopo l'altro, da destra, come
   una pellicola che avanza; il ritardo di ciascuno lo mette lo script in base alla posizione */
@media (prefers-reduced-motion: no-preference) {
  .rullino.pronto .fotogramma { opacity: 0; transform: translateX(28px); }
  .rullino.pronto.attivo .fotogramma { opacity: 1; transform: none;
                                       transition: opacity .55s ease-out, transform .7s var(--curva); }
}
/* si afferra: la mano dice che si trascina */
.rullino::-webkit-scrollbar { display: none; }
.rullino.afferrabile { cursor: grab; user-select: none; -webkit-user-select: none; }
.rullino.trascino { cursor: grabbing; }
.rullino.trascino img { pointer-events: none; }
/* i bordi sfumano: si capisce che la striscia continua */
@supports (mask-image: linear-gradient(#000, #000)) {
  .rullino { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--margine), #000 calc(100% - var(--margine)), transparent);
             mask-image: linear-gradient(to right, transparent, #000 var(--margine), #000 calc(100% - var(--margine)), transparent); }
}