/* ===========================================================================
   Pagina ABOUT — la biografia a sinistra, il ritratto a destra.
   Il body ha `is-about`; le classi sono prefissate `ab-` per non incrociare site.css né
   workshop.css. È la stessa impaginazione della pagina workshop RISPECCHIATA (là le immagini
   a sinistra), e i due file restano separati per la stessa ragione per cui lo sono
   gallery.css e portfolio.css: quello che condividono davvero non è il layout ma i
   MECCANISMI, e quelli stanno già altrove — lo scambio del titolo in title-swap.css, i trim
   ottici (`--trim-*`) in site.css. Vedi ABOUT.md.
   =========================================================================== */

body.is-about { background: #E8E8E8; }

.ab {
  --ab-bg: #E8E8E8;
  --ab-ink: #111;
  --ab-body: #333;
  --ab-rule: #c9c9c9;
  /* Il rosso del sito (lo stesso del pannello del menu): qui marca i nomi dei riconoscimenti,
     come nella vecchia pagina. È l'unico colore della pagina oltre all'inchiostro. */
  --ab-accent: #A9432E;
  /* Corsia del monogramma, a tutta altezza: la pagina scorre e gli passa sotto. */
  --ab-lane: max(clamp(1.6rem, 5vw, 5rem), var(--mono-lane));
  --ab-pad-r: clamp(1.6rem, 5vw, 5rem);
  /* Il testo prende la colonna più larga: è quello che si legge. Il ritratto è verticale e
     più spazio non gli serve. */
  --ab-cols: minmax(0, 1fr) minmax(0, 0.8fr);
  --ab-gap: clamp(2rem, 5vw, 5rem);

  background: var(--ab-bg); color: var(--ab-ink);
  min-height: 100vh;
  padding: clamp(3.5rem, 12vh, 9rem) var(--ab-pad-r) clamp(3rem, 10vh, 7rem) var(--ab-lane);
}

/* ---- Testata: il titolo della pagina ---------------------------------------------------
   Sulla colonna del TESTO (la prima), non a tutta pagina: un titolo lungo va a capo dentro la
   colonna che introduce. Tirato su del proprio trim, così le sue maiuscole cominciano al
   bordo superiore dell'area di testo. */
.ab-head {
  display: grid;
  grid-template-columns: var(--ab-cols);
  gap: var(--ab-gap);
  align-items: start;
  margin-bottom: clamp(2.5rem, 9vh, 6rem);
}
.ab-title {
  margin: calc(-1 * var(--trim-title)) 0 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--ab-ink);
  text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 4.2rem);
}

/* ---- Il corpo: testo e ritratto --------------------------------------------------------
   Come nella pagina workshop, `sticky` sta sulla FIGURA dentro la cella e la cella si stira
   all'altezza della riga (niente `align-items: start`): un elemento già alto quanto la riga
   non avrebbe spazio in cui restare fermo. */
.ab-body {
  display: grid;
  grid-template-columns: var(--ab-cols);
  gap: var(--ab-gap);
}

.ab-media { min-width: 0; }
.ab-figure {
  position: sticky;
  top: clamp(2rem, 9vh, 6rem);
  margin: 0;
}
.ab-figure img {
  display: block;
  width: 100%; height: auto;
  /* 2:3 come il file (800×1200): dichiarato per riservare l'ingombro prima che l'immagine
     arrivi, e con `object-fit: cover` un ritratto sostituito con un altro formato non si
     deforma — al massimo si ritaglia. */
  aspect-ratio: 2 / 3; object-fit: cover; max-height: 78vh;
  background: #dcdcdc;
  /* Svelato dal basso, come le immagini della home e le locandine dei workshop. */
  clip-path: inset(100% 0 0 0);
  transition: clip-path 950ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path;
}
.ab-body.img-in .ab-figure img { clip-path: inset(0 0 0 0); }

/* ---- La colonna del testo -------------------------------------------------------------- */
.ab-text { min-width: 0; max-width: 62ch; }
/* La prima riga della biografia comincia al bordo superiore del ritratto: si allineano i
   GLIFI, non i box (vedi `--trim-*` in site.css). */
.ab-text > :first-child { margin-top: calc(-1 * var(--trim-prose)); }

.ab-bio {
  font-size: clamp(0.98rem, 1.2vw, 1.18rem); line-height: 1.62; color: var(--ab-body);
}
.ab-bio p { margin: 0; }
.ab-bio p + p { margin-top: 1em; }

/* ---- Riconoscimenti e collaborazioni ---------------------------------------------------
   Una riga per voce: il ruolo in testo corrente, il nome in evidenza. Il nome è un link solo
   quando l'admin ha messo un indirizzo — senza, resta testo (e non un link che non porta da
   nessuna parte). */
.ab-credits {
  margin: clamp(2rem, 6vh, 3.2rem) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--ab-rule);
  padding-top: clamp(1.2rem, 3vh, 1.8rem);
}
.ab-credit {
  font-size: clamp(0.95rem, 1.15vw, 1.12rem); line-height: 1.5;
}
.ab-credit + .ab-credit { margin-top: 0.55em; }
.ab-credit-label { color: var(--ab-body); }
.ab-credit-name {
  color: var(--ab-accent);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.92em; font-weight: 600;
}
a.ab-credit-name { border-bottom: 1px solid transparent; transition: border-color 260ms ease; }
a.ab-credit-name:hover, a.ab-credit-name:focus-visible { border-bottom-color: currentColor; }

/* ---- Recapiti (dal blocco `contact` della home: vedi il template) ----------------------- */
.ab-contacts {
  margin-top: clamp(2rem, 6vh, 3.2rem);
  border-top: 1px solid var(--ab-rule);
  padding-top: clamp(1.2rem, 3vh, 1.8rem);
}
.ab-contacts-h {
  margin: 0 0 clamp(0.7rem, 2vh, 1.1rem);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: clamp(0.78rem, 0.95vw, 0.92rem); color: var(--ab-ink);
}
.ab-contacts-list { margin: 0; padding: 0; list-style: none; }
.ab-contacts-list li {
  font-size: clamp(0.95rem, 1.15vw, 1.12rem); line-height: 1.5;
}
.ab-contacts-list li + li { margin-top: 0.4em; }
.ab-contact-label {
  display: inline-block; min-width: 4.5em;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #6a6a6a;
}
.ab-contacts-list a {
  color: var(--ab-accent);
  border-bottom: 1px solid transparent; transition: border-color 260ms ease;
}
.ab-contacts-list a:hover, .ab-contacts-list a:focus-visible { border-bottom-color: currentColor; }

/* ---- Entrata: gli stessi movimenti del resto del sito (le classi le mette js/about.js) --- */
.ab-text > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.ab-body.in .ab-text > * { opacity: 1; transform: none; }
.ab-head > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-head.in > * { opacity: 1; transform: none; }

/* ---- Mobile: una colonna, il ritratto sopra il testo ------------------------------------ */
@media (max-width: 760px) {
  .ab {
    /* La corsia del monogramma NON si toglie: la pagina gli scorre sotto, e un'immagine a
       tutta larghezza — o un testo — gli passerebbe dietro. In fondo si lascia la sua banda. */
    padding-bottom: calc(var(--mono-band) + clamp(0.6rem, 2vh, 1.6rem));
  }
  .ab-head, .ab-body {
    display: flex; flex-direction: column; align-items: stretch;
    gap: clamp(1.4rem, 4vw, 2rem);
  }
  .ab-head { margin-bottom: clamp(1.4rem, 4vw, 2rem); }
  /* Nel markup il testo viene per primo (l'ordine delle colonne su desktop): incolonnati, è
     il ritratto ad aprire la pagina. */
  .ab-media { order: -1; }
  /* Ferma: su uno schermo alto quanto una colonna di testo, un ritratto appiccicato in cima
     si mangia metà della lettura. */
  .ab-figure { position: static; }
  .ab-figure img { max-height: 62vh; }
  /* Incolonnato, il testo non ha più nessun bordo di immagine a cui allinearsi. */
  .ab-text > :first-child { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-figure img, .ab-text > *, .ab-head > * { transition: none; }
}