/**
 * Tema andreamassimograssi — CSS del tema (demo C «Sala»)
 *
 * Si carica dopo tailwind.css (compilato, .build/) e public.css del core. Qui vive solo
 * ciò che le utility Tailwind non esprimono: caratteri, variabili e i due registri
 * (sala / carta), stili prose del testo del pannello, i componenti, i gradienti.
 * Viene da prototipi/C-sala/assets/css/public.css; le differenze sono annotate.
 *
 * Registro: la sala da concerto a luci spente. Nero caldo, avorio, ottone delle chiavi
 * del clarinetto; velluto una sola volta (fascia Stampa). Cormorant Garamond leggero
 * solo a corpi grandi + Albert Sans per tutto ciò che si legge (17–18 px in negativo).
 * Elemento memorabile: le pagine «Oltre la musica» passano alla modalità carta
 * (html.tema-carta, messa da base.php): avorio su cui il testo è nero. Il footer resta
 * sempre la sala.
 *
 * Struttura:
 *   0. Caratteri (sul server)
 *   1. Variabili del tema (sala) e registro carta
 *   2. Base
 *   3. Header sticky e navigazione
 *   4. Contenuto redazionale (.prose) e variante racconto
 *   5. Componenti (titoli, apertura, liste, opere, citazioni, video, locandine, link)
 *   6. Dati provvisori (#provvisori)
 *   7. Movimento ridotto e stampa
 *   8. Gradienti uw-grad-*
 *   9. Fotografie in bianco e nero (nuovo rispetto alla demo)
 *  10. Visore delle fotografie e dei video (dal tema di mariagabriellamariani)
 */

/* ============================================================================
   0. CARATTERI — ospitati sul server, nessuna richiesta a Google Fonts.
   Fontsource «variable» 5.3.0 (licenza OFL, file in ../fonts/): un file per stile
   copre tutti i pesi. Latino e latino esteso separati: il secondo si scarica solo
   se la pagina ha un carattere che gli appartiene.
   ============================================================================ */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-ext-wght-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: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-wght-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: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-ext-wght-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: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-wght-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: 'Albert Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/albert-sans-latin-ext-wght-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: 'Albert Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/albert-sans-latin-wght-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: 'Albert Sans';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/albert-sans-latin-ext-wght-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: 'Albert Sans';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/albert-sans-latin-wght-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;
}

/* ============================================================================
   1. VARIABILI DEL TEMA
   "paper" resta il nome del fondo e "ink" quello del testo, come nello scheletro
   del CMS: nella sala il fondo è scuro e l'inchiostro è avorio; nella carta si
   invertono. Le varianti -rgb servono a Tailwind per i modificatori di opacità.
   Contrasti sulla sala: ink 15,5:1 · ink-2 7,5:1 · accent 6,3:1.
   Contrasti sulla carta: ink 15,7:1 · ink-2 6,0:1 · accent 5,1:1.
   ============================================================================ */

:root {
    color-scheme: dark;
    --paper: #0e0c0b;          /* nero caldo: la sala a luci spente */
    --paper-rgb: 14 12 11;
    --paper-2: #1a1816;        /* antracite: fasce, pannelli, poster */
    --paper-2-rgb: 26 24 22;
    --ink: #ece4d6;            /* avorio */
    --ink-rgb: 236 228 214;
    --ink-2: #a89f91;          /* avorio spento: secondario, didascalie */
    --ink-2-rgb: 168 159 145;
    --rule: #332e29;           /* filetto (solo decorativo) */
    --rule-rgb: 51 46 41;
    --accent: #b08d57;         /* ottone delle chiavi del clarinetto */
    --accent-rgb: 176 141 87;
    --velluto: #4a1c20;        /* velluto: una sola superficie, la fascia Stampa */
    --velluto-rgb: 74 28 32;
    --font-body: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
    --measure: 34em;           /* giustezza del testo lungo: 66–72 battute in Albert Sans a 18 px */
}

/* Registro carta: le pagine di lettura lunga («Oltre la musica»).
   Dal palcoscenico alla vita: il cambio di fondo è la narrazione. */
html.tema-carta {
    color-scheme: light;
    --paper: #f1ebdf;
    --paper-rgb: 241 235 223;
    --paper-2: #e8e1d3;
    --paper-2-rgb: 232 225 211;
    --ink: #15120f;
    --ink-rgb: 21 18 15;
    --ink-2: #5f574e;
    --ink-2-rgb: 95 87 78;
    --rule: #d5ccbc;
    --rule-rgb: 213 204 188;
    --accent: #7a5d32;         /* ottone scuro: 5,1:1 sull'avorio */
    --accent-rgb: 122 93 50;
}

/* Il footer è sempre la sala: ridefinisce i token anche nelle pagine carta */
.site-footer,
.fascia-sala {
    color-scheme: dark;
    --paper: #0e0c0b;
    --paper-rgb: 14 12 11;
    --paper-2: #1a1816;
    --paper-2-rgb: 26 24 22;
    --ink: #ece4d6;
    --ink-rgb: 236 228 214;
    --ink-2: #a89f91;
    --ink-2-rgb: 168 159 145;
    --rule: #332e29;
    --rule-rgb: 51 46 41;
    --accent: #b08d57;
    --accent-rgb: 176 141 87;
    background-color: var(--paper);
    color: var(--ink);
}

/* La fascia carta dentro una pagina sala (home: blocco «Oltre la musica») */
.fascia-carta {
    color-scheme: light;
    --paper: #f1ebdf;
    --paper-rgb: 241 235 223;
    --paper-2: #e8e1d3;
    --paper-2-rgb: 232 225 211;
    --ink: #15120f;
    --ink-rgb: 21 18 15;
    --ink-2: #5f574e;
    --ink-2-rgb: 95 87 78;
    --rule: #d5ccbc;
    --rule-rgb: 213 204 188;
    --accent: #7a5d32;
    --accent-rgb: 122 93 50;
    background-color: var(--paper);
    color: var(--ink);
}

/* ============================================================================
   2. BASE
   ============================================================================ */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;      /* 17 px: minimo in negativo */
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) {
    body {
        font-size: 1.125rem;   /* 18 px */
    }
}

h1, h2, h3, h4 {
    text-wrap: balance;
}

/* Il core (public.css) dà Sora a h1-h3 e a .font-display, e il suo CSS arriva dopo
   tailwind.css: qui si torna ai caratteri della demo. I titoli senza classe prendono il
   carattere del testo, come nella demo; quelli in Cormorant lo dicono con la classe. */
h1, h2, h3 {
    font-family: inherit;
    letter-spacing: normal;
}
.font-display {
    font-family: var(--font-display);
    letter-spacing: normal;
}
.font-sans {
    font-family: var(--font-body);
}
/* Il core attiva le varianti 'cv11' e 'ss01' di Inter, che su Albert Sans cambierebbero
   alcune lettere: qui si tolgono. */
body {
    font-feature-settings: normal;
}

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

::selection {
    background-color: var(--accent);
    color: #0e0c0b;
}

/* 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;
}

/* Immagini: comportamento. Il bianco e nero lo dà la classe .foto-bn (§ 9) */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================================================
   3. HEADER STICKY (stato Alpine `scrolled` → .is-scrolled) E NAVIGAZIONE
   Nessun filetto a riposo: appare solo quando la pagina scorre sotto la barra.
   ============================================================================ */

.site-header {
    background-color: rgb(var(--paper-rgb) / .94);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background-color .3s ease;
}
@supports (backdrop-filter: blur(1px)) {
    .site-header {
        backdrop-filter: blur(10px);
    }
}
.site-header.is-scrolled {
    border-bottom-color: var(--rule);
    box-shadow: none;      /* il core aggiunge un'ombra: nella sala basta il filetto */
}

/* Logotipo: SVG a soli tracciati (Cormorant 500, «Massimo» in corsivo), vedi docs/03-logotipo.md.
   Applicato come maschera su un fondo currentColor: così segue il colore del tema (avorio in sala,
   inchiostro nelle pagine carta) senza una seconda versione del file. Rapporto 913:121. */
.site-name {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    color: var(--ink);
}
.site-logo {
    display: block;
    height: 1.35rem;
    aspect-ratio: 913 / 121;
    background-color: currentColor;
    -webkit-mask: url("../images/logo.svg") no-repeat center / contain;
    mask: url("../images/logo.svg") no-repeat center / contain;
}
@media (min-width: 640px) {
    .site-logo { height: 1.55rem; }
}

/* Barra desktop (da 1280 px): Albert Sans 15 px, ink-2 → ink; la voce corrente
   porta un tratto d'ottone sotto, l'unico segno della barra. */
.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .5rem .1rem;
    font-size: .9375rem;
    line-height: 1.2;
    color: var(--ink-2);
    border-bottom: 1px solid transparent;
    transition: color .2s ease;
}
.nav-link:hover {
    color: var(--ink);
}
.nav-link[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--accent);
}
.nav-sep {
    width: 1px;
    height: 1.1rem;
    background-color: var(--accent);
    opacity: .7;
    margin: 0 .6rem;
}

/* Lingua: testuale, IT / EN */
.lang-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 .4rem;
    font-size: .875rem;
    letter-spacing: .06em;
    color: var(--ink-2);
}
.lang-link:hover {
    color: var(--ink);
}
.lang-link[aria-current="true"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: .45em;
}

/* Pannello mobile: voci in Cormorant a corpo grande, come un programma di sala */
.mnav-link {
    display: block;
    padding: .55rem 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--ink);
}
.mnav-link[aria-current="page"] {
    color: var(--accent);
}
.mnav-sub {
    display: block;
    padding: .45rem 0 .45rem 1.25rem;
    font-size: 1.0625rem;
    color: var(--ink-2);
    border-left: 1px solid var(--rule);
}
.mnav-sub[aria-current="page"] {
    color: var(--ink);
    border-left-color: var(--accent);
}

/* Breadcrumb (partials/breadcrumb.php): solo nelle pagine di secondo livello */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .6rem;
    font-size: .9375rem;
    color: var(--ink-2);
}
.crumbs a {
    color: var(--ink-2);
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: .3em;
}
.crumbs a:hover {
    color: var(--ink);
}
.crumbs [aria-current="page"] {
    color: var(--ink);
}
.crumbs .crumb-sep {
    color: var(--accent);
}

/* ============================================================================
   4. CONTENUTO REDAZIONALE (.prose)
   Arriva dal WYSIWYG come HTML libero: gli elementi si stilano senza classi.
   Selettori .prose X (0,1,1) battono quelli del plugin typography
   (.prose :where(X), 0,1,0), compilati in tailwind.css prima di questo file.
   ============================================================================ */

body .prose {
    color: var(--ink);
    max-width: var(--measure);
    font-size: 1.0625rem;
    line-height: 1.7;
}
@media (min-width: 768px) {
    body .prose {
        font-size: 1.125rem;
    }
}
.prose p,
.prose li,
.prose td {
    color: var(--ink);
}
.prose p {
    margin-top: 0;
    margin-bottom: 1.2em;
}
.prose > :first-child {
    margin-top: 0;
}
.prose > :last-child {
    margin-bottom: 0;
}

/* Paragrafo d'apertura */
.prose .lead {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 1.3em;
}

/* Titoli: h2 e h3 in Cormorant, leggeri, mai in maiuscolo */
.prose h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2em;
    line-height: 1.1;
    letter-spacing: -.005em;
    color: var(--ink);
    margin-top: 2.2em;
    margin-bottom: .6em;
}
.prose h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.45em;
    line-height: 1.2;
    color: var(--ink);
    margin-top: 2em;
    margin-bottom: .6em;
}
.prose h2 + h3 {
    margin-top: 1em;
}

/* Testo in linea */
.prose a {
    color: var(--ink);
    font-weight: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}
.prose a:hover {
    color: var(--accent);
}
.prose strong {
    color: var(--ink);
    font-weight: 600;
}
.prose em {
    font-style: italic;
}
.prose small {
    font-size: .85em;
    color: var(--ink-2);
}

/* Elenchi: lineetta in ottone per i puntati, numeri in Cormorant per i numerati */
.prose ul {
    list-style: none;
    padding-left: 1.5em;
    margin: 1.2em 0 1.4em;
}
.prose ul > li {
    position: relative;
    margin: .45em 0;
}
.prose ul > li::before {
    content: "\2014";
    position: absolute;
    left: -1.5em;
    color: var(--accent);
}
.prose ol {
    list-style: decimal;
    padding-left: 1.7em;
    margin: 1.2em 0 1.4em;
}
.prose ol > li {
    padding-left: .3em;
    margin: .45em 0;
}
.prose ol > li::marker {
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 500;
}

/* Citazione: Cormorant corsivo; l'attribuzione (paragrafi successivi) in Albert Sans */
.prose blockquote {
    border-left: 1px solid var(--accent);
    padding-left: 1.4em;
    margin: 2.4em 0;
    color: var(--ink);
    font-style: normal;
    quotes: none;
}
.prose blockquote p {
    margin: 0;
}
.prose blockquote p:first-child {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.55em;
    line-height: 1.32;
    color: var(--ink);
}
.prose blockquote p + p {
    margin-top: .9em;
    font-family: var(--font-body);
    font-style: normal;
    font-size: .9em;
    line-height: 1.55;
    color: var(--ink-2);
}
.prose blockquote cite {
    font-style: italic;
    color: var(--ink);
}
.prose blockquote p:first-of-type::before,
.prose blockquote p:last-of-type::after {
    content: none;
}

/* Separatore del WYSIWYG: filetto semplice */
.prose hr {
    border: 0;
    height: 1px;
    background-color: var(--rule);
    margin: 3em 0;
}

/* Tabella: leggibile a 390 px; se troppo larga scorre invece di rompere la pagina */
.prose table {
    display: block;
    overflow-x: auto;
    width: 100%;
    font-size: .92em;
    line-height: 1.45;
    margin: 2em 0 2.4em;
    border-collapse: collapse;
}
.prose thead th {
    color: var(--ink-2);
    font-weight: 500;
    text-align: left;
    vertical-align: bottom;
    padding: 0 1.2em .6em 0;
    border-bottom: 1px solid var(--ink);
}
.prose tbody tr {
    border-bottom: 1px solid var(--rule);
}
.prose tbody td {
    padding: .75em 1.2em .75em 0;
    vertical-align: top;
}
.prose tbody td:first-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

/* Immagini e figure dentro il testo: nel racconto le foto sono tavole fuori testo */
.prose img {
    display: block;
    width: 100%;
    height: auto;
}
.prose figure {
    margin: 2.8em 0;
}
.prose figure img {
    margin: 0;
}
.prose figcaption,
.didascalia {
    font-family: var(--font-body);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--ink-2);
    margin-top: .7rem;
}
.prose figcaption .credito,
.didascalia .credito,
.credito {
    font-size: .875rem;
    color: var(--ink-2);
}

/* --- Attacco della biografia completa (modules/biografia.php): il primo paragrafo del
       testo del pannello esce come nella demo («.lead»), senza che il cliente debba fare
       niente nell'editor --- */
.prose-attacco > p:first-child {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1.4;
    margin-bottom: 1.3em;
}

/* --- Variante racconto (prose-racconto): la misura cresce di poco, lo stacco «***»
       diventa tre stelle d'ottone (è «Quel cielo stellato»), e le tavole possono
       uscire dalla colonna verso destra da lg in su. --- */
body .prose-racconto {
    max-width: 36em;
    line-height: 1.75;
}
.prose-racconto .incipit {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1.38;
}
.stacco {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    margin: 3.2em 0;
    color: var(--accent);
    font-size: 1.1rem;
    letter-spacing: 0;
    line-height: 1;
}
.stacco span {
    display: block;
}

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

/* --- Titoli di sezione e di pagina: Cormorant leggero, niente occhielli --- */
.t-page {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3rem, 7.5vw, 6.5rem);
    line-height: .98;
    letter-spacing: -.012em;
}
.t-section {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.3rem, 4.2vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -.008em;
}
.t-minor {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    line-height: 1.1;
}
.t-item {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.18;
}
/* Nota sotto un titolo di sezione: una riga in Albert Sans, secondaria */
.t-note {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 24em;
}

/* --- Apertura della home (carousel/hero): ritratto a tutto schermo, nome in basso ---
   L'immagine si accende una volta sola (hero-img); con prefers-reduced-motion resta ferma. */
.hero {
    position: relative;
    min-height: calc(100svh - 4rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--paper);
    overflow: hidden;
}
@media (min-width: 1280px) {
    .hero {
        min-height: calc(100svh - 7.25rem);
    }
}
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    animation: accendi 1.6s ease-out both;
}
@media (min-width: 768px) {
    .hero-img {
        object-position: 50% 20%;
    }
}
@keyframes accendi {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.hero-name {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3.1rem, 8.6vw, 8.25rem);
    line-height: .94;
    letter-spacing: -.015em;
    color: var(--ink);
}
.hero-line {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--ink);
    max-width: 30em;
}
@media (min-width: 768px) {
    .hero-line {
        font-size: 1.25rem;
    }
}

/* --- La tesi: una frase sola, grande, nel nero --- */
.tesi {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.75rem, 3.2vw, 2.9rem);
    line-height: 1.22;
    letter-spacing: -.005em;
    color: var(--ink);
    text-wrap: balance;
}
/* I tre pilastri: link testuali in riga, lo spazio li separa */
.pilastri {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2.4rem;
}
.pilastri a {
    font-size: 1.0625rem;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .32em;
    padding: .5rem 0;
}
.pilastri a:hover {
    color: var(--accent);
}

/* --- Liste con filetto: appuntamenti, pubblicazioni, cronologia, rassegna --- */
.lista {
    border-top: 1px solid var(--rule);
}
.lista > li,
.lista > div {
    display: grid;
    gap: .35rem 2rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px) {
    .lista > li,
    .lista > div {
        grid-template-columns: 11rem minmax(0, 1fr);
        align-items: baseline;
    }
    .lista.lista-stretta > li,
    .lista.lista-stretta > div {
        grid-template-columns: 6rem minmax(0, 1fr);
    }
}
/* La data in Cormorant: il numero è l'unico ornamento */
.lista-data {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.45rem;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: lining-nums;
}
.lista-luogo {
    color: var(--ink-2);
    font-size: 1rem;
}
.lista-titolo {
    color: var(--ink);
}
.lista-tipo {
    color: var(--ink-2);
    font-size: 1rem;
    margin-top: .15rem;
}

/* --- Le due opere: copertina su nero, testo sotto, nessun riquadro --- */
.opera img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--paper-2);
}
.opera-titolo {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.12;
}
.opera-sotto {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--ink);
}
.opera-dati {
    font-size: 1rem;
    color: var(--ink-2);
    line-height: 1.5;
}

/* --- Citazioni della critica --- */
.citazione {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    line-height: 1.22;
    color: var(--ink);
    text-wrap: balance;
}
.citazione-media {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    line-height: 1.3;
    color: var(--ink);
}
/* Stesso corpo, tondo: la biografia da citare e l'introduzione di «Oltre la musica» */
.citazione-media.diritto {
    font-style: normal;
    font-weight: 400;
}
.fonte {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.fonte cite,
.fonte .testata {
    font-style: normal;
    color: var(--ink);
}
/* Fascia in velluto: una sola superficie, la stampa */
.velluto {
    background-color: var(--velluto);
    color: var(--ink);
}
.velluto .fonte {
    color: #d8ccb6;
}
.velluto .fonte cite,
.velluto .fonte .testata {
    color: var(--ink);
}
.velluto .link {
    color: var(--ink);
}
.velluto .link:hover {
    color: #d8ccb6;
}

/* --- Rassegna stampa: ogni voce è testata in Cormorant, citazione, data --- */
.rassegna > li {
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--rule);
}
.rassegna > li:first-child {
    border-top: 1px solid var(--rule);
}
.rassegna-testata {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.1;
}
.rassegna-testo {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.32;
    color: var(--ink);
}

/* --- media/video-player: click-to-load, nulla da terzi prima del clic --- */
.yt-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--paper-2);
    overflow: hidden;
}
.yt-embed > img,
.yt-embed > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
.yt-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    background-color: rgb(0 0 0 / .25);
    transition: background-color .25s ease;
}
.yt-play:hover,
.yt-play:focus-visible {
    background-color: rgb(0 0 0 / .4);
}
.yt-play span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 999px;
    border: 1px solid var(--ink);
    font-size: 1.25rem;
    background-color: rgb(var(--paper-rgb) / .55);
}
.yt-play:hover span {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- Locandine: nastro orizzontale, poster in B/N con filetto --- */
.nastro {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: .75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}
.nastro > li {
    flex: 0 0 auto;
    width: 11rem;
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .nastro > li {
        width: 13rem;
    }
}
.nastro img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--rule);
    background: var(--paper-2);
}
.nastro a:hover img {
    border-color: var(--accent);
}

/* --- Griglia di fotografie con didascalia (gallerie dei racconti) --- */
.tavole {
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
    .tavole {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.tavole img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--paper-2);
}
.tavole figure.larga img {
    aspect-ratio: 3 / 2;
}
/* Documenti d'archivio: passe-partout chiaro e filetto, nessun filtro */
.documento img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    padding: .5rem;
    background: #fbf8f1;
}
.documento figcaption {
    margin-top: .6rem;
}

/* --- Scheda (racconto): dl a due colonne --- */
.scheda {
    display: grid;
    gap: .3rem 1.5rem;
    grid-template-columns: max-content minmax(0, 1fr);
    font-size: 1rem;
    line-height: 1.5;
}
.scheda dt {
    color: var(--ink-2);
}
.scheda dd {
    margin: 0;
    color: var(--ink);
}

/* --- Le ascensioni: elenco tipografico per gruppo montuoso --- */
.ascensioni h4 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.15;
    margin: 2.2rem 0 .6rem;
}
.ascensioni h3 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 1.05;
    margin: 3rem 0 .2rem;
}
.ascensioni h3:first-child {
    margin-top: 0;
}
.ascensioni ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ascensioni ul:not(.elenco-colonne) > li {
    display: grid;
    gap: .1rem 1.5rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
    line-height: 1.45;
}
@media (min-width: 768px) {
    .ascensioni li {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 10rem;
    }
}
.ascensioni .cima {
    color: var(--ink);
}
.ascensioni .quota {
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ascensioni .via {
    color: var(--ink-2);
}
.ascensioni .data {
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
    .ascensioni .data {
        text-align: right;
    }
}
/* Elenco su più colonne (ferrate, testate) */
.elenco-colonne {
    columns: 2;
    column-gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .elenco-colonne {
        columns: 3;
    }
}
.elenco-colonne li {
    break-inside: avoid;
    padding: .25rem 0;
    color: var(--ink);
}

/* --- Link e pulsanti --- */
.link {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
}
.link:hover {
    color: var(--accent);
}
.link-quiet {
    color: var(--ink-2);
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: .3em;
}
.link-quiet:hover {
    color: var(--ink);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 2.75rem;
    border: 1px solid var(--ink);
    color: var(--ink);
    padding: .7rem 1.35rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover {
    background-color: var(--ink);
    color: var(--paper);
}
.btn-ottone {
    border-color: var(--accent);
    color: var(--accent);
}
.btn-ottone:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #0e0c0b;
}
.ext-icon {
    font-size: .72em;
    color: var(--accent);
    margin-left: .35em;
}
.btn:hover .ext-icon {
    color: inherit;
}
/* Voci PDF (download): icona ottone, etichetta sottolineata */
.pdf-link {
    display: inline-flex;
    align-items: baseline;
    gap: .55rem;
    color: var(--ink);
}
.pdf-link i {
    color: var(--accent);
    font-size: .9em;
}
.pdf-link span {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
}
.pdf-link:hover span {
    color: var(--accent);
}

/* --- Social (contatti e footer): icone con etichetta --- */
.social a {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-height: 2.75rem;
    color: var(--ink);
}
.social a i {
    width: 1.5rem;
    text-align: center;
    color: var(--accent);
}
.social a:hover {
    color: var(--accent);
}

/* --- E-mail grande (contatti e home): Cormorant leggero --- */
.email-grande {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.6rem, 3.6vw, 3.2rem);
    line-height: 1.1;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    overflow-wrap: anywhere;
}
.email-grande:hover {
    color: var(--accent);
}

/* --- Footer: ruoli in riga, colonne di link --- */
.site-footer a {
    color: var(--ink-2);
}
.site-footer a:hover {
    color: var(--ink);
}
.footer-titolo {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: .75rem;
}

/* --- Cookie: toggle (il knob è uno <span> reale) --- */
.toggle-track {
    display: block;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--rule);
    border: 1px solid rgb(var(--ink-2-rgb) / .5);
    transition: background-color .2s ease;
}
.toggle-knob {
    pointer-events: none;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--ink);
    transition: transform .2s ease;
}
.peer:checked ~ .toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}
.peer:checked ~ .toggle-knob {
    transform: translateX(1.25rem);
}
.peer:focus-visible ~ .toggle-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================================================
   6. DATI PROVVISORI — evidenziati con #provvisori nell'URL o Maiusc+P
   ============================================================================ */

.mostra-provvisori [data-provvisorio="true"] {
    outline: 2px dashed #d97706 !important;
    outline-offset: 2px;
    background-color: rgba(250, 204, 21, .22) !important;
}
.mostra-provvisori [data-provvisorio="true"]::after {
    content: attr(data-prov);
    font: 700 10px/1 ui-monospace, monospace;
    background: #d97706;
    color: #fff;
    padding: 2px 4px;
    margin-left: 4px;
    vertical-align: super;
}

/* ============================================================================
   7. 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;
    }
}

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

/* ============================================================================
   8. GRADIENTI — scritti per esteso
   Come nella demo e su Mariani, i gradienti stanno qui e non nelle utility
   bg-gradient-to-* di Tailwind. uw-grad-hero-bottom ridefinisce quello del core
   (public.css) con il nero della sala; uw-grad-vignetta è della demo.
   ============================================================================ */

/* Velatura dal basso sull'apertura: il nome resta leggibile sul ritratto */
.uw-grad-hero-bottom {
    background-image: linear-gradient(to top,
        rgba(14, 12, 11, .92) 0%, rgba(14, 12, 11, .55) 38%, rgba(14, 12, 11, 0) 72%);
}
/* Vignettatura leggera: la luce di scena si spegne ai bordi */
.uw-grad-vignetta {
    background-image: radial-gradient(ellipse at 50% 35%,
        rgba(14, 12, 11, 0) 45%, rgba(14, 12, 11, .55) 100%);
}

/* ============================================================================
   9. FOTOGRAFIE IN BIANCO E NERO
   Nella demo la ricetta (scala di grigi, autocontrasto, curva a S, vignettatura,
   grana) era applicata ai file. Nel sito la fa il CSS, così una foto caricata dal
   cliente prende lo stesso aspetto senza passare da noi. La vignettatura resta
   all'apertura (uw-grad-vignetta). I documenti d'archivio (1939, foulard) non
   portano la classe e restano come sono.
   ============================================================================ */

.foto-bn {
    filter: grayscale(1) contrast(1.08) brightness(.96);
}
html.tema-carta .foto-bn {
    filter: grayscale(1) contrast(1.04);
}

/* ============================================================================
   10. VISORE DELLE FOTOGRAFIE E DEI VIDEO (assets/js/tema.js)
   Dal tema di mariagabriellamariani: un <dialog> al posto di Fancybox e jQuery.
   ============================================================================ */

.amg-visore {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ece4d6;
}

.amg-visore::backdrop {
    background: rgb(14 12 11 / .94);
}

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

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

.amg-visore figcaption {
    font-family: var(--font-body);
    font-size: .9375rem;
    text-align: center;
    max-width: 60ch;
    opacity: .85;
}

.amg-visore button {
    position: absolute;
    background: none;
    border: 0;
    color: #ece4d6;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s ease;
}

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

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

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

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

.amg-visore-prec { left: .25rem; }
.amg-visore-succ { right: .25rem; }
.amg-visore-prec::before { content: "\2039"; }
.amg-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 */
.amg-visore-schermo {
    width: min(100%, 1400px, calc((100vh - 9rem) * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #000;
}

.amg-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) {
    .amg-visore-video figure {
        padding-left: 0;
        padding-right: 0;
    }
    .amg-visore-video .amg-visore-freccia {
        top: auto;
        bottom: .75rem;
        transform: none;
    }
}

/* Scorrimento morbido solo a pagina caricata (classe aggiunta da tema.js): arrivando
   con un'ancora, il browser non parte verso l'ancora mentre i caratteri si caricano */
html:not(.scorrimento-morbido) { scroll-behavior: auto; }

/* Pagine legali (modules/privacy-policy.php, cookie-policy.php): i testi del core portano
   classi grigie e blu pensate per un fondo chiaro; qui prendono i colori del tema. */
.legale [class*="text-gray"],
.legale [class*="text-blue"] {
    color: inherit;
}
.legale a[class*="text-blue"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: .22em;
}
.legale [class*="bg-gray"],
.legale [class*="bg-blue"] {
    background-color: var(--paper-2);
}
.legale [class*="border-gray"] {
    border-color: var(--rule);
}

/* ============================================================================
   Concerti (S2): schede dei box, prossimi concerti, archivio per decenni
   ============================================================================ */
.prose-scheda {
    font-size: 1rem;
}
/* la prima riga di una scheda, quando ne seguono altre, è la nota: luogo, anni, ruolo */
.prose-scheda > p:first-child:not(:last-child) {
    color: var(--ink-2);
}
.lista-ora {
    display: block;
    margin-top: .3rem;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--ink-2);
}

/* campo di ricerca: una riga sola, filetto sotto come le liste */
.campo {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink-2);
    border-radius: 0;
    color: var(--ink);
    font: inherit;
    padding: .55rem 0;
    min-height: 2.75rem;
}
.campo::placeholder { color: var(--ink-2); opacity: .8; }
.campo:focus { outline: none; border-bottom-color: var(--accent); }
.campo:focus-visible { box-shadow: 0 1px 0 0 var(--accent); }

/* un decennio = un <details>: il riepilogo è una riga della lista */
.decennio {
    border-top: 1px solid var(--rule);
}
.decennio:last-of-type {
    border-bottom: 1px solid var(--rule);
}
.decennio > summary {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.3rem 0;
    cursor: pointer;
    list-style: none;
}
.decennio > summary::-webkit-details-marker { display: none; }
.decennio > summary::after {
    content: "+";
    margin-left: auto;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--accent);
}
.decennio[open] > summary::after { content: "–"; }
.decennio > summary:hover .decennio-anni { color: var(--accent); }
.decennio > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.decennio-anni {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: lining-nums;
    transition: color .2s;
}
.decennio-conto {
    color: var(--ink-2);
    font-size: 1rem;
}
.archivio-anno {
    padding-bottom: 1.5rem;
}
.archivio-anno-titolo {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--accent);
    font-variant-numeric: lining-nums;
    padding: 1rem 0 .4rem;
}
.archivio > li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: .2rem 1.25rem;
    padding: .7rem 0;
    border-top: 1px solid rgb(var(--ink-2-rgb) / .18);
    font-size: 1rem;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .archivio > li { grid-template-columns: 6rem minmax(0, 1fr); }
}
.archivio-data {
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.archivio-luogo { color: var(--ink); }
.archivio-ente { color: var(--ink-2); }
.archivio-programma {
    color: var(--ink-2);
    font-style: italic;
}
/* il filtro nasconde con l'attributo hidden: vince sul display:grid delle righe */
#archivio [hidden] { display: none !important; }
/* titoli lunghi senza spazi (Klarinettenquintett) non escono dalla colonna */
.t-section, .t-minor {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* --- Gallerie (modules/gallerie-foto-detail.php): colonne, ogni foto nel suo formato --- */
.galleria-colonne {
    columns: 1;
    column-gap: 2rem;
}
@media (min-width: 640px) { .galleria-colonne { columns: 2; } }
@media (min-width: 1024px) { .galleria-colonne { columns: 3; } }
.galleria-colonne > li {
    break-inside: avoid;
    margin-bottom: 2.5rem;
}

/* Elenco a colonne dentro un box (amg_testo_box, es. le testate): niente lineette */
.prose ul.elenco-colonne {
    padding-left: 0;
    margin-top: 0;
}
.prose ul.elenco-colonne > li {
    margin: 0;
}
.prose ul.elenco-colonne > li::before {
    content: none;
}

/* Stampa: elenco delle interviste e degli articoli senza citazione */
.rassegna-riga {
    font-size: 1.0625rem;
}

/* --- Racconti (S7): attacco, tavole larghe, gruppi di documenti, ascensioni in un box --- */
.prose-racconto img {
    filter: grayscale(1) contrast(1.04);
}
.prose-racconto .documento img,
.prose-racconto img.documento {
    filter: none;
}
@media (min-width: 1024px) {
    .prose-racconto figure.larga,
    .prose-racconto .documenti {
        margin-right: -22%;
        width: 122%;
    }
}
.prose-racconto .documenti {
    display: grid;
    gap: 2rem;
    margin: 3rem 0;
}
@media (min-width: 640px) {
    .prose-racconto .documenti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .prose-racconto .documenti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.prose-racconto .documenti figure {
    margin: 0;
}
.prose.ascensioni ul > li::before {
    content: none;
}
.prose.ascensioni ul {
    padding-left: 0;
}
.prose.ascensioni ul > li {
    margin: 0;
}
.box-documento img {
    filter: none !important;
}

/* --- Modulo contatti (S8): campi a filetto come il filtro dell'archivio --- */
#scrivi .campo {
    display: block;
    width: 100%;
    margin-top: .35rem;
}
#scrivi textarea.campo {
    border: 1px solid var(--ink-2);
    padding: .75rem;
    line-height: 1.6;
    resize: vertical;
}
.campo-etichetta {
    display: block;
    font-size: .9375rem;
    color: var(--ink-2);
}
.campo-errore {
    margin-top: .4rem;
    font-size: .9375rem;
    color: var(--accent);
}
#scrivi .campo[aria-invalid="true"] {
    border-color: var(--accent);
}

/* ============================================================================
   Tabelle delle pagine legali (privacy, cookie): stesso disegno delle liste del tema.
   Niente cornice né fondo; filetto d'inchiostro sotto le intestazioni, filetti sottili fra
   le righe; il testo va a capo (la regola generale .prose td:first-child nowrap è per le
   date, qui spingeva fuori la seconda colonna). Le tabelle con 4+ colonne (i cookie)
   diventano una scheda per riga; sotto i 640 px tutte. Le etichette delle celle
   (data-label) le scrive tema.js copiandole dalle intestazioni.
   ============================================================================ */
.legale .prose .overflow-x-auto { overflow: visible; margin: 1.75em 0 2.25em; }
.legale .prose table {
    display: table; width: 100%; margin: 0; border: 0; border-radius: 0;
    border-collapse: collapse; font-size: .95em; line-height: 1.5;
}
.legale .prose table [class*="text-sm"] { font-size: inherit; line-height: inherit; }
.legale .prose thead { background: transparent; }
.legale .prose thead th {
    padding: 0 1.25em .7em 0; border: 0; border-bottom: 1px solid var(--ink);
    color: var(--ink-2); font-size: .8em; font-weight: 500; letter-spacing: .04em;
    text-transform: uppercase; vertical-align: bottom; white-space: nowrap;
}
/* :not([hidden]) per vincere su divide-y di Tailwind (filetto chiaro fra le righe) */
.legale .prose tbody > tr:not([hidden]) { border: 0; border-bottom: 1px solid var(--rule); }
.legale .prose tbody td {
    padding: .95em 1.25em .95em 0; vertical-align: top;
    color: var(--ink-2); white-space: normal; font-variant-numeric: normal;
}
.legale .prose thead th:last-child,
.legale .prose tbody td:last-child { padding-right: 0; }
.legale .prose tbody td:first-child { color: var(--ink); font-weight: 500; }
.legale .prose td.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em; font-weight: 400; white-space: nowrap;
}

/* Tabelle larghe (i cookie): una scheda per riga anche al computer.
   A sinistra il nome, a destra la finalità e sotto Fornitore, Durata, Tipo. */
.legale .prose table:has(thead th:nth-child(4)) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.legale .prose table:has(thead th:nth-child(4)),
.legale .prose table:has(thead th:nth-child(4)) tbody { display: block; width: 100%; }
.legale .prose table:has(thead th:nth-child(4)) tbody > tr:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
    column-gap: 1.5em; row-gap: .3em; padding: 1.1em 0;
}
.legale .prose table:has(thead th:nth-child(4)) tbody > tr:not([hidden]):first-child {
    border-top: 1px solid var(--ink);
}
.legale .prose table:has(thead th:nth-child(4)) td { display: block; padding: 0; grid-column: 2; }
.legale .prose table:has(thead th:nth-child(4)) td:first-child { grid-column: 1; grid-row: 1 / span 4; order: -2; }
.legale .prose table:has(thead th:nth-child(4)) td:nth-child(3) { order: -1; color: var(--ink); }
.legale .prose table:has(thead th:nth-child(4)) td:nth-child(n+2):not(:nth-child(3)) { font-size: .88em; }
.legale .prose table:has(thead th:nth-child(4)) td:nth-child(n+2):not(:nth-child(3))[data-label]::before {
    content: attr(data-label) ": "; color: var(--ink-2); opacity: .8;
}

@media (max-width: 639px) {
    .legale .prose thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
    }
    .legale .prose table, .legale .prose tbody, .legale .prose td { display: block; width: 100%; }
    .legale .prose tbody > tr:not([hidden]) { display: block; padding: 1em 0; }
    .legale .prose tbody > tr:not([hidden]):first-child { border-top: 1px solid var(--ink); }
    .legale .prose tbody td { padding: 0; }
    .legale .prose tbody td + td { margin-top: .35em; }
    .legale .prose tbody td[data-label] + td[data-label]::before {
        content: attr(data-label) ": "; color: var(--ink-2); opacity: .8;
    }
    .legale .prose table:has(thead th:nth-child(4)) tbody > tr:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); }
    .legale .prose table:has(thead th:nth-child(4)) td,
    .legale .prose table:has(thead th:nth-child(4)) td:first-child { grid-column: 1; grid-row: auto; }
    .legale .prose table:has(thead th:nth-child(4)) td:nth-child(3)::before { content: none; }
}

/* Tendina del menu (Media): voci con il loro respiro; la voce attiva ha un tratto d'ottone
   a sinistra invece del filetto sotto (largo quanto la tendina, sembrava un separatore) */
.nav-tendina {
    padding: .5rem 0;
    min-width: 14rem;
    margin-top: .35rem;
    box-shadow: 0 14px 32px rgb(0 0 0 / .4);
}
.nav-tendina .nav-link {
    display: flex;
    width: 100%;
    min-height: 0;
    padding: .7rem 1.5rem;
    border-bottom: 0;
}
.nav-tendina .nav-link:hover {
    color: var(--ink);
    background-color: rgb(var(--ink-rgb) / .05);
}
.nav-tendina .nav-link[aria-current="page"] {
    color: var(--ink);
    box-shadow: inset 2px 0 0 var(--accent);
}