styles.css

/* ==========================================================================
   Portfolio Simone Rizzuti
   Porting fedele del design "Portfolio.dc.html" (Claude Design) in CSS statico.
   Palette, tipografia e griglie sono quelle dell'anteprima.
   ========================================================================== */

:root {
  --bg: #F8F9F7;
  --ink: #171A18;
  --muted: #5B615C;
  --rule: #C9CDC6;
  --accent: #46407F;
  --accent-active: #2E2957;

  --serif: Spectral, Georgia, serif;
  --sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell-max: 1560px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* La carta millimetrata, una riga ogni 88 px al 3 per cento di nero. Si sente
   più che vedersi, e con i riquadri bianchi si vede solo nel vuoto fra l'uno e
   l'altro, che è la cosa che li stacca. */
body {
  margin: 0;
  background: var(--bg);
  background-image:
    repeating-linear-gradient(to right, rgba(14, 16, 15, 0.03) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(14, 16, 15, 0.03) 0 1px, transparent 1px 88px);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--accent-active); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

/* --- Salto al contenuto (aggiunta di accessibilità) ---------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg); font-family: var(--mono);
  font-size: 0.72rem; padding: 12px 18px; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Animazione d'ingresso ---------------------------------------------- */
@keyframes riz-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-anim] { animation: riz-in 480ms cubic-bezier(.2,.6,.2,1) both; }
@media (prefers-reduced-motion: reduce) { [data-anim] { animation: none !important; } }

/* --- Tipografia ricorrente ---------------------------------------------- */
.mono { font-family: var(--mono); }
.display {
  font-family: var(--sans);
  font-stretch: 105%;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.h-page { font-size: clamp(1.8rem, 5vw, 2.9rem); }
/* Il nome smette di gonfiarsi sugli schermi larghi. Su 1440 sono 49,6 px invece
   di 62,4, che bastano a farne il primo elemento della pagina senza gridare. */
.h-hero { font-size: clamp(1.9rem, 5.4vw, 3.1rem); line-height: 1.04; letter-spacing: -0.03em; }
.h-card { font-size: 1.22rem; line-height: 1.2; letter-spacing: -0.01em; }
.h-sub  { font-size: 1.15rem; letter-spacing: -0.01em; }
.h-sec  { font-size: 1.3rem;  letter-spacing: -0.01em; }
.measure { max-width: 68ch; }
.muted { color: var(--muted); }

/* --- Griglie di impaginazione (identiche al design) --------------------- */
[data-shell] { padding-left: 20px; padding-right: 20px; max-width: var(--shell-max); margin: 0 auto; }

[data-rail] { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
[data-side] { display: contents; }

[data-note] {
  order: 2;
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 0 14px;
  overflow-wrap: anywhere;
  margin-top: 4px;
}
[data-note] > summary {
  min-height: 44px; display: flex; align-items: center; cursor: pointer;
  font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
  text-transform: uppercase; list-style: none;
}
[data-note] > summary::-webkit-details-marker { display: none; }
[data-note] > summary::after { content: "+"; margin-left: auto; font-size: 0.9rem; }
[data-note][open] > summary::after { content: "\2013"; }
[data-note] > div { padding-bottom: 14px; }

/* La griglia non disegna più i fili col proprio fondo, è spazio vuoto fra
   riquadri che si portano dietro la loro cornice. */
[data-grid3] {
  display: grid; gap: 14px; background: transparent;
  border: 0; grid-template-columns: minmax(0, 1fr);
}
/* Come i riquadri dei progetti, bianchi e staccati invece che uniti da un filo. */
[data-metrics] {
  display: grid; gap: 14px; background: transparent;
  border: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-tl] { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }

[data-navdesk] { display: none; }
[data-navbtn] { display: inline-flex; }

@media (min-width: 768px) {
  [data-shell] { padding-left: 40px; padding-right: 40px; }
  [data-rail] { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  [data-grid3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-tl] { grid-template-columns: 180px minmax(0, 1fr); gap: 0 32px; }
  [data-navdesk] { display: flex; }
  [data-navbtn] { display: none; }
}

@media (min-width: 1024px) {
  [data-shell] { padding-left: 48px; padding-right: 48px; }
  [data-rail] { grid-template-columns: 200px minmax(0, 1fr); gap: 56px; align-items: start; }
  [data-grid3] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-metrics] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-tl] { grid-template-columns: 200px minmax(0, 1fr); gap: 0 56px; }
  [data-side] { display: block; }
  [data-note] { order: 0; border: 0; padding: 0; margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 12px; }
  [data-note] > summary { display: none; }
  [data-note] > div { padding-bottom: 0; }
}

@media (min-width: 1440px) {
  [data-shell] { padding-left: 72px; padding-right: 72px; }
  [data-rail] { grid-template-columns: 230px minmax(0, 1fr); gap: 72px; }
  [data-tl] { grid-template-columns: 230px minmax(0, 1fr); gap: 0 72px; }
}

/* --- Struttura di pagina ------------------------------------------------ */
.page { min-height: 100vh; display: flex; flex-direction: column; }

.site-header {
  border-bottom: 2px solid var(--ink);
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.site-header > [data-shell] {
  padding-top: 14px; padding-bottom: 14px;
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  position: relative;
}
/* Il marchio in alto a sinistra non si mostra. Il collegamento alla home non si
   perde, perché è la prima voce del menu. Il segno resta nel documento per chi
   naviga con la voce e per la pagina senza JavaScript. */
.wordmark { display: none; }
/* Il menu si centra sulla larghezza vera della pagina e non su quella che avanza
   dopo il selettore della lingua, quindi sta fuori dal flusso. */
.nav-desk {
  gap: 24px; align-items: center;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-link {
  position: relative;
  font-family: var(--mono); font-size: 0.68rem; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
  border-bottom: 2px solid transparent;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-link[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }

.header-tools { display: flex; align-items: center; gap: 12px; }

/* La coppia IT EN è un pezzo solo, quindi si arrotonda il contenitore e si taglia
   dentro, altrimenti l'angolo scoperto del pulsante acceso spunta fuori. */
.lang { display: flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.lang-btn {
  font-family: var(--mono); font-size: 0.66rem;
  min-height: 44px; min-width: 44px; padding: 0 10px;
  cursor: pointer; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
}
.lang-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.menu-btn {
  min-height: 44px; min-width: 44px; align-items: center; justify-content: center;
  gap: 8px; background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  font-family: var(--mono); font-size: 0.7rem; padding: 0 12px; cursor: pointer;
}

/* --- Menu mobile a tutto schermo ---------------------------------------- */
.overlay {
  position: fixed; inset: 0; background: var(--bg); z-index: 30;
  padding: 20px; display: flex; flex-direction: column;
}
.overlay-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--rule); padding-bottom: 14px;
}
.overlay-title { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; }
.overlay-nav { display: flex; flex-direction: column; padding-top: 24px; }
.nav-link-m {
  font-family: var(--sans); font-stretch: 105%; font-weight: 600; font-size: 1.5rem;
  text-decoration: none; letter-spacing: 0.01em; color: var(--ink);
  min-height: 56px; display: flex; align-items: center;
  border-bottom: 1px solid var(--rule);
}
.nav-link-m[aria-current] { color: var(--accent); }

/* --- Main --------------------------------------------------------------- */
.site-main { width: 100%; flex: 1; }

.rule-bottom { border-bottom: 1px solid var(--rule); }

.section-hero { padding: 56px 0 48px; }
.section { padding: 48px 0; }
.section-page { padding: 32px 0 48px; }

.rail-label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; color: var(--muted);
}
.rail-label .up { text-transform: uppercase; }
.note-body { font-family: var(--mono); font-size: 0.68rem; line-height: 1.55; color: var(--muted); }
.note-body.stack { display: flex; flex-direction: column; gap: 4px; line-height: 1.6; }
.note-body.stack-lg { display: flex; flex-direction: column; gap: 8px; line-height: 1.6; }

/* --- Pulsanti / CTA ----------------------------------------------------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  font-family: var(--mono); font-size: 0.72rem; text-decoration: none;
  border-radius: 999px; padding: 10px 22px; min-height: 44px;
  display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid {
  color: var(--bg); background: var(--ink); border: 1px solid var(--ink);
  box-shadow: 0 6px 18px rgba(23, 26, 24, 0.18);
}
.btn-solid:hover { box-shadow: 0 10px 26px rgba(23, 26, 24, 0.24); }
.btn-ghost { color: var(--ink); background: transparent; border: 1px solid var(--rule); }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-btn {
  font-family: var(--mono); font-size: 0.68rem; min-height: 44px;
  padding: 0 14px; cursor: pointer; border-radius: 999px;
  background: transparent; color: var(--ink); border: 1px solid var(--rule);
  transition: transform 160ms ease;
}
.filter-btn:hover { transform: translateY(-1px); }
.filter-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --- Schede progetto ---------------------------------------------------- */
/* I riquadri sono bianchi pieni sopra la carta della pagina, squadrati, e
   staccati l'uno dall'altro dal vuoto della griglia invece che uniti da un filo.
   Sopra un fondo chiaro il bianco è già un rilievo, quindi al passaggio del
   mouse non si scurisce il riquadro, che perderebbe proprio il distacco, si
   scurisce la cornice. Il resto lo dicono il filo in alto e la freccia in basso,
   più sotto. */
.card {
  position: relative;
  background: #FFFFFF; padding: 20px;
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--ink); min-height: 180px;
  transition: border-color 200ms ease;
}
.card:hover { border-color: #BFC5BB; }
.card-kicker { font-family: var(--mono); font-size: 0.67rem; color: var(--muted); text-transform: uppercase; }
.card-title { font-family: var(--sans); font-stretch: 105%; font-weight: 600; font-size: 1.22rem; line-height: 1.2; letter-spacing: -0.01em; }
.card-sub { font-size: 0.97rem; line-height: 1.55; color: var(--muted); flex: 1; }
.card-meta { font-family: var(--mono); font-size: 0.67rem; color: var(--accent); }

/* Gli strumenti usati, sotto al titolo. Stessi riquadretti della pagina Profilo,
   solo un filo più piccoli: devono farsi leggere di sfuggita, non prendersi la
   scena che è del titolo. */
.card-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.tool-chip {
  font-family: var(--mono); font-size: 0.63rem; line-height: 1.4;
  color: var(--muted); background: #F1F3EE;
  border: 1px solid transparent; border-radius: 999px; padding: 4px 8px;
  white-space: nowrap;
}
.card:hover .tool-chip { background: #E9ECE5; color: var(--ink); }

.all-projects { margin-top: 8px; font-family: var(--mono); font-size: 0.7rem; }
.all-projects a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- Briciole di pane --------------------------------------------------- */
.crumb {
  padding: 8px 0 0; font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 44px;
}
.crumb a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- Profilo ------------------------------------------------------------ */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chip {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px; padding: 6px 10px;
}

/* --- Percorso (timeline) ------------------------------------------------ */
.tl-item { padding: 20px 0; border-top: 1px solid var(--rule); }
.tl-period { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.tl-org { font-size: 0.97rem; color: var(--muted); margin: 2px 0 8px; }
.tl-highlights { width: 100%; max-width: none; margin-top: 10px; display: grid; gap: 5px; }
.tl-highlights li { position: relative; padding-left: 16px; }
.tl-highlights li::before { content: "•"; position: absolute; left: 0; color: var(--muted); }
.tl-thesis { margin-top: 10px; }
.tl-note { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-top: 8px; }

/* --- Scheda progetto ---------------------------------------------------- */
.project { padding: 24px 0 48px; }
.project-head { padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
.metric { background: #FFFFFF; border: 1px solid var(--rule); padding: 16px 14px; }
.metric-label { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); text-transform: uppercase; line-height: 1.4; }
.metric-value { font-family: var(--mono); font-size: 1.05rem; font-weight: 500; margin: 6px 0 4px; }
.metric-note { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); line-height: 1.4; }
.project-section { padding: 32px 0; border-bottom: 1px solid var(--rule); }

/* I grafici del progetto. Quando sono più d'uno scorrono di lato invece di
   impilarsi: il blocco resta alto quanto un grafico solo e si vede tutto senza
   scorrere la pagina. L'altezza dell'immagine segue quella della finestra. */
.project-figures { padding: 28px 0; border-bottom: 1px solid var(--rule); }
/* Largo abbastanza da leggere le etichette degli assi, non tanto da riempire
   la pagina: resta piu' stretto della colonna di testo, e si vede che e' una
   scelta e non un limite. */
.project-figure { margin: 0; max-width: 860px; }
.project-figure .figure-zoom { display: block; text-decoration: none; }

.figure-stage { position: relative; }

/* La pista scorre da sola con il dito o con la rotellina, e le frecce sono una
   comodità in più, non l'unico modo. La barra di scorrimento resta nascosta,
   perché a dire che c'è dell'altro bastano le frecce e le linguette numerate.

   Nessun vicino si affaccia. Prima se ne vedeva spuntare un pezzo in
   trasparenza, e quel margine del 7 per cento teneva il grafico rientrato,
   tanto che il primo finiva a sinistra, quello di mezzo al centro e l'ultimo a
   destra. Adesso la diapositiva prende tutto il palco e ogni grafico si ferma
   sempre nello stesso punto. */
.figure-viewport {
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-inline: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.figure-viewport::-webkit-scrollbar { display: none; }

.figure-slide { flex: 0 0 100%; scroll-snap-align: center; }

.project-figure img {
  display: block; width: 100%; height: auto;
  max-height: clamp(190px, 42vh, 420px); object-fit: contain;
  border: 1px solid var(--rule); border-radius: 1px; background: #fff;
}
.figure-slide:not([data-active]) img { border-color: var(--rule); }

.figure-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1; border-radius: 50%;
  background: var(--bg); color: var(--ink); border: 1px solid var(--rule);
}
.figure-arrow:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Le frecce stanno nel vuoto a lato del grafico, a 8 px dal suo bordo. Il bordo
   cade al 10,25 per cento del palco, la freccia sta 52 px prima, cioè i suoi 44
   di larghezza più gli 8 di stacco. */
.figure-arrow[data-figstep="-1"] { left: calc(10.25% - 52px); }
.figure-arrow[data-figstep="1"] { right: calc(10.25% - 52px); }

/* Sul telefono la larghezza è tutto, quindi il grafico prende tutto lo schermo e
   le frecce spariscono, perché coprirebbero il grafico e lì si scorre con il
   dito. A dire che ce n'è dell'altro restano le linguette numerate. */
@media (max-width: 767px) {
  .figure-viewport { padding-inline: 0; gap: 10px; }
  .figure-slide { flex: 0 0 100%; }
  .figure-arrow { display: none; }
}

/* L'immagine ingrandita sopra la pagina. Il fondo è scuro e sfumato dal centro
   verso i bordi, così l'occhio va al grafico e la pagina sotto resta intuibile
   ma fuori fuoco. */
.lente {
  position: fixed; inset: 0; z-index: 200;
  padding: clamp(12px, 2vw, 22px);
  /* Il fondo non è opaco. La pagina resta appena percepibile sotto, sfocata,
     così chi guarda capisce di essere ancora lì e non in un'altra schermata. */
  background: radial-gradient(125% 125% at 50% 40%,
              rgba(14, 17, 15, 0.72) 0%, rgba(4, 6, 5, 0.88) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(0.85);
  backdrop-filter: blur(14px) saturate(0.85);
  animation: lente-entra 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lente[hidden] { display: none; }

/* Colonna: il quadro prende lo spazio che avanza, la nota si prende il suo.
   Aprendo la didascalia l'immagine si rimpicciolisce invece di finirci sotto. */
.lente-corpo {
  height: 100%; margin: 0 auto; max-width: 1600px;
  display: flex; flex-direction: column; gap: 10px;
}
.lente-quadro {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Una larghezza sola per tutti i grafici, decisa in anticipo. Prima ognuno si
   allargava fino a riempire lo spazio, e lo spazio dipende dalle sue proporzioni
   e da quanto è alta la didascalia, quindi passando dall'uno all'altro il
   riquadro bianco cambiava misura, e con lui la barra del testo, che app.js
   allinea all'immagine.

   Il conto parte dal grafico più alto, 1170 per 650, cioè proporzione 1,8, e gli
   lascia l'altezza della finestra meno i 182 px degli altri, cioè 44 di margine,
   10 di stacco e 128 per la didascalia. Se ci sta quello ci stanno tutti.

   Il tetto è 1170, che è la larghezza vera dei file. Oltre quella il browser
   ingrandisce un'immagine che non ha più dettaglio da mostrare, e le linee
   sottili e le scritte degli assi vengono morbide. */
.lente-quadro img {
  display: block; max-height: 100%;
  width: min(92vw, 1170px, calc((100vh - 182px) * 1.8));
  max-width: none; height: auto; object-fit: contain;
  background: #fff; border-radius: 2px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

/* I comandi: un solo tratto, un solo diametro, sempre nello stesso posto. */
.lente-comando {
  position: fixed; width: 46px; height: 46px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 160ms ease-out, color 160ms ease-out,
              border-color 160ms ease-out, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lente-comando svg { width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lente-comando:hover { background: #fff; color: var(--ink); border-color: #fff; }
.lente-comando:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lente-chiudi { top: 18px; right: 18px; }
.lente-prec, .lente-succ { top: 50%; margin-top: -23px; }
.lente-prec { left: 18px; }
.lente-succ { right: 18px; }
.lente-prec:hover { transform: translateX(-2px); }
.lente-succ:hover { transform: translateX(2px); }
.lente[data-multiplo="no"] .lente-prec,
.lente[data-multiplo="no"] .lente-succ { display: none; }

/* La didascalia. Chiusa resta una riga sola, che dice il numero e il titolo, così
   si sa che c'è del testo. Aperta scende sotto l'immagine, mai sopra. */
.lente-nota {
  flex: 0 0 auto; color: #fff;
  /* Larga quanto l'immagine che sta sopra, non quanto lo schermo. La misura
     esatta la scrive app.js quando l'immagine è stata disposta, perché dipende
     da quanto spazio le resta in altezza. Questo è solo il ripiego. */
  width: 100%; max-width: 1180px; margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lente-nota-testa {
  width: 100%; padding: 11px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; color: inherit; text-align: left;
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lente-nota-testa:hover { background: rgba(255, 255, 255, 0.07); }
.lente-nota-testa:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.lente-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.lente-titolo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lente-conta { flex: 0 0 auto; color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums; }
.lente-chevron { flex: 0 0 auto; display: inline-flex;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.lente-chevron svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lente-nota[data-aperta] .lente-chevron { transform: rotate(180deg); }

/* L'altezza si anima da 0fr a 1fr: nessun valore in pixel da indovinare, e il
   testo non salta quando cambia lunghezza da un'immagine all'altra. */
.lente-nota-corpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lente-nota[data-aperta] .lente-nota-corpo { grid-template-rows: 1fr; }
.lente-nota-corpo > div { overflow: hidden; }
/* Un paragrafo solo, che comincia e finisce dove comincia e finisce l'immagine.
   Il rientro è lo stesso del numero in testa, così le due righe partono allineate. */
.lente-nota-corpo p {
  margin: 0; padding: 0 14px 15px 14px;
  font-size: 0.94rem; line-height: 1.62;
  color: rgba(255, 255, 255, 0.88);
}
.lente ::selection { background: rgba(255, 255, 255, 0.26); color: #fff; }

/* La pagina sotto non deve scorrere mentre si guarda l'immagine. */
body.con-lente { overflow: hidden; }
@keyframes lente-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lente { animation: none; }
  .lente-nota-corpo, .lente-chevron, .lente-comando { transition: none; }
}

/* Su schermo stretto i comandi laterali rubano spazio all'immagine, quindi
   scendono in basso accanto alla didascalia. */
@media (max-width: 640px) {
  /* Le frecce scendono in fondo, e la striscia in basso è riservata a loro: la
     didascalia resta larga quanto l'immagine invece di stringersi per evitarle. */
  .lente { padding: 12px 12px 68px; }
  .lente-prec, .lente-succ { top: auto; bottom: 13px; margin-top: 0;
    width: 42px; height: 42px; }
  .lente-prec { left: 14px; } .lente-succ { right: 14px; }
  .lente-nota-corpo p { font-size: 0.88rem; }
}

/* Le linguette stanno sotto l'immagine, quindi si centrano su quella e non sul
   bordo sinistro della colonna. Il palco è largo 860 e la diapositiva ci sta in
   mezzo, perciò il centro del palco è anche il centro del grafico. */
.figure-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; justify-content: center; }
.figure-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.66rem; text-align: left;
  min-height: 36px; padding: 0 12px; cursor: pointer; border-radius: 999px;
  background: transparent; color: var(--muted); border: 1px solid var(--rule);
}
.figure-tab:hover { color: var(--ink); border-color: var(--ink); }
.figure-tab[aria-selected="true"] {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.figure-tab-n { opacity: 0.55; font-variant-numeric: tabular-nums; }
.project-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 1px; background: #fff;
}
.project-figure .figure-zoom:hover img { border-color: var(--accent); }
.figure-hint { display: block; margin-top: 4px; }
@media (min-width: 1024px) { .figure-hint { display: none; } }
/* La didascalia parte dal bordo sinistro della prima linguetta e finisce poco
   prima del bordo destro della figura. Un blocco solo, allineato a sinistra come
   tutto il resto della pagina. */
.project-figure figcaption {
  margin: 12px 0 0; max-width: 86ch;
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.6; color: var(--muted);
}

/* Materiali scaricabili: repository, dati, documenti. */
.material-list { border-top: 1px solid var(--rule); }
.material-row {
  display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.material-kind {
  font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
  text-transform: uppercase; min-width: 120px;
}
.material-row a { font-size: 1.0625rem; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
/* Quando è stato fatto il lavoro e quando la pagina è stata rivista. */
.project-dates {
  padding: 20px 0 0;
  font-family: var(--mono); font-size: 0.68rem; line-height: 1.6; color: var(--muted);
}
.project-dates span { display: block; }

.project-nav {
  padding: 28px 0 0; display: flex; justify-content: space-between;
  align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.project-nav a { font-family: var(--mono); font-size: 0.7rem; min-height: 44px; display: inline-flex; align-items: center; max-width: 100%; }
.project-nav a:last-child { text-align: right; }

/* --- Contatti ----------------------------------------------------------- */
.contact-list { border-top: 1px solid var(--rule); }
.contact-row {
  display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.contact-row dt { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); text-transform: uppercase; min-width: 120px; }
.contact-row dd { margin: 0; }
.contact-row dd a, .contact-row dd span { font-size: 1.0625rem; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.contact-row dd span { color: var(--ink); }

/* --- 404 ---------------------------------------------------------------- */
.section-404 { padding: 64px 0 80px; }
.err-code { color: var(--accent); font-weight: 500; }
.route-label { font-family: var(--mono); font-size: 0.9em; color: var(--ink); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule); margin-top: auto; }
.site-footer > [data-shell] {
  padding-top: 24px; padding-bottom: 40px;
  display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between;
  font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
}

/* --- Senza JavaScript --------------------------------------------------- */
.noscript {
  border: 1px solid var(--rule); border-radius: 1px; padding: 20px;
  margin: 32px 0; font-family: var(--mono); font-size: 0.75rem; line-height: 1.7;
}

/* --- Dove arriva il testo -------------------------------------------------
   Il testo finisce dove finisce la fascia in cui scorrono le immagini. Il palco
   è largo al massimo 860 px e la pista dentro ha il 7 per cento di margine per
   lato, quindi la fascia finisce al 93 per cento del palco. È lì che si ferma
   l'ultima immagine quando la pista è scorsa fino in fondo, ed è una riga che
   non si muove, a differenza del bordo della singola immagine, che cambia a
   seconda di quale diapositiva è al centro.

   Da 768 in su, perché sotto il telefono usa proporzioni sue, margini del 4 per
   cento e diapositive del 92, e lì il testo prende tutta la larghezza che c'è. */
@media (min-width: 768px) {
  .measure,
  .project-figure figcaption { max-width: calc(min(100%, 860px) * 0.93); }

  /* La didascalia era prigioniera della figura, larga al massimo 860 px, e non
     poteva arrivare fin lì. Il tetto si sposta sul palco, che resta largo come
     prima, e la figura torna larga quanto la colonna. */
  .project-figure { max-width: none; }

  /* Il palco è largo quanto la colonna di testo, e il grafico ci sta in mezzo
     tenendo la misura di sempre, 636 px su 800, con lo stesso vuoto ai due lati.
     Se il palco fosse più largo del testo, come prima, il grafico centrato lì
     dentro sembrerebbe buttato a destra, perché quei pixel in più non si vedono. */
  .figure-stage, .figure-tabs { max-width: calc(min(100%, 860px) * 0.93); }
  .project-figure .figure-zoom { max-width: 79.5%; margin-inline: auto; }
}

/* Giustificato, con la sillabazione accesa. Senza sillabazione il giustificato
   apre fiumi di bianco fra le parole, soprattutto nella didascalia che è a
   spaziatura fissa. La lingua giusta la sa il browser, perché app.js scrive
   lang sulla radice a ogni cambio fra italiano e inglese. */
.measure,
.project-figure figcaption {
  text-align: justify;
  -webkit-hyphens: auto; hyphens: auto;
}

/* --- Cosa succede sotto il mouse ------------------------------------------
   Il meno possibile, e sempre la stessa cosa. Una riga che si riempie da
   sinistra. Niente si alza e niente si sposta, tranne i pulsanti. */

.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms cubic-bezier(.2,.7,.3,1);
}
.nav-link:hover::after { transform: scaleX(1); }
/* La pagina in cui sei ha già la sua riga, quella non si tocca. */
.nav-link[aria-current]::after { display: none; }

/* Il filo sopra il riquadro, che si riempie da sinistra. Deborda di un pixel
   per lato per coprire la cornice, altrimenti agli angoli resta il grigio e si
   vede che sono due cose diverse. */
.card::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms cubic-bezier(.2,.7,.3,1);
}
.card:hover::before { transform: scaleX(1); }

/* La freccia entra dal basso a destra, dove l'occhio finisce di leggere. */
.card::after {
  content: "\2192"; position: absolute; right: 20px; bottom: 18px;
  font-family: var(--mono); font-size: 0.8rem; color: var(--accent);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 240ms ease, transform 300ms cubic-bezier(.2,.7,.3,1);
}
.card:hover::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .card, .card::before, .card::after, .nav-link::after,
  .btn, .filter-btn { transition: none; }
  .btn:hover, .filter-btn:hover { transform: none; }
}

/* --- Stampa ------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .crumb, .filter-row, .cta-row, .project-nav { display: none; }
  body { background: #fff; }
  [data-note] { border: 0; }
  [data-note] > summary { display: none; }
}