/* --------------------------------------------------------------------------
   Font: Minion Pro, ospitato sul sito (assets/fonts/minion-pro/).
   Nel sito non c'e' corsivo: servono solo Regular, Medium, Semibold e Bold (i file
   corsivi, It, non vanno copiati). Per ogni peso il browser prova prima il .woff2
   (piu' leggero), poi il .otf: funziona sia con i file convertiti sia con gli
   originali. Scarica solo i pesi che la pagina usa davvero.
   font-display: block = il testo aspetta Minion Pro (un istante) invece di
   comparire in un font di riserva e poi "saltare": niente effetto a ogni pagina.
   Il Regular parte in anticipo (preload in head.php).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Minion Pro";
  src: url("../fonts/minion-pro/MinionPro-Regular.woff2") format("woff2"),
    url("../fonts/minion-pro/MinionPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Minion Pro";
  src: url("../fonts/minion-pro/MinionPro-Medium.woff2") format("woff2"),
    url("../fonts/minion-pro/MinionPro-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Minion Pro";
  src: url("../fonts/minion-pro/MinionPro-Semibold.woff2") format("woff2"),
    url("../fonts/minion-pro/MinionPro-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Minion Pro";
  src: url("../fonts/minion-pro/MinionPro-Bold.woff2") format("woff2"),
    url("../fonts/minion-pro/MinionPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  /* Parete: il fondo e un grigio da galleria, non bianco.
     Le stampe si staccano invece di sparire nel foglio. */
  /* misura del testo della testata (nome, index, contact) e delle voci principali del menu */
  --chrome-size: 1.08rem;
  --wall: #ffffff;
  --wall-deep: #c6c6c6;
  --wall-line: rgba(20, 18, 15, .18);

  --ink: #14120f;
  --ink-soft: #55504a;
  --mat: #edeae3;

  --font-display: "Minion Pro", Georgia, "Times New Roman", serif;
  --font-ui: "Minion Pro", Georgia, "Times New Roman", serif;

  --gap: 3px;
  --edge: 3px;


  --ease: cubic-bezier(.16, .84, .32, 1);
}

/* --------------------------------------------------------------------------
   Reset essenziale
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* niente rettangolo colorato al tocco di link e pulsanti su mobile */
  -webkit-tap-highlight-color: transparent;
  /* spazio della barra di scorrimento riservato da subito: la larghezza della
     pagina non cambia quando la barra compare (evita tile oltre il bordo) */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  /* footer sempre in fondo: se la pagina e' corta il contenuto si allunga fino
     al bordo dello schermo, se e' lunga il footer viene dopo tutto il resto */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video {
  display: block;
  max-width: 100%;
}

/* nessun corsivo nel sito: nemmeno dove il browser lo metterebbe da solo (<em>, <i>, <cite>) */
em, i, cite, dfn, var, address {
  font-style: normal;
}

a {
  color: inherit;
  text-decoration: none;
}

figcaption, p, ul {
  margin: 0;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--mat);
  font-size: 12px;
}

.skip-link:focus {
  left: var(--edge);
  top: var(--edge);
}

/* --------------------------------------------------------------------------
   Testa: wordmark + menu
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  /* nome a sinistra, "index" al centro vero, "Contact" a destra: le due colonne laterali sono
     uguali, quella centrale larga quanto "index" */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem var(--edge) .95rem;
  background: color-mix(in srgb, var(--wall) 88%, transparent);
  backdrop-filter: blur(14px);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  white-space: nowrap;
  justify-self: start;
}

.wordmark__name {
  font-family: var(--font-display);
  font-size: var(--chrome-size);
  /* come "index", "contact" e le voci principali del menu */
  line-height: 1;
  letter-spacing: .005em;
}

.wordmark__role {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--ink-soft);
}

/* "index" al centro della testata e "contact" a destra: stessa misura del nome del sito,
   uguali su desktop e mobile */
.index-toggle,
.masthead__contact {
  font-size: var(--chrome-size);
  letter-spacing: .02em;
  color: var(--ink);
  transition: opacity .2s var(--ease);
}

.index-toggle {
  justify-self: center;
}

.masthead__contact {
  justify-self: end;
  white-space: nowrap;
}

.index-toggle:hover,
.masthead__contact:hover {
  opacity: .55;
}

/* schermi molto stretti: nome, index e contact devono starci in una riga (le voci
   principali del menu seguono, perche' hanno la stessa misura) */
@media (max-width: 360px) {
  :root {
    --chrome-size: 1rem;
  }
}

/* nessun contorno su "index" e "overview", nemmeno quando tornano attivi
   chiudendo una finestra */
.index-toggle:focus,
.index-toggle:focus-visible,
.masthead__contact:focus,
.masthead__contact:focus-visible,
.gallery__toggle:focus,
.gallery__toggle:focus-visible {
  outline: none;
}

/* nella finestra aperta: "index" barrato, nella stessa posizione, chiude */
.index-toggle--close {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   Finestra "index": a tutto schermo, bianca non del tutto opaca
   -------------------------------------------------------------------------- */

.site-index {
  /* vw/vh e non %: deve coprire anche lo spazio riservato alla barra di scorrimento */
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  /* spazio della sua barra riservato da subito: le posizioni non cambiano
     quando il contenuto diventa piu' alto dello schermo */
  scrollbar-gutter: stable;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(4px);
}

.site-index[open] {
  animation: index-in .35s var(--ease);
}

@keyframes index-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.site-index::backdrop {
  background: transparent;
}

/* Finestra aperta (menu, overview, video): resta solo la sua barra di
   scorrimento. Quella della pagina sparisce e al suo posto il body prende un
   margine identico (--scrollbar, misurato da app.js all'apertura): sotto la
   finestra non si sposta niente e lei copre tutto lo schermo. */
html:has(dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: auto;
}

html:has(dialog[open]) body {
  padding-right: var(--scrollbar, 0px);
}

/* stessa posizione della testata: "close" cade esattamente dove c'era "index".
   Fascia bianca che sfuma: le voci scorrono sotto, non sopra "index" */
.site-index__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(to bottom, #fff 72%, rgba(255, 255, 255, 0));
  /* stesse tre colonne della testata; app.js sposta di quel poco che serve "index" barrato e
     "Contact" perche' cadano esattamente sopra gli originali */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem var(--edge) .95rem;
}

.site-index__nav {
  display: grid;
  justify-items: start;
  padding: 1.6rem var(--edge) 3rem;
}

.site-index__heading {
  display: block;
  padding: .12em 0;
  font-family: var(--font-display);
  font-size: var(--chrome-size);
  /* stessa misura della testata; di poco piu' grande delle sottovoci (.98rem) */
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: opacity .2s var(--ease);
}

.site-index__heading::-webkit-details-marker {
  display: none;
}

.site-index__heading:hover {
  opacity: .55;
}

/* voce selezionata = barrata */
.site-index__page[aria-current="page"],
.site-index__group[open] .site-index__heading {
  text-decoration: line-through;
  text-decoration-thickness: .05em;
}

/* l'elenco si sta chiudendo (animazione in app.js): la voce non e' piu' barrata da subito */
.site-index__group.is-closing .site-index__heading {
  text-decoration: none;
}

.site-index__group {
  width: 100%;
}

.site-index__list {
  display: grid;
  gap: .2rem 2.5rem;
  padding: .35rem 0 1rem .1rem;
}

/* titolo e, di seguito, kind e anno: scorrono come una riga di testo; se non
   c'e' spazio kind e anno vanno a capo insieme, sotto, senza spezzarsi */
.site-index__item {
  display: inline;
  transition: opacity .2s var(--ease);
}

.site-index__meta {
  display: inline-block;
}

.site-index__item:hover {
  opacity: .55;
}

.site-index__title {
  /* lo spazio verso kind e anno sta qui: se vanno a capo, partono senza rientro */
  margin-right: .35em;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 400;
  line-height: 1.35;
}

.site-index__item[aria-current="page"] .site-index__title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* kind e anno accanto al titolo, nello stile della riga sopra il titolo dei progetti */
.site-index__meta {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Mosaico
   Le posizioni le calcola app.js a ogni caricamento (sempre diverse). Ogni tile
   ha le proporzioni esatte del suo contenuto (--ar): niente tagli, niente bande.
   Senza JS resta una semplice griglia a due colonne, tutto visibile.
   -------------------------------------------------------------------------- */

.mosaic {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
  padding: var(--edge);
}

.tile {
  position: relative;
  width: calc(50% - var(--gap) / 2);
  aspect-ratio: var(--ar, 1.5);
  background: var(--wall-deep);
  /* niente esce dalla tile: nemmeno la didascalia (anche invisibile, su una tile
     stretta vicina al bordo allargherebbe la pagina) */
  overflow: hidden;
}

/* Con JS attivo la versione di riserva qui sopra non deve mai vedersi: il mosaico
   resta invisibile finche' app.js non ha calcolato le posizioni (is-scatter). */
.js .mosaic:not(.is-scatter) {
  visibility: hidden;
}

/* Con JS: disposizione sparsa a coordinate calcolate */
.mosaic.is-scatter {
  display: block;
  padding: 0;
  margin: var(--edge);
}

.mosaic.is-scatter .tile {
  position: absolute;
  top: var(--y, 0);
  left: var(--x, 0);
  width: var(--w, 25%);
  opacity: 0;
}

/* Ingresso: le tile compaiono dall'alto verso il basso */
.mosaic.is-ready .tile {
  animation: tile-in .95s var(--ease) both;
  animation-delay: var(--delay, 0ms);
}

/* A dissolvenza finita la tile perde l'animazione e torna una parte normale
   della pagina: tenuta su un livello grafico a parte, su alcuni sistemi il
   browser non la ridisegnava quando arrivava la foto (restava il segnaposto). */
.mosaic.is-ready .tile.is-in {
  animation: none;
  opacity: 1;
}

@keyframes tile-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(.982);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.tile__link {
  position: absolute;
  inset: 0;
  display: block;
}

.tile__media {
  position: absolute;
  inset: 0;
  transition: opacity .5s var(--ease), filter .5s var(--ease);
}

/* contain: la tile ha gia' le proporzioni del file, quindi lo riempie tutto;
   se per qualche motivo non combaciassero, meglio una banda che un taglio. */
.tile__img,
.tile__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tile__img--primary {
  opacity: 1;
  transition: opacity .7s var(--ease);
}

.tile__img--secondary {
  opacity: 0;
  transition: opacity .7s var(--ease);
}

/* Lo scambio di frame si attiva solo quando la seconda foto e davvero caricata */
.tile.is-swappable .tile__link:hover .tile__img--primary,
.tile.is-swappable .tile__link:focus-visible .tile__img--primary {
  opacity: 0;
}

.tile.is-swappable .tile__link:hover .tile__img--secondary,
.tile.is-swappable .tile__link:focus-visible .tile__img--secondary {
  opacity: 1;
}

/* Didascalia */
.tile__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  gap: .1rem;
  padding: 2.6rem .8rem .75rem;
  color: var(--mat);
  background: linear-gradient(to top, rgba(16, 14, 12, .72), transparent);
  pointer-events: none;
}

.tile__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.1;
}

.tile__meta {
  display: none;
  font-size: 11px;
  letter-spacing: .02em;
  opacity: .82;
}

/* Su mobile la didascalia compare solo tenendo premuta la tile (app.js
   aggiunge .is-peek); su desktop al passaggio del mouse */
/* sempre visibile, a qualunque larghezza: oltre i 900px la regola del desktop
   la terrebbe trasparente fino al passaggio del mouse, che col dito non c'e' */
.tile.is-peek .tile__caption {
  display: grid;
  padding: 1.3rem .55rem .45rem;
  opacity: 1;
  transform: none;
}

.tile.is-peek .tile__caption .tile__title {
  font-size: 1rem;
}

.tile.is-peek .tile__meta {
  display: block;
}

/* tenendo premuto non devono aprirsi l'anteprima del link o il menu
   "salva immagine": bloccati sulla tile e su tutto quello che contiene */
@media (hover: none), (pointer: coarse) {

  .tile,
  .tile * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .tile__img,
  .tile video {
    -webkit-user-drag: none;
  }
}

.tile__caption {
  display: none;
}

/* --------------------------------------------------------------------------
   Modale video
   -------------------------------------------------------------------------- */

.viewer {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 12, 10, .94);
  color: var(--mat);
}

.viewer[open] {
  display: grid;
  place-items: center;
}

.viewer::backdrop {
  background: transparent;
}

/* Il lettore tiene il formato del video (--ar) e si ingrandisce finche' sta
   nello schermo, lasciando spazio sotto per i comandi */
.player--viewer {
  width: min(92vw, calc(80vh * var(--ar, 1.7778)));
}

.viewer__close {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1.1rem;
  padding: .4rem 0;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--mat);
  transition: opacity .2s var(--ease);
}

.viewer__close:hover {
  opacity: .55;
}

.viewer__close:focus {
  outline: none;
}

.viewer__title {
  position: fixed;
  left: 1.1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-display);
  font-size: 1.3rem;
}

/* --------------------------------------------------------------------------
   Colophon
   -------------------------------------------------------------------------- */

main {
  flex: 1 0 auto;
}

.colophon {
  display: grid;
  gap: .3rem;
  padding: 0.5rem;
  margin-top: 1.6rem;
}

.colophon__line {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: 13px;
  letter-spacing: .02em;
}

.colophon__line a:hover {
  border-color: var(--ink);
}

.colophon__line--meta {
  color: var(--ink-soft);
  justify-content: center;
}

/* contorno di focus solo per chi naviga con la tastiera, non al click o al tocco */
:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   Pagina progetto: due colonne, testo a sx, foto a dx con scroll orizzontale
   -------------------------------------------------------------------------- */

.project {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.project__info {
  padding: 1.6rem var(--edge) 2.2rem;
}

.project__back {
  display: inline-block;
  margin-bottom: 1.6rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-soft);
  transition: color .2s var(--ease);
}

.project__back:hover {
  color: var(--ink);
}

.project__eyebrow {
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

/* titolo di progetto, film e libro: tondo, non grassetto, piccolo */
.project__title {
  margin: .25rem 0 1rem;
  max-width: 80ch;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
}

.project__text {
  display: grid;
  gap: 1.1rem;
  max-width: 80ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.project__text p {
  margin: 0;
}

/* colophon del libro: una riga per voce (title, publisher, pagine, formato...) */
.book-colophon {
  margin-top: 1.2rem;
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.project__adjacent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 2.4rem;
  background: var(--wall-line);
  border-top: 1px solid var(--wall-line);
}

.project__adjacent-link {
  display: grid;
  gap: .3rem;
  padding: 1.1rem 0;
  background: var(--wall);
  transition: opacity .2s var(--ease);
}

.project__adjacent-link:hover {
  opacity: .6;
}

.project__adjacent-link--next {
  text-align: right;
  padding-right: var(--edge);
}

.project__adjacent-link--prev {
  padding-left: var(--edge);
}

.project__adjacent-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-soft);
}

.project__adjacent-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.project__gallery {
  min-width: 0;
}

.project__scroll {
  display: flex;
  gap: var(--gap);
  padding: var(--gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  height: 60vh;
}

.project__photo {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
}

/* --- Galleria a foto singola (app.js aggiunge .is-slides; senza JS resta la striscia) --- */

/* nessun contorno attorno alla foto: ne' al click ne' usando le frecce */
.gallery__stage:focus,
.gallery__stage:focus-visible {
  outline: none;
}

.project__gallery.is-slides .project__scroll {
  display: grid;
  /* una sola cella grande esattamente quanto lo spazio: i massimi della foto
     (100% in larghezza e in altezza) si riferiscono a lei */
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  /* due zone di tocco (indietro / avanti): niente zoom al doppio tocco */
  touch-action: manipulation;
}

/* Proporzioni originali, sempre: larghezza e altezza restano "auto" e i due
   massimi riducono la foto in proporzione finche' sta nello spazio. Nessun
   layout flessibile sulla foto (potrebbe stringerla solo in larghezza) e,
   per sicurezza, object-fit: contain. */
.project__gallery.is-slides .project__photo {
  display: none;
  flex: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.project__gallery.is-slides .project__photo.is-current {
  display: block;
  animation: photo-in .5s var(--ease);
}

@keyframes photo-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* contatore "1/20": al posto del puntatore dove c'e' un mouse, sotto la foto sugli schermi touch */
.gallery__count,
.gallery__cursor {
  display: none;
  font-size: 15px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.gallery__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  pointer-events: none;
  white-space: nowrap;
  /* si inverte rispetto a quello che ha sotto: leggibile su foto chiare e scure */
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .15s var(--ease);
}

.gallery__cursor.is-visible {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .project__gallery.is-slides .project__scroll {
    cursor: none;
  }

  .project__gallery.is-slides .gallery__cursor {
    display: block;
  }
}

@media (hover: none), (pointer: coarse) {
  .project__gallery.is-slides .gallery__count {
    display: block;
    padding: .55rem var(--edge) 0;
    text-align: center;
  }
}

/* la galleria non fa da riquadro: sezione foto e riga di "overview" stanno
   direttamente nella pagina progetto */
.gallery {
  display: contents;
}

/* "overview": riga sua sotto le colonne, al centro della pagina, nel flusso
   (non copre nulla e il footer viene dopo) */
.gallery__bar {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  padding-top: .9rem;
}

.gallery__toggle {
  display: block;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--ink);
  transition: opacity .2s var(--ease);
}

.gallery__toggle:hover {
  opacity: .55;
}

/* nella finestra aperta: fascia incollata in fondo (sticky), bianca che sfuma
   verso l'alto: le miniature ci scorrono sotto. Dentro, "overview" barrato,
   che app.js allinea in orizzontale al pulsante della pagina. */
.overview__bar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 5.5rem;
  padding-bottom: 1.1rem;
  pointer-events: none;
  background: linear-gradient(to top, #fff 45%, rgba(255, 255, 255, 0));
}

.gallery__toggle--close {
  margin: 0;
  pointer-events: auto;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* finestra overview: tutte le foto come un provino */
.overview {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  /* spazio della sua barra riservato da subito: le posizioni non cambiano
     quando il contenuto diventa piu' alto dello schermo */
  scrollbar-gutter: stable;
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
}

/* a colonna: la fascia con il pulsante barrato sta sempre in fondo, anche
   quando gli elementi sono pochi e non riempiono lo schermo */
.overview[open] {
  display: flex;
  flex-direction: column;
  animation: index-in .35s var(--ease);
}

.overview__grid {
  flex: 0 0 auto;
}

.overview__bar {
  margin-top: auto;
}

.overview::backdrop {
  background: transparent;
}

.overview__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.4rem 1.2rem;
  padding: 3.2rem var(--edge) 1rem;
}

.overview__item {
  opacity: 0;
  /* le miniature entrano una dopo l'altra, salendo appena */
  animation: thumb-in .7s var(--ease) forwards;
  animation-delay: calc(min(var(--i), 30) * 40ms + 120ms);
  transition: opacity .25s var(--ease);
}

.overview__item {
  max-width: 100%;
}

/* miniature a proporzioni originali: entro un'altezza massima e la larghezza disponibile */
.overview__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 14vh;
}

.overview__grid:has(.overview__item:hover) .overview__item:not(:hover) img,
.overview__grid:has(.overview__item:hover) .overview__item:not(:hover) video {
  opacity: .45;
}

.overview__item img,
.overview__item video {
  transition: opacity .25s var(--ease);
}

/* disposte come la home (app.js aggiunge .is-packed): stesso motore, stessi margini */
.overview__grid.is-packed {
  display: block;
  position: relative;
  padding: 0;
  margin: 3.2rem var(--edge) 1.5rem;
}

.overview__grid.is-packed .overview__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  max-width: none;
  aspect-ratio: var(--ar);
  /* entrano dall'alto verso il basso, come in home */
  animation-delay: calc(var(--delay, 0ms) + 120ms);
}

/* il riquadro ha le proporzioni esatte della foto: la foto lo riempie, intera */
.overview__grid.is-packed .overview__item img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

@media (min-width: 900px) {
  .overview__grid.is-packed {
    margin: 4.5rem 1.1rem 1.5rem;
  }
}


@keyframes thumb-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 900px) {
  .overview__grid {
    gap: 2rem 1.8rem;
    padding: 4.5rem 3rem 1.5rem;
  }

  .overview__item img {
    max-height: 22vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview__item {
    opacity: 1;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Lettore video (pagina film e video in sovrimpressione): comandi a parole
   -------------------------------------------------------------------------- */

.player {
  margin: 0;
}

.player__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 1.7778);
  object-fit: contain;
  cursor: pointer;
}

.player__bar {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-top: .6rem;
  font-size: 15px;
  letter-spacing: .02em;
}

.player__btn {
  color: inherit;
  transition: opacity .2s var(--ease);
}

.player__btn:hover {
  opacity: .55;
}

/* barrato: "sound" quando e' muto, "fullscreen" quando e' attivo (come "index") */
.player__btn.is-off {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.player__btn:focus,
.player__track:focus {
  outline: none;
}

.player__time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: .6;
}

/* linea di avanzamento: un filo, piu' scuro per la parte vista */
.player__track {
  position: relative;
  flex: 1 1 auto;
  height: 18px;
  cursor: pointer;
  touch-action: none;
}

.player__track::before,
.player__progress {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: currentColor;
}

.player__track::before {
  opacity: .2;
}

.player__progress {
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}

/* schermo intero: il video riempie, i comandi restano sotto */
.player:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.2rem;
  color: #f2f0eb;
  background: #000;
}

.player:fullscreen .player__video {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}

/* --------------------------------------------------------------------------
   Pagina film: film al centro, testo sotto, poi gli estratti
   -------------------------------------------------------------------------- */

.film-page {
  /* larghezza del film: tutta su mobile, fino all'80% dello schermo su desktop,
     senza superare l'80% dell'altezza (--ar = formato del film) */
  --film-w: 100%;
  padding: .6rem var(--edge) 0;
}

.player--film,
.film-info {
  width: var(--film-w);
  margin-inline: auto;
}

/* testo sopra il film */
.film-info {
  padding: .4rem 0 1.6rem;
}

.film-info .project__text {
  max-width: 62ch;
}

@media (min-width: 900px) {
  .film-page {
    /* l'altezza disponibile per il film e' lo schermo meno tutto il resto
       (testata, titolo, comandi, extracts, footer): cosi' la pagina sta su
       una facciata sola quando possibile. 19.75rem = quel resto, misurato. */
    --film-w: min(60vw, calc((100dvh - 19.75rem) * var(--ar, 1.7778)));
    padding: 1rem 1.1rem 0;
  }

  .film-info {
    padding: .6rem 0 0rem;
  }
}

/* film senza video principale (Notes): gli estratti stanno direttamente nella pagina,
   disposti come la home. Il titolo parte dal bordo come nelle pagine progetto, e la
   griglia ha i suoi margini (.overview__grid.is-packed): niente doppio margine. */
.film-page--extracts {
  padding-inline: 0;
}

.film-page--extracts .film-info {
  width: auto;
  margin-inline: 0;
  padding-inline: var(--edge);
}

.extracts-page.is-packed {
  margin: 1.2rem var(--edge) 1.5rem;
}

@media (min-width: 900px) {
  .film-page--extracts .film-info {
    padding-inline: 1.1rem;
  }

  .extracts-page.is-packed {
    margin: 1.6rem 1.1rem 1.5rem;
  }
}

/* come la home: invisibile finche' non e' disposto, poi entrano dall'alto verso il basso */
.js .extracts-page:not(.is-packed) {
  visibility: hidden;
}

.js .extracts-page .overview__item {
  opacity: 0;
  animation: none;
}

.js .extracts-page.is-ready .overview__item {
  animation: thumb-in .7s var(--ease) forwards;
  animation-delay: calc(var(--delay, 0ms) + 120ms);
}

/* estratti: nella finestra "extracts", disposti come l'overview (.overview__*).
   Ognuno e' un lettore (.player): i comandi stanno sopra la clip, in basso,
   cosi' la disposizione non cambia quando compaiono. */
.extract {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: var(--ar, 1.7778);
  container-type: inline-size;
}

.extract .player__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  gap: .7rem;
  padding: 1.6rem .6rem .45rem;
  font-size: 13px;
  color: #f2f0eb;
  background: linear-gradient(to top, rgba(14, 12, 10, .6), rgba(14, 12, 10, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}

/* partito una volta, i comandi restano */
.extract.is-started .player__bar {
  opacity: 1;
  pointer-events: auto;
}

.extract.is-started .extract__label {
  display: none;
}

/* i comandi non escono mai dalla clip (nascosti, allargherebbero comunque la pagina
   o la finestra) */
.extract .player__bar {
  overflow: hidden;
}

/* sulle clip strette i comandi si riducono, dal meno al piu' importante:
   prima il tempo, poi la linea di avanzamento, e sulle piu' piccole restano solo
   "fullscreen" (il click sulla clip avvia e ferma; a schermo intero c'e' tutto) */
@container (max-width: 280px) {
  .extract .player__time {
    display: none;
  }
}

@container (max-width: 210px) {
  .extract .player__track {
    display: none;
  }

  .extract .player__bar {
    justify-content: space-between;
  }
}

@container (max-width: 170px) {

  .extract [data-player-play],
  .extract [data-player-sound] {
    display: none;
  }

  .extract .player__bar {
    justify-content: flex-end;
  }
}

/* a schermo intero, la clip come il film */
.extract:fullscreen {
  aspect-ratio: auto;
}

.extract:fullscreen .player__bar {
  position: static;
  padding: .6rem 0 0;
  background: none;
  font-size: 15px;
}

.extract__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "play" sulla clip, in basso a sinistra, sugli schermi touch, finche' e' ferma:
   si inverte rispetto a quello che ha sotto, leggibile su qualsiasi fotogramma */
.extract__label {
  display: none;
  position: absolute;
  left: .5rem;
  bottom: .4rem;
  font-size: 14px;
  letter-spacing: .02em;
  color: #fff;
  mix-blend-mode: difference;
  transition: opacity .2s var(--ease);
}

.extract.is-playing .extract__label {
  opacity: 0;
}

.extract:focus,
.extract:focus-visible {
  outline: none;
}

/* su desktop il puntatore diventa "play" / "pause" (come il contatore delle foto) */
.extract__cursor {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  pointer-events: none;
  white-space: nowrap;
  font-size: 15px;
  letter-spacing: .02em;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .15s var(--ease);
}

.extract__cursor.is-visible {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .extract {
    cursor: none;
  }

  .extract__cursor {
    display: block;
  }
}

@media (hover: none), (pointer: coarse) {
  .extract__label {
    display: block;
  }
}

.project__empty {
  padding: 3rem var(--edge);
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Pagine a sezioni (Installation views, Publications): per ogni sezione
   titolo, testo breve e le foto una sotto l'altra, in colonna centrata
   -------------------------------------------------------------------------- */

.sections-page {
  --page-w: 100%;
  padding: 1.6rem var(--edge) 0;
}

.page-section {
  width: var(--page-w);
  margin: 0 auto 4rem;
  /* un link diretto alla sezione (#chiave) non la deve lasciare sotto la testata fissa */
  scroll-margin-top: 5rem;
}

.page-section:last-child {
  margin-bottom: 1rem;
}

.page-section__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
}

.page-section__text {
  max-width: 100ch;
  margin-bottom: 1.6rem;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-section__text p {
  margin: 0;
}

/* pagine solo testuali (Biography, Artist Statement): testo piu' largo di quello
   breve sotto i titoli delle sezioni, come le descrizioni dei progetti */
.page-text {
  max-width: 80ch;
}

/* la colonna e' larga quanto il testo (e titolo e testo partono dallo stesso bordo):
   cosi' il blocco sta davvero al centro della pagina, non solo la sua scatola piu' larga */
.page-section--text {
  font-size: 15px;
  /* stessa misura del testo: 80ch vale la stessa larghezza */
  width: min(var(--page-w), 80ch);
}

/* etichetta di lingua (ENG / ITA) quando una pagina ha lo stesso testo in due lingue */
/* i link nei testi (email, social): sottolineati, discreti */
.page-text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: opacity .2s var(--ease);
}

.page-text a:hover {
  opacity: .55;
}

.page-text .text-lang {
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
}

.page-text .text-lang:not(:first-child) {
  margin-top: 1.8rem;
}

/* foto una sotto l'altra, tutta la larghezza della colonna, proporzioni originali;
   --ar riserva lo spazio prima che la foto arrivi (niente salti caricando) */
.page-section__photos {
  display: grid;
  gap: var(--gap);
}

.page-section__photos img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 1.5);
  object-fit: contain;
}

@media (min-width: 900px) {
  .sections-page {
    --page-w: min(60vw, 52rem);
    padding: 3rem 1.1rem 0;
  }
}

.not-found {
  display: grid;
  place-items: center;
  gap: .6rem;
  min-height: 50vh;
  padding: 3rem var(--edge);
  text-align: center;
}

.not-found__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-soft);
}

.not-found__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.not-found__link {
  margin-top: .6rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-soft);
}

.not-found__link:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  :root {
    --gap: 5px;
    --edge: 5px;
    --chrome-size: 1.25rem;
  }

  body {
    font-size: 16px;
  }

  .masthead {
    padding: 1.25rem 1.1rem 1.05rem;
  }

  .site-index__bar {
    padding: 1.25rem 1.1rem 1.05rem;
  }

  .site-index__nav {
    padding: 2.4rem 1.1rem 4rem;
  }

  .site-index__list {
    grid-template-columns: repeat(3, minmax(0, max-content));
  }

  .site-index__heading {
    font-size: var(--chrome-size);
    /* di poco piu' grande delle sottovoci (1.05rem) */
  }

  .site-index__title {
    font-size: 1.05rem;
  }

  /* La parete si spegne: passando su una tessera, le altre arretrano */
  .mosaic:has(.tile__link:hover) .tile:not(:hover) .tile__media,
  .mosaic:has(.tile__link:focus-visible) .tile:not(:focus-within) .tile__media {
    opacity: .3;
    filter: grayscale(.7);
  }

  /* Didascalia solo al passaggio */
  .tile__caption {
    display: grid;
    padding: 1.3rem .55rem .45rem;
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .42s var(--ease), transform .42s var(--ease);
  }

  .tile__link:hover .tile__caption,
  .tile__link:focus-visible .tile__caption {
    opacity: 1;
    transform: none;
  }

  .tile__caption .tile__title {
    font-size: 1rem;
  }

  .tile__meta {
    display: block;
  }

  .colophon {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  /* .colophon__line--meta {
    justify-content: center;
  } */
}

/* --------------------------------------------------------------------------
   Desktop: pagina progetto
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

  /* le due colonne (e "extracts"/"overview" quando c'e') entro l'altezza dello
     schermo meno la testata, cosi' la pagina resta su una facciata sola quando
     il contenuto ci sta; se e' piu' lungo e' la pagina intera a scorrere. */
  .project {
    flex-direction: row;
    flex-wrap: wrap;
    /* la riga di "overview" va a capo, sotto le due colonne */
    align-items: flex-start;
    /* 8.25rem = testata + spazio sopra il footer + footer, misurati */
    min-height: calc(100dvh - 8.25rem);
  }

  .project__info,
  .project__gallery {
    flex: 1 1 0;
    min-width: 0;
    /* senza questo un flex item non si restringe mai sotto il suo contenuto */
  }

  .project__info {
    padding: 0 2.6rem 2.6rem 1.1rem;
  }

  /* non piu' uno scorrimento suo: l'altezza segue quella della colonna
     affiancata, fino a un massimo (sotto, la pagina intera scorre) */
  .project__scroll {
    height: auto;
    max-height: calc(100dvh - 8.25rem);
  }
}

/* --------------------------------------------------------------------------
   Pagina progetto con la foto al centro (il libro non ha .project--centered e resta
   a due colonne). Dall'alto: categoria, anno e titolo (e, per i progetti con
   'text_modal' => false, anche il testo), la foto, che riempie lo spazio che resta, e la
   riga dei pulsanti: "text" a sinistra e "overview" a destra. Senza "text" (testo sotto
   il titolo, o nessun testo) "overview" sta al centro. "text" apre una finestra col testo.
   -------------------------------------------------------------------------- */

.project--centered {
  display: grid;
  /* il titolo prende quel che gli serve, la foto tutto il resto (mai meno del 40% dello
     schermo), poi i pulsanti */
  grid-template-rows: auto minmax(40vh, 1fr) auto;
  align-items: stretch;
  gap: 0;
  /* testata + footer, misurati: la pagina sta su una facciata sola */
  min-height: calc(100dvh - 7.6rem);
}

.project--centered .project__head {
  padding: .7rem var(--edge) .9rem;
}

/* il titolo ha la misura di .project__title; qui solo il margine */
.project--centered .project__title {
  margin: .25rem 0 0;
}

/* il testo sotto il titolo, quando non sta in una finestra */
.project--centered .project__head .project__text {
  margin-top: 1rem;
}

/* la galleria: la foto riempie lo spazio, il contatore (solo touch) sta sotto */
.project--centered .project__gallery {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

/* l'altezza la decide la riga della griglia, non la foto: senza "contain" la dimensione
   naturale dell'immagine allargherebbe la riga */
.project--centered .project__scroll {
  height: auto;
  min-height: 0;
  max-height: none;
  contain: size;
}

.project--centered .gallery__bar {
  padding: .9rem var(--edge) 0;
}

/* con "text" e/o "film", la riga ha tre posti: a sinistra "text" (o, senza, "film"), al
   centro "film" quando c'e' anche "text", a destra "overview". Senza "text" ne' "film"
   resta quello di sempre: "overview" al centro */
.gallery__bar--split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
}

.gallery__slot--start {
  justify-self: start;
}

.gallery__slot--mid {
  justify-self: center;
}

.gallery__slot--end {
  justify-self: end;
}

/* finestra "text": la cornice e' quella di "overview" (.overview); qui solo il testo, al centro */
.text-modal__body {
  flex: 0 0 auto;
  width: min(100% - 2 * var(--edge), 80ch);
  margin: 3.2rem auto 1.5rem;
}

@media (min-width: 900px) {
  .project--centered {
    min-height: calc(100dvh - 8.05rem);
  }

  .project--centered .project__head,
  .project--centered .gallery__bar {
    padding-inline: 1.1rem;
  }

  .text-modal__body {
    margin-top: 4.5rem;
  }
}

/* senza JavaScript la finestra non si apre: il testo resta leggibile sotto la foto */
html:not(.js) .text-modal {
  display: block;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  background: none;
}

html:not(.js) .text-modal .overview__bar,
html:not(.js) [data-text-open] {
  display: none;
}

/* --------------------------------------------------------------------------
   Libro: come una pagina progetto (titolo in alto, foto al centro, "text" a sinistra e
   "overview" a destra sotto la foto) con in piu' la didascalia, cioe' il colophon: su
   desktop nella colonna a sinistra della foto, su mobile in fondo, sotto la foto e sotto
   i pulsanti.
   -------------------------------------------------------------------------- */

.project--book .book-colophon {
  max-width: none;
  margin: 0;
  padding: 1.6rem var(--edge) 2.4rem;
}

@media (min-width: 900px) {
  .project--book {
    --book-cap: clamp(14rem, 19vw, 21rem);
    /* colonna della didascalia (e, uguale, quella vuota a destra) */
    /* le due colonne laterali sono uguali: la foto, in mezzo, sta al centro della pagina */
    grid-template-columns: var(--book-cap) minmax(0, 1fr) var(--book-cap);
  }

  .project--book .project__head,
  .project--book .gallery__bar {
    grid-column: 1 / -1;
  }

  .project--book .project__gallery {
    grid-column: 2;
    grid-row: 2;
  }

  /* la didascalia a sinistra della foto, in alto, allineata al titolo */
  .project--book .book-colophon {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    max-width: 40ch;
    padding: .4rem .8rem 0 1.1rem;
  }
}

/* --------------------------------------------------------------------------
   Pagina di intermezzo (es. Lunedi Atelier): una foto per ognuno dei progetti collegati,
   affiancate e al centro, col nome sotto; il click porta al progetto. Lo spazio e le
   proporzioni sono quelli della pagina progetto: la foto sta intera nello spazio che resta.
   Su mobile le tre si mettono una sotto l'altra.
   -------------------------------------------------------------------------- */

.intermezzo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  width: min(100% - 2 * var(--edge), 80rem);
  min-height: 0;
  margin: 0 auto;
  padding: var(--gap) 0 1.4rem;
  list-style: none;
}

.intermezzo__cell {
  display: grid;
  min-width: 0;
  min-height: 0;
}

.intermezzo__item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: .9rem;
  min-height: 0;
  transition: opacity .3s var(--ease);
}

/* l'altezza la decide la griglia, non la foto (come lo spazio della galleria): una sola cella
   grande quanto lo spazio, cosi' i massimi della foto (100% di larghezza e di altezza) valgono
   davvero */
.intermezzo__photo {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  place-items: center;
  min-height: 0;
  contain: size;
}

.intermezzo__photo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.intermezzo__label {
  text-align: center;
  font-size: 1rem;
  letter-spacing: .02em;
}

/* passando su una foto, le altre arretrano (come in home) */
.intermezzo:has(.intermezzo__item:hover) .intermezzo__item:not(:hover) {
  opacity: .45;
}

@media (max-width: 699px) {
  .intermezzo {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.2rem;
  }

  .intermezzo__item {
    grid-template-rows: auto auto;
  }

  .intermezzo__photo {
    contain: none;
    grid-template-rows: auto;
  }

  .intermezzo__photo img {
    max-height: 62vh;
  }
}

/* --------------------------------------------------------------------------
   CV: come nel documento Word. Titoli di sezione centrati, l'anno a sinistra e il
   testo in una seconda colonna: le righe che vanno a capo restano allineate al testo.
   Le voci senza anno (pubblicazioni, collezioni...) stanno nella stessa colonna.
   -------------------------------------------------------------------------- */

.page-section--text:has(.cv) {
  width: min(var(--page-w), 110ch);
}

.page-text:has(> .cv) {
  display: block;
  max-width: none;
}

.cv {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.cv p {
  margin: 0;
}

/* "About", "Contacts" */
.cv-label {
  font-weight: 700;
}

.cv-label:not(:first-child) {
  margin-top: 1.7rem;
}

.cv-label+.cv-block {
  margin-top: .6rem;
}

/* titoli di sezione: centrati, in grassetto */
.cv-section {
  margin: 3.4rem 0 1.5rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  text-align: center;
}

/* "Interviews", "Talks", "Publications", "Press" */
.cv-sub {
  margin: 1.8rem 0 1rem;
}

.cv-entry {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  margin-bottom: 1.15rem;
}

.cv-year {
  grid-column: 1;
}

.cv-text {
  grid-column: 2;
  min-width: 0;
}

.cv-justify {
  text-align: justify;
}

/* --------------------------------------------------------------------------
   Preferenze utente
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mosaic .tile {
    opacity: 1;
    animation: none;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}