/* Le due pagine legali: privacy.html e cookie.html.
   Niente di suo se non il testo: tokens, reset, barra, menu, cursore e footer
   arrivano da comune.css, come per contatti e per le pagine progetto.

   Un documento che si legge, non una pagina che si guarda: colonna stretta,
   corpo alto, sezioni numerate con l'etichetta mono a sinistra. L'unica cosa
   che si muove e' il reveal delle sezioni, lo stesso di tutte le altre pagine. */

.lg{
  padding:calc(var(--nav-h) + clamp(40px,7vh,90px)) var(--pad) clamp(80px,12vh,160px);
  max-width:1100px;margin:0 auto;
}

/* ---- testata ---- */
.lg-occhiello{color:var(--dim);margin-bottom:clamp(18px,3vh,34px)}

.lg-tit{
  font-family:var(--f-serif);font-weight:var(--w-serif);
  font-size:clamp(44px,8vw,120px);letter-spacing:-.012em;line-height:.96;
}
/* stessa maschera del titolo dei contatti: la riga sale da sotto */
.lg-tit .line{overflow:hidden;display:block;padding-bottom:.16em;margin-bottom:-.16em}
.lg-tit .line > span{display:block;transform:translateY(130%)}

.lg-sotto{
  margin-top:clamp(24px,4vh,40px);max-width:62ch;
  font-size:clamp(16px,1.4vw,20px);line-height:1.65;
  color:rgba(244,244,242,.78);
}
.lg-data{margin-top:18px;color:var(--dim)}

/* ---- sezioni ----
   Due colonne da 900px in su: a sinistra il numero e il titolo corto, a
   destra il testo. Sotto quella soglia diventa una colonna sola, perche' a
   40 caratteri per riga la colonna del testo non e' piu' una colonna. */
.lg-sez{
  margin-top:clamp(46px,7vh,86px);
  padding-top:clamp(26px,4vh,42px);
  border-top:1px solid rgba(244,244,242,.14);
  display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vh,26px);
}
@media (min-width:900px){
  .lg-sez{grid-template-columns:minmax(180px,26%) 1fr;gap:clamp(28px,4vw,64px)}
  .lg-sez-testa{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
}

.lg-n{color:var(--orange);display:block;margin-bottom:10px}
.lg-sez-testa h2{
  font-family:var(--f-display);font-weight:var(--w-display);
  font-size:clamp(19px,1.9vw,26px);letter-spacing:-.02em;line-height:1.15;
}

.lg-corpo{max-width:64ch;font-size:clamp(15px,1.25vw,17px);line-height:1.72;color:rgba(244,244,242,.8)}
.lg-corpo > * + *{margin-top:1.05em}
.lg-corpo strong{color:var(--white);font-weight:500}

.lg-corpo ul{list-style:none;padding:0}
.lg-corpo li{position:relative;padding-left:22px}
.lg-corpo li + li{margin-top:.7em}
/* Il trattino non e' un elenco puntato ma la stessa asta del marchio, in
   arancione: l'unico accento colorato del documento. */
.lg-corpo li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:11px;height:1px;background:var(--orange);
}

.lg-corpo a{color:var(--white);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(244,244,242,.4)}
.lg-corpo a:hover{text-decoration-color:var(--orange)}

/* La tabella dei terzi: nella sostanza e' un elenco di righe a due voci, e a
   schermo stretto torna a impilarsi invece di scorrere in orizzontale. */
.lg-terzi{margin-top:1.4em;border-top:1px solid rgba(244,244,242,.12)}
.lg-terzi > div{
  padding:14px 0;border-bottom:1px solid rgba(244,244,242,.12);
  display:grid;grid-template-columns:1fr;gap:4px;
}
@media (min-width:640px){
  .lg-terzi > div{grid-template-columns:minmax(150px,32%) 1fr;gap:18px;align-items:baseline}
}
.lg-terzi dt{color:var(--white)}
.lg-terzi dd{margin:0;color:rgba(244,244,242,.72);font-size:.94em}

/* Il rimando all'altra pagina, in fondo: stessa forma del pulsante dei
   contatti in comune.css, ma qui basta un link con la riga sotto. */
.lg-altra{margin-top:clamp(56px,9vh,110px);padding-top:clamp(24px,4vh,40px);border-top:1px solid rgba(244,244,242,.14)}
.lg-altra a{color:var(--white);font-size:clamp(18px,2.2vw,30px);text-decoration:none;letter-spacing:-.02em}
.lg-altra a::after{content:"";display:block;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.lg-altra a:hover::after{transform:scaleX(1)}