/* Gravity — le pagine di servizio: privacy, cookie, area riservata, 404.

   Sono pagine di testo, non la home: niente Terra, niente stelle, niente WebGL. Però
   sono lo stesso sito, quindi prendono i token e il tema di styles/home2.css — lo
   stesso interruttore alba/notte, gli stessi tre caratteri, le stesse misure — e qui
   sopra ci mettono soltanto l'impaginazione di una colonna di testo.

   Una regola sola per tutte: la misura della riga. Sessantacinque caratteri, che è
   dove un testo lungo si legge senza perdere il segno; la larghezza è in em, quindi
   cresce col corpo. Le pagine legali sono lunghe e nessuno le legge per piacere: il
   minimo che possiamo fare è non farle faticare. */

.gv-pagina {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  background: var(--gv-bg);
}

/* ------------------------------------------------------------------- testa */

/* Il marchio a sinistra, il ritorno al sito a destra, una riga sotto. Non è la
   navbar della home: lì è trasparente perché sotto c'è la scena, qui non c'è niente
   da lasciar vedere e la riga serve a separare il testo dall'intestazione. */
.gv-pagina__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gv-space-4);
  padding-block: var(--gv-space-4);
  border-bottom: 1px solid var(--gv-line);
}

.gv-pagina__marchio {
  display: block;
  flex: none;
}

.gv-pagina__marchio:hover .gv-logo-lockup {
  background-color: var(--gv-text);
  opacity: 0.72;
}

.gv-pagina__marchio .gv-logo-lockup {
  height: 26px;
  width: calc(26px * 676 / 218);
  transition: opacity 180ms ease;
}

/* ------------------------------------------------------------------- corpo */

.gv-pagina__corpo {
  flex: 1;
  padding-block: var(--gv-space-9) var(--gv-space-10);
}

.gv-pagina__colonna {
  max-width: 41em;
  margin-inline: auto;
}

/* Il titolo con l'occhiello sopra, come le sezioni della home. */
.gv-pagina__occhiello {
  margin: 0 0 var(--gv-space-3);
  font-family: var(--gv-font-mono);
  font-size: 13px;
  font-stretch: normal;
  letter-spacing: 0.04em;
  color: var(--gv-text-dim);
}

.gv-pagina__titolo {
  margin: 0;
  font-family: var(--gv-font-display);
  font-size: clamp(36px, 5.2vw, 56px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--gv-text);
  text-wrap: balance;
}

/* Il sommario: un gradino sopra al corpo, come il lead delle sezioni. */
.gv-pagina__sommario {
  margin: var(--gv-space-5) 0 0;
  font-size: var(--gv-type-lead);
  line-height: var(--gv-leading-lead);
  letter-spacing: -0.01em;
  color: var(--gv-text-body);
  text-wrap: pretty;
}

.gv-pagina__data {
  margin: var(--gv-space-6) 0 0;
  padding-top: var(--gv-space-4);
  border-top: 1px solid var(--gv-line);
  font-family: var(--gv-font-mono);
  font-size: 13px;
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: var(--gv-text-dim);
}

/* ------------------------------------------------------------------- prosa */

/* Il testo lungo. I titoli numerati stanno nel documento, non nel CSS: un contatore
   che si scolla dal testo quando qualcuno copia e incolla è peggio di niente. */
.gv-prosa {
  margin-top: var(--gv-space-9);
  font-size: var(--gv-type-body);
  line-height: 1.65;
  color: var(--gv-text-body);
}

/* Lo spazio fra i blocchi lo dà una regola sola, dall'alto. I margini propri dei
   tag si azzerano prima, tutti insieme: se si azzerano dopo — p { margin: 0 } messo
   più in basso — vincono per specificità e il testo si incolla. */
.gv-prosa > * {
  margin-block: 0;
}

.gv-prosa > * + * {
  margin-top: var(--gv-space-4);
}

.gv-prosa > h2 {
  margin-top: var(--gv-space-9);
  font-family: var(--gv-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--gv-text);
  text-wrap: balance;
}

.gv-prosa > h3 {
  margin-top: var(--gv-space-6);
  font-family: var(--gv-font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--gv-text);
}

.gv-prosa p {
  text-wrap: pretty;
}

.gv-prosa ul,
.gv-prosa ol {
  padding-left: 1.25em;
}

.gv-prosa li + li {
  margin-top: var(--gv-space-2);
}

.gv-prosa li::marker {
  color: var(--gv-text-faint);
}

.gv-prosa strong {
  font-weight: 500;
  color: var(--gv-text);
}

.gv-prosa a {
  color: var(--gv-text);
  text-decoration: underline;
  text-decoration-color: var(--gv-line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease;
}

.gv-prosa a:hover {
  text-decoration-color: var(--gv-accent);
}

/* La tabella dei trattamenti e quella dei cookie: righe separate da una linea, senza
   fondo e senza bordi verticali. Sotto i 640 px va a scorrimento invece di stringersi
   fino a spezzare ogni parola. */
.gv-prosa__tabella {
  overflow-x: auto;
  margin-top: var(--gv-space-5);
  border-top: 1px solid var(--gv-line);
}

.gv-prosa table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 15px;
}

.gv-prosa th,
.gv-prosa td {
  padding: var(--gv-space-3) var(--gv-space-3) var(--gv-space-3) 0;
  border-bottom: 1px solid var(--gv-line);
  text-align: left;
  vertical-align: top;
}

.gv-prosa th {
  font-family: var(--gv-font-mono);
  font-size: 12px;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0.04em;
  color: var(--gv-text-dim);
  text-transform: lowercase;
}

/* I nomi tecnici — gv-tema e simili — non si spezzano a metà parola dentro una cella
   stretta: il nome di una chiave letto su due righe non è più il nome di quella chiave. */
.gv-prosa code {
  font-family: var(--gv-font-mono);
  font-size: 0.92em;
  font-stretch: normal;
  white-space: nowrap;
  color: var(--gv-text);
}

/* La nota in fondo a una sezione: più piccola e più spenta, mai in corsivo. */
.gv-prosa__nota {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gv-text-dim);
}

/* ------------------------------------------------- pagine corte: 404, area */

/* Le due pagine senza prosa: il blocco sta al centro dello spazio che avanza, così
   una pagina di quattro righe non resta appesa in alto a uno schermo vuoto. */
.gv-pagina__corpo--centro {
  display: flex;
  align-items: center;
  padding-block: var(--gv-space-9);
}

.gv-pagina__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gv-space-3);
  margin-top: var(--gv-space-7);
}

/* L'indirizzo scritto per esteso sotto ai tasti, per chi vuole copiarlo. */
.gv-pagina__contatti {
  margin: var(--gv-space-4) 0 0;
  font-family: var(--gv-font-mono);
  font-size: 13px;
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: var(--gv-text-dim);
}

/* Il lembo del pianeta, come nell'hero e nell'anteprima social: un cerchio grande
   che sale da sotto con una riga di luce sul bordo. Qui è disegnato dal CSS, non
   dalla Terra vera: una pagina di errore non deve accendere una scheda grafica. */
.gv-pagina__lembo {
  position: fixed;
  z-index: 0;
  bottom: -132vmax;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 8%,
    color-mix(in srgb, var(--gv-accent) 9%, var(--gv-bg)) 0%,
    var(--gv-bg) 62%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gv-accent) 26%, transparent),
    0 -2px 80px color-mix(in srgb, var(--gv-accent) 16%, transparent);
  pointer-events: none;
}

/* Le tre fasce stanno sopra al lembo. Nominate una per una e non come .gv-pagina > *:
   quel selettore prendeva anche il lembo, gli rimetteva position: relative e un cerchio
   da duemila pixel entrava nel flusso, allungando una pagina di quattro righe fino a
   tre schermate di vuoto. */
.gv-pagina__testa,
.gv-pagina__corpo,
.gv-pagina__piede {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .gv-pagina__lembo {
    animation: gv-lembo 24s ease-in-out infinite;
  }
}

@keyframes gv-lembo {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* -------------------------------------------------------------------- piede */

.gv-pagina__piede {
  padding-block: var(--gv-space-5);
  border-top: 1px solid var(--gv-line);
}

.gv-pagina__piede-riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gv-space-2) var(--gv-space-4);
  margin: 0;
  font-family: var(--gv-font-mono);
  font-size: 12px;
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: var(--gv-text-faint);
  list-style: none;
  padding: 0;
}

.gv-pagina__piede-riga a {
  color: var(--gv-text-dim);
  text-decoration: none;
}

.gv-pagina__piede-riga a:hover {
  color: var(--gv-text);
}

@media (max-width: 599px) {
  .gv-pagina__corpo {
    padding-block: var(--gv-space-7) var(--gv-space-8);
  }

  .gv-prosa {
    margin-top: var(--gv-space-7);
  }

  .gv-prosa h2 {
    margin-top: var(--gv-space-7);
    font-size: 22px;
  }
}

/* ------------------------------------------------- condizioni generali */

/* Le condizioni generali sono il documento più lungo del sito: dodicimila parole,
   quarantaquattro articoli in due parti. Nessuno le legge da cima a fondo, quindi
   la pagina è fatta per essere consultata: un indice in testa che porta a ogni
   articolo, il numero di ogni clausola in mono e spento sul bordo del capoverso, e
   gli articoli divisi da spazio, non da linee. */

.gv-cg__pdf {
  color: var(--gv-text);
  text-decoration: underline;
  text-decoration-color: var(--gv-line-strong);
  text-underline-offset: 3px;
}

.gv-cg__pdf:hover {
  text-decoration-color: var(--gv-accent);
}

/* L'avvertenza per i consumatori: l'unica frase del documento che cambia il senso di
   tutto il resto, quindi sta in un riquadro suo, con la riga d'accento a sinistra. */
.gv-cg__avvertenza {
  margin: var(--gv-space-6) 0 0;
  padding: var(--gv-space-4) var(--gv-space-5);
  border-left: 2px solid var(--gv-accent);
  background: var(--gv-veil-soft);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gv-text-body);
  text-wrap: pretty;
}

.gv-cg__avvertenza strong {
  font-weight: 500;
  color: var(--gv-text);
}

/* L'indice: due colonne sugli schermi larghi, il numero dell'articolo in mono. */
.gv-cg__indice {
  margin-top: var(--gv-space-8);
}

.gv-cg__indice ol {
  margin: var(--gv-space-3) 0 0;
  padding: 0;
  list-style: none;
  columns: 2 16em;
  column-gap: var(--gv-space-6);
  font-size: 14px;
  line-height: 1.45;
}

.gv-cg__indice li {
  break-inside: avoid;
  padding-block: 3px;
}

.gv-cg__indice a {
  color: var(--gv-text-body);
  text-decoration: none;
}

.gv-cg__indice a:hover {
  color: var(--gv-text);
}

.gv-cg__indice-parte {
  padding-top: var(--gv-space-3) !important;
  font-weight: 500;
}

.gv-cg__indice-parte:first-child {
  padding-top: 0 !important;
}

.gv-cg__indice-parte a {
  color: var(--gv-text);
}

.gv-cg__art {
  display: inline-block;
  min-width: 3.4em;
  font-family: var(--gv-font-mono);
  font-size: 0.86em;
  font-stretch: normal;
  letter-spacing: 0.02em;
  color: var(--gv-text-dim);
}

/* Le parti: un'apertura vera, col numero sopra, perché il documento cambia natura —
   dalle condizioni alla nomina a responsabile del trattamento. */
.gv-cg__parte {
  scroll-margin-top: var(--gv-space-6);
}

.gv-cg__parte + .gv-cg__parte {
  margin-top: var(--gv-space-10);
  padding-top: var(--gv-space-8);
  border-top: 1px solid var(--gv-line);
}

.gv-cg__parte-n {
  margin: 0;
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  font-stretch: normal;
  letter-spacing: 0.04em;
  color: var(--gv-text-dim);
}

.gv-cg .gv-cg__parte-titolo {
  margin: var(--gv-space-2) 0 0;
  font-family: var(--gv-font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--gv-text);
}

.gv-cg__parte-sotto {
  margin: var(--gv-space-3) 0 0;
  color: var(--gv-text-dim);
}

.gv-cg__parte > p:not([class]) {
  margin-top: var(--gv-space-5);
}

/* Gli articoli: spazio sopra, nessuna linea. */
.gv-cg__articolo {
  margin-top: var(--gv-space-8);
  scroll-margin-top: var(--gv-space-6);
}

.gv-cg__articolo h3 {
  margin: 0;
  font-family: var(--gv-font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gv-text);
  text-wrap: balance;
}

.gv-cg__articolo h3 .gv-cg__art {
  min-width: 0;
  margin-right: 0.4em;
  font-size: 0.62em;
  vertical-align: 0.18em;
}

.gv-cg__articolo > * + * {
  margin-top: var(--gv-space-3);
}

.gv-cg__articolo > h3 + * {
  margin-top: var(--gv-space-4);
}

/* Il numero della clausola in una colonna sua, il testo nell'altra: così tutte le
   righe partono dallo stesso bordo. Prima era un rientro sporgente, padding e
   text-indent a 4,2em, ma la larghezza del numero era in em sul numero, che ha un
   corpo più piccolo del testo: le righe a capo partivano nove pixel più a destra
   della prima. Con la griglia le due misure non devono più coincidere. */
.gv-cg__clausola {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: baseline;
}

.gv-cg__n {
  font-family: var(--gv-font-mono);
  font-size: 0.8em;
  font-stretch: normal;
  letter-spacing: 0.02em;
  color: var(--gv-text-dim);
}

/* Nella tabella dell'art. 33 il numero non va a capo: "9-bis" diviso in due righe
   non è più il nome di un articolo. */
.gv-cg td:first-child {
  white-space: nowrap;
  font-family: var(--gv-font-mono);
  font-size: 0.86em;
}

.gv-cg__articolo ul {
  padding-left: 4.6rem;
}

.gv-cg__articolo li::marker {
  content: "— ";
  color: var(--gv-text-faint);
}

@media (max-width: 599px) {
  .gv-cg__clausola {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .gv-cg__articolo ul {
    padding-left: 1.25em;
  }

  .gv-cg__indice ol {
    columns: 1;
  }
}