:root {
    color-scheme: light;
    --memo-color-dark-blue: rgb(36, 58, 98);
    --memo-color-blue: rgb(79, 97, 129);
    --memo-color-light-blue: rgb(211, 215, 223);
    --memo-color-very-light-gray: rgb(245, 245, 245);
    --memo-color-salmon: rgb(253, 201, 160);
    --memo-color-light-salmon: rgb(254, 241, 231);
    /* Il ruggine è stato scurito il 3 agosto 2026 da rgb(164, 82, 25): su fondo salmone quel
     valore dava 3,69:1 e le pastiglie .memo-link erano illeggibili per la soglia WCAG (4,5:1
     per il testo di quella dimensione), 188 elementi segnalati sulla sola pagina della mappa.
     Adesso la stessa coppia fa 4,56:1, e i collegamenti su bianco salgono da 5,53 a 6,82. */
    --memo-color-rust: rgb(143, 71, 22);
    --memo-color-light-rust: rgb(182, 116, 71);
    /* Il ruggine quando fa da testo o da icona sul FONDO DELLA PAGINA e non dentro una pastiglia
     salmone. I due ruoli chiedono cose opposte: sul salmone il colore deve essere scuro, sul
     fondo del tema scuro deve essere chiaro, altrimenti ci sparisce sopra (2,62:1). Sono due
     token perché sono due mestieri, non perché il colore sia due. */
    --memo-accent-on-ground: var(--memo-color-rust);
    /* Stessa storia per il blu: --memo-color-blue è nato per stare su fondo chiaro e nel tema
       scuro nessuno lo ribalta, così le etichette .memo-tag-blue (contesto storico, tipologia,
       enti, difficoltà) restavano a 2,86:1 sul quasi-nero. La sorella salmone era già passata
       da --memo-accent-on-ground; questa era rimasta indietro. */
    --memo-blue-on-ground: var(--memo-color-blue);
    --memo-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28253, 201, 160, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --memo-title-font-size: 2rem;
    --memo-subtitle-font-size: 1.55rem;
    --memo-text-font-size: 1.25rem;
    --memo-button-font-size: 1rem;
    --memo-button-height: 2.25rem;
    --memo-title-mt: 2em;
    /* L'altezza delle fasce fotografiche: la testata di ogni pagina (#header_image) e le due
     della home. Il numero stava scritto tre volte — nel foglio e in due `style=` — ed era lo
     stesso a 1440 come a 390: su un telefono da 844 punti la testata occupava metà della
     prima schermata, e col margine del titolo il titolo cominciava a 600, cioè oltre i due
     terzi. Sotto md diventa il 16:9 della fotografia, che è anche il taglio in cui se ne vede
     di più: a 390 di larghezza il riquadro passa da 450 a 219 e la foto smette di essere
     ritagliata a francobollo. Sopra md non cambia niente. */
    --memo-header-height: 450px;
    --memo-header-height-short: 400px;
    --memo-body-bg: #ffffff;
    --memo-body-text: var(--memo-color-dark-blue);
    --memo-body-muted-text: #6b7280;
    --memo-link-color: var(--memo-color-rust);
    --memo-link-hover-color: #333333;
    --memo-link-hover-underline-color: var(--memo-color-salmon);
    --memo-navbar-bg: var(--memo-color-dark-blue);
    --memo-navbar-link-color: var(--memo-color-salmon);
    --memo-navbar-link-hover-color: var(--memo-color-rust);
    --memo-card-bg: #ffffff;
    --memo-surface-bg: var(--memo-color-very-light-gray);
    --memo-border-color: rgba(15, 23, 42, 0.1);
    --memo-theme-switch-bg: rgba(255, 255, 255, 0.12);
    --memo-theme-switch-active-bg: rgba(255, 255, 255, 0.25);
    --memo-theme-switch-color: var(--memo-color-salmon);
    --memo-theme-switch-active-color: var(--memo-color-very-light-gray);
    --memo-font-fallbacks: "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali",
        "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans Sinhala", "Noto Sans Tamil",
        "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Myanmar", "Noto Sans CJK JP", "Noto Sans CJK KR",
        "Noto Sans CJK SC", "Noto Sans CJK TC", "Nirmala UI", "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji",
        "Noto Color Emoji", "Yu Gothic UI", "Meiryo", "Malgun Gothic", "Microsoft YaHei", "Microsoft JhengHei",
        "PingFang SC", "PingFang TC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo",
        "Roboto", "Helvetica Neue", "Liberation Sans", "DejaVu Sans", "Arial Unicode MS", system-ui, -apple-system,
        BlinkMacSystemFont, sans-serif;
    --memo-body-font-family: "Mulish Regular", var(--memo-font-fallbacks);
    --memo-heading-font-family: "Mulish Bold", var(--memo-font-fallbacks);
    --memo-strong-font-family: "Mulish Bold", var(--memo-font-fallbacks);
    --memo-body-font-weight: 300;
    --memo-heading-font-weight: 700;
    --memo-strong-font-weight: 700;
}

/* Sotto md, cioè sui telefoni: vedi il commento su --memo-header-height. Il `min` tiene il
   tetto di sempre, così un tablet stretto in orizzontale non si ritrova una fascia più alta
   di quella del desktop.
   Lo stacco sopra i titoli scende con loro. In em vale la misura del titolo cui si applica —
   80px sopra un h1, 62 sopra un h2 — ed era lo stesso su uno schermo alto 844 punti come su
   uno da 900: due titoli di sezione si portavano via un sesto della schermata in aria. Non è
   una misura tolta all'aria che serve, è quella di sempre riportata in proporzione allo
   schermo. */
@media (max-width: 767.98px) {
    :root {
        --memo-header-height: min(56.25vw, 450px);
        --memo-header-height-short: min(56.25vw, 400px);
        --memo-title-mt: 1.2em;
    }
}

:root[data-font-size="large"] {
    --memo-title-font-size: 2.2rem;
    --memo-subtitle-font-size: 1.7rem;
    --memo-text-font-size: 1.32rem;
    --memo-button-font-size: 1.05rem;
}

:root[data-font-size="xlarge"] {
    --memo-title-font-size: 2.4rem;
    --memo-subtitle-font-size: 1.9rem;
    --memo-text-font-size: 1.48rem;
    --memo-button-font-size: 1.16rem;
}

:root[data-font-family="standard"] {
    --memo-body-font-family: "Mulish Regular", var(--memo-font-fallbacks);
    --memo-heading-font-family: "Mulish Bold", var(--memo-font-fallbacks);
    --memo-strong-font-family: "Mulish Bold", var(--memo-font-fallbacks);
    --memo-body-font-weight: 300;
    --memo-heading-font-weight: 700;
    --memo-strong-font-weight: 700;
}

:root[data-font-family="alta-legibilita"] {
    --memo-body-font-family: "Atkinson Hyperlegible", var(--memo-font-fallbacks);
    --memo-heading-font-family: "Atkinson Hyperlegible", var(--memo-font-fallbacks);
    --memo-strong-font-family: "Atkinson Hyperlegible", var(--memo-font-fallbacks);
    --memo-body-font-weight: 400;
    --memo-heading-font-weight: 700;
    --memo-strong-font-weight: 700;
}

:root[data-font-family="relax"] {
    --memo-body-font-family: "Lexend Deca", var(--memo-font-fallbacks);
    --memo-heading-font-family: "Lexend Deca", var(--memo-font-fallbacks);
    --memo-strong-font-family: "Lexend Deca", var(--memo-font-fallbacks);
    --memo-body-font-weight: 400;
    --memo-heading-font-weight: 700;
    --memo-strong-font-weight: 700;
}

:root[data-font-family="dislessia"] {
    --memo-body-font-family: "OpenDyslexic", var(--memo-font-fallbacks);
    --memo-heading-font-family: "OpenDyslexic", var(--memo-font-fallbacks);
    --memo-strong-font-family: "OpenDyslexic", var(--memo-font-fallbacks);
    --memo-body-font-weight: 400;
    --memo-heading-font-weight: 700;
    --memo-strong-font-weight: 700;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --memo-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28252, 213, 181, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --memo-body-bg: #0f172a;
    --memo-body-text: #e2e8f0;
    --memo-body-muted-text: #94a3b8;
    /* Il fondo qui è quasi nero e il ruggine ci si spegne sopra (2,62:1): quel che sta SUL
     fondo — le icone dei titoli, le pastiglie-etichetta senza campitura — passa alla
     variante chiara, che fa 4,74:1. Le pastiglie .memo-link non c'entrano: hanno il loro
     salmone sotto anche qui, e continuano a usare il ruggine scuro. */
    --memo-accent-on-ground: var(--memo-color-light-rust);
    /* Un blu-pervinca che regge sul fondo notturno (7,3:1) restando chiaramente secondario
       rispetto al testo del corpo, che sta a 15:1. */
    --memo-blue-on-ground: #8ba6d4;
    /* Le quattro fasce che scandiscono le pagine restavano CHIARE anche di notte, col testo
       riportato a mano sul blu scuro: leggibili, ma erano lastre di luce in una pagina quasi
       nera — sulla scheda di una memoria il riquadro dell'iscrizione, «Nelle vicinanze» e
       «Vuoi partecipare» ne accendevano tre di fila. Qui ognuna ha la sua versione notturna:
       stessa temperatura — calda per il salmone, fredda per l'azzurro, neutra per il grigio —
       e la stessa gerarchia fra la piena e la tenue, ma alla luminosità del tema. Il testo
       torna a essere quello del corpo, che su queste quattro sta fra 12 e 15:1. */
    --memo-band-warm: #3b2416;
    --memo-band-warm-soft: #2a1c14;
    --memo-band-cool: #1b2740;
    --memo-band-neutral: #1c1f26;
    --memo-link-color: #f97316;
    --memo-link-hover-color: #fb923c;
    --memo-link-hover-underline-color: #fdba74;
    --memo-navbar-bg: rgba(15, 23, 42, 0.94);
    --memo-navbar-link-color: #fcd5b5;
    --memo-navbar-link-hover-color: #f97316;
    --memo-card-bg: #1f2937;
    --memo-surface-bg: #1e293b;
    --memo-border-color: rgba(148, 163, 184, 0.4);
    --memo-theme-switch-bg: rgba(148, 163, 184, 0.2);
    --memo-theme-switch-active-bg: rgba(148, 163, 184, 0.35);
    --memo-theme-switch-color: #fcd5b5;
    --memo-theme-switch-active-color: #f97316;
}

:root[data-theme="daltonic"] {
    color-scheme: light;
    --memo-color-dark-blue: #003049;
    --memo-color-blue: #0b7285;
    --memo-color-light-blue: #d7eff6;
    --memo-color-very-light-gray: #f1f5f9;
    --memo-color-salmon: #fbbf24;
    --memo-color-light-salmon: #fef3c7;
    /* Anche qui scurito il 3 agosto 2026, da #1e88e5. Nel tema pensato per chi distingue male
     i colori la pastiglia era la peggiore di tutte — blu su ambra, 2,20:1 — e persino i
     collegamenti su bianco stavano a 3,68. Ora 4,60 sulla pastiglia e 7,69 sul bianco. */
    --memo-color-rust: #115591;
    --memo-color-light-rust: #4dabf7;
    --memo-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28251, 191, 36, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --memo-body-bg: #ffffff;
    --memo-body-text: #0f172a;
    --memo-body-muted-text: #475569;
    --memo-link-color: #1e88e5;
    --memo-link-hover-color: #0f6ab4;
    --memo-link-hover-underline-color: #fbbf24;
    --memo-navbar-bg: #003049;
    --memo-navbar-link-color: #f8fafc;
    --memo-navbar-link-hover-color: #fbbf24;
    --memo-card-bg: #ffffff;
    --memo-surface-bg: #f1f5f9;
    --memo-border-color: rgba(15, 55, 95, 0.18);
    --memo-theme-switch-bg: rgba(248, 250, 252, 0.2);
    --memo-theme-switch-active-bg: #fbbf24;
    --memo-theme-switch-color: #f8fafc;
    --memo-theme-switch-active-color: #082f49;
}

@font-face {
    font-family: "Mulish Regular";
    font-style: normal;
    font-weight: 400;
    src: url("/static/engine/font/mulish_regular.1c91bf11fe0c.woff2") format("woff2"),
        url("/static/engine/font/mulish_regular.45ccbbb4ca7b.woff") format("woff"),
        url("/static/engine/font/mulish_regular.5416a925ffaf.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Mulish Bold";
    font-style: normal;
    font-weight: 700;
    src: url("/static/engine/font/mulish_bold.437564aff4cc.woff2") format("woff2"),
        url("/static/engine/font/mulish_bold.1c592b3b6ae7.woff") format("woff"),
        url("/static/engine/font/mulish_bold.b7fa867b7522.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    src: url("/static/engine/font/atkinsonhyperlegible_regular.3bcddc26bc79.woff2") format("woff2"),
        url("/static/engine/font/atkinsonhyperlegible_regular.59f0f5543754.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    src: url("/static/engine/font/atkinsonhyperlegible_bold.47a6d744ab5b.woff2") format("woff2"),
        url("/static/engine/font/atkinsonhyperlegible_bold.f2193e9c742b.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Lexend Deca";
    font-style: normal;
    font-weight: 400;
    src: url("/static/engine/font/lexenddeca_regular.26fc85bd8042.woff2") format("woff2"),
        url("/static/engine/font/lexenddeca_regular.a38842a5074c.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Lexend Deca";
    font-style: normal;
    font-weight: 700;
    src: url("/static/engine/font/lexenddeca_bold.2db048624e3c.woff2") format("woff2"),
        url("/static/engine/font/lexenddeca_bold.c38cb57ab6f8.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "OpenDyslexic";
    font-style: normal;
    font-weight: 400;
    src: url("/static/engine/font/opendyslexic_regular.209dda5cb267.woff2") format("woff2"),
        url("/static/engine/font/opendyslexic_regular.e7081a0888a8.woff") format("woff"),
        url("/static/engine/font/opendyslexic_regular.cc4f542c3d25.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "OpenDyslexic";
    font-style: normal;
    font-weight: 700;
    src: url("/static/engine/font/opendyslexic_bold.df553171a66f.woff2") format("woff2"),
        url("/static/engine/font/opendyslexic_bold.cfd3b1ae9b33.woff") format("woff"),
        url("/static/engine/font/opendyslexic_bold.e8e4bbb789af.ttf") format("truetype");
    font-display: swap;
}