/* ============================================================
   02 — BASE
   Reset minimo, il buio dietro, tipografia di default.
   ============================================================ */

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

html{
  scroll-behavior:smooth;
  background:var(--buio-basso);
  -webkit-text-size-adjust:100%;   /* niente ingrandimenti a sorpresa su iOS */
}

body{
  margin:0;
  overflow-x:hidden;               /* nessuno scorrimento laterale sul telefono */
  font-family:var(--serif);
  font-size:17px;
  line-height:1.6;
  color:var(--inchiostro);
  background:transparent;
  -webkit-tap-highlight-color:rgba(142,29,22,.18);
}


/* ------------------------------------------------------------
   IL CIELO
   Un pannello fisso dietro tutto. Il gradiente blu e' solo la
   carta: il cielo vero e' la campitura a penna che ci disegna
   sopra js/scarabocchio.js dentro #tratti. Dove la mano ha
   ripassato di piu' diventa quasi nero.
   Niente background-attachment:fixed: su iOS Safari fa scattare
   lo scorrimento. Un elemento position:fixed fa la stessa cosa
   senza costare niente.
   ------------------------------------------------------------ */

.buio{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    /* il buio ai bordi: il tratteggio da solo non arriva al nero,
       questo lo porta li' */
    radial-gradient(125% 92% at 50% 38%,
      transparent 28%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.86) 100%),
    /* due chiazze marce appena accennate: sporcano il blu senza
       diventare un disegno */
    radial-gradient(58% 38% at 14% 10%,
      color-mix(in srgb, var(--ruggine) 34%, transparent) 0%, transparent 62%),
    radial-gradient(54% 42% at 88% 76%,
      color-mix(in srgb, var(--ruggine) 26%, transparent) 0%, transparent 64%),
    radial-gradient(72% 48% at 50% 26%,
      var(--buio-alone) 0%, transparent 66%),
    linear-gradient(to bottom,
      var(--buio-alto)  0%,
      var(--buio-medio) 46%,
      var(--buio-basso) 100%);
}

.buio__tratti{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:var(--penna-buio);
}
.buio__tratti path{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* le macchie invece sono chiazze piene, non contorni */
.buio__tratti .penna__pieno{
  fill:currentColor;
  stroke:none;
}
.fondo__cielo  { color:var(--penna-buio); }
.fondo__macchie{ color:var(--macchia); }
.fondo__ruggine{ color:var(--ruggine); }


/* ------------------------------------------------------------
   TIPOGRAFIA
   ------------------------------------------------------------ */

p{
  margin:0 0 17px;
  text-align:justify;
  hyphens:auto;
  overflow-wrap:break-word;   /* un indirizzo lungo non sfonda la colonna */
}

a{
  color:var(--rosso);
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
a:visited{ color:var(--viola); }
a:hover{ color:var(--rosso-vivo); }

::selection{
  background:var(--inchiostro);
  color:var(--carta);
}

.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* capolettera da libro vecchio */
.capolettera::first-letter{
  float:left;
  font-size:76px;
  line-height:.7;
  padding:9px 12px 0 0;
  font-weight:700;
  color:var(--rosso);
}


/* ------------------------------------------------------------
   ACCESSIBILITA'
   ------------------------------------------------------------ */

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

/* ------------------------------------------------------------
   TELEFONO
   Qui si legge: il testo resta grande, si stringe il contorno.
   ------------------------------------------------------------ */

@media (max-width:700px){
  /* giustificare una colonna da ~40 caratteri apre i fiumi bianchi
     in mezzo alle parole */
  p{ text-align:left; }

  /* 76px di capolettera su una colonna da 320 sono un quarto della
     riga: mangia tre righe di testo e si porta via l'attacco */
  .capolettera::first-letter{
    font-size:50px;
    line-height:.74;
    padding:7px 9px 0 0;
  }
}


@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    scroll-behavior:auto;
  }
}