/* ============================================================
   Sito Alvaro Bühring — foglio di stile del sito pubblico.

   Le misure non sono a occhio: sono quelle rilevate sul sito attuale.
   Colonna di sinistra ancorata al bordo con 70 px di margine, menu largo
   156 px, contenuto che parte a 311 px; testo di 13 px con interlinea 27
   e paragrafi distanziati di 10; voci di menu e titoli in maiuscoletto da
   13 px con 3 px di spaziatura fra le lettere.

   La parte responsive è invece riscritta da zero. Il tema vecchio, sotto
   una certa larghezza, cambiava impianto; qui cambia solo la disposizione:
   colore, carattere e proporzioni restano quelli dal telefono al monitor.

   Il carattere è ospitato qui e non preso da Google: la CSP consente i
   font solo dalla nostra origine, e un sito svizzero non ha motivo di far
   passare da un terzo l'indirizzo IP di chi lo visita.
   ============================================================ */

@font-face {
    font-family: "Raleway";
    src: url("../fonts/raleway-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Raleway";
    src: url("../fonts/raleway-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Raleway";
    src: url("../fonts/raleway-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --fondo:        #313131;
    --fondo-cupo:   #2a2a2a;
    --testo:        #8a8a8a;
    --testo-chiaro: #b9b9b9;
    --bianco:       #ffffff;
    --filo:         #4a4a4a;
    /* Grigi più tenui del testo corrente: la parola « architetto » del
       marchio e le etichette del modulo (--tenue), la riga di chiusura del
       piè di pagina (--firma) e le barrette che la dividono. */
    --tenue:        #7d7d7d;
    --firma:        #6f6f6f;
    --firma-barra:  #565656;

    /* Impianto, dal sito attuale */
    --margine:  70px;   /* distacco dai bordi dello schermo */
    --colonna: 156px;   /* larghezza della colonna del menu */
    --stacco:   85px;   /* fra la colonna e il contenuto */
    --cima:     60px;   /* aria sopra il marchio */
    --sotto-titolo: 48px; /* fra la riga del titolo e ciò che segue */

    /* Testo */
    --corpo:      13px;
    --interlinea: 27px;
    --stacco-p:   10px; /* fra un paragrafo e il successivo */

    /* Maiuscoletto: menu, titoli di pagina */
    --minuscolo:  13px;
    --spaziatura: 3px;
    --riga-menu:  20px;
    --stacco-voce: 10px;
}

/* ------------------------------------------------------------
   Dimensione del testo — tre livelli

   Le misure qui sopra (livello 1) sono quelle rilevate sul vecchio sito.
   Il livello si sceglie dal pannello e arriva come classe sul corpo della
   pagina: cambia le misure di base, e tutto il resto — testo, menu, titoli,
   spazi fra i paragrafi — cresce insieme, così le proporzioni restano
   quelle. Il marchio no: è un segno grafico, non testo da leggere.

   Anche la colonna del menu si allarga, altrimenti « ULTIME REALIZZAZIONI »
   andrebbe a capo tre volte.
   ------------------------------------------------------------ */

body.testo-2 {
    --corpo:      15px;
    --interlinea: 30px;
    --stacco-p:   12px;
    --minuscolo:  14px;
    --riga-menu:  22px;
    --stacco-voce: 11px;
    --colonna:   172px;
}

body.testo-3 {
    --corpo:      17px;
    --interlinea: 34px;
    --stacco-p:   14px;
    --minuscolo:  15px;
    --riga-menu:  25px;
    --stacco-voce: 12px;
    --colonna:   186px;
}

/* ------------------------------------------------------------
   Tavolozza — due varianti dello stesso grigio

   Il sito vecchio scriveva il testo corrente in #8a8a8a su #313131: un
   rapporto di 3,77 a 1, sotto al 4,5 a 1 che le linee guida chiedono per
   il testo normale. La variante « contrasto » alza quel grigio a #9a9a9a
   (4,62 a 1) e con lui la parola « architetto » del marchio, che era
   ancora più tenue. Cambia solo il grigio: carattere, misure, impianto e
   il resto dei colori restano quelli.

   Si sceglie dal pannello e arriva come classe sul corpo della pagina,
   quindi si passa dall'una all'altra senza rimettere mano al codice.
   ------------------------------------------------------------ */

body.tavolozza-contrasto {
    --testo:       #9a9a9a;
    --tenue:       #9a9a9a;
    --firma:       #9a9a9a;
    --firma-barra: #9a9a9a;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--testo);
    font: 400 var(--corpo)/var(--interlinea) "Raleway", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a { color: inherit; }

/* Il fuoco da tastiera deve vedersi: su fondo scuro il contorno di sistema
   sparisce, e chi naviga con il tab si perde. */
:focus-visible {
    outline: 2px solid var(--bianco);
    outline-offset: 3px;
}

.solo-lettori {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------
   Maiuscoletto spaziato

   Una regola sola per menu e titoli di pagina. Prima erano tre blocchi
   diversi che dicevano quasi la stessa cosa, e bastava correggerne uno per
   farli divergere.
   ------------------------------------------------------------ */

.menu a,
.titolo-pagina {
    text-transform: uppercase;
    font-size: var(--minuscolo);
    font-weight: 400;
    letter-spacing: var(--spaziatura);
    line-height: var(--riga-menu);
}

/* ------------------------------------------------------------
   Impianto

   Ancorato a sinistra, non centrato: è così che sta il sito attuale, e su
   uno schermo largo la differenza si vede subito.
   ------------------------------------------------------------ */

/*
 * Due colonne e tre righe: in alto il marchio e il titolo della pagina, in
 * mezzo il menu e il contenuto, in fondo i recapiti.
 *
 * Menu e contenuto stanno nella STESSA riga della griglia, quindi partono
 * alla stessa altezza da soli — « FILOSOFIA » nel testo di Studio è
 * allineata a « HOME » nel menu, com'è nel sito attuale. Prima il titolo
 * stava dentro al contenuto e l'allineamento dipendeva da un margine
 * azzeccato a mano: bastava un titolo su due righe per perderlo, e i titoli
 * dei progetti vanno su due righe spesso.
 */
.telaio {
    display: grid;
    grid-template-columns: var(--colonna) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: var(--stacco);
    max-width: 1400px;
    min-height: 100vh;
    margin-inline: 0;
    padding: var(--cima) var(--margine) 56px;
}

/*
 * Marchio e titolo della pagina stanno sulla stessa riga della griglia e si
 * allineano sulla LINEA DI BASE, non sul bordo del riquadro: il marchio è
 * di 20 px fissi e il titolo cambia misura con l'impostazione della
 * dimensione del testo, quindi allineando i bordi il titolo si alzerebbe o
 * abbasserebbe a ogni livello. Sulla linea di base restano incolonnati
 * comunque, che è quello che si vede.
 */
.testata       { grid-column: 1; grid-row: 1; align-self: baseline; }
.titolo-pagina { grid-column: 2; grid-row: 1; min-width: 0; align-self: baseline; }
.menu          { grid-column: 1; grid-row: 2; padding-top: var(--sotto-titolo); }
.corpo         { grid-column: 2; grid-row: 2; padding-top: var(--sotto-titolo); min-width: 0; }
.piede         { grid-column: 1 / -1; grid-row: 3; padding-top: 56px; }

/* ------------------------------------------------------------
   Marchio
   ------------------------------------------------------------ */

.marchio {
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: .01em;
    white-space: nowrap;
}
.marchio-tenue { font-weight: 300; color: var(--tenue); }
.marchio-forte { font-weight: 700; color: var(--bianco); }

/* ------------------------------------------------------------
   Menu
   ------------------------------------------------------------ */

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu li + li { margin-top: var(--stacco-voce); }

.menu a {
    display: inline-block;
    text-decoration: none;
    color: var(--testo);
    transition: color .18s ease;
}
.menu a:hover,
.menu a:focus-visible,
.menu a.attivo { color: var(--bianco); }

/* Le pagine della sezione aperta si vedono sempre nel menu del telefono;
   su schermo grande solo se l'impostazione è accesa (« Menu del sito » nel
   pannello). Senza, la colonna di sinistra resta quella del sito attuale:
   sette voci e basta. */
.menu .figlie { display: none; }

.menu.sottomenu-sempre .figlie {
    display: block;
    margin-top: var(--stacco-voce);
    padding: 0 0 0 14px;
    border-left: 1px solid var(--filo);
}
.menu.sottomenu-sempre .figlie li + li { margin-top: var(--stacco-voce); }

/* ------------------------------------------------------------
   Comando della dimensione del testo

   Tre « A » di misura crescente in fondo al menu. Vale per la visita in
   corso e non lascia niente sul computer di chi guarda: nessun cookie,
   nessuna memoria: cambiando pagina si torna alla misura decisa dal
   pannello. È una comodità per chi fatica a leggere, non una preferenza da
   conservare — e conservarla avrebbe voluto dire un avviso sui cookie per
   una cosa che si rifà in un secondo.

   Senza JavaScript il comando non compare (è nascosto nell'HTML e lo
   accende lo script): tre pulsanti che non fanno niente sono peggio che
   nessun pulsante.
   ------------------------------------------------------------ */

.misura-testo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: var(--stacco);
    padding-top: 14px;
    border-top: 1px solid var(--filo);
}
.misura-testo[hidden] { display: none; }

.misura-testo button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--testo);
    font-family: inherit;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease;
}
.misura-testo button:hover,
.misura-testo button:focus-visible { color: var(--bianco); }
.misura-testo button[aria-pressed="true"] { color: var(--bianco); }

/*
 * Ogni A è grande quanto il testo che quel livello produce davvero — 13,
 * 15, 17 px, le stesse misure dei tre livelli qui sopra: si vede a colpo
 * d'occhio cosa si sta scegliendo, senza scriverci sopra « dimensione del
 * testo ».
 *
 * Misure fisse e non var(--corpo): il comando deve restare uguale a sé
 * stesso mentre il resto della pagina cambia, altrimenti le tre A
 * crescerebbero insieme al sito e non indicherebbero più niente.
 *
 * Si va per attributo e non per posizione: il primo figlio del riquadro è
 * l'etichetta per i lettori di schermo, e contando i figli le misure
 * finivano sul pulsante sbagliato.
 */
.misura-testo button[data-misura-livello="1"] { font-size: 13px; }
.misura-testo button[data-misura-livello="2"] { font-size: 15px; }
.misura-testo button[data-misura-livello="3"] { font-size: 17px; }

/* Il pulsante esiste solo nell'impianto stretto. */
.apri-menu { display: none; }

/* ------------------------------------------------------------
   Titolo della pagina
   ------------------------------------------------------------ */

.titolo-pagina { color: var(--bianco); }
.titolo-pagina::after {
    content: "";
    display: block;
    width: 92px;
    height: 2px;
    margin-top: 12px;
    background: var(--bianco);
}

.nota-bozza {
    margin: 0 0 18px;
    padding: 8px 12px;
    border-left: 2px solid var(--bianco);
    background: var(--fondo-cupo);
    color: var(--testo-chiaro);
}

/* ------------------------------------------------------------
   Blocchi del contenuto

   Nessun margine in cima: il distacco dal titolo lo dà la riga della
   griglia, uguale per il menu e per il contenuto. Il margine serve solo
   quando due blocchi si susseguono — testo dopo galleria, elenco dopo
   testo.
   ------------------------------------------------------------ */

.corpo > * + * { margin-top: 30px; }

/* ------------------------------------------------------------
   Testo
   ------------------------------------------------------------ */

.testo > *:first-child { margin-top: 0; }
.testo > *:last-child  { margin-bottom: 0; }

.testo p,
.testo ul,
.testo ol { margin: 0 0 var(--stacco-p); }

.testo h2,
.testo h3 {
    margin: 1.8em 0 .6em;
    color: var(--testo-chiaro);
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: var(--minuscolo);
}

/* ------------------------------------------------------------
   Collegamenti nel contenuto

   Una regola sola per i collegamenti dentro al testo e per gli elenchi dei
   progetti: sono la stessa cosa — qualcosa su cui si clicca dentro alla
   pagina — e devono avere lo stesso aspetto ovunque. Il menu non c'entra:
   quello ha il suo.
   ------------------------------------------------------------ */

.testo a,
.elenco-progetti a,
.elenco-pagine a {
    color: var(--testo-chiaro);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--filo);
    transition: color .18s ease, text-decoration-color .18s ease;
}
.testo a:hover,
.testo a:focus-visible,
.elenco-progetti a:hover,
.elenco-progetti a:focus-visible,
.elenco-pagine a:hover,
.elenco-pagine a:focus-visible {
    color: var(--bianco);
    text-decoration-color: var(--bianco);
}

.testo img { margin: 1.2em 0; }
.testo strong { font-weight: 700; color: var(--testo-chiaro); }
.testo hr { border: 0; border-top: 1px solid var(--filo); margin: 1.8em 0; }

/* ------------------------------------------------------------
   Galleria a scorrimento

   Riquadro di misura unica per tutta la galleria, come faceva il vecchio
   sito, che ritagliava ogni fotografia a una dimensione fissa decisa per
   ogni slider. Le proporzioni le calcola la vista sulla MEDIANA delle
   immagini: in una galleria di orizzontali il riquadro è orizzontale e la
   verticale in mezzo viene ritagliata, mentre una galleria di una sola
   immagine prende le proporzioni di quella e non perde niente.

   Il file resta intero: si nasconde ciò che esce, non si butta.
   ------------------------------------------------------------ */

.galleria { position: relative; }

.nastro {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.nastro::-webkit-scrollbar { display: none; }

.lastra {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0;
    min-width: 0;
}
.lastra picture { display: block; }

.lastra img {
    width: 100%;
    aspect-ratio: var(--rapporto, 3 / 2);
    object-fit: cover;
    background: var(--fondo-cupo);
}

.galleria,
.anteprime { max-width: 900px; }

/* Frecce: accese dallo script (nascoste in HTML). */
.scorri {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 62px;
    padding: 0;
    border: 0;
    background: rgba(20, 20, 20, .55);
    color: var(--bianco);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, opacity .18s ease;
}
.scorri:hover { background: rgba(20, 20, 20, .8); }
.scorri.indietro { left: 0; }
.scorri.avanti   { right: 0; }
.scorri[disabled] { opacity: .25; cursor: default; }

.pallini {
    display: flex;
    /* Le gallerie lunghe arrivano a venti immagini e più: su un telefono
       venti pallini non ci stanno in una riga sola. Senza « wrap » la riga
       li schiaccerebbe tutti fino a farli diventare più stretti del dito,
       che è esattamente il difetto che si voleva togliere; andando a capo
       restano della loro misura. */
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin-top: 5px;
}
/*
 * Il pallino si vede di 10 px, ma il pulsante ne misura 24: sotto a quella
 * misura il dito prende il pallino accanto, o non prende niente. La parte
 * in più è trasparente — l'occhio vede quello di prima, il pollice trova un
 * bersaglio grande abbastanza. Lo spazio fra un pallino e l'altro e lo
 * stacco dalla galleria sono stati ridotti di conseguenza, così la fila
 * resta dov'era.
 *
 * Il pallino è sempre pieno e a cambiare è solo la trasparenza: è una
 * proprietà che il browser sa animare senza ridisegnare, mentre il colore
 * del bordo lo obbligava a rifare il lavoro a ogni scorrimento.
 */
.pallino {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pallino::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bianco);
    opacity: .38;
    transition: opacity .18s ease;
}
.pallino:hover::before,
.pallino:focus-visible::before { opacity: .7; }
.pallino[aria-current="true"]::before { opacity: 1; }

/* ------------------------------------------------------------
   Anteprime
   ------------------------------------------------------------ */

/*
 * Griglia di anteprime: quante ne stanno per riga lo decide la larghezza
 * disponibile, non un numero fissato. Prima erano quattro da 130 px perché
 * la griglia era tenuta dentro a 560 px; tolto quel tetto usa tutta la
 * colonna dei contenuti, e con una misura minima più alta le anteprime
 * diventano anche più grandi: su uno schermo largo vengono cinque da ~195 px
 * invece di quattro da 130, e restringendo la finestra scendono da sole.
 *
 * Il limite vero resta il telaio (1400 px): oltre, il sito non si allarga.
 */
.anteprime {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    max-width: none;
}

.anteprima {
    display: block;
    overflow: hidden;
    background: var(--fondo-cupo);
}
.anteprima img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Le anteprime sì ritagliate: sono un indice, non la fotografia. */
    object-fit: cover;
    transition: opacity .2s ease;
}
.anteprima:hover img,
.anteprima:focus-visible img { opacity: .72; }

/* ------------------------------------------------------------
   Elenco dei progetti di una sezione
   ------------------------------------------------------------ */

.elenco-progetti,
.elenco-pagine {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 900px;
}
.elenco-progetti li,
.elenco-pagine li { margin-bottom: var(--stacco-p); }

/* L'indice delle sottopagine viene dopo il testo della pagina madre, e
   un po' d'aria lo stacca dall'ultimo paragrafo. */
.testo + .elenco-pagine { margin-top: var(--interlinea); }

/* Gli elenchi dei progetti si comportano come i collegamenti dentro al
   testo: vedi la regola unica sopra, « Collegamenti nel contenuto ». Prima
   qui erano senza sottolineatura, e la stessa cosa — un titolo su cui si
   clicca — aveva due aspetti diversi a seconda della pagina. */

/* ------------------------------------------------------------
   Video: provini e pagina singola
   ------------------------------------------------------------ */

.provini {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    max-width: 900px;
}

.provino {
    display: block;
    text-decoration: none;
    color: var(--testo);
}

.fotogramma {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--fondo-cupo);
}
.fotogramma img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s ease;
}

/* Il triangolo è disegnato con i bordi: nessun file da caricare, e resta
   nitido a qualsiasi ingrandimento. */
.play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(20, 20, 20, .55);
    transition: background .18s ease;
}
.play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}

.provino:hover .fotogramma img,
.provino:focus-visible .fotogramma img { opacity: .78; }
.provino:hover .play,
.provino:focus-visible .play { background: rgba(20, 20, 20, .82); }

.provino .nome {
    display: block;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: var(--minuscolo);
    letter-spacing: var(--spaziatura);
    line-height: var(--riga-menu);
    transition: color .18s ease;
}
.provino:hover .nome,
.provino:focus-visible .nome { color: var(--bianco); }

.filmato-solo { max-width: 900px; }
.filmato-solo video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

.ritorno { margin: 0; }
.ritorno a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--minuscolo);
    letter-spacing: var(--spaziatura);
    transition: color .18s ease;
}
.ritorno a:hover,
.ritorno a:focus-visible { color: var(--bianco); }

/* Il lettore audio è quello del browser: cambiarne l'aspetto vuol dire
   riscriverne i comandi in JavaScript, e un lettore fatto in casa è la
   prima cosa che smette di funzionare da tastiera. Si tiene il suo, alla
   larghezza della galleria sopra. */
.audio audio {
    display: block;
    width: 100%;
    max-width: 900px;
}

/* ------------------------------------------------------------
   Contatti: mappa, modulo, recapiti
   ------------------------------------------------------------ */

.mappa { max-width: 900px; }
.mappa iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    border: 0;
    background: var(--fondo-cupo);
}
.apri-mappa { margin: 8px 0 0; }
.apri-mappa a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--minuscolo);
    letter-spacing: var(--spaziatura);
}
.apri-mappa a:hover { color: var(--bianco); }

.contatti {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 40px;
    max-width: 900px;
}

.contatti h2 {
    margin: 0 0 18px;
    text-transform: uppercase;
    font-size: var(--minuscolo);
    font-weight: 400;
    letter-spacing: var(--spaziatura);
    line-height: var(--riga-menu);
    color: var(--bianco);
}
.contatti h2::after {
    content: "";
    display: block;
    width: 66px;
    height: 2px;
    margin-top: 10px;
    background: var(--bianco);
}

.contatti label {
    display: block;
    margin-bottom: 14px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--tenue);
}

.contatti input,
.contatti textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
    color: var(--testo-chiaro);
    background: var(--fondo-cupo);
    border: 1px solid var(--filo);
    border-radius: 0;
}
.contatti textarea { resize: vertical; min-height: 8em; line-height: 1.6; }
.contatti input:focus,
.contatti textarea:focus { border-color: var(--testo-chiaro); }

.contatti button {
    padding: 10px 26px;
    font: inherit;
    text-transform: uppercase;
    letter-spacing: var(--spaziatura);
    color: var(--fondo);
    background: var(--testo-chiaro);
    border: 0;
    cursor: pointer;
    transition: background .18s ease;
}
.contatti button:hover { background: var(--bianco); }

/* Il campo esca: fuori dallo schermo, non `display:none` — alcuni robot
   saltano i campi nascosti in modo evidente, e allora l'esca non prende. */
.esca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.esito { margin: 0 0 16px; padding: 9px 12px; border-left: 2px solid; }
.esito.ok     { border-color: #7fae7f; color: #a8c9a8; background: var(--fondo-cupo); }
.esito.errore { border-color: #c08a8a; color: #d3aaaa; background: var(--fondo-cupo); }


.recapiti p { margin: 0 0 var(--stacco-p); }
.recapiti a { text-decoration: none; }
.recapiti a:hover { color: var(--bianco); }

/* ------------------------------------------------------------
   Ingrandimento
   ------------------------------------------------------------ */

.lente {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(20, 20, 20, .94);
    border: 0;
    cursor: zoom-out;
}
.lente img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.lente .chiudi {
    position: absolute;
    top: 14px;
    right: 18px;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: var(--testo-chiaro);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.lente .chiudi:hover { color: var(--bianco); }

.lente .passo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 72px;
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: var(--bianco);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}
.lente .passo:hover { background: rgba(255, 255, 255, .16); }
.lente .passo.prima { left: 8px; }
.lente .passo.poi   { right: 8px; }
.lente .passo[disabled] { opacity: .2; cursor: default; }

body.con-lente { overflow: hidden; }

/* ------------------------------------------------------------
   Piè di pagina
   ------------------------------------------------------------ */

/* Alla stessa chiarezza del testo: qui ci sono l'indirizzo e il telefono
   dello studio, che sono il motivo per cui qualcuno arriva sul sito. Nel
   vecchio sito stavano nel corpo della home, in chiaro; sbiadirli qui
   sarebbe stato un peggioramento travestito da eleganza. */
.piede {
    color: var(--testo);
    letter-spacing: .02em;
}
.piede p { margin: 0; }
.piede a { text-decoration: none; }
.piede a:hover { color: var(--bianco); }

.piede .firma { margin-top: 6px; color: var(--firma); }
.piede .firma span { padding: 0 6px; color: var(--firma-barra); }

/* ------------------------------------------------------------
   Portatile stretto e tablet orizzontale
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
    :root { --margine: 44px; --stacco: 56px; }
}

/* ------------------------------------------------------------
   Impianto a una colonna
   ------------------------------------------------------------ */

@media (max-width: 860px) {
    /* --testata-alta: quanto è alta la riga marchio + pulsante. Serve al
       menu sovrapposto per partire sotto, invece che addosso al marchio. */
    :root { --margine: 24px; --cima: 28px; --testata-alta: 44px; }

    .telaio {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto 1fr auto;
    }

    .testata {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }
    .menu          { grid-column: 1; grid-row: 2; padding-top: 0; }
    .titolo-pagina { grid-column: 1; grid-row: 3; padding-top: 26px; }
    .corpo         { grid-column: 1; grid-row: 4; padding-top: 26px; }
    .piede         { grid-column: 1; grid-row: 5; padding-top: 40px; }

    /* Il pulsante appare, e il menu parte chiuso soltanto se c'è lo script
       per riaprirlo: senza JavaScript resta un elenco visibile. */
    .apri-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .tratti,
    .tratti::before,
    .tratti::after {
        display: block;
        width: 26px;
        height: 3px;
        background: var(--testo-chiaro);
        transition: transform .2s ease, opacity .2s ease;
    }
    .tratti { position: relative; }
    .tratti::before,
    .tratti::after {
        content: "";
        position: absolute;
        left: 0;
    }
    .tratti::before { top: -8px; }
    .tratti::after  { top: 8px; }

    .apri-menu[aria-expanded="true"] .tratti { background: transparent; }
    .apri-menu[aria-expanded="true"] .tratti::before { transform: translateY(8px) rotate(45deg); }
    .apri-menu[aria-expanded="true"] .tratti::after  { transform: translateY(-8px) rotate(-45deg); }

    /* Il menu parte chiuso: lo dice il CSS, non lo script. Prima era
       scritto aperto in pagina e lo chiudeva JavaScript, e fra la prima
       immagine di pagina e l'esecuzione dello script tutto il contenuto
       saltava su di duecento pixel. Senza JavaScript resta aperto: se ne
       occupa la regola nel <noscript> del layout. */
    .menu { display: none; }
    .menu.aperto { display: block; }
    .menu[hidden] { display: none; }

    .menu ul {
        padding: 20px 0 4px;
        border-bottom: 1px solid var(--filo);
    }
    .menu li + li { margin-top: 16px; }

    /*
     * Il menu si apre SOPRA la pagina, non sopra di essa spingendola in
     * basso: spostare il sito a ogni tocco è disorientante, e sotto
     * all'elenco restava visibile il titolo della pagina, che spesso è la
     * stessa parola di una voce di menu.
     *
     * Solo quando c'è lo script ad aprirlo e chiuderlo (la classe la mette
     * sito.js): senza JavaScript il menu resta un elenco in pagina, perché
     * un pannello sovrapposto che nessuno può chiudere coprirebbe il sito
     * per sempre.
     */
    body.menu-a-scomparsa .menu.aperto {
        position: fixed;
        inset: 0;
        z-index: 30;
        background: var(--fondo);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: calc(var(--cima) + var(--testata-alta) + 24px) var(--margine) 40px;
    }
    /* Solo l'elenco principale: il rientro delle sottopagine resta. */
    body.menu-a-scomparsa .menu.aperto > ul { padding: 0; border-bottom: 0; }

    /* La testata resta sopra al pannello e continua a rispondere: è lì che
       sta la croce per chiudere. */
    body.menu-a-scomparsa .testata { position: relative; z-index: 40; }

    /* Dietro al pannello la pagina non scorre. */
    body.menu-aperto { overflow: hidden; }

    /* Le pagine della sezione aperta: stesso carattere delle altre voci,
       rientrate e un po' più tenui, così si legge a colpo d'occhio che
       stanno sotto a quella sopra. */
    /* Ripetuto con la stessa specificità della regola per lo schermo grande,
       altrimenti quella — più specifica — vincerebbe anche qui dentro. */
    .menu .figlie,
    .menu.sottomenu-sempre .figlie {
        display: block;
        margin-top: 14px;
        padding: 0 0 0 18px;
        border-left: 1px solid var(--filo);
        border-bottom: 0;
    }
    .menu .figlie li + li,
    .menu.sottomenu-sempre .figlie li + li { margin-top: 14px; }
    .menu .figlie a { color: var(--testo); }
    .menu .figlie a:hover,
    .menu .figlie a:focus-visible,
    .menu .figlie a.attivo { color: var(--bianco); }

    .scorri { width: 38px; height: 54px; font-size: 26px; }
    .anteprime { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
    /* I provini dei filmati: 240 px minimi, così sul telefono ne sta uno per
       riga e l'anteprima si vede davvero. Due miniature affiancate su uno
       schermo stretto sono due francobolli. */
    .provini { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
    .contatti { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .mappa iframe { aspect-ratio: 4 / 3; }
    .play { width: 44px; height: 44px; }
    .lente { padding: 16px; }
    .lente .passo { width: 40px; height: 60px; font-size: 28px; }
}

/* Telefoni stretti: il marchio non deve andare a capo né schiacciare il
   pulsante del menu. */
@media (max-width: 380px) {
    .marchio { font-size: 17px; }
}

/* Chi ha chiesto meno animazioni non deve subire lo scorrimento morbido. */
@media (prefers-reduced-motion: reduce) {
    .nastro { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; }
}