/* =============================================================================
   robertopinotti.dev — foglio di stile unico
   Monospaziato + sans, accento magenta, solo tema chiaro, zero JavaScript.
   ========================================================================== */

/* ── Token ──────────────────────────────────────────────────────────────── */

:root {
  --paper: #ffffff;
  --ink:   #0b0b0b;
  --muted: #5f5f5f;

  /* Accento. Due varianti perché il contrasto su bianco cambia col corpo:
     --accent      4.41:1 → testo grande e decorazioni (AA large / non-text)
     --accent-ink  4.55:1 → testo piccolo colorato (AA normal) */
  --accent:     #e9007d;
  --accent-ink: #e5007a;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Larghezza della colonna centrale: le due laterali si dividono il resto. */
  --content: 46rem;
  --gutter: 1.5rem;

  /* Blocca il tema chiaro anche per scrollbar e UI di sistema. */
  color-scheme: light;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

html {
  box-sizing: border-box;
  scroll-padding-block-start: 2rem;
  -webkit-text-size-adjust: 100%;
}

body, div, section, ul, li, h1, h2, h3, p {
  box-sizing: inherit;
}

/* ── Griglia a tre colonne ──────────────────────────────────────────────────
   Colonna 1 e 3 libere, tutto il testo nella colonna 2. Le laterali si
   riducono fino al gutter sui viewport stretti, quindi niente media query. */

body {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [text-start] minmax(0, var(--content)) [text-end]
    minmax(var(--gutter), 1fr) [full-end];

  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body > * {
  grid-column: text;
}

/* Filetto di accento fisso in cima alla pagina, sempre visibile allo scroll.
   Decorativo: pseudo-elemento, così non entra nel DOM né nell'albero di accessibilità. */
body::before {
  content: "";
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background-color: var(--accent);
  z-index: 10;
}

/* ── Elementi ───────────────────────────────────────────────────────────── */

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding-inline-start: 0;
  list-style: none;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  text-wrap: balance;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

a {
  color: inherit;
  text-underline-offset: 0.25em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 1px;
}

::selection {
  background-color: var(--accent-ink);
  color: var(--paper);
}

/* ── Intestazione ───────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(3.5rem, 12vh, 7rem) clamp(3.5rem, 10vh, 5.5rem);
}

/* "robertopinotti.dev" sono 18 caratteri. Quanto è larga la riga dipende
   dall'avanzamento del monospaziato in uso: misurato è 0.618em, non lo 0.6em
   che si dà per scontato. Con letter-spacing -0.05em e il cursore in coda si
   arriva a ~10.5em, quindi il corpo che riempie la colonna è larghezza/10.5,
   cioè ~9.5vw meno il gutter. Uso 8.8vw e mi fermo a 4.2rem: ~7% di margine
   per i font con avanzamento più largo, che altrimenti sfonderebbero. */
.hero-title {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, calc(8.8vw - 0.28rem), 4.2rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.1;

  /* Spazio sotto la linea di base: senza, l'overflow hidden della macchina
     da scrivere taglierebbe la coda della "p". */
  padding-block-end: 0.06em;

  /* Il cursore. È un bordo, non un elemento: sta fuori dal box del testo,
     quindi non viene ritagliato e avanza insieme alla larghezza. */
  border-inline-end: 0.5ch solid var(--accent);

  /* Qui serve content-box: con il border-box del resto del sito la larghezza
     animata comprenderebbe il bordo e mangerebbe l'ultima lettera. */
  box-sizing: content-box;
  inline-size: max-content;
  max-inline-size: 100%;
}

/* Testo grande: 3.4:1 è sufficiente (WCAG AA large text). */
.tld {
  color: var(--accent);
}

/* ── Terminale ──────────────────────────────────────────────────────────────
   La pagina si scrive da sola: prima il nome carattere per carattere, poi il
   resto una riga alla volta. Tutto in CSS — il testo è già nel DOM dal primo
   byte, l'animazione lo scopre e basta.

   Sta tutto dentro no-preference apposta: se il browser non anima o l'utente
   ha chiesto meno movimento, resta la pagina statica completa. Nessun
   contenuto può restare invisibile per colpa di un'animazione mancata. */

@media (prefers-reduced-motion: no-preference) {

  /* La riga cresce di un carattere alla volta: 18 passi per i 18 caratteri di
     "robertopinotti.dev". La larghezza finale è in ch, che nel monospaziato è
     esattamente l'avanzamento di un carattere: così il conto vale per
     qualsiasi font, senza dare per buono un valore in em. Gli 0.85em
     recuperano il letter-spacing negativo dei 18 caratteri, meno un filo di
     respiro prima del cursore.
     ATTENZIONE: se cambi il testo, aggiorna steps(), i 18ch e gli 0.85em. */
  .hero-title {
    inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    animation:
      scrivi 1.62s steps(18, end) 0.35s both,
      cursore 1.1s steps(1, end) 2.1s infinite;
  }

  @keyframes scrivi {
    from { inline-size: 0; }
    to   { inline-size: calc(18ch - 0.85em); }
  }

  /* Il cursore lampeggia solo dopo che la riga è finita. */
  @keyframes cursore {
    0%, 50%      { border-inline-end-color: var(--accent); }
    50.01%, 100% { border-inline-end-color: transparent; }
  }

  /* Il resto arriva dopo, una riga per volta: comparsa secca, non
     dissolvenza. Un terminale stampa, non sfuma. */
  .section-title,
  .project,
  .contact {
    opacity: 0;
    animation: stampa 1ms linear
               calc(2.25s + (var(--base, 0) + var(--i, 0)) * 130ms) forwards;
  }

  @keyframes stampa {
    to { opacity: 1; }
  }

  /* opacity: 0 nasconde alla vista ma non toglie dal giro di tabulazione: nei
     primi ~3,7s chi naviga da tastiera potrebbe mettere il fuoco su un link
     invisibile. Azzerando il ritardo, la riga che riceve il fuoco compare
     subito. Le altre continuano la loro sequenza. */
  .project:focus-within,
  .contact:focus-within {
    animation-delay: 0s;
  }

  /* Ordine di stampa: prima il titolo della sezione, poi le sue voci.
     --i è la riga dentro la sezione, --base la somma delle righe di quelle
     prima: se aggiungi o togli un progetto, sposta i --base che seguono. */
  #lavoro      { --base: 0; }   /* titolo + 2 progetti → 3 righe */
  #progetti    { --base: 3; }   /* titolo + 6 progetti → 7 righe */
  .site-footer { --base: 10; }

  .section-title { --i: 0; }
  .contact       { --i: 1; }

  .project:nth-child(1) { --i: 1; }
  .project:nth-child(2) { --i: 2; }
  .project:nth-child(3) { --i: 3; }
  .project:nth-child(4) { --i: 4; }
  .project:nth-child(5) { --i: 5; }
  .project:nth-child(6) { --i: 6; }
}

/* ── Sezioni ────────────────────────────────────────────────────────────── */

.section {
  padding-block-end: clamp(3.5rem, 9vh, 5.5rem);
}

/* Stessa distanza titolo → primo elemento in tutte le sezioni, footer incluso. */
.section-title {
  margin-block-end: clamp(1.75rem, 4vh, 2.5rem);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Marcatore di sezione: lo stesso blocco del cursore in cima alla pagina,
   in scala. Ripetere la forma della firma invece di introdurne una seconda
   tiene insieme la pagina su un'idea sola.

   È un pseudo-elemento, quindi decorativo: non entra nel DOM né nell'albero
   di accessibilità, e i titoli restano "Lavoro", "Hobby", "Contatti".
   Come non-testo gli basta 3:1 di contrasto, quindi va bene --accent. */
.section-title::before {
  content: "";
  display: inline-block;
  inline-size: 0.5ch;          /* la stessa larghezza del cursore */
  block-size: 1em;
  margin-inline-end: 1ch;
  vertical-align: -0.12em;
  background-color: var(--accent);
}

/* ── Elenco progetti ────────────────────────────────────────────────────── */

.projects {
  display: grid;
  gap: clamp(1.75rem, 4vh, 2.5rem);
}

.project-title {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  /* Alcuni titoli sono indirizzi lunghi: su schermo stretto vanno spezzati,
     altrimenti allargano la pagina. */
  overflow-wrap: break-word;
}

/* L'anno segue il titolo sulla stessa riga, in tono minore: è un dato,
   non parte del nome del progetto. */
.project-year {
  margin-inline-start: 1ch;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.project-title a {
  color: var(--ink);
  text-decoration: underline dotted;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.project-title a:hover {
  color: var(--accent-ink);
  text-decoration-style: solid;
}

.project-desc {
  max-inline-size: 62ch;
  margin-block-start: 0.5rem;
  color: var(--muted);
}

/* ── Contatti ───────────────────────────────────────────────────────────── */

.site-footer {
  padding-block-end: clamp(4rem, 12vh, 7rem);
}

.contact {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* Testo piccolo colorato: serve la variante scura per arrivare a 4.5:1. */
.contact a {
  display: inline-block;
  min-block-size: 24px;             /* target tattile ≥ 24px (WCAG 2.5.8) */
  color: var(--accent-ink);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.contact a:hover {
  text-decoration-style: solid;
}

/* ── Stampa ─────────────────────────────────────────────────────────────── */

@media print {
  body { font-size: 11pt; }

  /* Il filetto fisso si ripeterebbe su ogni pagina stampata. */
  body::before { display: none; }

  /* Su carta niente cursore: è lo stato di un terminale, non un segno. */
  .hero-title { border-inline-end: 0; }

  /* Gli sfondi non vengono stampati: il blocco lascerebbe solo un rientro
     vuoto davanti al titolo. */
  .section-title::before { display: none; }

  .hero,
  .section,
  .site-footer {
    padding-block: 1rem;
  }

  .project { break-inside: avoid; }
}