/* Bozza di Firmamento. Ogni contenuto occupa una schermata intera; una freccia in basso porta alla
   successiva. Simmetria centrale, fondo chiaro, testo inchiostro, oro come solo accento.
   Nessuno spigolo: foto, bottoni e campi hanno tutti lo stesso raggio. Le foto sono carte che
   stanno un poco sopra la pagina, con un'ombra morbida.
   L'astrolabio sullo sfondo lo disegna cielo.js; freccia, menu e persone li muove pagina.js. */

@font-face {
  font-family: "Inter";
  src: url("font/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* il corsivo vero di Inter, ridotto ai caratteri latini: lo scarica solo la pagina che lo usa */
@font-face {
  font-family: "Inter";
  src: url("font/inter-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --fondo: oklch(97.5% 0.002 90);
  --inchiostro: #0B0B0B;
  --testo-2: color-mix(in oklab, var(--inchiostro) 64%, var(--fondo));
  --bordo-campo: color-mix(in oklab, var(--inchiostro) 55%, var(--fondo));
  --filo: color-mix(in oklab, var(--inchiostro) 14%, var(--fondo));
  --bronzo: #6E5416;
  --oro: #C69D26;
  --oro-scuro: #B08A1E;
  --margine: clamp(1rem, 4vw, 3rem);
  --lato: clamp(1.25rem, 4vw, 3.5rem);
  --h-testata: 84px;
  --h-freccia: 68px;
  --alto: 100vh;
  --raggio: 14px;
  --ombra: 0 1px 2px rgb(11 11 11 / 0.05), 0 10px 22px -12px rgb(11 11 11 / 0.22), 0 28px 46px -28px rgb(11 11 11 / 0.3);
  --ombra-su: 0 2px 4px rgb(11 11 11 / 0.06), 0 16px 30px -14px rgb(11 11 11 / 0.26), 0 38px 62px -30px rgb(11 11 11 / 0.34);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 106.25%;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
@supports (height: 100svh) { :root { --alto: 100svh; } }
/* sotto i 1024 px la testata diventa compatta: con cinque lingue le voci piene non ci stanno */
@media (max-width: 1023px) { :root { --h-testata: 60px; --h-freccia: 60px; } }
/* lo spazio che testata e freccia tolgono a ogni schermata, sopra e sotto. Sul telefono la testata sta in basso,
   dove arriva il pollice: sopra non resta niente, sotto ci sono la testata e la freccia */
:root { --su: var(--h-testata); --giu: var(--h-freccia); }
@media (max-width: 760px) { :root { --su: 0px; --giu: calc(var(--h-testata) + var(--h-freccia)); } }

html { scroll-snap-type: y mandatory; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
p { margin: 0; overflow-wrap: anywhere; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--bronzo); }
:focus-visible { outline: 2px solid var(--bronzo); outline-offset: 3px; }

.salta {
  position: fixed; left: var(--margine); top: -4rem; z-index: 30;
  background: var(--inchiostro); color: var(--fondo); padding: 0.5rem 1rem; border-radius: var(--raggio);
}
.salta:focus { top: 0.5rem; }
.nascosto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.contenitore { max-width: 72rem; margin-inline: auto; padding-inline: var(--margine); }

/* l'astrolabio: una tela ferma dietro la pagina */
.cielo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* sul telefono l'astrolabio riempie quasi tutto lo sfondo: più trasparente, così il testo si legge bene */
@media (max-width: 760px), (max-height: 500px) { .cielo { opacity: 0.4; } }
@media print { .cielo, .giu { display: none; } }

/* passando da una pagina all'altra i contenuti si dissolvono in fretta, mentre il cielo ruota */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* testata fissa: menu a sinistra e a destra, il marchio al centro */
.testata { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--h-testata); }
/* la sfocatura sta su uno strato a parte: sulla testata farebbe da contenitore al menu del telefono */
.testata::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--fondo) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filo);
}
.barra { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem; }
.lato { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.voci { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.voci a { text-decoration: none; font-size: 0.95rem; padding-block: 0.3rem; border-bottom: 1px solid transparent; }
.voci a:hover { color: inherit; border-bottom-color: currentColor; }
.voci a[aria-current="page"] { border-bottom-color: var(--bronzo); }
.marchio { display: block; line-height: 0; }
.marchio img { width: 150px; height: 56px; }
.marchio .marchio-stretto { display: none; }
.marchio:hover { opacity: 0.8; }
.lingue {
  display: flex; gap: 0.65rem; list-style: none; margin: 0; padding: 0;
  font-size: 0.8rem; letter-spacing: 0.08em; color: var(--testo-2);
}
.lingue [aria-current] { color: var(--inchiostro); font-weight: 600; }
.lingue a { text-decoration: none; }
.lingue a:hover { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 0.25em; }
.bottone-testata {
  text-decoration: none; font-size: 0.95rem; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--inchiostro); padding: 0.4rem 1rem; border-radius: var(--raggio);
}
.bottone-testata:hover { color: var(--fondo); background: var(--inchiostro); }
.apri-menu { display: none; }
.menu-stretto { display: none; }

@media (max-width: 1023px) {
  .barra { gap: 0.75rem; }
  .lato.sx { display: none; }
  .lato.dx { justify-content: flex-end; }
  .lato.dx .voci { display: none; }
  .apri-menu {
    display: inline-flex; justify-self: start; align-items: center; gap: 0.4rem;
    font: inherit; font-size: 0.9rem; color: inherit; background: none; border: 0; padding: 0.4rem 0; cursor: pointer;
  }
  .apri-menu svg { width: 18px; height: 18px; }
  .marchio .marchio-largo { display: none; }
  .marchio .marchio-stretto { display: block; width: 138px; height: 21px; }
  .bottone-testata { padding: 0.3rem 0.75rem; font-size: 0.88rem; }
  .menu-stretto:not([hidden]) {
    display: grid; justify-items: center; align-content: start; gap: 2.5rem;
    position: fixed; top: var(--h-testata); left: 0; right: 0; bottom: 0;
    background: var(--fondo); padding: 3rem var(--margine); overflow-y: auto;
  }
  .menu-stretto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; justify-items: center; align-content: start; }
  .menu-stretto .voci-grandi a { font-size: 1.5rem; text-decoration: none; }
  .menu-stretto .voci-grandi a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--bronzo); }
  .menu-stretto .lingue { display: flex; gap: 1rem; font-size: 0.9rem; }
}
@media (max-width: 400px) {
  .bottone-testata { padding: 0.3rem 0.55rem; }
}
/* sul telefono la testata, uguale, sta in fondo allo schermo: menu e candidatura sotto il pollice.
   Il menu si apre sopra di lei, con le voci in basso */
@media (max-width: 760px) {
  .testata { top: auto; bottom: 0; }
  .testata::before { border-bottom: 0; border-top: 1px solid var(--filo); }
  .menu-stretto:not([hidden]) {
    display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
    top: 0; bottom: var(--h-testata); padding: 2rem var(--margine) 2.5rem;
  }
  .menu-stretto:not([hidden]) > :first-child { margin-top: auto; }
}

/* le schermate */
.schermo {
  position: relative; min-height: var(--alto); scroll-snap-align: start;
  display: grid; align-content: center; justify-items: center; gap: clamp(1rem, 2.4vh, 1.75rem);
  padding: calc(var(--su) + clamp(0.75rem, 2.5vh, 1.75rem)) var(--margine) calc(var(--giu) + clamp(0.5rem, 1.5vh, 1rem));
  text-align: center;
}
.schermo > * { max-width: 72rem; width: 100%; }

.apertura h1 {
  font-size: clamp(1.85rem, min(1.1rem + 3.2vw, 7.4vh), 3.4rem); line-height: 1.1;
  font-weight: 600; letter-spacing: -0.02em; max-width: 22ch;
}
.apertura .riga { font-size: clamp(1.05rem, min(1rem + 0.5vw, 2.8vh), 1.3rem); color: var(--testo-2); max-width: 44ch; text-wrap: balance; }
/* il titolo della home, a righe decise: ogni riga è un blocco, e sullo schermo largo sta intera */
.apertura h1.a-righe { max-width: none; font-size: clamp(1.7rem, min(0.55rem + 2.55vw, 6.4vh), 3.15rem); }
.riga-titolo { display: block; text-wrap: balance; }
/* la prima riga, l'invito, in grassetto; le altre due più leggere */
.a-righe .riga-titolo { font-weight: 400; }
.a-righe .riga-titolo:first-child { font-weight: 700; }
.apertura p { max-width: 54ch; text-wrap: pretty; }
.occhiello { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--testo-2); }

.titolo-sezione { font-size: clamp(1.35rem, min(1.1rem + 1vw, 4.6vh), 1.9rem); font-weight: 600; letter-spacing: -0.01em; }
.sottotitolo { color: var(--testo-2); max-width: 50ch; text-wrap: balance; }
.paragrafo-centro { max-width: 52ch; text-wrap: pretty; }

/* bottoni con l'accento: oro pieno e testo inchiostro (7,7:1); il bronzo resta per link, fuoco e voce attiva */
.bottone {
  display: inline-block; background: var(--oro); color: var(--inchiostro);
  text-decoration: none; font-weight: 600; line-height: 1.2; padding: 0.75rem 1.5rem; border-radius: var(--raggio);
}
.bottone:hover { background: var(--oro-scuro); color: var(--inchiostro); }
button.bottone { font: inherit; font-weight: 600; border: 0; cursor: pointer; }

/* la freccia che porta alla schermata successiva */
.giu {
  position: fixed; left: 50%; bottom: 12px; z-index: 15; transform: translateX(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  color: var(--inchiostro); background: color-mix(in oklab, var(--fondo) 80%, transparent);
  border: 1px solid var(--filo); border-radius: var(--raggio); cursor: pointer;
  box-shadow: 0 8px 18px -10px rgb(11 11 11 / 0.3);
  transition: opacity 250ms ease, color 150ms ease, border-color 150ms ease;
}
.giu svg { width: 20px; height: 20px; }
.giu:hover { color: var(--bronzo); border-color: var(--bronzo); }
.giu.nascosta { opacity: 0; pointer-events: none; }
/* sul telefono la testata sta in basso: la freccia sale sopra di lei */
@media (max-width: 760px) { .giu { bottom: calc(var(--h-testata) + 10px); } }

/* le persone in home: gruppi di quattro che si danno il cambio mentre scorri verso il basso.
   Il gruppo che esce sale e si allontana, quello che entra arriva da sotto e da dietro */
.scorrimento-persone { position: relative; height: calc(var(--gruppi, 2) * var(--alto)); }
.gruppi-1 { --gruppi: 1; }
.gruppi-2 { --gruppi: 2; }
.gruppi-3 { --gruppi: 3; }
.aggancio { position: absolute; left: 0; right: 0; height: var(--alto); scroll-snap-align: start; pointer-events: none; }
.aggancio:nth-of-type(1) { top: 0; }
.aggancio:nth-of-type(2) { top: var(--alto); }
.aggancio:nth-of-type(3) { top: calc(2 * var(--alto)); }
.aggancio:nth-of-type(4) { top: calc(3 * var(--alto)); }
.palco {
  position: sticky; top: 0; height: var(--alto);
  display: grid; align-content: center; justify-items: center; gap: clamp(1rem, 2.6vh, 2rem);
  padding: calc(var(--su) + clamp(0.5rem, 2vh, 1.5rem)) var(--margine) calc(var(--giu) + 0.5rem);
  text-align: center;
}
.gruppi {
  --disponibile: calc(var(--alto) - var(--h-testata) - var(--h-freccia) - 10rem);
  display: grid; width: 100%;
  max-width: min(72rem, calc((var(--disponibile) - 3.6rem) * 0.8 * 4 + 4.5rem));
}
.gruppo {
  grid-area: 1 / 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem; list-style: none; margin: 0; padding: 0; perspective: 1200px;
}
/* i gruppi stanno uno sopra l'altro: il contenitore lascia passare i clic, li prende solo il gruppo in vista */
.gruppo { pointer-events: none; }
.gruppo li { opacity: var(--o, 1); transform: translate3d(0, var(--y, 0px), var(--z, 0px)); pointer-events: auto; }
.gruppo li.spento { pointer-events: none; }
.gruppi.per-3 { max-width: min(60rem, calc((var(--disponibile) - 3.6rem) * 0.8 * 3 + 3rem)); }
.per-3 .gruppo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.persona { margin: 0; display: grid; gap: 0.7rem; }
.persona img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--filo);
  border-radius: var(--raggio); box-shadow: var(--ombra);
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 350ms ease;
}
.persona figcaption { display: grid; gap: 0.1rem; }
.persona .nome { font-weight: 600; }
.persona .competenza { color: var(--testo-2); font-size: 0.9rem; line-height: 1.4; text-wrap: balance; }
.persona-link { display: block; text-decoration: none; color: inherit; border-radius: var(--raggio); }
.persona-link:hover { color: inherit; }
.persona-link:hover .nome { text-decoration: underline; text-underline-offset: 0.2em; }
/* chi ha portato il problema: una carta sola, al centro */
.portatori { list-style: none; margin: 0; padding: 0; display: grid; justify-content: center; grid-template-columns: min(15rem, 60vw); }
.testimone a.nome { color: inherit; text-decoration: none; }
.testimone a.nome:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.persona-link:hover img, .persona-link:focus-visible img { transform: translateY(-4px); box-shadow: var(--ombra-su); }
@media (prefers-reduced-motion: reduce) {
  .persona img { transition: none; }
  .persona-link:hover img, .persona-link:focus-visible img { transform: none; }
}

/* le foto nelle altre schermate: carte che scorrono un poco più svelte del testo */
.carta { border-radius: var(--raggio); box-shadow: var(--ombra); transform: translate3d(0, var(--salto, 0px), 0); }
@media (max-width: 860px) {
  .gruppi { max-width: min(100%, calc(((var(--disponibile) - 8rem) / 2) * 0.8 * 2 + 0.75rem)); }
  .gruppo, .per-3 .gruppo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .gruppi.per-3 { max-width: min(100%, calc(((var(--disponibile) - 8rem) / 2) * 0.8 * 2 + 0.75rem)); }
  /* sul telefono, con tre foto, la terza sta da sola al centro della seconda riga */
  .per-3 .gruppo li:nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.375rem); }
  .persona { gap: 0.45rem; }
  .persona .competenza { font-size: 0.82rem; }
}

/* colonne specchiate: due porte, due startup, due elenchi */
.specchio {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0;
}
.specchio > * { display: grid; gap: 1rem; justify-items: center; align-content: start; padding: 0.25rem var(--lato); }
.specchio > * + * { border-left: 1px solid var(--filo); }
.specchio h2 { font-size: clamp(1.3rem, min(1.05rem + 0.9vw, 4.2vh), 1.75rem); font-weight: 600; max-width: 22ch; }
.specchio p { max-width: 40ch; text-wrap: pretty; }
.porte { grid-template-rows: auto auto auto; }
.porte > * { grid-row: span 3; grid-template-rows: subgrid; }
.righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; max-width: 34ch; }
.righe li { text-wrap: balance; }
.logo { height: 28px; width: auto; margin-bottom: 0.35rem; }
.stato { font-size: 0.88rem; color: var(--testo-2); }
.dominio { font-size: 0.92rem; }
@media (max-width: 760px) {
  .specchio { grid-template-columns: 1fr; gap: 2rem; }
  .porte > * { grid-row: auto; grid-template-rows: none; }
  .specchio > * + * { border-left: 0; border-top: 1px solid var(--filo); padding-top: 2rem; }
  .porte { padding-inline: 0.5rem; }
}

/* due metà in una schermata; sul telefono ogni metà diventa una schermata */
.coppia .specchio { align-items: center; }
@media (max-width: 760px) {
  .schermo.coppia { display: block; min-height: 0; padding: 0; scroll-snap-align: none; }
  .coppia .specchio { display: block; }
  .coppia .specchio > * {
    min-height: var(--alto); scroll-snap-align: start; border: 0; align-content: center;
    padding: calc(var(--su) + 1rem) var(--margine) calc(var(--giu) + 0.75rem);
  }
}

/* campi in cantiere: il simbolo e il nome di ogni cantiere, il campo, cosa fa */
.campi { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3.4vh, 2.25rem) 1.5rem; list-style: none; margin: 0; padding: 0; }
.campo { flex: 0 1 12rem; display: grid; gap: 0.3rem; align-content: start; justify-items: center; }
.marchio-cantiere { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.2rem; text-decoration: none; color: inherit; border-radius: 6px; }
.marchio-cantiere .fuori { color: var(--testo-2); margin-left: -0.15rem; }
a.marchio-cantiere:hover { color: inherit; }
a.marchio-cantiere:hover b { text-decoration: underline; text-underline-offset: 0.2em; }
a.marchio-cantiere:hover .fuori { color: var(--bronzo); }
.marchio-cantiere svg { flex: none; }
.marchio-cantiere b { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.005em; white-space: nowrap; }
.campo strong { font-weight: 500; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--testo-2); text-wrap: balance; }
.campo .descrizione { color: var(--testo-2); font-size: 0.92rem; line-height: 1.45; text-wrap: balance; }
.campi-brevi .campo { flex-basis: 10.5rem; }
.riga-campi { max-width: 50ch; text-wrap: balance; }
@media (max-width: 520px) { .campo { flex-basis: 9.25rem; } .campo .descrizione { font-size: 0.85rem; } .marchio-cantiere b { font-size: 0.95rem; } }

/* la foto di gruppo: larga quanto la pagina e intera; se lo schermo è basso si taglia sopra e sotto */
.figura-grande { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
.figura-grande img {
  width: 100%; height: auto; aspect-ratio: 3 / 2;
  max-height: calc(var(--alto) - var(--h-testata) - var(--h-freccia) - 5rem);
  object-fit: cover; object-position: 50% 62%; background: var(--filo);
}
.figura-grande figcaption { font-size: 0.85rem; color: var(--testo-2); }

/* passi numerati */
.passi { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.passi li { counter-increment: passo; display: grid; gap: 0.6rem; justify-items: center; text-wrap: balance; }
.passi li::before {
  content: counter(passo); display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border: 1px solid var(--bordo-campo); border-radius: var(--raggio);
  font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.passi.verticale { grid-template-columns: 1fr; max-width: 34rem; gap: clamp(0.8rem, 2vh, 1.25rem); }
@media (max-width: 760px) {
  .passi { grid-template-columns: 1fr; gap: 1rem; }
  .passi li { gap: 0.35rem; }
  .passi li::before { width: 1.8rem; height: 1.8rem; font-size: 0.8rem; }
}

/* la commenda, una frase per riga; sotto, una nota più piccola */
.nota-storia { max-width: 52ch; font-size: 0.9rem; color: var(--testo-2); text-wrap: balance; }
.forte-centro { max-width: 36ch; font-size: clamp(1.1rem, min(1rem + 0.5vw, 3.2vh), 1.4rem); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.strofa { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; max-width: 54ch; font-size: clamp(1rem, 1rem + 0.3vw, 1.2rem); text-wrap: balance; }
.strofa li:last-child { margin-top: 0.6rem; font-weight: 600; }

/* candidatura: un'email già compilata, e sotto la nota sulla privacy */
.nota-privacy { font-size: 0.85rem; color: var(--testo-2); max-width: 52ch; }
.rimandi { color: var(--testo-2); font-size: 0.95rem; }

/* la stampa: citazioni in corsivo fra virgolette, la testata sotto; due per schermata, con molta aria */
.contatto-stampa { font-size: 0.92rem; color: var(--testo-2); }
.citazioni { display: grid; gap: clamp(2.5rem, 9vh, 5.5rem); justify-items: center; max-width: 52rem; }
.citazione { margin: 0; display: grid; gap: clamp(0.55rem, 1.6vh, 0.95rem); justify-items: center; }
.citazione blockquote { margin: 0; quotes: "«" "»" "“" "”"; }
.citazione blockquote p {
  font-style: italic; font-weight: 400; letter-spacing: -0.01em; line-height: 1.28;
  font-size: clamp(1.3rem, min(0.85rem + 1.45vw, 4.2vh), 2.15rem); max-width: 34ch; text-wrap: balance;
}
.citazione blockquote p::before { content: open-quote; }
.citazione blockquote p::after { content: close-quote; }
.citazione figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.2rem 0.9rem; font-size: 0.8rem; color: var(--testo-2); }
.citazione .fonte { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inchiostro); }
.citazione figcaption a { display: inline-flex; align-items: center; gap: 0.3rem; }
.citazione figcaption a .fuori { color: var(--testo-2); }

/* il sigillo sotto l'apertura della home */
.sigillo { font-size: 0.82rem; letter-spacing: 0.03em; color: var(--testo-2); margin-top: clamp(0.25rem, 3vh, 2rem); }
.sigillo a { color: inherit; }
.sigillo a:hover { color: var(--bronzo); }

/* testimonianza: la foto, le sue parole, chi è */
.testimone { margin: 0; display: grid; justify-items: center; gap: clamp(0.9rem, 2.4vh, 1.5rem); max-width: 46rem; }
.testimone img {
  height: clamp(8.5rem, calc(var(--alto) - var(--h-testata) - var(--h-freccia) - 23rem), 22rem);
  width: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--filo);
}
.testimone blockquote { margin: 0; }
.testimone blockquote p { font-size: clamp(1rem, min(0.94rem + 0.4vw, 2.6vh), 1.22rem); line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
.testimone blockquote p::before { content: "«"; }
.testimone blockquote p::after { content: "»"; }
.testimone figcaption { display: grid; gap: 0.1rem; }
.testimone .nome { font-weight: 600; }
.testimone .ruolo { color: var(--testo-2); font-size: 0.9rem; }
@media (max-width: 760px) {
  .testimone img { height: clamp(7rem, calc(var(--alto) - var(--h-testata) - var(--h-freccia) - 30.5rem), 17rem); }
  .specchio p { font-size: 0.95rem; line-height: 1.5; }
}

/* manifesto: un capoverso per schermata, o poco più */
.firma { color: var(--testo-2); }
.attacco { max-width: 44ch; font-size: clamp(1.05rem, min(1rem + 0.45vw, 2.9vh), 1.3rem); text-wrap: balance; margin-top: clamp(0.5rem, 4vh, 2.5rem); }
.brano { gap: clamp(1rem, 2.8vh, 1.75rem); }
.brano p { max-width: 58ch; font-size: clamp(1rem, min(0.9rem + 0.6vw, 3vh), 1.45rem); line-height: 1.6; text-wrap: pretty; }
.brano .forte { max-width: 30ch; font-size: clamp(1.25rem, min(1.02rem + 1vw, 3.9vh), 1.8rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.brano .ambizione { max-width: 48ch; font-size: clamp(1.08rem, min(0.96rem + 0.62vw, 3.1vh), 1.45rem); font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.brano .congedo { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-top: clamp(0.5rem, 3vh, 1.75rem); }
/* i tre punti fra le parti: in inchiostro, per non confonderli con le stelle */
.brano .stacco { color: var(--inchiostro); font-size: 1.6rem; line-height: 1; letter-spacing: 0.45em; text-indent: 0.45em; }

/* schermi larghi ma bassi (per esempio 1366 per 768): elenchi un poco più stretti */
@media (min-width: 761px) and (max-height: 820px) {
  .passi.verticale { gap: 0.5rem; }
  .passi.verticale li { gap: 0.35rem; }
  .passi li::before { width: 1.8rem; height: 1.8rem; font-size: 0.8rem; }
  .storia p, .brano p { line-height: 1.5; }
}

/* telefoni bassi: foto quadrate, testi più compatti, numeri dei passi accanto al testo */
@media (max-width: 760px) and (max-height: 720px) {
  .schermo { gap: 0.8rem; padding-top: calc(var(--su) + 0.5rem); padding-bottom: calc(var(--giu) + 0.25rem); }
  .specchio > * { gap: 0.6rem; }
  .gruppi, .gruppi.per-3 { max-width: min(100%, 19rem); }
  .persona img { aspect-ratio: 1 / 1; }
  .persona .competenza { display: none; }
  .persona .nome { font-size: 0.9rem; line-height: 1.3; }
  .palco { gap: 0.75rem; }
  .specchio { gap: 1.25rem; }
  .specchio > * + * { padding-top: 1.25rem; }
  .specchio p { font-size: 0.9rem; line-height: 1.45; }
  .logo { height: 24px; margin-bottom: 0; }
  .passi { gap: 0.7rem; }
  .passi li { display: block; font-size: 0.92rem; line-height: 1.4; }
  .passi li::before { display: inline-grid; vertical-align: middle; width: 1.5rem; height: 1.5rem; margin-right: 0.4rem; font-size: 0.75rem; }
  .rimandi { display: none; }
  .campo .descrizione { display: none; }
  .campi { gap: 1rem 0.75rem; }
  .testimone img { height: clamp(6rem, 20vh, 10rem); }
  .testimone blockquote p { font-size: 0.88rem; line-height: 1.42; }
  .brano p { font-size: 0.95rem; line-height: 1.5; }
  .citazioni { gap: 1.6rem; }
  .citazione { gap: 0.4rem; }
  .citazione blockquote p { font-size: 1.1rem; line-height: 1.3; }
  .citazione figcaption { font-size: 0.74rem; gap: 0.1rem 0.7rem; }
}

/* la pagina di una persona: la carta con il nome, la sua storia, altre storie */
.scheda { gap: clamp(0.5rem, 1.6vh, 0.9rem); }
.scheda img {
  height: clamp(11rem, calc(var(--alto) - var(--h-testata) - var(--h-freccia) - 13rem), 30rem);
  width: auto; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--filo); margin-bottom: 0.4rem;
}
.scheda h1 { font-size: clamp(1.8rem, min(1.2rem + 2.2vw, 6vh), 3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.descrittore { color: var(--testo-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); max-width: 40ch; text-wrap: balance; }
.scheda .ruolo { font-size: 0.92rem; max-width: 42ch; text-wrap: balance; }
.storia { gap: clamp(0.9rem, 2.6vh, 1.6rem); }
.storia p { max-width: 58ch; font-size: clamp(1rem, min(0.92rem + 0.45vw, 2.8vh), 1.3rem); line-height: 1.6; text-wrap: pretty; }
.storia .studi { font-size: 0.92rem; color: var(--testo-2); max-width: 52ch; }
.studi span { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.25rem; }
.altre-storie {
  --disponibile: calc(var(--alto) - var(--h-testata) - var(--h-freccia) - 11rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0;
  max-width: min(48rem, calc((var(--disponibile) - 3.6rem) * 0.8 * 3 + 3rem));
}
@media (max-width: 760px) and (max-height: 720px) {
  .storia { gap: 0.7rem; }
  .storia p { font-size: 0.93rem; line-height: 1.48; }
  .scheda img { height: clamp(9rem, calc(var(--alto) - var(--h-testata) - var(--h-freccia) - 11rem), 20rem); }
}
@media (max-width: 760px) {
  .altre-storie { gap: 0.6rem; max-width: 100%; }
  .altre-storie .persona .competenza { display: none; }
  .altre-storie .persona .nome { font-size: 0.85rem; line-height: 1.3; }
}

/* le pagine legali sono documenti da leggere: niente schermate agganciate */
html.lungo { scroll-snap-type: none; }
.documento { max-width: 44rem; margin: 0 auto; padding: calc(var(--su) + clamp(2rem, 6vh, 4rem)) var(--margine) clamp(3rem, 8vh, 5rem); }
.documento h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-align: center; margin-bottom: clamp(1.25rem, 3vh, 2rem); }
.documento .intro { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); text-align: center; text-wrap: balance; margin-bottom: 1rem; }
.documento section { margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.documento h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.6rem; }
.documento p { line-height: 1.65; margin-bottom: 0.85rem; text-wrap: pretty; }
.documento .aggiornato { margin-top: clamp(2rem, 5vh, 3rem); font-size: 0.85rem; color: var(--testo-2); text-align: center; }
.lungo .piede { min-height: auto; padding-top: clamp(3rem, 8vh, 5rem); }
.lungo .giu { display: none; }

/* ultima schermata: il segno e i dati della cooperativa */
.piede { color: var(--testo-2); font-size: 0.88rem; gap: 0.45rem; }
.piede .segno { width: clamp(64px, 12vh, 112px); height: auto; margin-bottom: 1rem; }
.piede .piede-nome { color: var(--inchiostro); font-weight: 600; font-size: 1rem; }
.piede p { max-width: 70ch; }
.piede .lingue { justify-content: center; margin-top: 0.75rem; }
.piede .legali { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; list-style: none; margin: 0.9rem 0 0; padding: 0; }
.piede .legali a { text-decoration: none; }
.piede .legali a:hover, .piede .legali a[aria-current="page"] { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 0.25em; }