/* Chi sono (server/views/about.mjs): ritratto e introduzione, biografia con la frase-guida, cronologia su carta, «sul campo», numeri,
   tre punti sul modo di lavorare. La prima sezione lascia lo spazio della testata (.page-top di site.css). */

/* ---- ritratto e introduzione */
.about-hero { padding-bottom: clamp(56px, 8vw, 120px); }
.about-hero__grid { display: grid; gap: clamp(28px, 5vw, 88px); align-items: center; }
.about-hero__grid > * { min-width: 0; }
@media (min-width: 900px) { .about-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); } }
.about-hero__text { display: grid; gap: clamp(16px, 2vw, 24px); justify-items: start; }
.about-hero__title { font-size: clamp(3.4rem, 9vw, 8.4rem); line-height: .95; letter-spacing: -.015em; }
.about-hero__lead { max-width: 34em; }
.about-hero__text .actions { margin-top: 6px; }
.about-hero__portrait { position: relative; margin: 0; overflow: hidden; aspect-ratio: 2 / 3; border-radius: var(--r-block); background: var(--c, var(--surface)); box-shadow: var(--shadow); }
.about-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .about-hero__portrait { order: -1; aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; }
  .about-hero__portrait img { object-position: 50% 30%; }
}
@media (min-width: 900px) { .about-hero__portrait { max-height: calc(100svh - var(--header-space) - 48px); justify-self: end; width: 100%; } }

/* ---- biografia e frase-guida */
.about-bio__grid { display: grid; gap: clamp(40px, 6vw, 104px); }
.about-bio__grid > * { min-width: 0; }
@media (min-width: 1000px) { .about-bio__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; } }
.about-bio__text { display: grid; gap: 18px; }
.about-bio__title { font-size: var(--fs-h2); margin-bottom: 8px; }
@media (min-width: 900px) { .about-bio__text .prose { font-size: 1.125rem; } }
.about-quote { margin: 0; display: grid; gap: 18px; padding-top: clamp(0px, 6vw, 120px); }
.about-quote .quote { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.9rem); }
.about-quote__by { padding-left: clamp(20px, 2.6vw, 34px); font: 500 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* ---- cronologia (carta) */
.about-tl { max-width: 980px; }
.about-tl .timeline__text { color: var(--muted); }

/* ---- sul campo: due foto sfalsate */
.about-field__grid { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 760px) { .about-field__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; } .about-field__item:not(.about-field__item--wide) { margin-top: clamp(48px, 9vw, 140px); } }
.about-field__item { display: grid; gap: 12px; margin: 0; }
.about-field__item .frame { aspect-ratio: 3 / 2; }
.about-field__item figcaption { font-size: var(--fs-small); color: var(--muted); max-width: 52ch; }

/* ---- tre punti */
.about-way__list { display: grid; gap: var(--gap); }
@media (min-width: 860px) { .about-way__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-way__item { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.about-way__num { position: absolute; top: clamp(18px, 2.4vw, 28px); right: clamp(20px, 2.6vw, 32px); font: 300 2.6rem/1 var(--font-display); color: var(--faint); font-variant-numeric: lining-nums; }
.about-way__icon { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.about-way__icon .i { width: 22px; height: 22px; }
.about-way__title { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.9rem); padding-right: 3.2rem; }
.about-way__text { color: var(--muted); }

/* etichette brevi in maiuscoletto: niente sillabazione automatica (tedesco, russo, francese), come .kicker e .label di site.css */
:is(.about-quote__by) { hyphens: manual; -webkit-hyphens: manual; }