/* Tutto il foglio di stile del sito.
   Serve solo a rendere il testo leggibile: pagina bianca, testo nero,
   colonna non troppo larga. */

body {
  background: #fff;
  color: #000;
  font-family: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  max-width: 40em;
  margin: 3em auto 6em auto;
  padding: 0 1.5em;
}

a { color: #0000cc; }
a:visited { color: #551a8b; }

h1 { font-size: 1.5em; font-weight: 600; margin: 0 0 .2em 0; letter-spacing: -.01em; }
/* margine superiore ampio: separa una sezione dalla precedente
   ora che le linee sono nascoste */
h2 { font-size: 1em; font-weight: 600; margin: 4.4em 0 .7em 0; text-transform: uppercase; letter-spacing: .1em; }
h3 { font-size: 1em; font-weight: 600; margin: 1.9em 0 .4em 0; }
/* un sottotitolo subito dopo un titolo di sezione non deve
   sommare i due margini: altrimenti quel blocco parte più in basso */
h2 + h3 { margin-top: 0; }

p { margin: 0 0 1em 0; }

ul { list-style: none; padding: 0; margin: 0 0 1em 0; }
li { margin-bottom: .9em; }
/* i dischi da leader hanno la copertina: serve più respiro fra uno e l'altro */
.leaderlist li { margin-bottom: 2.4em; }
.leaderlist .title { margin-bottom: .6em; }
.leaderlist .row { display: flex; gap: 1.4em; align-items: flex-start; }

.sub { color: #555; }
/* Linee separatrici invisibili: restano come spaziatori, così lo stacco
   tra le sezioni non si perde. Per rivederle basta rimettere
   'border-top: 1px solid #ccc'. */
hr { border: 0; height: 0; margin: 4.4em 0; }
.back { margin-bottom: 2.4em; }

/* più respiro prima di certi titoli, senza linea */
.gap-xl { margin-top: 7.6em; }

/* ancora più respiro, per la firma finale in fondo alla home */
.gap-xxl { margin-top: 16em; }

/* selettore di lingua */
.lang { font-size: .8em; letter-spacing: .08em; margin: 0 0 2.6em 0; }
.lang span { color: #000; font-weight: 600; }
.lang a { color: #0000cc; font-weight: 400; }

/* copertine dei dischi da leader */
.cover { display: block; width: 170px; height: auto; margin: 0; flex: 0 0 170px; }

/* Ritratto in apertura di biografia, sopra il titolo.
   Esce dalla colonna di testo e occupa tutta la larghezza della finestra:
   i margini negativi annullano il rientro del corpo pagina. */
.ritratto {
  display: block;
  width: 100vw;
  max-width: none;
  height: auto;
  margin: 0 calc(50% - 50vw) .35em calc(50% - 50vw);
}
/* il credito segue la foto fuori dalla colonna: sta all'estremità destra
   della pagina, sotto l'angolo destro dell'immagine */
.credito {
  font-size: .68em; color: #888; letter-spacing: .02em;
  width: 100vw;
  box-sizing: border-box;   /* senza questo il riempimento si somma alla
                               larghezza e la pagina scorre in orizzontale */
  text-align: right;
  padding-right: 1em;
  margin: 0 calc(50% - 50vw) 2.6em calc(50% - 50vw);
}
/* 100vw comprende la barra di scorrimento: senza questo, su desktop,
   comparirebbe una barra orizzontale di pochi pixel */
html { overflow-x: hidden; }

/* video in pagina: miniatura che diventa player al clic */
.video {
  position: relative; width: 100%; aspect-ratio: 16/9;
  margin: .6em 0 0 0; background: #000 center/cover no-repeat; cursor: pointer;
}
.video::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 68px; height: 48px; margin: -24px 0 0 -34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74a8 8 0 0 0-5.63-5.67C56.4.9 34 .9 34 .9s-22.4 0-26.89 1.17a8 8 0 0 0-5.63 5.67A83.7 83.7 0 0 0 .5 24a83.7 83.7 0 0 0 .98 16.26 8 8 0 0 0 5.63 5.67C11.6 47.1 34 47.1 34 47.1s22.4 0 26.89-1.17a8 8 0 0 0 5.63-5.67A83.7 83.7 0 0 0 67.5 24a83.7 83.7 0 0 0-.98-16.26z' fill='%23f00'/%3E%3Cpath d='M27 34V14l18 10z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .92;
}
.video:hover::after { opacity: 1; }
.video.playing::after { content: none; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Al passaggio del mouse le lettere si sparpagliano per la pagina.
   Le copie animate vivono in uno strato sovrapposto, fuori dal flusso del
   testo: il paragrafo sotto non si muove di un pixel e gli a capo restano
   dove sono. L'originale non viene rimosso, solo reso trasparente. */
.scatterlayer {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  z-index: 5; pointer-events: none;
}
.ghost, .ghost * { color: transparent !important; }
.ltr {
  position: absolute;
  white-space: pre;
  transition: transform 3.2s cubic-bezier(.33, 0, .35, 1);
  will-change: transform;
}

/* Messaggio segreto (vedi scatter.js): l'originale resta sempre invisibile,
   sono le lettere copiate nello scatterlayer a mostrarsi. Cliccabile solo
   mentre è formato ("on"), altrimenti l'area invisibile al centro
   bloccherebbe i clic su quello che sta sotto. "fixed" cattura il centro
   del viewport nell'istante in cui compare; se poi si scorre, il messaggio
   si nasconde da sé (vedi il listener di scroll in scatter.js) invece di
   restare disallineato dalle copie, che vivono in coordinate di pagina. */
.found {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 82%; max-width: 26em;
  text-align: center;
  opacity: 0; pointer-events: none;
  z-index: 6;
}
.found.on { pointer-events: auto; cursor: pointer; }