/* ============================================================
   04 — LAYOUT
   Il foglio verticale e le intestazioni di sezione.
   ============================================================ */

/* ------------------------------------------------------------
   IL FOGLIO
   Una sola colonna, lunga quanto serve, appoggiata sul buio.
   Il rettangolo di carta non e' un background: e' un percorso
   SVG riempito (data-penna="carta") con gli angoli tondi e i
   bordi campionati a caso — gonfio e storto, non tagliato col
   righello — piu' la matassa di penna che ci gira attorno.

   La larghezza tiene sempre --aria di buio ai lati, anche sul
   telefono: se la carta arrivasse al bordo dello schermo non si
   capirebbe piu' che e' un foglio appoggiato su qualcosa.
   ------------------------------------------------------------ */

.foglio{
  position:relative;
  z-index:1;
  width:min(100% - var(--aria) * 2, var(--colonna));
  margin:0 auto;
  padding-bottom:2px;
}

.foglio__fondo{
  position:absolute;
  inset:0;
  z-index:-1;
  color:var(--carta);                       /* il colore della carta */
  box-shadow:0 0 46px 12px rgba(0,0,0,.78); /* il foglio stacca dal buio */
  pointer-events:none;
}

.foglio__contenuto{
  position:relative;
  z-index:1;
  padding:10px 6px;
}

.sezione{
  padding:0 var(--passo);
}


/* ------------------------------------------------------------
   INTESTAZIONI DI SEZIONE
   ------------------------------------------------------------ */

.intestazione{
  margin:58px 0 26px;
}

.intestazione__riga{
  display:flex;
  align-items:baseline;
  gap:14px;
}

.intestazione__num{
  flex:none;
  font-family:var(--mono);
  font-size:34px;
  font-weight:700;
  line-height:1;
  color:var(--rosso);
  opacity:.85;
}

.intestazione__titolo{
  flex:1;
  margin:0;
  font-size:clamp(24px, 6.4vw, 32px);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.12;
}

.intestazione__meta{
  flex:none;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grigio);
  white-space:nowrap;
}

@media (max-width:560px){
  .intestazione{ margin:44px 0 22px; }
  .intestazione__riga{ flex-wrap:wrap; gap:10px; }
  .intestazione__meta{ width:100%; }
}


/* ------------------------------------------------------------
   TELEFONO
   ------------------------------------------------------------ */

@media (max-width:700px){
  .foglio__contenuto{ padding:8px 4px; }

  /* il numero rosso era piu' grande del titolo che accompagna */
  .intestazione{ margin:42px 0 20px; }
  .intestazione__num{ font-size:25px; }
  .intestazione__meta{ font-size:11px; }
}