html,
body {
    font-size: var(--memo-text-font-size);
    font-family: var(--memo-body-font-family);
    font-weight: var(--memo-body-font-weight);
    color: var(--memo-body-text);
    background-color: var(--memo-body-bg);
    height: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--memo-heading-font-family);
    font-weight: var(--memo-heading-font-weight);
}

h1 {
    margin-top: var(--memo-title-mt);
    font-size: var(--memo-title-font-size);
}

h2 {
    margin-top: var(--memo-title-mt);
    font-size: var(--memo-subtitle-font-size);
}

/* La scala sotto l'h2 era scoperta, e quel che rendeva non era una scala. L'h3 stava a 25,4px,
   cioè la misura del testo del corpo (25px): un titoletto di sezione si distingueva solo perché
   grassetto. L'h4 non era dichiarato affatto e prendeva il default di Bootstrap, 30px, cioè
   PIÙ GRANDE del suo h3; l'h5 tornava a 25 e l'h6 a 20. Nei template la cosa si vede già
   aggirata a mano — <h4 class="h6">, <h4 class="h5"> — che è la prova del difetto, non la sua
   soluzione: quelle classi restano dove sono e continuano a valere, qui si rimette in ordine il
   livello sotto.
   Le misure discendono tutte dal token del sottotitolo, così seguono le tre dimensioni
   dell'accessibilità invece di restare inchiodate. */
h3 {
    font-size: calc(var(--memo-subtitle-font-size) * 0.88);
}

h4 {
    font-size: calc(var(--memo-subtitle-font-size) * 0.75);
}

h5 {
    font-size: calc(var(--memo-subtitle-font-size) * 0.68);
}

h6 {
    font-size: calc(var(--memo-subtitle-font-size) * 0.62);
}


b,
strong {
    font-family: var(--memo-strong-font-family);
    font-weight: var(--memo-strong-font-weight);
}

h1>.bi {
    /* icona sul fondo della pagina: vedi --memo-accent-on-ground */
    color: var(--memo-accent-on-ground) !important;
}

body>header,
body>footer {
    background-color: var(--memo-navbar-bg) !important;
}

/* Portante del toolparamdescription WebMCP sui gruppi di controlli omonimi (caselle delle
   province, modalità di percorrenza, forme…). Chrome sintetizza un parametro per gruppo e la
   descrizione la legge SOLO dal <fieldset> che lo racchiude: sui controlli, primo o tutti che
   sia, la ignora, e un <div> non basta. Ma un fieldset apre un contesto di formattazione a
   blocco, i margini smettono di collassare e l'impaginazione si sposta; display: contents lo
   toglie dal flusso lasciandolo nel DOM, che è l'unico posto dove serve. */
.tool-param-group {
    display: contents;
}

.visually-hidden-focusable {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background-color: var(--memo-navbar-bg);
    color: var(--memo-navbar-link-color);
    text-decoration: none;
    transform: translateY(-200%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
    transform: translateY(0);
    opacity: 1;
}

.visually-hidden-focusable:focus:not(:focus-visible) {
    transform: translateY(-200%);
    opacity: 0;
}

/* Il bersaglio dello skip link ha tabindex -1 e riceve il fuoco per programma: senza questo
   il salto disegnerebbe un contorno attorno a tutto il contenuto della pagina. */
#main-content:focus {
    outline: none;
}

/* ===== Pavimento del fuoco ================================================= */

/* Dove il fuoco da tastiera si vede, e dove non si vedeva affatto: le pastiglie delle
   memorie e dei percorsi — cioè il modo in cui si naviga questo sito — non mostravano
   niente. Sono `.btn` senza variante Bootstrap, perché campitura e inchiostro se li danno
   da sé: Bootstrap però spegne il contorno di ogni `.btn` (`outline: 0`) e al suo posto
   mette un'ombra che prende il colore da --bs-btn-focus-box-shadow, dichiarata soltanto
   dalle varianti (.btn-primary, .btn-secondary…). Senza variante non c'è né l'una né
   l'altra: tabulando l'elenco di una provincia il fuoco spariva per seicento pastiglie.
   Questa regola vale 0,2,0 come quella di Bootstrap e arriva dopo, quindi la scavalca.

   L'anello è l'accento sul fondo della pagina, l'unico dei nostri che si ribalta con tutt'e
   tre i temi (ruggine sul chiaro, ruggine chiaro sul notturno, blu sul daltonico); lo stacco
   di 2px lo tiene fuori dalla campitura della pastiglia, dove starebbe ruggine su salmone. */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--memo-accent-on-ground);
    outline-offset: 2px;
}

/* Sul blu della barra e del piè quell'accento non si vede: il ruggine su quel fondo fa
   1,55:1, ed è lo stesso motivo per cui l'anello della barra qui sotto ha smesso di usare
   il colore del passaggio del mouse. Lì l'anello è il salmone dei link della barra, che su
   quel blu fa 7,2:1 — e nel tema daltonico è il quasi bianco, che ne fa di più. */
body>header a:focus-visible,
body>header button:focus-visible,
body>footer a:focus-visible,
body>footer button:focus-visible {
    outline-color: var(--memo-navbar-link-color);
}

.navbar li:hover,
.navbar li a:hover,
.nav li a:hover {
    color: var(--memo-navbar-link-hover-color) !important;
    background-color: var(--memo-navbar-bg) !important;
    transition: all 0.35s ease;
}

/* Il colore era quello del passaggio del mouse, cioè il ruggine: sul blu della barra fa
   1,55:1 e l'anello si vedeva sì e no. Il salmone è il colore che i link della barra hanno
   già, ed è scelto per stare su quel fondo (7,2:1). */
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible {
    outline: 3px solid var(--memo-navbar-link-color);
    outline-offset: 4px;
}

.navbar .nav-link:focus:not(:focus-visible) {
    outline: none;
}

a.footer-external-link {
    color: #ddd !important;
    text-decoration: none !important;
}

a.footer-external-link i {
    color: #aaa !important;
    font-size: 70%;
    margin-bottom: 4px;
}

a.dark-link {
    color: var(--memo-color-dark-blue) !important;
    text-decoration-color: var(--memo-color-dark-blue);
    text-decoration-thickness: 0.5px;
}

#header_memo_logo {
    height: 100%;
    min-height: 32px;
}

body>footer p {
    color: #fff !important;
}

.footer-logo-container {
    width: 20vw;
    max-width: 130px;
}

/* `height: auto` è obbligatorio da quando i due loghi dichiarano width e height nel tag: senza,
   l'altezza dell'attributo (614px, 540px) vale come una regola e il logo esce lungo mezzo piè,
   perché la larghezza gliela fissa questa riga e la proporzione non entra mai in gioco. Con
   `auto` l'altezza torna a discendere dalla proporzione — che è tutto quel che quei due numeri
   devono dire — e lo spazio resta prenotato anche prima che l'immagine arrivi. */
.footer-logo-container>img {
    width: 100%;
    height: auto;
}

/* ===== PWA ================================================================ */

/* L'icona accanto all'invito «Porta MEMO con te», in fondo al piè: è la maskable del
   manifest, disegnata con la zona sicura attorno alla «m», e qui si ritaglia tonda —
   la stessa forma che l'icona prenderà fra le app una volta installata.
   L'anello serve: il fondo dell'icona è lo stesso blu del piè, quindi senza un bordo il
   tondo sparirebbe e resterebbe una «m» che galleggia. Sta in box-shadow e non in border
   perché con box-sizing: border-box un bordo mangerebbe l'immagine invece di cingerla. */
.pwa-invite-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Sul telefono l'icona cede spazio al testo: a 390px i 5rem lasciavano una colonna di
   poco più di 200px, con le due righe che diventavano sei e l'etichetta del pulsante
   spezzata in due. */
@media (max-width: 575.98px) {
    .pwa-invite-icon {
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* Ciò che è marcato .memo-pwa-only esiste solo dentro la PWA installata: sul sito
   (display-mode: browser) resta nascosto. È il gemello di .bo-pwa-only del backoffice
   (archivio.css), che il sito non carica. Nascosto per default = fail-closed anche sui
   browser che non capissero la media query: un segnale server-side della PWA non
   esiste, e il ripiego dev'essere chiuso. */
.memo-pwa-only {
    display: none;
}

@media (display-mode: standalone) {
    .memo-pwa-only {
        display: block;
    }
}

/* Lo spazio agli sgoccioli, sotto i pulsanti del pacchetto percorso: finché è una nota
   di servizio resta muta come il resto della riga, ma quando il telefono sta per non
   avere più posto va vista senza doverla leggere. Il gemello del backoffice è
   .bo-notebook-storage--low in archivio.css: stesse soglie, stessa quota, stesso telefono. */
#pwa-pack-storage.memo-pack-storage--low {
    color: var(--memo-body-text);
    font-weight: 600;
}

/* Il tost degli «avvisi sul territorio» (territory_alerts.js): è l'unico tost del sito
   pubblico, lo costruisce lo script e quindi va vestito qui. Il fondo che Bootstrap gli dà
   è semitrasparente — rgba(--bs-body-bg-rgb, .85) — e sopra la fotografia della home il
   testo ci spariva dentro; per giunta --bs-body-bg-rgb resta il bianco di serie anche col
   tema scuro, perché il tema di MEMO sta in data-theme e non in [data-bs-theme]. Riscrivere
   le variabili del componente con i token del sito risolve tutte e due le cose, e i tre
   temi vengono da soli invece di essere tre regole da tenere allineate a mano. */
#memo-toast-container .toast {
    --bs-toast-bg: var(--memo-card-bg);
    --bs-toast-color: var(--memo-body-text);
    --bs-toast-header-bg: var(--memo-card-bg);
    --bs-toast-header-color: var(--memo-body-text);
    --bs-toast-border-color: var(--memo-border-color);
    --bs-toast-header-border-color: var(--memo-border-color);
}

/* Per la stessa ragione la X di chiusura, che è un'immagine SVG scura, col tema notturno
   sparirebbe nel fondo: Bootstrap la ribalta da sé solo dentro [data-bs-theme="dark"]. */
:root[data-theme="dark"] #memo-toast-container .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.fade-in-out {
    animation: fadeIn linear 1.25s infinite;
}

@keyframes fadeIn {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

.hover-bright,
.hover-light-bright {
    filter: brightness(1) saturate(1);
    transition: filter 1.5s ease;
}

.hover-bright:hover {
    filter: brightness(1.1) saturate(1.5);
    transition: filter 0.5s ease;
}

.hover-light-bright:hover {
    filter: brightness(1.07) saturate(1.25);
    transition: filter 0.5s ease;
}

.small-caption {
    font-size: 75%;
    line-height: 14px;
    color: #999;
}

.figure-caption.picture-credit {
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--memo-body-muted-text);
}

:root[data-theme="dark"] .figure-caption {
    color: var(--memo-body-muted-text);
}

.tiny-caption {
    font-size: 50%;
    line-height: 14px;
    color: #aaa;
}


a {
    color: var(--memo-link-color);
    text-decoration: underline;
    text-decoration-color: var(--memo-link-color);
    text-decoration-thickness: 2px;
    -webkit-text-decoration-color: var(--memo-link-color);
    /* Safari <14.1 */
}

a:hover {
    color: var(--memo-link-hover-color);
    text-decoration-color: var(--memo-link-hover-underline-color);
    transition: all 0.35s ease;
}

a.btn-light:hover {
    color: #000;
    background-color: #eee;
    border-color: var(--memo-color-light-blue);
    transition: all 0.35s ease;
}

.theme-switcher-wrapper {
    width: 100%;
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .theme-switcher-wrapper {
        width: auto;
        margin-top: 0;
    }
}

.theme-switcher-menu-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--memo-theme-switch-color);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.25rem;
    height: 2.25rem;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;
    width: 2.25rem;
}

.theme-switcher-menu-button:hover,
.theme-switcher-menu-button:focus-visible {
    color: var(--memo-theme-switch-active-color);
    background-color: var(--memo-theme-switch-active-bg);
}

.theme-switcher-menu-button:focus-visible {
    outline: 3px solid var(--memo-theme-switch-active-color);
    outline-offset: 2px;
}

.theme-switcher-menu-button:focus:not(:focus-visible) {
    outline: none;
}

.theme-switcher-dropdown-menu {
    min-width: 16rem;
    background-color: var(--memo-navbar-bg);
    color: var(--memo-navbar-link-color);
}

.theme-switcher-dropdown-menu .dropdown-title {
    letter-spacing: 0.08em;
    color: var(--memo-navbar-link-color);
}

.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem;
    border-radius: 999px;
    background-color: var(--memo-theme-switch-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.theme-switcher__button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-sizing: border-box;
    color: var(--memo-theme-switch-color);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    height: 1.75rem;
    justify-content: center;
    line-height: 1;
    min-width: 2.1rem;
    padding-inline: 0.4rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-switcher__button:focus {
    outline: 2px solid var(--memo-theme-switch-active-color);
    outline-offset: 2px;
}

.theme-switcher__button.active {
    background-color: var(--memo-theme-switch-active-bg);
    color: var(--memo-theme-switch-active-color);
}

.theme-switcher__button:hover {
    color: var(--memo-theme-switch-active-color);
}

.theme-switcher__font-size-preview {
    pointer-events: none;
    font-family: "Mulish Bold", sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-block;
}

/* Le tre «aA» di anteprima. I valori erano scritti due volte — qui in rem e nel template
   come style="font-size: 80%|105%|130%" — e l'inline vinceva sempre: queste regole non
   arrivavano a schermo e la scaletta mostrata (13,6 / 17,85 / 22,1 px) non era quella
   progettata. Tenuta la resa che l'utente vede da sempre, espressa in em: è la stessa cosa
   che diceva la percentuale, ma detta una volta sola. */
.theme-switcher__font-size-preview--normal {
    font-size: 0.8em;
}

.theme-switcher__font-size-preview--large {
    font-size: 1.05em;
}

.theme-switcher__font-size-preview--xlarge {
    font-size: 1.3em;
}

.theme-switcher.font-family-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-radius: 0.75rem;
}

.theme-switcher__button--font {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    height: auto;
    padding: 0.4rem 0.65rem;
    border-radius: 0.75rem;
    gap: 0.2rem;
    font-size: 0.65rem;
    line-height: 1.1;
    text-align: left;
}

.theme-switcher__button--font .theme-switcher__button-preview {
    font-size: 1rem;
    line-height: 1;
}

.theme-switcher__button--font .theme-switcher__button-label {
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.theme-switcher__button--font-standard .theme-switcher__button-preview {
    font-family: "Mulish Regular", sans-serif;
    font-weight: 600;
}

.theme-switcher__button--font-altalegibilita .theme-switcher__button-preview {
    font-family: "Atkinson Hyperlegible", sans-serif;
    font-weight: 600;
}

.theme-switcher__button--font-relax .theme-switcher__button-preview {
    font-family: "Lexend Deca", sans-serif;
    font-weight: 600;
}

.theme-switcher__button--font-dislessia .theme-switcher__button-preview {
    font-family: "OpenDyslexic", sans-serif;
    font-weight: 600;
}

.btn-dark-primary {
    background-color: var(--memo-color-blue);
    border-color: var(--memo-color-blue);
    color: white;
}

.btn-dark-primary:hover {
    background-color: var(--memo-color-light-blue);
    border-color: var(--memo-color-light-blue);
    color: var(--memo-color-dark-blue);
    transition: all 0.35s ease;
}

.btn-dark-primary:active {
    background-color: var(--memo-color-light-blue);
    border-color: var(--memo-color-light-blue);
    color: var(--memo-color-dark-blue);
}

.image-border {
    padding: 5px;
    border: solid 1px var(--memo-border-color);
}

/* Stessa trappola dei loghi del piè, dove è enorme: la fotografia dichiara nel tag le misure
   del ritaglio servito — che dicono la PROPORZIONE, non la dimensione — e la larghezza gliela
   fissa il CSS. Senza `height: auto` l'altezza dell'attributo vale come una regola e la
   proporzione non entra mai in gioco: la principale di una scheda usciva alta 1400px dentro
   una colonna da 525, cioè il doppio del dovuto, e su un telefono una foto orizzontale da
   1320x950 diventava una colonna alta quasi quattro volte il giusto. Le secondarie non ci
   passano: l'altezza gliela detta `.gallery-thumb-img` qui sotto. */
.figure-img img.w-100 {
    height: auto;
}

/* ── Galleria foto (monumenti e percorsi): la principale riempie la larghezza
   (o sta centrata a 525px se verticale), le altre sono alte 350px e vanno a capo
   liberamente. La lightbox PhotoSwipe non cambia. ── */
.memo-gallery .gallery-hero .figure {
    display: block;
    width: 100%;
    margin: 0;
}

.memo-gallery .gallery-hero-portrait .figure {
    width: min(525px, 100%);
    margin-inline: auto;
}

.memo-gallery .gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    /* con altezze diverse le figure si allineano in basso, così foto e crediti
       delle secondarie stanno sulla stessa linea di base */
    align-items: flex-end;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
}

.memo-gallery .gallery-thumbs .figure {
    margin: 0;
    max-width: 100%;
}

.gallery-thumb-img {
    height: 350px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* le secondarie orizzontali riempiono la riga in coppia (0.5rem = metà del column-gap) */
.memo-gallery .gallery-thumbs .gallery-thumb-landscape {
    width: calc(50% - 0.5rem);
}

.memo-gallery .gallery-thumbs .gallery-thumb-landscape .gallery-thumb-img {
    height: auto;
    width: 100%;
}

/* su schermi stretti le secondarie tornano impilate a tutta larghezza */
@media (max-width: 575.98px) {
    .memo-gallery .gallery-thumbs .figure {
        width: 100%;
    }

    .gallery-thumb-img {
        height: auto;
        width: 100%;
    }
}

.memo-tag {
    padding: 0.25rem 0.5rem;
    margin: 1px;
    font-size: 0.65rem;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    display: inline-block;
}

.memo-tag-salmon {
    /* l'etichetta non ha campitura: il suo testo sta sul fondo della pagina, e nel tema scuro
       il ruggine ci si spegneva sopra (3,23:1, sotto la soglia di un testo da 0,65rem) */
    color: var(--memo-accent-on-ground);
    border-color: var(--memo-accent-on-ground);
}

.memo-tag-blue {
    /* come la sorella salmone qui sopra: nemmeno questa ha campitura, il suo testo sta sul
       fondo della pagina e col tema scuro il blu ci si spegneva sopra (2,86:1 a 0,65rem) */
    color: var(--memo-blue-on-ground);
    border-color: var(--memo-blue-on-ground);
}

.external_logo {
    max-width: 45px;
}

/* I due loghi di chi lavora al progetto, in fondo alla pagina del progetto. La larghezza stava
   in uno `style="max-width: 8rem"` sul tag e funzionava per caso: un SVG senza misure proprie
   vale 300x150 per il browser, e quel tetto lo riportava a 128. Adesso che il tag dichiara la
   sua proporzione — perché senza, quei due riquadri erano alti zero fino all'arrivo del file —
   il tetto non basta più: servirebbe la misura vera, e i loghi uscirebbero larghi 79 e 177px.
   Quindi la larghezza si dice per intero, e l'altezza resta alla proporzione. */
.partner-logo {
    width: 8rem;
    height: auto;
}


/* Fonti documentali (dettaglio memoria): una scheda bianca per archivio sulla fascia
   azzurra. La fascia resta chiara anche col tema scuro — .bg-light-blue non rimappa
   --memo-color-light-blue e si limita a forzare il testo scuro — quindi qui i colori
   vengono dai token che nessun tema riscrive, e il bianco è scritto per esteso.
   Una colonna sola a tutta larghezza del container: le voci sono titoli lunghi di schede
   d'archivio, e su due colonne andavano a capo tre volte per riga. Resta una griglia per
   la sola gap fra le schede, e perché aprire un <details> spinga in basso solo quel che
   le sta sotto. */
.memo-source-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
}

.memo-source-card {
    background: #fff;
    color: var(--memo-color-dark-blue);
    border-radius: 4px;
    overflow: hidden;
}

.memo-source-card a {
    color: var(--memo-color-rust);
}

.memo-source-head {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--memo-color-light-blue);
}

/* Cornice fissa: i loghi degli archivi hanno proporzioni e fondi diversi fra loro e senza
   un riquadro uguale per tutti sembrano timbri appoggiati a caso. */
.memo-source-mark {
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--memo-color-light-blue);
    border-radius: 3px;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--memo-color-blue);
    font-size: 1.2rem;
}

.memo-source-mark img {
    max-width: 30px;
    max-height: 30px;
}

.memo-source-name {
    display: block;
    font-family: var(--memo-strong-font-family);
    font-size: 0.97rem;
    line-height: 1.25;
}

.memo-source-ref {
    display: block;
    font-size: 0.76rem;
    line-height: 1.3;
    margin-top: 0.1rem;
    color: var(--memo-color-blue);
}

.memo-source-body {
    padding: 0.6rem 0.9rem 0;
    font-size: 0.9rem;
}

.memo-source-body p {
    margin-bottom: 0.25rem;
}

.memo-source-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.memo-source-page+.memo-source-page {
    border-top: 1px solid rgba(36, 58, 98, 0.09);
}

/* Figlio diretto e non discendente: dentro la voce ci sta anche la piega delle memorie
   citate, e le sue pastiglie .memo-link sono <a> come questo. Da discendenti, queste regole
   le raggiungevano tutte — le impaginava a flex, e la sottolineatura qui sotto finiva sul
   titolo di ogni memoria, che pastiglia non ne vuole. */
.memo-source-page>a {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.94rem;
    text-decoration: none;
    transition: background-color 0.35s ease;
}

/* Il titolo prende tutto lo spazio così l'icona resta incolonnata a destra anche quando
   il titolo va a capo. */
.memo-source-page>a>span:first-child {
    flex: 1;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
}

.memo-source-page>a .bi {
    flex: none;
    font-size: 0.75em;
    opacity: 0.75;
}

.memo-source-page>a:hover,
.memo-source-page>a:focus-visible {
    background-color: var(--memo-color-light-salmon);
}

/* Il triangolino nativo di <summary> cambia forma da un browser all'altro: qui la freccia
   è una sola, ruota all'apertura e sta ferma se il sistema chiede meno animazioni. */
.memo-source-fold {
    border-top: 1px solid var(--memo-color-light-blue);
}

.memo-source-fold>summary {
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    color: var(--memo-color-blue);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.memo-source-fold>summary::-webkit-details-marker {
    display: none;
}

.memo-source-fold>summary::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    flex: none;
    /* allineata alla prima riga: su schermo stretto l'etichetta va a capo e una freccia
       centrata sull'intero blocco resterebbe a mezz'aria */
    margin-top: 0.35em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

.memo-source-fold[open]>summary::before {
    transform: rotate(45deg);
}

.memo-source-fold>summary:hover {
    color: var(--memo-color-rust);
}

/* La piega appesa alla singola scheda d'archivio, non alla carta: niente filetto sopra —
   quello fra una scheda e l'altra c'è già — e un rientro che la tiene sotto il suo titolo. */
.memo-source-fold-page {
    border-top: 0;
}

.memo-source-fold-page>summary {
    padding: 0 0.9rem 0.5rem 1.55rem;
    font-size: 0.78rem;
}

.memo-source-fold-page .memo-source-related {
    padding-left: 1.55rem;
}

@media (prefers-reduced-motion: reduce) {

    .memo-source-fold>summary::before,
    .memo-source-page>a {
        transition: none;
    }
}

/* ===== Chi ha chiesto meno movimento ====================================== */

/* La preferenza di sistema era onorata da una regola sola, quella della freghina delle fonti
   documentali, mentre il sito muove parecchio: il colore di ogni link e di ogni pulsante
   (0,35s), la luminosità delle fotografie al passaggio (1,5s), il cambio di tema sul fondo e
   sull'inchiostro, lo scorrimento portato dai salti d'ancora — e soprattutto la pulsazione
   INFINITA del pulsante «dove sono» della mappa, che per chi soffre di disturbi vestibolari è
   esattamente quel che la preferenza chiede di non vedere.
   Le durate vanno a 0,01ms e non a zero: un tempo nullo salta gli eventi di fine transizione,
   e il codice che li aspettasse resterebbe lì. Le animazioni a ripetizione si fermano dopo un
   giro invece di essere tagliate a metà. Il movimento resta dov'è informazione — l'apertura di
   un menu, il disegno della mappa — perché quel che si chiede è meno moto, non nessuno. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.memo-source-related {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.2rem 0.9rem 0.7rem;
}

.memo-source-related .memo-link {
    margin-bottom: 0;
}


.bg-salmon {
    background-color: var(--memo-color-salmon) !important;
}

.bg-light-salmon {
    background-color: var(--memo-color-light-salmon) !important;
}

/* avviso a banda salmone (pagina dettaglio memoria): l'ultimo paragrafo non aggiunge margine sotto */
.memo-alert p:last-child {
    margin-bottom: 0;
}

.bg-rust {
    background-color: var(--memo-color-rust) !important;
}

.bg-dark-blue {
    background-color: var(--memo-color-dark-blue) !important;
}

.bg-light-blue {
    background-color: var(--memo-color-light-blue) !important;
}

.bg-very-light-gray {
    background-color: var(--memo-color-very-light-gray) !important;
}

/* Le quattro fasce col tema scuro. Prima restavano CHIARE — i loro token non si ribaltavano —
   e il testo veniva riportato a mano sul blu scuro perché ci si potesse leggere: funzionava,
   nel senso che i rapporti tornavano, ma erano quattro lastre di luce in una pagina quasi
   nera, e sulla scheda di una memoria se ne accendevano tre di fila (l'iscrizione, «Nelle
   vicinanze», «Vuoi partecipare»). Adesso ognuna ha la sua versione notturna, con la stessa
   temperatura e la stessa gerarchia fra la piena e la tenue, e il testo torna a essere quello
   del corpo — che su queste quattro sta fra 12 e 15:1, cioè meglio di prima.
   Il colore va forzato perché le regole chiare qui sopra sono `!important` (sono utility, e
   nascono così); l'inchiostro no, gli basta ereditare. */
:root[data-theme="dark"] .bg-salmon {
    background-color: var(--memo-band-warm) !important;
    color: var(--memo-body-text) !important;
}

:root[data-theme="dark"] .bg-light-salmon {
    background-color: var(--memo-band-warm-soft) !important;
    color: var(--memo-body-text) !important;
}

:root[data-theme="dark"] .bg-light-blue {
    background-color: var(--memo-band-cool) !important;
    color: var(--memo-body-text) !important;
}

:root[data-theme="dark"] .bg-very-light-gray {
    background-color: var(--memo-band-neutral) !important;
    color: var(--memo-body-text) !important;
}

/* Solo i link NUDI, quelli che prendono il colore dalla regola `a` e basta.
   I pulsanti e le pastiglie hanno una campitura propria e con essa il colore che ci sta
   sopra (.memo-btn-rust è bianco su ruggine, .memo-link ruggine su salmone): siccome questo
   selettore vale 0,2,1 e il loro 0,1,0, senza l'esclusione li ridipingeva tutti — il
   «consulta» della home, che è un .memo-btn-rust dentro una fascia .bg-light-blue, diventava
   ruggine su ruggine e spariva. Chi si veste da sé va lasciato in pace.
   Sulle fasce scure il link torna quello del tema (l'arancio), che è nato per stare su un
   fondo scuro: il ruggine di prima serviva a stare sul chiaro delle fasce di allora. */
:root[data-theme="dark"] .bg-salmon a:not(.memo-btn, .memo-link, .btn),
:root[data-theme="dark"] .bg-light-salmon a:not(.memo-btn, .memo-link, .btn),
:root[data-theme="dark"] .bg-light-blue a:not(.memo-btn, .memo-link, .btn),
:root[data-theme="dark"] .bg-very-light-gray a:not(.memo-btn, .memo-link, .btn),
:root[data-theme="dark"] .small-note a:not(.memo-btn, .memo-link, .btn) {
    color: var(--memo-link-color);
    text-decoration-color: var(--memo-link-color);
}

:root[data-theme="dark"] .bg-salmon a:not(.memo-btn, .memo-link, .btn):hover,
:root[data-theme="dark"] .bg-light-salmon a:not(.memo-btn, .memo-link, .btn):hover,
:root[data-theme="dark"] .bg-light-blue a:not(.memo-btn, .memo-link, .btn):hover,
:root[data-theme="dark"] .bg-very-light-gray a:not(.memo-btn, .memo-link, .btn):hover,
:root[data-theme="dark"] .small-note a:not(.memo-btn, .memo-link, .btn):hover {
    color: var(--memo-link-hover-color);
    text-decoration-color: var(--memo-link-hover-underline-color);
}

/* La nota azzurra si dà la campitura da sé, quindi non passa dalle utility qui sopra: segue
   la fascia fredda, o resterebbe l'ultima isola chiara della pagina. */
:root[data-theme="dark"] .small-note {
    background-color: var(--memo-band-cool);
    color: var(--memo-body-text);
}

/* Le schede delle fonti documentali sono carta bianca appoggiata sulla fascia azzurra: finché
   la fascia era chiara ci stavano, su quella notturna sarebbero dieci rettangoli bianchi.
   Prendono la superficie delle schede del tema, e i loro filetti il bordo del tema. */
:root[data-theme="dark"] .memo-source-card,
:root[data-theme="dark"] .memo-source-mark {
    background: var(--memo-card-bg);
    color: var(--memo-body-text);
}

:root[data-theme="dark"] .memo-source-head,
:root[data-theme="dark"] .memo-source-fold,
:root[data-theme="dark"] .memo-source-mark {
    border-color: var(--memo-border-color);
}

:root[data-theme="dark"] .memo-source-page+.memo-source-page {
    border-top-color: var(--memo-border-color);
}

:root[data-theme="dark"] .memo-source-card a {
    color: var(--memo-link-color);
}

:root[data-theme="dark"] .memo-source-name,
:root[data-theme="dark"] .memo-source-ref,
:root[data-theme="dark"] .memo-source-fold>summary {
    color: var(--memo-body-muted-text);
}

:root[data-theme="dark"] .memo-source-page>a:hover,
:root[data-theme="dark"] .memo-source-page>a:focus-visible {
    background-color: rgba(148, 163, 184, 0.15);
}

/* Le testate decorative sono tag img e non piu' background-image, per poter dare loro un
   srcset: object-fit e object-position rendono come facevano background-size e
   background-position sullo stesso riquadro ad altezza fissa. */
.full_image {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Le due fasce fotografiche della home. L'altezza era scritta in uno `style=` sul tag,
   inchiodata ai pixel come quella della testata e con lo stesso difetto sul telefono:
   adesso è il token, e la fascia si accorcia dove serve. Sono due valori perché sul
   desktop erano due (450 la mappa dei monumenti, 400 quella dei percorsi, che sta in
   mezza colonna) e questa non è l'occasione per cambiare la resa a schermo largo. */
.header-band {
    height: var(--memo-header-height);
}

.header-band-short {
    height: var(--memo-header-height-short);
}

/* L'immagine sta NEL FLUSSO, e la didascalia le va sotto da sé. Prima era in posizione
   assoluta perché la didascalia scendeva con `top: 450px`, cioè con l'altezza della testata
   scritta una seconda volta: bastava cambiarla in un posto solo per scollarle. Di quel
   numero non è rimasta traccia. L'altezza la dà comunque il CSS, quindi il posto resta
   riservato mentre l'immagine arriva.
   L'azzurro del ripiego sta sull'IMG e non più sul contenitore: adesso che la didascalia è
   nel flusso, un fondo sul contenitore le finirebbe anche dietro, e quella riga deve stare
   sul fondo della pagina — è lì che è calcolato il suo colore. */
#header_image>img {
    display: block;
    width: 100%;
    height: var(--memo-header-height);
    background-color: var(--memo-color-light-blue);
    object-fit: cover;
    object-position: center;
}

#header_image>p {
    font-family: 'Courier New', monospace;
    font-style: italic;
    letter-spacing: -1px;
    /* La didascalia NON sta sull'azzurro della testata: quello finisce con l'immagine, e da
       lì in giù c'è il fondo della pagina, che col tema scuro è quasi nero. Il blu scuro che
       stava qui — scelto misurando il contrasto sull'azzurro, cioè sul fondo sbagliato — ci
       faceva 1,58:1 e la riga spariva. Questo è l'inchiostro secondario del sito e si ribalta
       da sé nei tre temi. Il margine a zero perché prima la riga non occupava spazio nel
       flusso: era spinta fuori dal suo contenitore e si posava sul bianco di sotto. */
    color: var(--memo-body-muted-text);
    margin: 0;
    font-size: 65%;
    text-align: right;
    padding-right: 1rem;
    padding-left: 1rem;
}

h1.page-title {
    margin-bottom: 2rem;
}

h2.page-title {
    margin-bottom: 1rem;
}

/* titolo di sezione: stessa distanza dal contenuto dei titoli h1 */
h2.page-title.page-title-section {
    margin-bottom: 2rem;
}

/* Il livello del tag segue la gerarchia della pagina: queste classi conservano
   la resa del livello grafico voluto (h2 che si presenta come h1, e così via). */
h2.as-h1 {
    font-size: var(--memo-title-font-size);
    margin-bottom: 2rem;
}

h3.as-h2 {
    font-size: var(--memo-subtitle-font-size);
    margin-top: var(--memo-title-mt);
    margin-bottom: 1rem;
}

/* Lo stesso fattore dell'h3 vero: questa classe serve a far sembrare un h2 un h3, e se i due
   valori divergono la promessa non è più mantenuta. */
h2.as-h3 {
    font-size: calc(var(--memo-subtitle-font-size) * 0.88);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.page-title small {
    margin-left: 0rem;
    font-size: 60%;
}

.page-title>img {
    height: 85px;
    vertical-align: sub;
}

.page-title>img.svg_monument {
    margin-bottom: -5px;
}

.page-title>img.svg_map {
    margin-bottom: -8px;
}

.page-title>img.svg_join {
    margin-bottom: -11px;
}

.page-title>img.svg_press-kit {
    margin-bottom: -5px;
}

.page-title>img.svg_chat {
    margin-bottom: -15px;
}

.page-title>img.svg_pathway {
    margin-bottom: -8px;
}

.page-title>img.svg_sheet {
    margin-bottom: -5px;
}

.page-title>img.svg_tree {
    margin-bottom: -5px;
}

.page-title>img.svg_new {
    margin-bottom: -5px;
}

/* Sul telefono l'icona del titolo va SOPRA il titolo, non accanto. Da inline è alta 85px
   contro una riga di 48: si mangiava mezza prima riga — «Contatti e / media kit», «MEMO, il
   / progetto delle / memorie» — e il resto del titolo restava sotto un rientro che a quel
   punto non c'era più. Sopra, e alta quanto il titolo, fa da emblema e il titolo torna a
   essere un blocco solo. Vale per ogni .page-title, h1 o h2 che sia, perché in em l'icona
   segue la misura del suo titolo.
   Il margine con !important perché ognuna porta il suo ritocco verticale (.svg_map -8px,
   .svg_chat -15px…) per l'allineamento alla riga di base, e quelle regole valgono più di
   questa: da blocco non allineerebbero più niente, si limiterebbero a tirare su il titolo. */
@media (max-width: 575.98px) {
    .page-title>img {
        display: block;
        height: 1.4em;
        margin-bottom: 0.2em !important;
    }
}

img.svg_big {
    height: 125px;
}

.memo-btn {
    /* min-height, non height: i pulsanti sono form control e ritagliano ciò che
       sborda, quindi un'etichetta lunga su schermo stretto perdeva la seconda riga.
       Il line-height è calcolato perché una riga renda esattamente l'altezza di
       sempre (il valore ereditato dalla pagina è più alto e gonfierebbe tutto);
       a due righe la pastiglia cresce invece di troncare. */
    min-height: var(--memo-button-height);
    line-height: calc(var(--memo-button-height) - 0.8em);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 2em;
    border: 0;
    padding: 0.4em 2em 0.4em 2em;
    text-transform: uppercase;
    font-weight: bold;
    font-size: var(--memo-button-font-size);
}

/* L'icona dentro un .memo-btn. Era «height: 30px; margin-top: -8px» scritta inline in dieci
   punti fra project.html e resources.html: inchiodata ai pixel mentre l'etichetta segue
   --memo-button-font-size. Con la preferenza «testo molto grande» il testo saliva da 20 a
   23,68px e l'icona restava a 30, con la correzione verticale ormai sfasata — la funzione
   di accessibilità si rompeva proprio dove serviva. In em rende identica al corpo standard
   (1,5 × 20px = 30px) e cresce insieme all'etichetta. */
.memo-btn-icon {
    height: 1.5em;
    margin-top: -0.4em;
}

.memo-pill {
    padding: 0.4em 0.7em !important;
}

.memo-btn-tiny {
    min-height: 2em;
    line-height: 1.2em;
    padding: 0.4em 1em 0.4em 1em;
}

.memo-btn-blue {
    color: white;
    background-color: var(--memo-color-dark-blue);
}

.memo-btn-blue:hover {
    color: white;
    background-color: var(--memo-color-blue);
    transition: all 0.35s ease;
}

.memo-btn-light-blue {
    color: white;
    background-color: var(--memo-color-blue);
}

.memo-btn-light-blue:hover {
    color: white;
    background-color: var(--memo-color-dark-blue);
    transition: all 0.35s ease;
}

.memo-btn-salmon {
    color: var(--memo-color-dark-blue);
    background-color: var(--memo-color-salmon);
}

.memo-btn-salmon:hover {
    color: white;
    background-color: var(--memo-color-light-rust);
    transition: all 0.35s ease;
}

.memo-btn-light-salmon {
    color: var(--memo-color-dark-blue);
    background-color: var(--memo-color-light-salmon);
}

.memo-btn-light-salmon:hover {
    color: white;
    background-color: var(--memo-color-blue);
    transition: all 0.35s ease;
}

.memo-btn-rust {
    color: white;
    background-color: var(--memo-color-rust);
}

.memo-btn-rust:hover {
    color: white;
    background-color: var(--memo-color-light-rust);
    transition: all 0.35s ease;
}

.memo-btn-light {
    color: var(--memo-color-dark-blue);
    border-color: var(--memo-color-light-blue);
    background-color: white;
}

.memo-btn-light:hover {
    color: var(--memo-color-blue);
    border-color: var(--memo-color-blue);
    transition: all 0.35s ease;
}

.tooltip {
    font-size: 0.8rem;
    line-height: 1.3;
}

.btn-group>.dropdown-menu {
    font-size: 100% !important;
}

.container-mb {
    margin-bottom: 5rem !important;
}

.container-pb {
    padding-bottom: 5rem !important;
}

.blockquote-container {
    border-width: 1px 0 1px 0;
    border-color: var(--memo-color-dark-blue);
    border-style: solid;
    background-color: var(--memo-color-very-light-gray);
    text-align: right;
    padding: 1em 2em 0.5em 2em;
    margin-bottom: 1em;
}

.blockquote-footer>cite {
    white-space: nowrap;
}

:root[data-theme="dark"] .text-muted {
    color: var(--memo-body-muted-text) !important;
}

/* La citazione si dà la campitura da sé (il grigio chiarissimo), quindi col tema scuro era
   un'altra isola di luce con dentro il testo riportato a mano sul blu. Segue la fascia neutra
   e l'inchiostro torna quello del corpo; i due filetti sopra e sotto, che erano blu scuro su
   grigio chiaro, passano al bordo del tema. */
:root[data-theme="dark"] .blockquote-container {
    background-color: var(--memo-band-neutral);
    border-color: var(--memo-border-color);
}

:root[data-theme="dark"] blockquote,
:root[data-theme="dark"] .blockquote-container,
:root[data-theme="dark"] .blockquote-container p,
:root[data-theme="dark"] blockquote p,
:root[data-theme="dark"] .blockquote-footer,
:root[data-theme="dark"] .blockquote-footer>cite {
    color: var(--memo-body-text);
}

.small-note {
    font-size: 66%;
    /* si dà da sé la campitura azzurra chiara, che nessun tema ribalta: col --memo-color-blue
       stava a 4,33:1 a 66%, sotto soglia in tutti e tre i temi */
    color: var(--memo-color-dark-blue);
    background-color: var(--memo-color-light-blue);
    padding: 1em;
}

.memo-link {
    text-decoration: none;
    text-transform: none;
    padding: 0.4rem !important;
    margin-bottom: 0.4rem;
    color: var(--memo-color-rust);
    background-color: var(--memo-color-salmon);
    text-align: left;
    /* Le tre proprietà per nome e non `all`. Con `all` finiva nella transizione anche il
       contorno del fuoco: l'anello partiva dal colore del testo della pastiglia e ci metteva
       35 centesimi ad arrivare al suo, cioè chi naviga da tastiera vedeva il segno del fuoco
       formarsi in ritardo su ogni pastiglia che attraversa. E ci finiva pure il bordo, che
       al passaggio del mouse passa da 0 a 1px: una larghezza animata è un rimescolamento
       dell'impaginazione, non un'animazione. */
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.memo-link:hover {
    border-width: 1px;
    border-color: var(--memo-color-rust);
    color: var(--memo-color-rust);
    background-color: var(--memo-color-light-blue) !important;
}

.memo-link-info {
    margin: 0 0.4rem;
    padding: 0;
    color: var(--memo-color-rust);
}

.memo-link-subinfo {
    margin: -2px 0.4rem 0 0.4rem;
    padding: 0;
    font-size: 75%;
    color: var(--memo-color-rust);
    /* Qui c'era `opacity: 0.7`, e su un testo già piccolo era la metà del problema: il ruggine
       sbiadito sul salmone faceva 2,39:1 contro i 3,69 del titolo. Tolta: sul salmone non c'è
       spazio per un tono più tenue che passi comunque la soglia — il ruggine scuro ci arriva
       con 4,56 e non ha margine da spendere — quindi la riga del luogo resta più discreta per
       come è messa, cioè piccola (75%) e allineata a destra, non per come è colorata. */
    text-align: right;
}

.memo-link-subinfo i {
    opacity: 0.8;
}

/* Striscia orizzontale di schede (es. gli ultimi monumenti in home): occupa tutta la
   larghezza della pagina e la fila è centrata; quel che non ci sta esce dai due lati e si
   raggiunge scorrendo. La barra di scorrimento resta nascosta — le sfumature ai bordi
   bastano a dire che la fila continua — ma rotella, dito e tastiera scorrono lo stesso.
   Tre livelli e non due: le sfumature stanno sul wrapper fermo, perché appese al livello
   che scorre scorrerebbero via con le schede. */
.memo-strip-wrapper {
    position: relative;
}

.memo-strip-wrapper::before,
.memo-strip-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.5rem;
    pointer-events: none;
    z-index: 1;
}

.memo-strip-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--memo-body-bg), transparent);
}

.memo-strip-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--memo-body-bg), transparent);
}

/* Il trascinamento col mouse lo dà memo_strip.js; qui la mano che lo annuncia e, mentre si
   trascina, il divieto di selezionare il testo delle schede che si stanno spostando. */
.memo-strip-scroller {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.memo-strip-scroller::-webkit-scrollbar {
    display: none;
}

.memo-strip-scroller.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* max-content + margin automatici: la fila si centra finché ci sta e si appoggia a
   sinistra quando trabocca, così nessuna scheda finisce fuori portata. Il respiro ai due
   capi — doppio dello spazio fra le schede — si vede solo scorrendo fino in fondo. */
.memo-strip {
    --memo-strip-gap: 0.8rem;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--memo-strip-gap);
    padding-inline: calc(2 * var(--memo-strip-gap));
    width: max-content;
    margin-inline: auto;
}

/* Le schede si allargano quanto il loro testo, come negli elenchi per data di inserimento;
   il tetto serve solo a impedire che un titolo lunghissimo diventi una scheda-striscione. */
.memo-strip>.memo-link {
    flex: 0 0 auto;
    max-width: 15rem;
    margin-bottom: 0;
}

/* ── Testata pagine di dettaglio: breadcrumb, riga meta, indice di pagina ── */
.detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.detail-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider-color: var(--memo-body-muted-text);
}

/* elenco di pari livello (es. più regioni): separatore a punto mediano invece della barra */
.detail-breadcrumb .breadcrumb-flat {
    --bs-breadcrumb-divider: "·";
}

.detail-breadcrumb>.bi-geo-alt {
    /* stesso colore dei link del breadcrumb, ma non è un link */
    color: var(--memo-link-color);
    font-size: 0.8em;
    line-height: 1;
}

.detail-breadcrumb a {
    text-decoration-thickness: 1px;
}

.detail-meta .memo-tag {
    vertical-align: middle;
}

.detail-page-index a {
    text-decoration-thickness: 1px;
    white-space: nowrap;
}

.detail-page-index a:not(:first-child)::before {
    content: "·";
    /* inline-block: il separatore non eredita la sottolineatura del link */
    display: inline-block;
    margin: 0 0.6em 0 0.35em;
    color: var(--memo-body-muted-text);
}

:target {
    scroll-margin-top: 1rem;
}

.very-small {
    font-size: 0.75em;
}

.very-very-small {
    font-size: 0.65em;
}

.tiny {
    font-size: 0.55em;
}

.very-big {
    font-size: 1.35em;
}


.book p {
    margin-bottom: 0.2em;
    font-size: 75%;
}

.book h2 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.book h2 .book-edition {
    font-size: 75%;
}

/* Il sottotitolo di un libro è una riga sua sotto al titolo, e come riga sua deve prendere
   l'interlinea del PROPRIO corpo. Da elemento in linea la prendeva dal titolo, perché un
   line box è alto almeno quanto lo strut del blocco che lo contiene — sulla scheda del libro
   40px × 1,2 = 48px per una riga da 24px — e sotto al sottotitolo restava una ventina di
   pixel di aria che nessuno aveva chiesto. Da blocco lo strut è il suo.

   Attenzione: il <br> che precedeva il sottotitolo va tolto insieme a questa regola, o
   aggiunge una riga vuota alta quanto il titolo. */
.book h2 .book-subtitle,
.page-title .page-subtitle {
    display: block;
    line-height: 1.25;
}

/* Nella lista il sottotitolo stava all'87,5% del titolo — il valore predefinito di <small> —
   e due righe quasi uguali non si leggono come titolo e sottotitolo: si leggono come due
   titoli. Al 70% resta comunque sopra ai dati bibliografici, che sono al 75% di 1rem, quindi
   la scala titolo > sottotitolo > dati si vede. Sul dettaglio il corpo è già quello giusto,
   lo dà `.page-title small`. */
.book h2 .book-subtitle {
    font-size: 70%;
}

.book .book-area {
    opacity: 0.75;
}

.pointer {
    cursor: pointer;
}


.excerpt-hidden {
    --excerpt-bottom-spacing: 0;
    max-height: 75vh;
    overflow: hidden;
    position: relative;
}

.excerpt-hidden::after {
    content: "";
    position: absolute;
    bottom: calc(-1 * var(--excerpt-bottom-spacing));
    left: 0;
    right: 0;
    height: calc(82px + var(--excerpt-bottom-spacing));
    background: linear-gradient(to bottom, transparent 0%, var(--memo-body-bg) 100%);
}

.excerpt-visible {
    height: auto;
    overflow: auto;
}

.js-show-more {
    padding: 0.25rem 0.5rem 0.5rem 0.5rem !important;
    height: auto !important;
    font-variant: normal;
    text-transform: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 9rem;
    border-radius: 0 0 2em 2em;
}


@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* A sinistra dell'icona in alto a destra della mappa, mai sotto la colonna dei
   controlli: che finisce a 44px dal bordo (schermo intero), 62 sul touch, 56 nei
   widget (logo MEMO largo 48). top 10 centra i 32px sull'icona (centro a 26). */
.spinner::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 10px;
    right: 70px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 7px solid rgba(48, 129, 208, 0.6);
    border-top-color: var(--memo-color-dark-blue);
    animation: spinner 0.8s linear infinite;
}

.button-spinner {
    margin-left: 4px;
    display: inline-block;
    width: 24px !important;
    height: 24px !important;
    vertical-align: middle;
}

.button-spinner::after {
    content: "";
    display: block;
    margin-top: -2px;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 4px solid rgba(48, 129, 208, 0.6);
    border-top-color: var(--memo-color-dark-blue);
    animation: spinner 0.8s linear infinite;
}

/* Gli URL linkificati nelle risposte dell'IA non hanno punti di a-capo naturali. */
.memo-ai-answer a {
    overflow-wrap: anywhere;
}

:root[data-theme="dark"] .small-caption,
:root[data-theme="dark"] .tiny-caption {
    color: var(--memo-body-muted-text);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .accordion-item,
:root[data-theme="dark"] .toast {
    background-color: var(--memo-card-bg);
    color: var(--memo-body-text);
    border-color: var(--memo-border-color);
}

/* L'esclusione dei .memo-btn è portante, non un vezzo. I pulsanti della tendina «condividi»
   sono insieme .dropdown-item e .memo-btn-blue: queste due regole valgono 0,1,1 e 0,2,1
   contro lo 0,1,0 e 0,2,0 del pulsante, quindi lo scavalcavano. Al passaggio del mouse la
   pastiglia perdeva il blu e prendeva `rgba(148,163,184,0.15)` con l'icona arancione: sul
   fondo scuro era smorta, e dove la colonna dei comandi si sovrappone al riquadro chiaro
   dell'iscrizione diventava un cerchio bianco su crema, cioè spariva.
   Come per le fasce colorate: chi porta campitura e inchiostro suoi va lasciato in pace. */
:root[data-theme="dark"] .dropdown-item:not(.memo-btn) {
    color: var(--memo-body-text);
}

:root[data-theme="dark"] .dropdown-item:not(.memo-btn):hover,
:root[data-theme="dark"] .dropdown-item:not(.memo-btn):focus {
    color: var(--memo-link-color);
    background-color: rgba(148, 163, 184, 0.15);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] input {
    background-color: var(--memo-surface-bg);
    border-color: var(--memo-border-color);
    color: var(--memo-body-text);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] input:focus {
    border-color: var(--memo-link-color);
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25);
}


:root[data-theme="dark"] a.dark-link {
    color: var(--memo-body-text) !important;
    text-decoration-color: var(--memo-link-color);
}

:root[data-theme="dark"] .page-link {
    color: var(--memo-body-muted-text) !important;
    background-color: transparent;
    border-color: var(--memo-border-color);
}

:root[data-theme="dark"] .pagination-summary {
    color: var(--memo-body-muted-text) !important;
}

.maps-dropdown {
    font-size: 75%;
}

.details-content {
    font-size: 85%;
}

:root[data-theme="dark"] .active>.page-link,
:root[data-theme="dark"] .page-link.active {
    color: var(--memo-body-bg) !important;
    background-color: var(--memo-link-color) !important;
    border-color: var(--memo-link-color) !important;
}

/* Divisore sottile fra le sezioni (es. le Note tecniche): filo pieno da 1px che
   segue il colore del testo così da adattarsi da solo al tema chiaro e scuro. */
.section-divider {
    height: 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.2;
}

/* Le mappe esterne sotto la mappa del monumento (snippets/maps_links.html): solo icone,
   discrete — a riposo il grigio attenuato del sito, che varia da sé coi tre temi, e il
   colore del link solo al passaggio o al focus. Il padding allarga il bersaglio del
   tocco senza allargare il disegno: senza scritta sotto, l'icona da sola è piccola. */
.maps-links a {
    color: var(--memo-body-muted-text);
    text-decoration: none;
    padding: 0.15rem 0.3rem;
}

.maps-links a:hover,
.maps-links a:focus-visible {
    color: var(--memo-link-color);
}

/* ===== Bersagli di tocco =================================================== */

/* Su un puntatore grosso i comandi minuti vanno portati ai 44px raccomandati, e le tecniche
   sono due: la scelta dipende da cosa hanno intorno.
   Dove il comando sta in una fila di suoi pari — le voci del piè (360x27), le quattro mappe
   esterne (34x39) — si allarga la scatola vera: cresce in mezzo agli altri e nessuno finisce
   sotto il vicino.
   Dove è isolato in mezzo al testo — l'icona del feed accanto al titolo (13x16), il
   «dettagli» di ogni scheda della bibliografia (77x27), i due link in fondo al piè (40x18 e
   140x17) — si stende un ::after invisibile, che allarga il bersaglio senza spostare niente:
   allargare lì la scatola vorrebbe dire allontanare le righe fra cui il link sta.
   I link DENTRO le frasi restano come sono, ed è voluto: un bersaglio da 44px in mezzo a un
   paragrafo ruberebbe il tocco alla riga di sopra, e le linee guida fanno l'eccezione
   proprio per loro. La barra in cima non è qui perché le sue voci misurano già 360x47. */
@media (pointer: coarse) {

    body>footer .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .maps-links a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .page-title a.tiny,
    .book>a.small,
    .footer-external-link,
    body>footer p.tiny a {
        position: relative;
    }

    .page-title a.tiny::after,
    .book>a.small::after,
    .footer-external-link::after,
    body>footer p.tiny a::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        transform: translate(-50%, -50%);
    }
}