/*
 * whiteness.ch — il sito pubblico.
 *
 * Un foglio solo, scritto dal telefono in su. Il libro è in bianco e nero e
 * le fotografie sono la cosa più scura della pagina: tutto il resto sta
 * indietro e lascia spazio. I titoli sono graziati, il testo lineare.
 *
 * I caratteri stanno nel repo — il CSP non permette i CDN — e si caricano
 * con font-display: swap, così il testo si legge subito anche prima che
 * arrivino.
 */

/* ------------------------------------------------------------ caratteri */

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/source-serif-4-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-400-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext-400-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------------------------------------- misure */

:root {
    /* I colori sono quelli del vecchio sito, letti dagli shortcode di Divi:
       le sezioni si alternavano fra #FFFFFF e #fafafa, e lo slider del libro
       stava su #AFAFAF. */
    --inchiostro: #141414;
    --carta: #ffffff;
    --tenue: #6b6b6b;
    --filo: #e4e4e4;
    --velo: #fafafa;
    --grigio: #afafaf;
    --grigio-scuro: #9d9d9d;

    --graziato: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --lineare: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    /* La colonna del testo e quella larga per le fotografie. */
    --colonna: 38rem;
    --largo: 76rem;
    --margine: 1.25rem;

    /* Il ritmo verticale: un valore solo, da cui scendono gli altri. */
    --passo: 1.5rem;
}

@media (min-width: 45rem) {
    :root { --margine: 2.5rem; --passo: 1.75rem; }
}

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

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--carta);
    color: var(--inchiostro);
    font-family: var(--lineare);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------- tipografia */

h1, h2, h3, h4 {
    font-family: var(--graziato);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p, ul, ol, blockquote, figure, table, pre { margin: 0 0 var(--passo); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

strong, b { font-weight: 600; }

blockquote {
    font-family: var(--graziato);
    font-size: 1.2rem;
    line-height: 1.45;
    padding-left: var(--passo);
    border-left: 1px solid var(--filo);
    color: var(--tenue);
}

ul, ol { padding-left: 1.2rem; }
li { margin-bottom: 0.3rem; }

hr { border: 0; border-top: 1px solid var(--filo); margin: calc(var(--passo) * 2) 0; }

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { border-bottom: 1px solid var(--filo); padding: 0.5rem 0.6rem; text-align: left; }
th { font-weight: 600; }

pre { overflow-x: auto; background: var(--velo); padding: var(--passo); font-size: 0.9rem; }

/* Maiuscoletto spaziato: le etichette che non devono gridare. */
.occhiello {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tenue);
    font-weight: 600;
    margin: 0 0 0.6rem;
}

/* ------------------------------------------------------------- impianto */

.dentro {
    width: 100%;
    max-width: var(--colonna);
    margin-inline: auto;
    padding-inline: var(--margine);
}
.dentro-largo {
    width: 100%;
    max-width: var(--largo);
    margin-inline: auto;
    padding-inline: var(--margine);
}

/* Il salto al contenuto, per chi naviga da tastiera. */
.salta {
    position: absolute; left: -9999px;
    background: var(--inchiostro); color: var(--carta);
    padding: 0.6rem 1rem; z-index: 100;
}
.salta:focus { left: var(--margine); top: 0.5rem; }

:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; }

/* -------------------------------------------------------------- testata */

.testata {
    position: sticky; top: 0; z-index: 50;
    background: var(--carta);
    border-bottom: 1px solid var(--filo);
}

.testata-dentro {
    display: flex; align-items: center; gap: var(--margine);
    min-height: 3.75rem;
}

.marchio {
    font-family: var(--graziato);
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    margin-right: auto;
}
.marchio span { color: var(--tenue); }

.menu { display: none; gap: 1.35rem; font-size: 0.9rem; }
.menu a { text-decoration: none; padding: 0.2rem 0; border-bottom: 1px solid transparent; }
.menu a:hover { border-bottom-color: var(--filo); }
.menu a[aria-current="page"] { border-bottom-color: var(--inchiostro); }

/* Le voci che non stanno in prima fila: un <details> che si apre, così il
   menu non va a capo e non serve JavaScript. */
.menu-altro { position: relative; }
.menu-altro > summary {
    list-style: none; cursor: pointer; padding: 0.2rem 0;
    border-bottom: 1px solid transparent;
}
.menu-altro > summary::-webkit-details-marker { display: none; }
.menu-altro > summary::after { content: ' \002B'; font-size: 0.8em; opacity: .55; }
.menu-altro[open] > summary::after { content: ' \2212'; }
.menu-altro > summary:hover { border-bottom-color: var(--filo); }
.menu-altro.qui > summary { border-bottom-color: var(--inchiostro); }
.menu-altro-dentro {
    position: absolute; right: 0; top: 100%;
    margin-top: 0.55rem; min-width: 12rem;
    display: flex; flex-direction: column;
    background: var(--carta);
    border: 1px solid var(--filo);
    padding: 0.4rem 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.menu-altro-dentro a { padding: 0.45rem 1rem; border-bottom: 0; }
.menu-altro-dentro a:hover { background: var(--velo); border-bottom: 0; }
.menu-altro-dentro a[aria-current="page"] { font-weight: 600; }

.lingue-sito { display: flex; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.lingue-sito a { text-decoration: none; color: var(--tenue); }
.lingue-sito a[aria-current="true"] { color: var(--inchiostro); font-weight: 600; }

/* Il menu a scomparsa sul telefono: una casella nascosta, niente JavaScript. */
.apri-menu-casella { position: absolute; opacity: 0; pointer-events: none; }
.apri-menu-etichetta {
    display: block; cursor: pointer; padding: 0.4rem 0;
    font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.apri-menu-casella:focus-visible + .apri-menu-etichetta { outline: 2px solid var(--inchiostro); outline-offset: 3px; }
.menu-telefono {
    display: none; flex-direction: column; gap: 0.15rem;
    padding: 0.5rem 0 1rem; border-top: 1px solid var(--filo);
}
.menu-telefono a { text-decoration: none; padding: 0.55rem 0; font-size: 1.05rem; }
.apri-menu-casella:checked ~ .menu-telefono { display: flex; }

@media (min-width: 55rem) {
    .menu { display: flex; }
    .apri-menu-etichetta, .menu-telefono { display: none !important; }
}

/* ------------------------------------------------------- le fotografie */

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

figure { margin-inline: 0; }
figcaption {
    font-size: 0.85rem; color: var(--tenue); line-height: 1.5;
    margin-top: 0.6rem;
}

/*
 * Il posto della fotografia è riservato prima che arrivi: larghezza e
 * altezza sono dichiarate nel tag, e questo tiene ferma la pagina mentre
 * si carica invece di farla saltare.
 */
.foto { background: var(--velo); }

/*
 * Le classi che la pulizia dell'HTML lascia passare sulle immagini: servono
 * per il logo dentro al testo, come il marchio Leica nel capoverso del
 * progetto.
 */
.testo img.a-destra { float: right; margin: 0 0 var(--passo) var(--passo); }
.testo img.a-sinistra { float: left; margin: 0 var(--passo) var(--passo) 0; }
.testo img.piccola { max-width: 6rem; }
.testo::after { content: ''; display: block; clear: both; }

/* Niente salvataggio distratto: non ferma nessuno, evita il gesto. */
.protetta img { -webkit-user-drag: none; user-select: none; }

/* --------------------------------------------------- apertura della home */

/*
 * L'unica fotografia a tutta pagina del sito, e l'unica che sta nello sfondo
 * invece che in un <img>: serve per tenerla ferma mentre il contenuto le
 * scorre sopra, che è l'effetto del vecchio sito. Il testo alternativo sta
 * nell'aria-label della sezione, così chi non vede non perde niente.
 */
.apertura {
    position: relative;
    min-height: 100vh;
    display: grid;
    align-items: end;
    background-color: #0d0b0a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Su iOS background-attachment: fixed non funziona e lascia la foto
   sgranata: lì si torna a una foto ferma e basta. */
@media (hover: none) {
    .apertura { background-attachment: scroll; min-height: 88vh; }
}
.apertura-testo {
    width: 100%;
    padding-block: calc(var(--passo) * 2.5);
    color: #fff;
    text-align: right;
    text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 0 4px rgba(0,0,0,.4);
}
.apertura h1 { color: #fff; }
.apertura .occhiello { color: rgba(255,255,255,.9); }
.apertura-corpo { margin-top: 0.8rem; }
.apertura-corpo p { color: #fff; margin-left: auto; max-width: 34rem; }

/* La freccia che invita a scendere, come l'header a schermo pieno di Divi. */
.apertura-giu {
    position: absolute; left: 50%; bottom: 1.5rem;
    transform: translateX(-50%);
    width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
}
.apertura-giu span {
    width: 0.85rem; height: 0.85rem;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    box-shadow: 2px 2px 8px rgba(0,0,0,.35);
    animation: respira 2.4s ease-in-out infinite;
}
@keyframes respira {
    0%, 100% { opacity: .55; transform: rotate(45deg) translate(0, 0); }
    50%      { opacity: 1;   transform: rotate(45deg) translate(3px, 3px); }
}

/* --------------------------------------------------- sezioni della home */

.sezione { padding-block: calc(var(--passo) * 2.4); }
/* Il titolo di una sezione non sta appiccicato a quello che introduce. */
.sezione h2 { margin-bottom: 0.75rem; }
.sezione .occhiello + h2 { margin-top: 0; }
.sezione h2 + .testo > :first-child { margin-top: 0; }
/* Un titolo scritto dentro al testo di una sezione sta sotto a quello della
   sezione, non alla pari: altrimenti la pagina ha due voci che gridano uguale. */
.sezione .testo h2 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); margin-top: calc(var(--passo) * 1.3); }
.sezione .testo h2:first-child { margin-top: 0; }
.sezione + .sezione { border-top: 1px solid var(--filo); }
.sezione-velo { background: var(--velo); }
/* Il grigio pieno del vecchio sito: lo slider del libro ci stava sopra. */
.sezione-grigia { background: var(--grigio); }
.sezione-grigia + .sezione, .sezione + .sezione-grigia { border-top: 0; }

/* ------------------------------------------------- lo slider del libro */

/*
 * Scorre di lato con scroll-snap: il dito lo trascina, la rotellina pure, e
 * i pallini sono collegamenti ancora. Nessun JavaScript, e senza CSS resta
 * una fila di blocchi leggibili uno sotto l'altro.
 */
.slider-fuori { position: relative; }
.slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.slider::-webkit-scrollbar { display: none; }
.slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-width: 0;
}
.slide-dentro { display: grid; gap: var(--passo); align-items: center; }
@media (min-width: 52rem) {
    .slide-dentro { grid-template-columns: 1fr 1fr; gap: calc(var(--passo) * 2.5); }
    /* Una slide senza fotografia non lascia mezza fascia vuota: il testo si
       prende la larghezza, ma non più di una colonna da leggere. */
    .slide-dentro.slide-sola { grid-template-columns: minmax(0, var(--colonna)); justify-content: start; }
}
.slide-testo .testo { margin-top: 0.5rem; }
/* La fotografia della slide aveva un filo bianco attorno, e lo teniamo. */
.slide-foto img { border: 2px solid #fff; }

.slider-pallini {
    display: flex; gap: 0.5rem; justify-content: center;
    margin-top: calc(var(--passo) * 1.2);
}
.slider-pallini a { display: block; padding: 0.35rem; }
.slider-pallini span {
    display: block; width: 0.6rem; height: 0.6rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    transition: background .2s ease;
}
.slider-pallini a:hover span, .slider-pallini a:focus-visible span { background: var(--inchiostro); }

/* ------------------------------------------------------- la biografia */

.biografia { display: grid; gap: var(--passo); }
@media (min-width: 52rem) {
    /* Il testo sta al centro dell'altezza del ritratto: allineato in alto
       lasciava sotto un vuoto alto quanto la fotografia. */
    .biografia { grid-template-columns: minmax(10rem, 14rem) 1fr; gap: calc(var(--passo) * 2.5); align-items: center; }
}
.biografia-ritratto { max-width: 22rem; }
.biografia-ritratto img { width: 100%; }

/* --------------------------------------------- i loghi delle testate */

/*
 * I marchi di chi ha parlato del libro: celle tutte della stessa misura, con
 * la griglia e la forma del portfolio (3:2, quattro colonne), e in grigio
 * come nel vecchio sito, dove la galleria di Divi aveva
 * `child_filter_saturate="0%"`.
 *
 * Il logo sta dentro la sua cella per intero, rimpicciolito e centrato: un
 * marchio non è una fotografia, e tagliarlo per far quadrare la cella —
 * come faceva Divi col suo ritaglio a 400 × 284 — significa mangiare le
 * lettere a tutti quelli che non sono quadrati.
 */
/*
 * Lo spazio sopra e sotto sta sul contenitore e non sull'elenco: `ul` è
 * l'ultimo figlio del suo riquadro, e la regola generale che toglie il
 * margine all'ultimo elemento vinceva su quella dell'elenco — per questo la
 * prima data finiva appiccicata ai marchi.
 */
.fascia-loghi { margin-block: calc(var(--passo) * 0.8) calc(var(--passo) * 2); }
.loghi {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
@media (min-width: 52rem) {
    .loghi { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.loghi li { margin: 0; }
.loghi a { display: block; }
.loghi picture { display: block; }
.loghi img {
    display: block;
    width: 100%; height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    padding: 0.9rem;
    background: var(--velo);
    /* Grigio sempre, anche col mouse sopra: nel vecchio sito il passaggio
       non accendeva niente. */
    filter: grayscale(100%);
}
.sezione-velo + .sezione, .sezione + .sezione-velo { border-top: 0; }

.invito {
    display: inline-block;
    margin-top: var(--passo);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-bottom: 1px solid var(--inchiostro);
    padding-bottom: 0.15rem;
}
.invito::after { content: ' \2192'; }

.bottone {
    display: inline-block;
    margin-top: var(--passo);
    background: var(--inchiostro); color: var(--carta);
    text-decoration: none;
    font-weight: 600; font-size: 0.95rem;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--inchiostro);
}
.bottone:hover { background: transparent; color: var(--inchiostro); }

/* Due colonne dove ci stanno: testo da una parte, fotografia dall'altra. */
.affiancato { display: grid; gap: var(--passo); align-items: center; }
@media (min-width: 52rem) {
    .affiancato { grid-template-columns: 1fr 1fr; gap: calc(var(--passo) * 2); }
    .affiancato.a-rovescio > :first-child { order: 2; }
}

/* La griglia delle fotografie del portfolio. */
.griglia-foto { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .griglia-foto { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.griglia-foto img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/*
 * Gli elenchi di eventi, rassegna e diario: in home in versione breve, nelle
 * loro pagine per intero.
 *
 * Niente righine fra una voce e l'altra: separavano meno di quanto separi lo
 * spazio, e finivano più vicine al titolo di sopra che alla data di sotto.
 * Qui dentro una voce le righe stanno vicine e fra due voci c'è molto
 * spazio: il gruppo si legge da sé.
 */
.fila {
    list-style: none; padding: 0;
    margin-block: 1rem calc(var(--passo) * 1.6);
    display: grid; gap: calc(var(--passo) * 1.3);
}
.fila > li { margin: 0; padding: 0; border: 0; display: grid; gap: 0.35rem; }
.fila > li > p, .fila-testo > p { margin: 0; }
.fila-testo { display: grid; gap: 0.35rem; align-content: start; }
/* Una voce con la copertina: fotografia a sinistra, testo a destra, e sul
   telefono una sopra all'altro. Chi non ha copertina resta com'è. */
/* La copertina è alta quanto il testo che le sta a fianco, qualunque sia il
   numero di righe: la colonna si allunga, la fotografia la riempie e taglia
   quello che avanza. Sotto c'è comunque un 3:2 di minimo, per il caso di un
   articolo con il solo titolo. */
.fila > li.con-foto { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }
.fila-foto { display: block; height: 100%; min-height: calc(11rem / 1.5); }
.fila-foto picture { display: block; height: 100%; }
.fila-foto img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; background: var(--velo);
}
@media (max-width: 34rem) {
    .fila > li.con-foto { grid-template-columns: minmax(0, 1fr); }
    .fila-foto { max-width: 14rem; height: auto; min-height: 0; }
    .fila-foto img { aspect-ratio: 3 / 2; height: auto; }
}
.fila a { text-decoration: none; }
.fila a:hover .fila-titolo, .fila .fila-titolo a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.fila-quando { font-size: 0.82rem; color: var(--tenue); letter-spacing: 0.04em; }
.fila-titolo { font-family: var(--graziato); font-size: 1.25rem; line-height: 1.3; }
.fila-dove { font-size: 0.9rem; color: var(--tenue); }
/* «In arrivo», «Già stati»: i titoli che spezzano un elenco in due. Hanno
   bisogno di aria sopra, o si attaccano all'elenco precedente. */
.testa-elenco { margin-top: calc(var(--passo) * 1.8); margin-bottom: 0; }


/* ------------------------------------------------- pagine di contenuto */

.pagina { padding-block: calc(var(--passo) * 2); }

.titolo-pagina { margin-bottom: calc(var(--passo) * 1.5); }
.titolo-pagina .sottotitolo {
    font-family: var(--graziato);
    font-size: 1.15rem;
    color: var(--tenue);
    margin-top: 0.5rem;
}

.testo h2 { margin-top: calc(var(--passo) * 1.8); margin-bottom: 0.6rem; }
.testo h3 { margin-top: calc(var(--passo) * 1.3); margin-bottom: 0.4rem; }
.testo h4 { margin-top: var(--passo); margin-bottom: 0.3rem; }
.testo > :first-child { margin-top: 0; }
.testo img { margin-block: var(--passo); }

/* Un capoverso d'apertura un po' più grande, dove serve. */
.attacco { font-size: 1.2rem; line-height: 1.55; }

/* ------------------------------------------------------ piè di pagina */

/* Nel piede non c'è il menu: recapiti, crediti e pagine legali. Sta sul
   grigio pieno del vecchio sito, che gli dà un fondo invece di farlo
   svanire. */
.piede {
    background: var(--grigio);
    padding-block: calc(var(--passo) * 2);
    font-size: 0.9rem;
    /* Sul grigio pieno il testo tenue non si legge: nel piede scende di tono
       ma resta scuro. */
    color: #2c2c2c;
}
.piede-righe { display: grid; gap: var(--passo); }
@media (min-width: 45rem) {
    .piede-righe { grid-template-columns: 1fr auto; align-items: start; gap: calc(var(--passo) * 2); }
    .piede-recapiti { text-align: right; }
}
.piede-chi p { margin: 0 0 0.4rem; max-width: 32rem; }
.piede-marchio {
    font-family: var(--graziato);
    font-size: 1.15rem;
    color: var(--inchiostro);
}
.piede-recapiti { display: flex; flex-direction: column; gap: 0.35rem; }
.piede a { text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.piede-coda {
    margin-top: calc(var(--passo) * 1.5);
    padding-top: var(--passo);
    border-top: 1px solid rgba(0, 0, 0, .16);
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
    font-size: 0.82rem;
}

/* --------------------------------------------------------------- avvisi */

.vuoto { color: var(--tenue); font-style: italic; }

/* Durante la manutenzione, chi è collegato al pannello vede il sito vero:
   questa striscia ricorda che il pubblico vede un'altra cosa. */
.avviso-prova {
    background: #1d1a17; color: #fff;
    text-align: center; padding: 0.5rem var(--margine);
    font-size: 0.82rem; letter-spacing: 0.02em;
}
.avviso-prova a { color: #fff; }

/* Le pagine che stanno da sole: manutenzione, 404. */
.schermo-solo {
    min-height: 70vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: calc(var(--passo) * 3);
}
.schermo-solo h1 { margin-bottom: var(--passo); }

/* --------------------------------------------------------------- stampa */

@media print {
    .testata, .piede, .apertura, .avviso-prova, .salta { display: none; }
    body { font-size: 11pt; color: #000; background: #fff; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ------------------------------- la fotografia di una pagina di contenuto */

/*
 * Non tutte le fotografie vogliono prendersi lo schermo prima che si legga
 * una riga: chi scrive sceglie se sta sopra, di fianco o piccola in cima.
 */
.foto-pagina { margin: 0 0 var(--passo); }
.foto-pagina img { display: block; width: 100%; height: auto; }
.foto-pagina figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--tenue); }

.pagina-affiancata { display: grid; gap: var(--passo); }
@media (min-width: 62rem) {
    .pagina-affiancata {
        grid-template-columns: minmax(0, 28rem) minmax(0, var(--colonna));
        gap: calc(var(--passo) * 2.5);
        align-items: start;
        justify-content: start;
    }
    .pagina-affiancata .foto-pagina { position: sticky; top: calc(var(--passo) * 3); }
}
.foto-piccola { max-width: 18rem; }

/* --------------------------------------- una fotografia dentro al testo */

/*
 * Il logo che sta nel capoverso, come il Leica del vecchio sito. È una
 * fotografia della libreria con tutte le sue misure, non un indirizzo
 * scritto a mano: il browser sceglie la più piccola che basta.
 */
.nel-testo { display: block; margin: 0 0 var(--passo); }
/* Il margine che le immagini dentro al testo hanno di regola qui non ci
   va: era quello che spingeva il logo ventotto pixel più in basso della
   prima riga e lo faceva sembrare centrato invece che allineato. Il
   respiro attorno lo dà il contenitore, non la fotografia. */
.nel-testo img { display: block; width: 100%; height: auto; margin: 0; }
/* Il logo Leica del vecchio sito era 50 × 50 pixel: «minuscola» è quella
   misura lì, che accanto a un capoverso è quello che serve quasi sempre. */
.nel-testo.minuscola { max-width: 4rem; }
.nel-testo.piccola { max-width: 7rem; }
.nel-testo.media { max-width: 12rem; }
.nel-testo.piena { max-width: 100%; }
@media (min-width: 45rem) {
    /*
     * Il filo sopra è quello dell'inchiostro della prima riga, non del suo
     * spazio. Una riga di testo è più alta delle lettere che contiene:
     * fra il bordo della riga e la cima della «M» ci sono metà
     * dell'interlinea più lo scarto del carattere. Misurati qui fanno
     * 0.41em — allineare la fotografia al bordo della riga la lascerebbe
     * tre pixel più in alto del testo, e si vede.
     */
    .nel-testo.a-destra { float: right; margin: 0.41em 0 var(--passo) var(--passo); }
    .nel-testo.a-sinistra { float: left; margin: 0.41em var(--passo) var(--passo) 0; }
}

/* ----------------------------------------------- le frecce dello slider */

/*
 * Compaiono solo quando il JavaScript è arrivato: senza di lui non
 * servirebbero a niente, e una freccia che non fa niente è peggio che non
 * averla.
 */
.slider-freccia { display: none; }
.slider-vivo .slider-freccia {
    display: grid; place-items: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 2.6rem; height: 2.6rem;
    border: 1px solid rgba(0, 0, 0, .2); border-radius: 50%;
    background: rgba(255, 255, 255, .8); color: var(--inchiostro);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.slider-vivo .slider-freccia:hover { background: #fff; border-color: var(--inchiostro); }
.slider-vivo .slider-indietro { left: 0.5rem; }
.slider-vivo .slider-avanti { right: 0.5rem; }
@media (min-width: 52rem) {
    .slider-vivo .slider-indietro { left: 1rem; }
    .slider-vivo .slider-avanti { right: 1rem; }
}
.slider-pallini a[aria-current="true"] span { background: var(--inchiostro); }

/* --------------------------------------------- la fotografia a schermo */

.griglia-foto a.apri-foto { display: block; cursor: zoom-in; }
.griglia-foto a.apri-foto img { display: block; }

body.con-lightbox { overflow: hidden; }
.lightbox {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center;
    padding: 3.5rem 1rem;
    background: rgba(12, 12, 12, .94);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; }
.lightbox img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; margin-inline: auto; }
.lightbox figcaption { margin-top: 0.8rem; color: #e8e8e8; font-size: 0.9rem; text-align: center; }
.lightbox figcaption[hidden] { display: none; }
.lightbox button {
    position: absolute;
    display: grid; place-items: center;
    width: 2.8rem; height: 2.8rem;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: #fff;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.lightbox button:hover { background: rgba(255, 255, 255, .2); }
.lightbox-chiudi { top: 1rem; right: 1rem; }
.lightbox-prima { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-dopo { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox.sola .lightbox-prima, .lightbox.sola .lightbox-dopo { display: none; }

/* Gli eventi già stati: ci sono, ma non gridano. */
.fila-spenta { opacity: .75; }

/* Il marchio quando è un'immagine: l'altezza la decide chi lo mette nei
   Parametri, la larghezza viene da sé. */
.marchio-immagine { display: inline-flex; align-items: center; }
.marchio-immagine img { display: block; width: auto; max-width: 60vw; }

/* ----------------------------------------------------------- il negozio */

/* La vetrina: una griglia di prodotti, due per riga sul telefono. */
.vetrina {
    list-style: none; padding: 0; margin: var(--passo) 0 0;
    display: grid; gap: calc(var(--passo) * 1.4) 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 52rem) { .vetrina { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--passo) * 1.6) 1.5rem; } }
.vetrina > li { margin: 0; display: grid; gap: 0.6rem; align-content: start; }
.prodotto-foto { display: block; }
.prodotto-foto img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 3 / 2; object-fit: cover; background: var(--velo);
}
.prodotto-senza-foto { display: block; aspect-ratio: 3 / 2; background: var(--velo); }
.prodotto-nome { font-size: 1.15rem; line-height: 1.3; margin: 0; }
.prodotto-nome a { text-decoration: none; }
.prodotto-nome a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.prodotto-sommario { font-size: 0.9rem; color: var(--tenue); margin: 0; }
.prodotto-prezzo { margin: 0; font-variant-numeric: tabular-nums; }
/* «da 125.00 CHF»: la paroletta sta più indietro del prezzo. */
.da { color: var(--tenue); font-size: 0.85em; }
.prodotto-stato { color: var(--tenue); }
/* Un prodotto esaurito resta in vetrina ma si vede che non si può comprare. */
.prodotto-esaurito .prodotto-foto img, .prodotto-esaurito .prodotto-senza-foto { opacity: .55; }

/* La scheda: fotografie da una parte, prezzo e scelte dall'altra. */
.prodotto-affiancato { display: grid; gap: calc(var(--passo) * 1.5); }
@media (min-width: 62rem) {
    .prodotto-affiancato { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--passo) * 2.5); align-items: start; }
    /* Un prodotto senza fotografie non lascia mezza pagina vuota. */
    .prodotto-affiancato.senza-foto { grid-template-columns: minmax(0, var(--colonna)); }
}
.prodotto-principale { margin: 0 0 0.6rem; }
.prodotto-principale img { display: block; width: 100%; height: auto; }
.prodotto-immagini .griglia-foto { grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.prodotto-dettagli .titolo-pagina { margin-bottom: 0.8rem; }
.prodotto-prezzo-grande {
    font-family: var(--graziato); font-size: 1.6rem; margin: 0 0 0.2rem;
    font-variant-numeric: tabular-nums;
}
.prodotto-prezzo-grande del { color: var(--tenue); font-size: 1.1rem; margin-left: 0.5rem; }
.prodotto-stato-riga { font-size: 0.9rem; color: var(--tenue); margin: 0 0 var(--passo); }

.prodotto-modulo fieldset { border: 0; padding: 0; margin: 0 0 var(--passo); }
.prodotto-modulo legend { padding: 0; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); }
.scelte { display: grid; gap: 0.5rem; }
.scelta {
    display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 0.6rem;
    align-items: baseline; padding: 0.6rem 0.8rem; border: 1px solid var(--filo); cursor: pointer;
}
.scelta:hover { background: var(--velo); }
.scelta-prezzo { font-variant-numeric: tabular-nums; }
.scelta-nota { grid-column: 2 / -1; font-size: 0.85rem; color: var(--tenue); }
.scelta-spenta { opacity: .5; cursor: default; }
.scelta input { margin: 0; }

.nota-numeri { font-size: 0.85rem; color: var(--tenue); margin: 0.3rem 0 0.5rem; }
.griglia-numeri {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 0.3rem; max-height: 14rem; overflow-y: auto;
    border: 1px solid var(--filo); padding: 0.5rem;
}
.numero input { position: absolute; opacity: 0; pointer-events: none; }
.numero span {
    display: block; text-align: center; padding: 0.35rem 0;
    font-size: 0.9rem; font-variant-numeric: tabular-nums;
    border: 1px solid transparent; cursor: pointer;
}
.numero:hover span { background: var(--velo); }
.numero input:checked + span { background: var(--inchiostro); color: var(--carta); }
.numero input:focus-visible + span { outline: 2px solid var(--inchiostro); outline-offset: 2px; }

.prodotto-aggiungi { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.quanti { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--tenue); }
.quanti input { width: 4.5rem; padding: 0.45rem 0.5rem; font: inherit; border: 1px solid var(--filo); }
.prodotto-aggiungi .bottone[disabled] { opacity: .5; cursor: not-allowed; }

/* Quando e dove di un evento, nella sua pagina. */
.dati-evento {
    display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1.2rem;
    margin: 0 0 var(--passo); font-size: 0.95rem;
}
.dati-evento dt { color: var(--tenue); }
.dati-evento dd { margin: 0; }

/* Dove leggere un'uscita di rassegna: due inviti in fila. */
.dove-leggere { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ---------------------------------------------------------- il carrello */

/* In cima alle pagine, accanto alle lingue: c'è solo quando c'è qualcosa. */
.carrello-in-cima {
    display: inline-flex; align-items: baseline; gap: 0.4rem;
    font-size: 0.9rem; text-decoration: none;
    border-bottom: 1px solid transparent; padding: 0.2rem 0;
}
.carrello-in-cima:hover { border-bottom-color: var(--filo); }
.carrello-in-cima[aria-current="page"] { border-bottom-color: var(--inchiostro); }
.carrello-in-cima .quanti {
    display: inline-block; min-width: 1.3rem; text-align: center;
    background: var(--inchiostro); color: var(--carta);
    font-size: 0.75rem; line-height: 1.4; padding: 0 0.3rem;
}

.avviso-carrello {
    border-left: 3px solid var(--filo); padding: 0.4rem 0 0.4rem 0.8rem;
    margin: 0 0 0.8rem; font-size: 0.95rem;
}
.avviso-carrello.errore { border-left-color: var(--inchiostro); }

.carrello { list-style: none; padding: 0; margin: var(--passo) 0 0; }
.carrello-riga {
    display: grid; gap: 0.4rem 1.2rem; align-items: start;
    grid-template-columns: 5rem 1fr;
    padding: 0 0 calc(var(--passo) * 0.8);
    margin: 0 0 calc(var(--passo) * 0.8);
    border-bottom: 1px solid var(--filo);
}
@media (min-width: 52rem) {
    .carrello-riga { grid-template-columns: 8rem 1fr auto auto; gap: 1.5rem; align-items: center; }
}
.carrello-foto { display: block; }
.carrello-foto img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 3 / 2; object-fit: cover; background: var(--velo);
}
.carrello-cosa h2 { font-size: 1.1rem; margin: 0 0 0.2rem; }
.carrello-cosa h2 a { text-decoration: none; }
.carrello-cosa p { margin: 0.1rem 0; font-size: 0.9rem; }
.carrello-numero { font-variant-numeric: tabular-nums; }
.carrello-passaggio { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.9rem; }
.carrello-quanti { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.carrello-quanti input[type="number"] {
    width: 4rem; padding: 0.4rem 0.5rem; font: inherit; border: 1px solid var(--filo);
}
.carrello-prezzo { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.carrello-prezzo .tenue { display: block; font-size: 0.8rem; }

.carrello-fondo { margin: var(--passo) 0 0; }
.carrello-totale {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 1.2rem; margin: 0 0 0.3rem; font-variant-numeric: tabular-nums;
}
@media (min-width: 52rem) { .carrello-totale { max-width: 22rem; margin-left: auto; } }
.carrello-vie { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin: var(--passo) 0 0.5rem; }
.carrello-vie .bottone[disabled] { opacity: .5; cursor: not-allowed; }

.proposte { margin: calc(var(--passo) * 2) 0 0; }
.proposte h2 { font-size: 1.2rem; margin: 0; }

/* Un'etichetta che serve a chi legge con la voce, non agli occhi. */
.nascosto {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* Un bottone che deve sembrare un collegamento: «togli», «passa a». */
.collegamento {
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.collegamento:hover { text-decoration-thickness: 2px; }

/* Sul telefono la riga va a capo: foto a sinistra, tutto il resto in colonna. */
@media (max-width: 51.99rem) {
    .carrello-riga > .carrello-quanti,
    .carrello-riga > .carrello-prezzo { grid-column: 2 / -1; }
    .carrello-prezzo { text-align: left; }
    .carrello-prezzo .tenue { display: inline; margin-left: 0.4rem; }
}

/* ------------------------------------------------------------- la cassa */

.cassa-colonne { display: grid; gap: calc(var(--passo) * 1.5); margin: var(--passo) 0 0; }
@media (min-width: 62rem) {
    .cassa-colonne { grid-template-columns: 1fr 20rem; gap: calc(var(--passo) * 2); align-items: start; }
    /* La testata resta appiccicata in cima (3.75rem più il filo): il conto
       si ferma sotto di lei, non dietro. */
    .cassa-conto { position: sticky; top: calc(3.75rem + var(--passo)); }
}
.cassa-parte { border: 0; padding: 0; margin: 0 0 calc(var(--passo) * 1.2); }
.cassa-parte legend {
    padding: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--tenue); margin: 0 0 0.6rem;
}
.cassa-parte label { display: block; margin: 0 0 0.6rem; }
.cassa-parte label > span { display: block; font-size: 0.85rem; color: var(--tenue); margin: 0 0 0.2rem; }
.cassa-parte input[type="text"], .cassa-parte input[type="email"],
.cassa-parte input[type="tel"], .cassa-parte select, .cassa-parte textarea {
    width: 100%; padding: 0.5rem 0.6rem; font: inherit;
    border: 1px solid var(--filo); background: var(--carta);
}
.cassa-parte .affiancati { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.cassa-parte .scelta { margin: 0 0 0.5rem; }
.cassa-parte .segno { display: flex; align-items: baseline; gap: 0.5rem; }
.cassa-parte .segno input { width: auto; }
.cassa-coupon-stato { font-size: 0.9rem; color: var(--tenue); align-self: end; margin: 0 0 0.9rem; }

.cassa-conto { border: 1px solid var(--filo); padding: 1.2rem; }
.cassa-conto h2 { font-size: 1.1rem; margin: 0 0 0.8rem; }
.cassa-righe { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.92rem; }
.cassa-righe li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0 0 0.4rem; margin: 0 0 0.4rem; border-bottom: 1px solid var(--filo);
}
.cassa-somme {
    display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem;
    margin: 0 0 1rem; font-variant-numeric: tabular-nums;
}
.cassa-somme dt { color: var(--tenue); }
.cassa-somme dd { margin: 0; text-align: right; }
.cassa-somme .grosso { font-size: 1.15rem; color: inherit; padding-top: 0.3rem; border-top: 1px solid var(--filo); }
.cassa-conto .bottone { width: 100%; text-align: center; }
/* Dentro la cassa le scelte restano in riga: il «label a blocco» qui sopra
   vale per i campi, non per le caselle con il pallino. */
.cassa-parte label.scelta { display: grid; }
.cassa-parte label.scelta > span { display: inline; margin: 0; }
.cassa-parte label.scelta .scelta-nota { display: block; font-size: 0.85rem; }

/* Il quadratino con la freccia: su quello che porta fuori o apre una scheda
   nuova. La freccia → degli inviti qui non ci va: sarebbero due segni per
   due cose diverse messi sulla stessa riga. */
.icona-fuori { vertical-align: -0.08em; margin-left: 0.3em; opacity: .75; }
a:hover > .icona-fuori { opacity: 1; }
.invito.fuori::after { content: none; }
.fuori-piccolo { display: inline-block; text-decoration: none; margin-left: 0.15em; }

/* ------------------------------------------------- lo spazio di chi compra */

/* L'omino in cima: accanto al menu, grande come una voce ma senza parole. */
.menu-omino { display: none; align-items: center; padding: 0.2rem 0; border-bottom: 1px solid transparent; }
@media (min-width: 60rem) { .menu-omino { display: inline-flex; } }
.menu-omino:hover { border-bottom-color: var(--filo); }
.menu-omino[aria-current="page"] { border-bottom-color: var(--inchiostro); }
.icona-omino { display: block; }
.menu-telefono .icona-omino { display: inline-block; vertical-align: -0.2em; margin-right: 0.3em; }

.modulo-stretto { max-width: 34rem; }
.modulo-stretto label { display: block; margin: 0 0 0.8rem; }
.modulo-stretto label > span { display: block; font-size: 0.85rem; color: var(--tenue); margin: 0 0 0.2rem; }
.modulo-stretto input[type="text"], .modulo-stretto input[type="email"],
.modulo-stretto input[type="tel"], .modulo-stretto select, .modulo-stretto textarea {
    width: 100%; padding: 0.5rem 0.6rem; font: inherit;
    border: 1px solid var(--filo); background: var(--carta);
}
.modulo-stretto .affiancati { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.modulo-stretto .segno { display: flex; align-items: baseline; gap: 0.5rem; }
.modulo-stretto .segno input { width: auto; }

.area-parte { margin: 0 0 calc(var(--passo) * 2); }
.area-parte > h2 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.area-esci { margin: 0; }
.area-indirizzi { list-style: none; padding: 0; margin: 0 0 var(--passo); display: grid; gap: 1rem; }
@media (min-width: 52rem) { .area-indirizzi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-indirizzi li { border: 1px solid var(--filo); padding: 0.9rem 1rem; }
.area-indirizzi p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.area-indirizzi .riga-bottoni { display: flex; gap: 1rem; flex-wrap: wrap; }
.area-indirizzi form { margin: 0; }
/* «esci» sta sulla stessa riga del titolo, in fondo a destra. */
.area-parte .testa-elenco { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.area-parte .fila-titolo .tenue { margin-left: 0.6rem; }

/* I bottoni di un ordine ancora aperto: pagare, cambiare, annullare. */
.ordine-azioni { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: var(--passo) 0 0.5rem; }
.ordine-azioni form { margin: 0; }