/* ==========================================================================
   About — masthead editoriale + intro + percorso + credenziale + chiusura
   ========================================================================== */

/* CHI SONO */
.nf-about__intro {
    display: grid;
    grid-template-columns: minmax(280px, 460px) 1fr;
    gap: clamp(40px, 6vw, 96px);
    padding-top: clamp(24px, 4vw, 48px);
    padding-bottom: clamp(64px, 9vw, 120px);
    align-items: center;
}
.nf-about__intro-media-frame {
    box-shadow: 0 32px 64px -32px rgba(28, 26, 22, 0.32), 0 0 0 1px var(--nf-hairline);
}
/* Il ritratto è verticale e il volto sta nella metà alta: il crop parte dall'alto, mai dal centro */
.nf-about__intro-media { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.nf-about__intro-title {
    font-family: var(--nf-serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    margin: 0 0 22px;
}
.nf-about__intro-body p { font-size: 16px; line-height: 1.72; color: var(--nf-body); max-width: 56ch; margin: 0 0 18px; }
.nf-about__intro-body strong { color: var(--nf-ink); font-weight: 600; }

@media (max-width: 780px) {
    .nf-about__intro { grid-template-columns: 1fr; align-items: start; }
    .nf-about__intro-media { aspect-ratio: 3 / 4; }
}

/* IL MIO PERCORSO CREATIVO */
.nf-about__journey { background: var(--nf-cream-1); padding: clamp(64px, 9vw, 120px) 0; }
.nf-about__journey-inner { max-width: 1040px; }
.nf-about__journey-title {
    font-family: var(--nf-serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    margin: 0 0 40px;
    text-align: center;
}
.nf-about__journey-col p { font-size: 15.5px; line-height: 1.72; color: var(--nf-body); margin: 0 0 20px; }
.nf-about__journey-col strong, .nf-about__journey-inner strong { color: var(--nf-ink); font-weight: 600; }

/* Desktop: due colonne di testo, le due foto affiancate sulla riga sotto.
   Mobile: il flusso del markup (testo 1 → foto 1 → testo 2 → foto 2) prende il sopravvento. */
.nf-about__journey-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: clamp(28px, 4vw, 44px);
}
.nf-about__journey-col--1 { grid-column: 1; grid-row: 1; }
.nf-about__journey-col--2 { grid-column: 2; grid-row: 1; }
.nf-about__journey-figure--1 { grid-column: 1; grid-row: 2; }
.nf-about__journey-figure--2 { grid-column: 2; grid-row: 2; }

.nf-about__journey-figure { display: block; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: inset 0 0 0 1px var(--nf-hairline); }
.nf-about__journey-figure img { width: 100%; height: 100%; object-fit: cover; }

.nf-about__journey-cta-row { text-align: center; margin-top: 44px; }

@media (max-width: 780px) {
    .nf-about__journey-cols { grid-template-columns: 1fr; }
    .nf-about__journey-col--1,
    .nf-about__journey-col--2,
    .nf-about__journey-figure--1,
    .nf-about__journey-figure--2 { grid-column: 1; grid-row: auto; }
    .nf-about__journey-figure { aspect-ratio: 16 / 10; }
}

/* ATTESTATO + CATALOGO — tre documenti fotografici sulla stessa riga, stesso formato */
.nf-about__credential { padding-top: 64px; padding-bottom: 64px; border-top: 1px solid var(--nf-hairline); }
.nf-about__credential-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 32px);
    max-width: 1040px;
    margin: 0 auto;
}
.nf-about__credential-frame {
    display: block;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--nf-hairline), 0 24px 48px -24px rgba(28, 26, 22, 0.35);
}
.nf-about__credential-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 780px) {
    .nf-about__credential-row { grid-template-columns: 1fr; max-width: 420px; }
}

/* CHIUSURA — blocco ink: è la voce di Nausica, l'unico momento scuro della pagina.
   Condivide il fondo col footer che segue, quindi la hairline chiara ne segna il confine. */
.nf-about__closing {
    background: var(--nf-ink);
    color: var(--nf-light);
    padding: 64px 0;
    border-bottom: 1px solid rgba(243, 240, 234, 0.14);
}
.nf-about__closing-inner { max-width: 680px; text-align: center; }
.nf-about__closing-lead {
    font-family: var(--nf-serif);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.34;
    color: var(--nf-light);
    margin: 0 0 24px;
}
.nf-about__closing-text { font-size: 16px; line-height: 1.75; color: rgba(243, 240, 234, 0.74); margin: 0; }
/* La firma esiste solo in nero su fondo chiaro: invertita diventa bianca, e `screen`
   scarta il fondo scuro risultante invece di stamparlo come rettangolo. */
.nf-about__closing-signature {
    width: clamp(170px, 26vw, 230px);
    margin: 48px auto 0;
    filter: invert(1);
    mix-blend-mode: screen;
}