/**
 * Tema mariagabriellamariani — CSS
 *
 * Direzione G «Sintesi», scelta dal cliente il 17 settembre 2026: carta avorio,
 * inchiostro quasi nero, un solo accento blu oltremare, EB Garamond per titoli e
 * testo, Archivo per etichette, menu e dati.
 *
 * Si carica DOPO public/assets/css/public.css del core, che resta (gradienti
 * uw-grad-*, rivelazione allo scroll, stili dei componenti del core), e ne corregge
 * le scelte tipografiche. La Play CDN di Tailwind inietta le utility dopo questo
 * file: per battere il plugin typography i selettori di .prose usano `body .prose`
 * o `.prose X` (sezione 4).
 *
 * Origine: prototipi/G-sintesi/assets/css/public.css, tolti gli strumenti usati solo
 * per il confronto con il cliente.
 *
 * Struttura:
 *   0. Caratteri ospitati sul server
 *   1. Variabili del tema
 *   2. Base e tipografia d'edizione
 *   3. Header sticky e navigazione
 *   4. Contenuto redazionale (.prose)
 *   5. Componenti
 *   6. Movimento ridotto e stampa
 */

/* ============================================================================
   0. CARATTERI — ospitati sul server, nessuna richiesta a Google Fonts
   EB Garamond 1.002 (octaviopardo/EBGaramond12) e Archivo (Omnibus-Type), OFL.
   Font variabili ridotti ai pesi 400-600: un file per l'alfabeto latino e uno per
   il latino esteso, scaricato solo se la pagina ne usa i caratteri.
   A differenza dei file di Google Fonts, EB Garamond conserva cifre antiche
   (onum), maiuscoletto (smcp, c2sc), cifre tabellari e frazioni.
   Come sono stati generati: fonts/LEGGIMI.md.
   ============================================================================ */

@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/eb-garamond-roman-latin.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: 'EB Garamond';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/eb-garamond-roman-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'EB Garamond';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/eb-garamond-italic-latin.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: 'EB Garamond';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/eb-garamond-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'Archivo';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/archivo-latin.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: 'Archivo';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

/* ============================================================================
   1. VARIABILI DEL TEMA
   ============================================================================ */

:root {
    --paper: #f6f3ea;          /* fondo pagina: avorio d'edizione */
    --paper-2: #ede8d9;        /* fondo secondario (fasce, breadcrumb, incisi) */
    --ink: #191813;            /* testo principale */
    --ink-2: #57534a;          /* testo secondario (6,7:1 sul fondo) */
    --rule: #cfc8b6;           /* filetti, bordi, linee del rigo */
    --accent: #1f3f9e;         /* unico accento: blu oltremare (8,4:1 sul fondo) */
    --play: #cc0000;           /* il rosso del pulsante «riproduci»: bianco sopra fa 5,9:1 */
    --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-ui: 'Archivo', system-ui, -apple-system, sans-serif;
    --measure: 66ch;           /* giustezza del testo lungo: 60-75 battute */
}

/* ============================================================================
   2. BASE E TIPOGRAFIA D'EDIZIONE
   ============================================================================ */

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.125rem;       /* EB Garamond ha un occhio piccolo: parte da 18px */
    line-height: 1.6;
    /* Il core attiva cv11 e ss01 pensando a Inter: su EB Garamond ss01 cambierebbe i glifi */
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Il core mette Sora su tutti i titoli: qui tornano al carattere del tema */
h1, h2, h3, .font-display {
    font-family: var(--font-display);
    letter-spacing: normal;
}

/* Cifre: antiche nel testo corrente (.onum), allineate nei dati (.lnum, .tnum) */
.onum {
    font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
    font-variant-numeric: oldstyle-nums;
}
.lnum {
    font-feature-settings: 'kern' 1, 'lnum' 1;
    font-variant-numeric: lining-nums;
}
.tnum {
    font-variant-numeric: tabular-nums lining-nums;
}
/* Maiuscoletto vero, dal carattere (smcp) */
.smallcaps {
    font-variant-caps: small-caps;
    letter-spacing: .04em;
}

/* Etichetta dell'interfaccia: Archivo, corpo piccolo, spaziata */
.ui {
    font-family: var(--font-ui);
    font-variant-numeric: lining-nums;
}

/* ----------------------------------------------------------------------------
   IL RIGO — cinque linee da 1px. Nessun gradiente: cinque <span> reali.
   Serve da filetto di sezione, non da ornamento: poche volte per pagina.
   -------------------------------------------------------------------------- */

.staff {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.staff > span {
    display: block;
    height: 1px;
    background: var(--rule);
}
.staff--ink > span {
    background: var(--ink);
    opacity: .45;
}

/* Fasce a piena larghezza: in bianco e nero come l'apertura, cosi' la pagina
   resta su un solo accento. Le fotografie documentarie dentro le colonne
   conservano il colore: sono prove, non atmosfera. */
.band-bw {
    filter: grayscale(100%) contrast(1.04);
}

/* ----------------------------------------------------------------------------
   INDICE: punti guida fra il titolo e il numero d'opera
   -------------------------------------------------------------------------- */

.leader {
    flex: 1 1 auto;
    min-width: 1.5rem;
    align-self: flex-end;
    margin-bottom: .34em;
    border-bottom: 1px dotted var(--rule);
}

/* ----------------------------------------------------------------------------
   GRIGLIA A VOCI — le righe di un elenco d'apparato: la rassegna critica,
   l'indice dei materiali per la stampa.
   Un solo filetto in testa a ogni voce, mai sopra e sotto.
   -------------------------------------------------------------------------- */

.program-entry {
    border-top: 1px solid var(--rule);
}
.program-entry:first-child {
    border-top-color: var(--ink);
}

/* Collegamenti del corpo pagina: sottolineatura a filo d'inchiostro */
.link-ink {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
    text-decoration-color: var(--rule);
    transition: text-decoration-color .2s ease, color .2s ease;
}
.link-ink:hover {
    text-decoration-color: var(--accent);
    color: var(--accent);
}

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

/* Sul nero l'anello blu si perde: 1,16 contro 1 di contrasto, sotto il 3:1 che
   serve a vedere dove si è arrivati con la tabulazione (WCAG 2.2, 1.4.11). Sui
   fondi scuri — skip link, pulsanti pieni, visore delle fotografie — il fuoco è
   quindi color carta. */
.bg-ink:focus-visible,
.bg-ink :focus-visible,
.mgm-visore:focus-visible,
.mgm-visore :focus-visible {
    outline-color: var(--paper);
}

::selection {
    background-color: var(--accent);
    color: var(--paper);
}

/* Skip link (dal CMS): visibile solo al focus */
.sr-only:focus {
    position: absolute;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================================================
   3. HEADER STICKY (stato Alpine `scrolled` → .is-scrolled)
   ============================================================================ */

.site-header {
    transition: box-shadow .3s ease, background-color .3s ease;
    background: var(--paper);
}
.site-header.is-scrolled {
    box-shadow: 0 1px 0 var(--rule), 0 6px 18px -14px rgba(25, 24, 19, .45);
}

/* Voci di navigazione: Archivo, corpo piccolo, una riga sola fino a 1280px */
.nav-link {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1;
    letter-spacing: .015em;
    color: var(--ink-2);
    white-space: nowrap;
    transition: color .2s ease;
}
.nav-link:hover {
    color: var(--ink);
}
/* Voce della sezione aperta: inchiostro pieno e un filetto sottile sotto la parola.
   Il segno precedente era un box-shadow di 2px sull'intero riquadro del link, quindi
   largo quanto il testo PIÙ il padding e appoggiato al bordo della barra: sembrava una
   sottolineatura di ripiego. Con text-decoration il filetto misura la parola, sta a
   mezzo quadratone dalla linea di base e non si spezza sotto le lettere discendenti. */
.nav-link[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .5em;
    text-decoration-skip-ink: none;
}
/* Sopra i 1536px la barra sta su una riga sola e c'è spazio per respirare */
@media (min-width: 1536px) {
    .nav-link {
        font-size: 13.5px;
    }
}

/* ============================================================================
   4. CONTENUTO REDAZIONALE (.prose)
   Arriva dal WYSIWYG come HTML libero: gli elementi si stilano senza classi.
   Selettori .prose X (specificità 0,1,1) battono quelli del plugin typography
   (.prose :where(X), 0,1,0), che la Play CDN inietta dopo questo file.
   ============================================================================ */

/* Corpo e giustezza: `body .prose` (0,1,2) batte sia il plugin sia un
   eventuale `.prose` (0,1,0) iniettato dopo questo file dalla Play CDN. */
body .prose {
    color: var(--ink);
    max-width: var(--measure);
    font-family: var(--font-body);
    font-size: 1.25rem;        /* 20px: corpo da lettura per EB Garamond */
    line-height: 1.62;
}
body .prose > :first-child {
    margin-top: 0;
}

.prose p {
    color: var(--ink);
    margin-top: 1.1em;
    margin-bottom: 1.1em;
}
.prose li {
    color: var(--ink);
    margin-top: .35em;
    margin-bottom: .35em;
}

/* Occhiello del testo: primo paragrafo in evidenza, con un filetto d'attacco */
body .prose .lead {
    font-size: 1.32em;
    line-height: 1.45;
    color: var(--ink);
    margin-bottom: 1.6em;
    padding-bottom: 1.1em;
    border-bottom: 1px solid var(--rule);
}
.prose .lead em {
    font-style: italic;
}

/* Titoli: numerazione assente, peso dato dal corpo e da un filetto sottile */
.prose h2 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    font-size: 1.72em;
    line-height: 1.18;
    letter-spacing: -.012em;
    margin-top: 2.3em;
    margin-bottom: .55em;
    padding-top: .5em;
    border-top: 1px solid var(--rule);
}
.prose h3 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    font-size: 1.26em;
    line-height: 1.28;
    margin-top: 1.9em;
    margin-bottom: .4em;
}
.prose h2 + h3 {
    margin-top: 1.1em;
}

/* Nota biografica: i titoli di secondo livello si numerano da soli, con le
   cifre antiche arabe in accento. È lo stesso trattamento che .prose dà agli
   elenchi numerati, un gradino sotto i numeri romani dei movimenti. Il testo
   arriva dal WYSIWYG: nel markup non c'è nessun numero da scrivere. */
body .prose-nota {
    counter-reset: prose-nota;
}
.prose-nota h2 {
    counter-increment: prose-nota;
}
.prose-nota h2::before {
    content: counter(prose-nota) ".";
    display: inline-block;
    min-width: 1.15em;
    margin-right: .3em;
    color: var(--accent);
    font-weight: 400;
    font-feature-settings: 'onum' 1;
    font-variant-numeric: oldstyle-nums;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    text-decoration-color: var(--rule);
    transition: text-decoration-color .2s ease;
}
.prose a:hover {
    text-decoration-color: var(--accent);
}
.prose strong {
    color: var(--ink);
    font-weight: 600;
}
.prose em {
    font-style: italic;
}

/* Elenchi: il segno è un filetto blu, non un pallino */
.prose ul {
    list-style: none;
    padding-left: 1.6em;
}
.prose ul > li {
    position: relative;
}
.prose ul > li::before {
    content: "";
    position: absolute;
    left: -1.6em;
    top: .72em;
    width: .8em;
    height: 1px;
    background: var(--accent);
}
.prose ol {
    list-style: none;
    counter-reset: prose-ol;
    padding-left: 1.9em;
}
.prose ol > li {
    position: relative;
    counter-increment: prose-ol;
}
.prose ol > li::before {
    content: counter(prose-ol) ".";
    position: absolute;
    left: -1.9em;
    top: 0;
    width: 1.5em;
    text-align: right;
    font-feature-settings: 'onum' 1;
    color: var(--ink-2);
}
.prose ol > li::marker,
.prose ul > li::marker {
    content: "";
}

/* Citazione: due filetti verticali, come un inciso a margine della partitura */
.prose blockquote {
    border-left: 2px solid var(--accent);
    border-radius: 0;
    color: var(--ink);
    font-style: normal;
    font-weight: 400;
    margin: 2em 0;
    padding: .2em 0 .2em 1.4em;
}
.prose blockquote p {
    font-size: 1.16em;
    line-height: 1.42;
    margin: 0;
}
.prose blockquote p + p {
    margin-top: .7em;
    font-family: var(--font-ui);
    font-size: .68em;
    line-height: 1.5;
    color: var(--ink-2);
}
.prose blockquote cite {
    font-style: italic;
}
/* Le virgolette le scrive la redazione: il plugin non deve aggiungerne altre */
.prose blockquote p:first-of-type::before,
.prose blockquote p:last-of-type::after {
    content: none;
}

/* Epigrafe del frontespizio (biografia): la citazione d'apertura sotto il titolo,
   a corpo ridotto; l'attribuzione è il secondo paragrafo della citazione (sopra) */
body .prose-epigrafe {
    font-size: 1.05rem;
    max-width: 46ch;
}
.prose-epigrafe blockquote {
    margin: 0;
}

/* Stacco: il rigo, ridotto a un filetto doppio */
.prose hr {
    border: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    height: 3px;
    background: transparent;
    margin: 3em 0;
    opacity: .4;
}

/* Tabella vera, leggibile anche a 390px: scorre dentro il suo contenitore */
.prose table {
    display: block;
    overflow-x: auto;
    width: 100%;
    font-family: var(--font-ui);
    font-size: .66em;
    line-height: 1.45;
    border-collapse: collapse;
    margin: 2em 0;
}
.prose thead th {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .92em;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink);
    text-align: left;
    padding: 0 1.2em .5em 0;
    border-bottom: 1px solid var(--ink);
    white-space: nowrap;
}
.prose tbody tr {
    border-bottom: 1px solid var(--rule);
}
.prose tbody td {
    padding: .62em 1.2em .62em 0;
    vertical-align: top;
    color: var(--ink);
}
.prose tbody td:first-child {
    white-space: nowrap;
    color: var(--ink-2);
}

/* Figure: la tavola sfora la giustezza del testo, come nelle edizioni */
.prose figure {
    margin: 2.6em 0;
    max-width: none;
    width: 100%;
}
.prose img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 1px solid var(--rule);
}
.prose figcaption {
    font-family: var(--font-ui);
    font-size: .62em;
    line-height: 1.5;
    color: var(--ink-2);
    margin-top: .7em;
    padding-top: .55em;
    border-top: 1px solid var(--rule);
    text-align: left;
}
.prose small {
    font-family: var(--font-ui);
    font-size: .66em;
    color: var(--ink-2);
}
.prose .nota-prova {
    margin-top: 2.4em;
}

/* Una tabella dentro `prose` scorre da sola e non fa scorrere la pagina, ma
   serve anche `min-w-0` sulla colonna di griglia che la contiene: altrimenti il
   suo min-content allarga la traccia e a 390px scorre tutta la pagina. */
@media (max-width: 480px) {
    body .prose {
        font-size: 1.1875rem;
    }
    .prose h2 {
        font-size: 1.5em;
    }
}

/* ============================================================================
   5. COMPONENTI
   ============================================================================ */

/* media/video-player — segnaposto click-to-load: nulla da terzi prima del clic */
.yt-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
}
.yt-embed > img,
.yt-embed > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

/* Copertina tipografica: ripiego quando un disco o un libro non ha immagine.
   Non finge una copertina: è l'etichetta d'edizione, con cornice e dati. */
.cover-fallback {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid var(--ink);
    padding: 1rem;
}
.cover-fallback .cf-staff {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cover-fallback .cf-staff > span {
    display: block;
    height: 1px;
    background: var(--ink);
    opacity: .35;
}
.cover-fallback .cf-title {
    font-family: var(--font-display);
    font-size: 1.18rem;
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: -.01em;
}
.cover-fallback .cf-meta {
    font-family: var(--font-ui);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* Frame delle fotografie: un filetto, come una tavola incollata sul foglio */
.plate {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
}

/* Apertura di G: la fotografia di Farinaccio (da B) ha il fondo bianco portato
   esattamente sulla carta, quindi non ha cornice. I due lati in cui la foto
   taglia il pianoforte (destra e basso) devono cadere su un bordo vero: in basso
   il filetto della sezione, a destra il bordo della finestra. Da 1024 px la
   figura esce dal foglio verso destra, come .hero-bleed di B; sotto, esce ai due
   lati con i margini negativi scritti nel markup. */
/* Foto d'apertura su fondo chiaro: il fondo si fonde con la carta, come nella demo G,
   dove il colore era stato portato a mano nei file. Qui vale per ogni foto caricata
   dal pannello. brightness(1.021) porta a bianco il fondo 250 dei file scontornati,
   multiply lo trasforma nel colore della carta; sulle altre tinte l'effetto è di un
   paio di punti, invisibile. */
figure.tavola-g img {
    mix-blend-mode: multiply;
    filter: brightness(1.021);
}

/* figure.tavola-g, non .tavola-g: deve battere le utility -mx-* di Tailwind, che
   la Play CDN inietta dopo questo foglio. 100vw comprende la barra di
   scorrimento: i pixel in eccesso li taglia overflow-x-clip della sezione. */
@media (min-width: 1024px) {
    figure.tavola-g {
        margin-right: calc(-1 * (max(0px, (100vw - 88rem) / 2) + 1.5rem));
    }
    /* il credito resta sul margine destro del foglio, non sul bordo della finestra */
    figure.tavola-g > figcaption {
        padding-right: calc(max(0px, (100vw - 88rem) / 2) + 1.5rem);
    }
}


/* ============================================================================
   6. MOVIMENTO RIDOTTO E STAMPA
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal,
    .reveal-armed {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ----------------------------------------------------------------------------
   Pulsante «riproduci» dei video
   ----------------------------------------------------------------------------
   Sta sopra la miniatura di YouTube, che è quasi sempre una fotografia scura: un
   cerchio traslucido ci sparisce dentro. Qui è pieno, con un'ombra che lo stacca
   dall'immagine, e al passaggio del mouse diventa rosso, non blu: l'accento del
   tema serve ai collegamenti, non a un comando di riproduzione.

   Non si usa `bg-paper/90`: i colori del tema sono variabili CSS con un valore
   esadecimale, e l'opacità di Tailwind su quelle non ha effetto — il fondo esce
   trasparente senza dare errore, come i gradienti (regola 1 di CLAUDE.md).
   -------------------------------------------------------------------------- */

.mgm-play {
    background-color: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    box-shadow: 0 2px 12px rgb(0 0 0 / .4);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.group:hover .mgm-play,
.mgm-play:hover {
    background-color: var(--play);
    border-color: var(--play);
    color: #fff;
    transform: scale(1.06);
}

.group:focus-visible .mgm-play {
    outline: 2px solid var(--play);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .mgm-play,
    .group:hover .mgm-play {
        transition: none;
        transform: none;
    }
}

/* ----------------------------------------------------------------------------
   Il visore delle fotografie
   ----------------------------------------------------------------------------
   Il markup lo costruisce assets/js/tema.js. È un <dialog>: la modalità, il fondo
   scuro e la chiusura con Esc le dà il browser, qui c'è solo l'aspetto.
   -------------------------------------------------------------------------- */

.mgm-visore {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--paper);
}

.mgm-visore::backdrop {
    background: rgb(12 11 9 / .92);
}

.mgm-visore figure {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3.5rem 1.25rem;
}

.mgm-visore img {
    max-width: min(100%, 1600px);
    max-height: calc(100vh - 8rem);
    object-fit: contain;
}

.mgm-visore figcaption {
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    max-width: 60ch;
    opacity: .85;
}

.mgm-visore button {
    position: absolute;
    background: none;
    border: 0;
    color: var(--paper);
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s ease;
}

.mgm-visore button:hover,
.mgm-visore button:focus-visible {
    opacity: 1;
}

.mgm-visore-chiudi {
    top: .75rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.9rem;
    line-height: 1;
}

.mgm-visore-chiudi::before { content: "\00d7"; }

.mgm-visore-freccia {
    top: 50%;
    transform: translateY(-50%);
    width: 3.25rem;
    height: 3.25rem;
    font-size: 2rem;
    line-height: 1;
}

.mgm-visore-prec { left: .25rem; }
.mgm-visore-succ { right: .25rem; }
.mgm-visore-prec::before { content: "\2039"; }
.mgm-visore-succ::before { content: "\203a"; }

/* Il visore dei video: lo schermo 16:9 più grande che entra nella finestra,
   lasciando posto al titolo sotto e al pulsante di chiusura sopra */
.mgm-visore-schermo {
    width: min(100%, 1400px, calc((100vh - 9rem) * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #000;
}

.mgm-visore-schermo iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Sul telefono lo schermo prende tutta la larghezza: le frecce scendono sotto,
   invece di coprire i lati del filmato */
@media (max-width: 767px) {
    .mgm-visore-video figure {
        padding-left: 0;
        padding-right: 0;
    }
    .mgm-visore-video .mgm-visore-freccia {
        top: auto;
        bottom: .75rem;
        transform: none;
    }
}

@media print {
    .site-header,
    footer,
    .no-print {
        display: none !important;
    }
    .prose {
        max-width: none;
    }
}