/* =============================================================================
   Font face
   ============================================================================= */

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-book-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-bold-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* =============================================================================
   Variabili
   ============================================================================= */

:root {
    /* Colori */
    --bg:          #ffffff;
    --paper:       #f4f2ee;
    --ink:         #111111;
    --muted:       #6b6b6b;
    --line:        #e5e3df;
    --line-strong: #cfccc5;
    --hover:       #000000;
    --rust:        #7D3027; /* solo su link specifici, mai nel menu */ 

    /* Tipografia — famiglie */
    --font-base: 'Gotham', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Tipografia — scala dimensioni */
    --text-xs:   0.7rem;
    --text-sm:   0.867rem;
    --text-base: 1rem;
    --text-md:   1.2rem;
    --text-lg:   1.5rem;
    --text-2xl:  clamp(1.5rem, 2.4vw, 2.125rem);
    --text-xl:   clamp(2.5rem, 4.6vw, 4.8rem);

    /* Layout — padding orizzontale fluido */
    --padding-x: clamp(1.25rem, 5vw, 2rem);
}

/* =============================================================================
   Reset
   ============================================================================= */

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

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

body {
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
    background-color: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

/* =============================================================================
   Header
   ============================================================================= */

#masthead {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    z-index: 100;
    padding: 18px 0;
    transition: box-shadow 0.25s ease;
}

/* Su desktop l'admin bar è fixed: l'header sticky deve partire subito sotto */
body.admin-bar #masthead {
    top: 32px;
}

/* Su mobile l'admin bar non è fixed: l'header sticky parte da top: 0 */
@media (max-width: 782px) {
    body.admin-bar #masthead {
        top: 0;
    }
}

/* .is-sticky aggiunta via JS — aggiunge solo l'ombra, position la gestisce il CSS */
#masthead.is-sticky {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.sito-header__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--padding-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */

.custom-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.custom-logo-link img {
    max-height: 70px;
    width: auto;
}

.logo-testo {
    font-family: var(--font-base);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

/* Hamburger */

.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.menu-toggle__barra {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Nav — mobile (base) */

/* top e height vengono impostati dinamicamente via JS al momento dell'apertura */
#nav-principale {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background: var(--bg);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#nav-principale.aperta {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#nav-principale .menu-lista {
    display: flex;
    flex-direction: column;
}

#nav-principale .menu-lista > li > a {
    display: block;
    font-family: var(--font-base);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    transition: color 0.2s ease;
}

#nav-principale .menu-lista > li > a:hover {
    color: var(--hover);
}

body.menu-aperto {
    overflow: hidden;
}

/* =============================================================================
   Hero — Homepage
   ============================================================================= */

/* Mobile (base) */

.hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem var(--padding-x);
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--line);
}

.hero__sfondo {
    order: 1;
}

.hero__sfondo img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.hero__contenuto {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero__titoletto {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

/*
 * .hero__titolo — font-size fluido tra 40px e 72px.
 * Il mix regular/italic (es. prima riga tonda, seconda in corsivo) va gestito
 * manualmente con <em> nel campo ACF: es. "Titolo <em>in italic</em>".
 */
.hero__titolo {
    font-family: var(--font-base);
    font-size: clamp(40px, 4.6vw, 72px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-top: 0.5rem;
}

.hero__titolo em {
    font-style: italic;
}

.hero__descrizione {
    font-family: var(--font-base);
    font-size: var(--text-md);
    color: var(--ink);
}

.hero__azioni {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.hero__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--rust);
    border-bottom: 1px solid var(--rust);
    padding-bottom: 2px;
    transition: color 0.2s ease;
    width: fit-content;
}

.hero__link:hover {
    color: var(--hover);
    border-bottom-color: var(--hover);
}

.hero__link--primario::after {
    content: '→';
}

.hero__link--secondario::after {
    content: '↓';
}

/* Desktop */

@media (min-width: 769px) {
    .hero {
        grid-template-columns: 1fr 2fr;
        gap: 60px;
        align-items: stretch;
        padding: 4rem var(--padding-x);
        max-width: 1440px;
        margin: 0 auto;
    }

    .hero__sfondo {
        order: 2;
    }

    .hero__contenuto {
        order: 1;
        display: flex;
        flex-direction: column;
    }

    .hero__azioni {
        margin-top: auto;
    }
}

/* Nav — desktop */

@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }

    body.menu-aperto {
        overflow: auto;
    }

    #nav-principale {
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        border-top: none;
        flex-direction: row;
        align-items: center;
        padding: 0;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
        overflow-y: visible;
    }

    #nav-principale .menu-lista {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }

    #nav-principale .menu-lista > li > a {
        display: inline;
        font-size: 0.75rem;
        padding: 0;
        border-bottom: none;
    }

    /*
     * Separatore verticale tra voci di menu.
     * Aggiungere la classe CSS "separatore" alla voce desiderata
     * da WP Admin > Aspetto > Menu > Opzioni schermata > Classi CSS.
     */
    #nav-principale .menu-lista > li.separatore {
        border-left: 1px solid var(--line-strong);
        padding-left: 2rem;
    }
}

/* =============================================================================
   Artisti in evidenza — Homepage
   ============================================================================= */

/* Mobile (base) */

.artisti-evidenza__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    border-bottom: 1px solid var(--line);
}

.artisti-evidenza__header,
.mostre-evidenza__header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 2.5rem;
}

.artisti-evidenza__titolo {
    font-size: var(--text-2xl);
    font-weight: 400;
}

.link-archivio {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rust);
}

.artisti-evidenza__griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.artista-card a {
    display: block;
    color: inherit;
}

.artista-card__immagine {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--paper);
    margin-bottom: 0.75rem;
}

.artista-card__immagine img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artista-card__nome {
    font-size: var(--text-base);
    margin-bottom: 0.25rem;
}

.artista-card__link {
    font-size: var(--text-sm);
    color: var(--rust);
    transition: color 0.2s ease;
}
.artista-card a:hover .artista-card__link {
    color: var(--ink);
}

/* Desktop */

@media (min-width: 769px) {
    .artisti-evidenza__griglia {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* ── Mostre in evidenza ─────────────────────────────────────────────────── */

/* Mobile (base) */

.mostre-evidenza__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    border-bottom: 1px solid var(--line);
}

.mostre-evidenza__titolo {
    font-size: var(--text-2xl);
    font-weight: 400;
}

.mostre-evidenza__griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

/* Card mostra */

.mostra-card__immagine {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper);
    margin-bottom: 0.75rem;

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.3s ease;
    }

    &:hover img {
        opacity: 0.75;
    }

    & .mostra-card__placeholder {
        width: 100%;
        height: 100%;
    }
}

.mostra-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.mostra-card__badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--ink);
}

.mostra-card__badge--in-corso {
    background: var(--ink);
    color: var(--bg);
}

.mostra-card__badge--futura,
.mostra-card__badge--passata {
    background: transparent;
    color: var(--ink);
}

.mostra-card__data {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
}

.mostra-card__titolo {
    font-size: var(--text-md);
    font-weight: 400;
    margin-top: 0.5rem;
    margin-bottom: 0;
    & a {
        color: inherit;
    }
}

.mostra-card__artista {
    font-size: var(--text-base);
    color: var(--muted);
    margin-top: 0.25rem;
}

.mostra-card__cta {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    color: var(--rust);
    transition: color 0.2s ease;
}
.mostra-card__cta:hover {
    color: var(--ink);
}

/* Desktop */

@media (min-width: 900px) {
    .artisti-evidenza__header,
    .mostre-evidenza__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }

    .mostre-evidenza__griglia {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .mostra-card__meta {
        flex-direction: row;
        align-items: center;
    }
}

/* =============================================================================
   Blocco La Galleria — Homepage
   ============================================================================= */

/* Mobile (base) */

.blocco-galleria__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    border-top: 1px solid var(--line);
}

.blocco-galleria__intro {
    margin-bottom: 2.5rem;
}

.blocco-galleria__titoletto {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 1rem;
}

.blocco-galleria__titolo {
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0.5rem;
}

.blocco-galleria__descrizione {
    font-size: var(--text-base);
    line-height: 1.7;
    margin-bottom: 2rem;

    & p {
        margin-bottom: 1em;
    }
}

.blocco-galleria__info {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.15rem;
    align-items: baseline;
}

/* Separazione tra i gruppi dt/dd nel dl */
.blocco-galleria__info dd + dt {
    margin-top: 1.25rem;
}

.blocco-galleria__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    white-space: nowrap;
}

.blocco-galleria__valore {
    font-size: var(--text-sm);
    line-height: 1.5;
}

.blocco-galleria__valore a {
    color: var(--rust);
    text-decoration: underline;
}

/* Desktop */

@media (min-width: 900px) {
    .blocco-galleria__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8rem;
        align-items: start;
    }

    .blocco-galleria__intro {
        position: sticky;
        top: 120px;
        margin-bottom: 0;
    }

    .blocco-galleria__info {
        grid-template-columns: auto 1fr;
        row-gap: 1rem;
        column-gap: 5rem;
    }

    .blocco-galleria__info dd + dt {
        margin-top: 0;
    }
}

/* =============================================================================
   Archivio artisti
   ============================================================================= */

.archivio-artisti__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
}

.archivio-artisti__intestazione {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 3rem;
}

.archivio-artisti__titolo {
    font-size: var(--text-2xl);
    font-weight: 400;
    margin: 0;
}

/* Griglia — 2 colonne su mobile, 5 su desktop */
.archivio-artisti__griglia {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
}

@media (min-width: 900px) {
    .archivio-artisti__griglia {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem 1.5rem;
    }
}

/* Paginazione */

.archivio-artisti__paginazione {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
}

.archivio-artisti__paginazione .nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.archivio-artisti__paginazione .page-numbers {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.archivio-artisti__paginazione .page-numbers:hover,
.archivio-artisti__paginazione .page-numbers.current {
    color: var(--ink);
    border-color: var(--ink);
}

/* ── Sezione artisti esposti ── */

.archivio-artisti__sezione--esposti {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--line);
}

.archivio-artisti__sottotitolo {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 2rem;
    font-weight: 400;
}

.archivio-artisti__lista-esposti {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
}

@media (min-width: 900px) {
    .archivio-artisti__lista-esposti {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem 1.5rem;
    }
}

.artista-esposto {
    font-size: var(--text-base);
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--line);
    break-inside: avoid;
}

.artista-esposto__link {
    display: block;
    text-decoration: none;
    transition: color 0.2s ease;
}

.artista-esposto__link:hover .artista-esposto__cta {
    color: var(--ink);
}

.artista-esposto__nome {
    display: block;
    color: var(--ink);
    font-size: var(--text-base);
}

.artista-esposto__nome--inattivo {
    color: var(--muted);
}

.artista-esposto__cta {
    display: block;
    font-size: var(--text-sm);
    color: var(--rust);
    margin-top: 0.25rem;
    transition: color 0.2s ease;
}

/* =============================================================================
   Footer
   ============================================================================= */

.sito-footer {
    background: var(--bg);
    border-top: 1px solid var(--line);
    margin-top: 0;
}

.sito-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.sito-footer__logo {
    display: inline-block;
    margin-bottom: 1.25rem;
}

/* Logo footer leggermente più grande dell'header */
.sito-footer__logo img {
    height: 80px;
    width: auto;
}

.sito-footer__tagline,
.sito-footer__indirizzo {
    font-size: var(--text-sm);
    color: var(--muted);
    line-height: 1.5;
    margin-top: 0.25rem;
}

.sito-footer__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.sito-footer__titolo-colonna {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.sito-footer__lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sito-footer__lista a {
    font-size: var(--text-sm);
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sito-footer__lista a:hover {
    color: var(--muted);
}

/* Barra copyright */

.sito-footer__barra {
    border-top: 1px solid var(--line);
}

.sito-footer__barra-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.25rem var(--padding-x);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sito-footer__copyright {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
}

.sito-footer__lista-legale {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sito-footer__lista-legale a {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sito-footer__lista-legale a:hover {
    color: var(--ink);
}

/* Separatore · tra i link legali — nascosto su mobile */
.sito-footer__lista-legale li + li::before {
    content: '·';
    color: var(--line-strong);
    margin-right: 0.75rem;
    display: none;
}

@media (min-width: 900px) {
    .sito-footer__inner {
        grid-template-columns: 1fr 2fr;
        gap: 4rem;
        align-items: start;
    }

    .sito-footer__nav {
        grid-template-columns: repeat(3, 1fr);
    }

    .sito-footer__barra-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .sito-footer__lista-legale {
        flex-direction: row;
        gap: 0.25rem 0.75rem;
    }

    .sito-footer__lista-legale li + li::before {
        display: inline;
    }
}

/* =============================================================================
   Newsletter — Homepage
   ============================================================================= */

.blocco-newsletter {
    background: var(--paper);
}

.blocco-newsletter__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 5rem var(--padding-x);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.blocco-newsletter__titolo {
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    max-width: 16ch;
}

.blocco-newsletter__sottotitolo {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-top: 0.75rem;
    line-height: 1.6;
    max-width: 40ch;
}

.blocco-newsletter__placeholder {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    padding: 2rem;
    border: 1px dashed var(--line-strong);
    text-align: center;
    margin-bottom: 1rem;
}

.blocco-newsletter__gdpr {
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: 1.6;
    margin-top: 0.75rem;
}

@media (min-width: 900px) {
    .blocco-newsletter__inner {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
        align-items: center;
    }

    .blocco-newsletter__form {
        max-width: 100%;
    }
}

/* =============================================================================
   Interazioni
   ============================================================================= */

/* Link sottolineati — rimuovi underline al hover */

.hero__link:hover,
.blocco-galleria__valore a:hover {
    text-decoration: none;
}

/* Link ruggine — colore scuro al hover */

.hero__link:hover,
.link-archivio:hover,
.blocco-galleria__valore a:hover {
    color: var(--hover);
}

/* Foto artisti — scala di grigi con transizione al colore */

.artista-card__immagine img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.artista-card:hover .artista-card__immagine img {
    filter: grayscale(0%);
}

/* =============================================================================
   Single Artista
   ============================================================================= */

/* Hero */
.artista-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
    .artista-hero__inner {
        grid-template-columns: 2fr 1fr;
        gap: 4rem;
        align-items: center;
        min-height: 480px;
    }
}

.artista-hero__testo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.artista-hero__titoletto {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.artista-hero__nome {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
}

.artista-hero__testo--esposto {
    padding: 2rem 0;
}

.artista-hero__foto {
    margin: 0;
    aspect-ratio: 500 / 624;
    overflow: hidden;
}

.artista-hero__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Variante copertina orizzontale (1200×800) */
.artista-hero__foto--copertina {
    aspect-ratio: 3 / 2;
}

@media (min-width: 900px) {
    .artista-hero__inner--con-copertina {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        min-height: unset;
    }
}

/* Nav interna */
.artista-nav {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0; /* su mobile JS sovrascrive con header.offsetHeight + header.top */
    z-index: 90;
}

.artista-nav__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--padding-x);
    display: flex;
    gap: 2rem;
}

.artista-nav__voce {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-decoration: none;
    padding: 1rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.artista-nav__voce:hover,
.artista-nav__voce--attivo {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

@media (min-width: 900px) {
    /* Sull'artista l'header scorre via, il nav interno prende il suo posto.
       body.admin-bar.single-artista ha specificità 0,1,2,1 > body.admin-bar 0,1,1,1 */
    body.single-artista #masthead,
    body.admin-bar.single-artista #masthead {
        position: relative;
        top: auto;
    }

    body.admin-bar .artista-nav {
        top: 32px;
    }

    /* Offset scroll per non nascondere le sezioni sotto il nav sticky */
    #artista-bio,
    #artista-opere,
    #artista-mostre,
    #artista-studio {
        scroll-margin-top: 49px;
    }

    body.admin-bar #artista-bio,
    body.admin-bar #artista-opere,
    body.admin-bar #artista-mostre,
    body.admin-bar #artista-studio {
        scroll-margin-top: 81px;
    }
}

/* Sezioni — titolo comune */
.artista-sezione__titolo {
    font-size: var(--text-2xl);
    font-weight: 400;
    margin: 0 0 2.5rem 0;
}

/* Contenuto testuale */
.artista-contenuto__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    border-bottom: 1px solid var(--line);
}

.artista-contenuto__testo {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--ink);
}

.artista-contenuto__testo p {
    margin-bottom: 1em;
    break-inside: avoid;
}

.artista-contenuto__testo ul,
.artista-contenuto__testo ol,
.artista-contenuto__testo figure,
.artista-contenuto__testo h2,
.artista-contenuto__testo h3,
.artista-contenuto__testo h4 {
    break-inside: avoid;
}

.artista-contenuto__testo blockquote {
    break-inside: avoid;
    border-left: 2px solid var(--ink);
    margin: 1.5em 0;
    padding: 0.25em 0 0.25em 1.5em;
    font-style: italic;
    color: var(--muted);
}

.artista-contenuto__testo blockquote p {
    margin-bottom: 1em;
}

.artista-contenuto__testo blockquote p:last-child {
    margin-bottom: 0;
}

@media (min-width: 900px) {
    .artista-contenuto__testo {
        column-count: 2;
        column-gap: 4rem;
    }
}

/* Opere */
.artista-opere__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    border-bottom: 1px solid var(--line);
}

.artista-opere__griglia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
}

@media (min-width: 900px) {
    .artista-opere__griglia {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem 1.5rem;
    }
}

/* Card opera */
.opera-card__immagine {
    width: 100%;
    max-height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    background: var(--bg);
    margin-bottom: 0.75rem;

    & img {
        display: block;
        max-width: 100%;
        max-height: 500px;
        width: auto;
        height: auto;
        transition: opacity 0.3s ease;
    }

    &:hover img {
        opacity: 0.75;
    }
}

.opera-card__placeholder {
    width: 100%;
    height: 100%;
}

.opera-card__titolo {
    font-size: var(--text-base);
    font-weight: 400;
    margin: 0 0 0.25rem 0;
}

.opera-card__titolo a {
    color: inherit;
    text-decoration: none;
}

.opera-card__titolo a:hover {
    text-decoration: underline;
}

.opera-card__tecnica {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 0 0 0.25rem 0;
}

.opera-card__meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    margin: 0;
}

/* Mostre selezionate */
.artista-mostre__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    border-bottom: 1px solid var(--line);
}

.artista-mostre__lista {
    columns: 1;
    gap: 0;
}

@media (min-width: 900px) {
    .artista-mostre__lista {
        columns: 2;
        gap: 6rem;
    }
}

.artista-mostre__riga {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    break-inside: avoid;
}

.artista-mostre__anno {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
}

.artista-mostre__dettaglio {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.artista-mostre__riga-titolo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
}

.artista-mostre__titolo {
    font-size: var(--text-base);
    color: var(--ink);
    font-weight: 400;
}

.artista-mostre__titolo--link {
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease;
}

.artista-mostre__titolo--link:hover {
    color: var(--rust);
}

.artista-mostre__luogo {
    font-size: var(--text-sm);
    color: var(--muted);
    flex-shrink: 0;
    text-align: right;
}

@media (max-width: 600px) {
    .artista-mostre__riga-titolo {
        flex-direction: column;
        gap: 0.25rem;
    }

    .artista-mostre__luogo {
        text-align: left;
    }
}

.artista-mostre__sottotitolo {
    font-size: var(--text-sm);
    color: var(--muted);
    font-style: italic;
}

/* =============================================================================
   Archivio mostre
   ============================================================================= */

.archivio-mostre__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
}

.archivio-mostre__intestazione {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 3rem;
}

.archivio-mostre__titolo {
    font-size: var(--text-2xl);
    font-weight: 400;
    margin: 0;
}

.archivio-mostre__griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .archivio-mostre__griglia {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

.archivio-mostre__paginazione {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
}

.archivio-mostre__paginazione .nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.archivio-mostre__paginazione .page-numbers {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.archivio-mostre__paginazione .page-numbers:hover,
.archivio-mostre__paginazione .page-numbers.current {
    color: var(--ink);
    border-color: var(--ink);
}

.archivio-mostre__vuoto {
    color: var(--muted);
    font-size: var(--text-sm);
}

/* =============================================================================
   Single Opera
   ============================================================================= */

.opera-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
    .opera-hero__inner {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: start;
    }
}

/* Immagine principale */
.opera-hero__figura {
    margin: 0;
    position: sticky;
    top: 120px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-height: 900px;
    overflow: hidden;
    background: var(--bg);
}

.opera-hero__figura img {
    display: block;
    max-width: 100%;
    max-height: 900px;
    width: auto;
    height: auto;
}


/* Info colonna destra */
.opera-hero__artista {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rust);
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.opera-hero__artista:hover {
    color: var(--ink);
}

.opera-hero__titolo {
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 1.25rem 0;
}

/* Attributi dl */
.opera-hero__attributi {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 2rem;
    margin: 0 0 2rem 0;
    align-items: baseline;
}

.opera-hero__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    white-space: nowrap;
}

.opera-hero__valore {
    font-size: var(--text-sm);
    color: var(--ink);
}

/* Descrizione */
.opera-hero__descrizione {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 2rem;
}

.opera-hero__descrizione p {
    margin-bottom: 1em;
}

.opera-hero__descrizione p:last-child {
    margin-bottom: 0;
}

/* Form */
.opera-hero__form {
    border-top: 1px solid var(--line);
    padding-top: 2rem;
    margin-top: 1rem;
}

.opera-hero__form-titolo {
    font-size: var(--text-md);
    font-weight: 400;
    margin: 0 0 1.5rem 0;
    color: var(--ink);
}

/* Galleria secondaria */
.opera-galleria__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
}

.opera-galleria__griglia {
    columns: 1;
    gap: 1rem;
}

@media (min-width: 900px) {
    .opera-galleria__griglia {
        columns: 3;
        gap: 1.5rem;
    }
}

.opera-galleria__figura {
    margin: 0 0 1rem 0;
    break-inside: avoid;
}

.opera-galleria__figura img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.2s ease;
}

/* ── Lightbox ───────────────────────────────────── */

.lightbox-trigger {
    display: block;
    cursor: zoom-in;
}

.lightbox-trigger img {
    transition: opacity 0.2s ease;
}

.lightbox-trigger:hover img {
    opacity: 0.85;
}

.lightbox {
    border: none;
    background: rgba(0, 0, 0, 0.92);
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    padding: 2rem;
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.92);
}

.lightbox__figura {
    margin: 0;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__figura img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lightbox__chiudi {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.lightbox__chiudi:hover {
    opacity: 1;
}

.lightbox__prev,
.lightbox__next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }

.lightbox__prev:hover,
.lightbox__next:hover {
    opacity: 1;
}

/* =============================================================================
   Single Mostra
   ============================================================================= */

.mostra-hero {
    border-bottom: 1px solid var(--line);
}

.mostra-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem var(--padding-x) 4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.mostra-hero__immagine {
    order: 1;
    margin: 0;
}

.mostra-hero__immagine img {
    width: 100%;
    height: auto;
    display: block;
}

.mostra-hero__contenuto {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Artisti */
.mostra-hero__artisti {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.mostra-hero__artista-link {
    color: var(--rust);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mostra-hero__artista-link:hover {
    color: var(--ink);
}

/* Badge + data */
.mostra-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.mostra-hero__data {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
}

/* Titolo */
.mostra-hero__titolo {
    font-family: var(--font-base);
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-top: 0.25rem;
}

/* Sottotitolo */
.mostra-hero__sottotitolo {
    font-size: var(--text-md);
    color: var(--muted);
    font-style: italic;
}

/* Link catalogo */
.mostra-hero__catalogo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--rust);
    border-bottom: 1px solid var(--rust);
    padding-bottom: 2px;
    transition: color 0.2s ease;
    width: fit-content;
    margin-top: auto;
}

.mostra-hero__catalogo::after {
    content: '↓';
}

.mostra-hero__catalogo:hover {
    color: var(--hover);
    border-bottom-color: var(--hover);
}

@media (min-width: 769px) {
    .mostra-hero__inner {
        grid-template-columns: 1fr 2fr;
        gap: 60px;
        align-items: stretch;
        padding: 4rem var(--padding-x);
    }

    .mostra-hero__immagine {
        order: 2;
    }

    .mostra-hero__contenuto {
        order: 1;
    }
}

/* Testo */
.mostra-testo__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    border-bottom: 1px solid var(--line);
}

.mostra-testo__testo {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--ink);
}

.mostra-testo__testo p {
    margin-bottom: 1em;
    break-inside: avoid;
}

.mostra-testo__testo p:last-child {
    margin-bottom: 0;
}

.mostra-testo__testo blockquote,
.mostra-testo__testo ul,
.mostra-testo__testo ol,
.mostra-testo__testo figure,
.mostra-testo__testo h2,
.mostra-testo__testo h3,
.mostra-testo__testo h4 {
    break-inside: avoid;
}

@media (min-width: 900px) {
    .mostra-testo__testo {
        column-count: 2;
        column-gap: 4rem;
    }
}

/* Galleria */
.mostra-galleria__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
}

.mostra-galleria__griglia {
    columns: 1;
    gap: 1rem;
}

@media (min-width: 900px) {
    .mostra-galleria__griglia {
        columns: 3;
        gap: 1.5rem;
    }
}

.mostra-galleria__figura {
    margin: 0 0 1rem 0;
    break-inside: avoid;
}

.mostra-galleria__figura img {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================================================
   Studio — masonry con CSS columns
   ============================================================================= */
.artista-studio__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
}

.artista-studio__griglia {
    columns: 1;
    gap: 1rem;
}

@media (min-width: 900px) {
    .artista-studio__griglia {
        columns: 3;
        gap: 1.5rem;
    }
}

.artista-studio__foto {
    margin: 0 0 1rem 0;
    break-inside: avoid;
}

.artista-studio__foto img {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================================================
   Pagina generica (page.php)
   ============================================================================= */

.pagina-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 4rem var(--padding-x);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.pagina-hero__contenuto {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}

.pagina-hero__titolo {
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
}

/* Senza immagine: solo titolo, padding inferiore azzerato (lo spazio viene dal contenuto sotto) */
.pagina-hero:not(.pagina-hero--con-immagine) .pagina-hero__inner {
    padding-bottom: 0;
}

/* Immagine in evidenza */
.pagina-hero__immagine {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.pagina-hero__immagine img {
    display: block;
    max-width: 100%;
    max-height: clamp(360px, 65vh, 640px);
    width: auto;
    height: auto;
}

@media (min-width: 769px) {
    .pagina-hero--con-immagine .pagina-hero__inner {
        grid-template-columns: 1fr 2fr;
        gap: 60px;
        align-items: center;
    }
}

/* Contenuto */
.pagina-contenuto__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 3rem var(--padding-x) 4rem;
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--ink);
}

.pagina-contenuto__inner p {
    margin-bottom: 1em;
}

.pagina-contenuto__inner p:last-child {
    margin-bottom: 0;
}

.pagina-contenuto__inner h2 {
    font-size: var(--text-lg);
    font-weight: 400;
    margin: 2em 0 0.75em;
}

.pagina-contenuto__inner h3 {
    font-size: var(--text-base);
    font-weight: 700;
    margin: 1.5em 0 0.5em;
}

.pagina-contenuto__inner ul,
.pagina-contenuto__inner ol {
    list-style: revert;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.pagina-contenuto__inner li {
    margin-bottom: 0.4em;
}

.pagina-contenuto__inner blockquote {
    break-inside: avoid;
    border-left: 2px solid var(--ink);
    margin: 1.5em 0;
    padding: 0.25em 0 0.25em 1.5em;
    font-style: italic;
    color: var(--muted);
}

.pagina-contenuto__inner blockquote p {
    margin-bottom: 1em;
}

.pagina-contenuto__inner blockquote p:last-child {
    margin-bottom: 0;
}

.pagina-contenuto__inner a {
    color: var(--rust);
    text-decoration: underline;
}

.pagina-contenuto__inner a:hover {
    color: var(--ink);
}

/* Variante larghezza intera (page-larghezza-intera.php) */
.pagina-contenuto--intera .pagina-contenuto__inner {
    max-width: 1440px;
    font-size: inherit;
}

/* =============================================================================
   STILI UNIVERSALI — classi tipografiche riutilizzabili nei contenuti pagina
   ============================================================================= */

/* Etichetta — monospaziato maiuscolo, usato come sopratitolo o label di sezione.
   Assegnare come classe aggiuntiva su blocchi h2/h3 nell'editor di WordPress
   (Avanzate → Classi CSS aggiuntive → "etichetta").
   Supporta anche la variante block style Gutenberg (.is-style-etichetta). */
.etichetta,
.wp-block-heading.is-style-etichetta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 400;
    margin-bottom: 2rem;
}

.wp-block-separator.is-style-linea {
    border: none;
    border-top: 1px solid var(--line);
    width: 100%;
    max-width: 100%;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* =============================================================================
   ANIMAZIONI SCROLL
   ============================================================================= */

/* ── Animazioni scroll ───────────────────────────────────────────────────── */

.gf-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.gf-fade-up.gf-visibile {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .gf-fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================================================
   PAGINA 404
   ============================================================================= */

.pagina-404 {
    min-height: calc(100svh - 80px);
    display: flex;
    align-items: center;
    padding: clamp(4rem, 12vw, 8rem) var(--padding-x);
}

.pagina-404__inner {
    max-width: 48rem;
}

.pagina-404__codice {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(5rem, 18vw, 10rem);
    line-height: 1;
    color: var(--line-strong);
    margin: 0 0 1.5rem;
}

.pagina-404__titolo {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 1rem;
}

.pagina-404__sottotitolo {
    font-size: 1.0625rem;
    color: var(--muted);
    margin: 0 0 2.5rem;
    max-width: 34rem;
}

.pagina-404__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}

.pagina-404__link {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 0.125rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pagina-404__link:hover {
    color: var(--rust);
    border-color: var(--rust);
}