/* Chi sono, impaginazione Manifesto: una colonna di testo grande, l'indice nel margine, la fascia dei contatti invertita. */
:root { --c: calc((100vw - 2 * var(--pad) - 11 * var(--gap)) / 12); --c10: calc(var(--c) * 10 + var(--gap) * 9); --c6: calc(var(--c) * 6 + var(--gap) * 5); }
@media (max-width: 1023px) { :root { --pad: 32px; --gap: 16px; } }
.nome { font-size: calc(var(--c6) / 4.85); padding-bottom: 0.05em; }
.inv { display: inline-block; }
.m-testa { padding-top: 24px; grid-template-rows: auto 1fr auto; min-height: min(52svh, 720px); }   /* la prima frase resta sopra la barra */
.m-testa .idx { grid-row: 1; }
.m-cosa { grid-column: 3 / 9; grid-row: 1; }
.m-testa .nome { grid-column: 3 / 13; grid-row: 2; align-self: end; padding-top: 48px; }
.m-terreno { grid-column: 3 / 13; grid-row: 3; border-top: 6px solid var(--linea-forte); }
.m-corpo { padding-top: 72px; padding-bottom: 144px; align-items: start; }
.m-indice { grid-column: 1 / 3; position: sticky; top: 24px; }
.m-indice a { display: flex; gap: 12px; padding: 7px 8px 7px 0; font-family: var(--etichette); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; color: var(--ink); }
.m-indice a span { color: var(--grigio); }
.m-testo { grid-column: 3 / 11; padding-right: var(--gap); }
.m-testo p { position: relative; font-size: clamp(28px, 3vw, 58px); line-height: 1.2; letter-spacing: -0.01em; scroll-margin-top: 24px; }
.m-testo p + p { margin-top: 1.5em; }

/* Fascia dei contatti: frase di disponibilità, poi una tabella di righe-pulsante. L'email è la riga grande;
   un profilo nuovo è un <li> in più in .righe, con lo stesso markup di LinkedIn. */
.m-fascia { padding-top: 24px; padding-bottom: 96px; }
.m-fascia::after { display: none; }
.m-fascia .idx, .m-fascia h2 { grid-row: 1; }
.m-fascia h2 { grid-column: 3 / 9; font-size: 12px; }
.m-disp { grid-column: 3 / 12; padding-top: 40px; font-size: clamp(28px, 3vw, 58px); line-height: 1.2; letter-spacing: -0.01em; }
/* l'arancione sull'osso non basta per il testo (2,6:1): la parola chiave è inchiostro su un rettangolo arancione (5,75:1) */
.chiaro .acc, .parole.m-disp .w-acc { color: #111110; background: var(--acc); padding: 0 0.12em; }
.righe { grid-column: 3 / 13; margin-top: 40px; }
.righe li + li { margin-top: -2px; }
.riga-btn { --r-pad: 20px; --r-frec: 18px; --r-gap: 16px; display: flex; align-items: center; justify-content: space-between; gap: var(--r-gap); min-height: 64px; padding: 8px var(--r-pad); border: 2px solid var(--ink); color: var(--ink); font-family: var(--etichette); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; }
.riga-btn svg { flex: none; width: var(--r-frec); height: var(--r-frec); }
.riga-posta { --r-frec: 28px; --r-gap: 12px; min-height: 0; padding-top: 16px; padding-bottom: 18px; font-family: "Archivo", "Archivo ripiego", sans-serif; font-weight: 700; font-stretch: 62%; letter-spacing: -0.005em; line-height: 1.05; text-transform: none;
  font-size: min(calc((var(--c10) - 2 * var(--r-pad) - 4px - var(--r-frec) - var(--r-gap)) / 10.6), 112px); }
/* inversione secca, senza transizioni; sull'osso è inchiostro con testo osso. La freccia scatta in diagonale */
.riga-btn:active, .riga-btn:focus-visible { background: var(--ink); color: var(--fondo); }
.riga-btn:active svg, .riga-btn:focus-visible svg { transform: translate(3px, -3px); }
@media (hover: hover) and (pointer: fine) {
  .riga-btn:hover { background: var(--ink); color: var(--fondo); }
  .riga-btn:hover svg { transform: translate(3px, -3px); }
}
.chiaro .riga-btn:focus-visible { outline: 2px solid #111110; outline-offset: 3px; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; text-transform: none; }

.apre .nome .riga + .riga > span { animation-delay: 0.74s; }

@media (max-width: 43.75rem) {
  :root { --pad: 20px; --gap: 0px; }
  .nome { font-size: min(calc((100vw - 40px) / 5.15), 15svh); }
  .m-indice { display: none; }
  .m-testa { min-height: 0; padding-top: 32px; }
  .m-testa .nome { padding-top: 40px; }
  .m-corpo { padding-top: 32px; padding-bottom: 72px; }
  .m-testo { padding-right: 0; }
  .m-testo p { font-size: 26px; line-height: 1.22; }
  .m-fascia { padding-top: 32px; padding-bottom: 88px; }
  .m-disp { padding-top: 24px; font-size: 26px; line-height: 1.22; }
  .righe { margin-top: 32px; }
  .riga-btn { --r-pad: 14px; min-height: 56px; }
  .riga-posta { --r-frec: 18px; --r-gap: 8px; min-height: 64px; padding-top: 12px; padding-bottom: 12px; font-size: calc((100vw - 40px - 2 * var(--r-pad) - 4px - var(--r-frec) - var(--r-gap)) / 10.6); }
}