/* storyliner.mokita.studio — un solo foglio di stile per tutte le pagine.
   Niente font esterni (una pagina sulla privacy non chiama server di terzi):
   il carattere è quello di sistema, lo stesso dell'app su iPhone e iPad.
   Il segno che tiene insieme le pagine è la linea della storia: una linea
   principale sul margine sinistro, e ogni sezione è un evento sopra di essa. */

:root {
  --carta: #f0f2f6;
  --foglio: #ffffff;
  --inchiostro: #1b1f2a;
  --grigio: #5b6272;
  --tenue: #8a90a0;
  --linea: #5b5bd6;
  --ramo: #f2994a;
  --velo: rgba(27, 31, 42, 0.06);
  --spazio: clamp(20px, 5vw, 56px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --carta: #212632;
    --foglio: #2a303d;
    --inchiostro: #e8ebf2;
    --grigio: #a9b0c0;
    --tenue: #7d8496;
    --linea: #a3a5f6;
    --ramo: #f5b27a;
    --velo: rgba(255, 255, 255, 0.07);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;
  font-feature-settings: "kern", "liga";
}

a {
  color: var(--linea);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--linea);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Testata: marchio a sinistra, lingua a destra. */
.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
  padding: 28px var(--spazio) 0;
}
.marchio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--inchiostro);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.marchio svg { width: 30px; height: 20px; }
.lingua { font-size: 15px; color: var(--grigio); }

/* Il testo legale: una colonna stretta con la linea della storia a sinistra. */
.documento {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 48px var(--spazio) 96px calc(var(--spazio) + 34px);
}
.documento::before {
  content: "";
  position: absolute;
  top: 58px;
  bottom: 96px;
  left: calc(var(--spazio) + 6px);
  width: 2px;
  background: var(--linea);
  opacity: 0.35;
}
.documento > * { max-width: 66ch; }

.documento h1 {
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 750;
  margin: 0 0 10px;
}
.aggiornato {
  color: var(--grigio);
  font-size: 15px;
  margin: 0 0 40px;
}

.documento h2 {
  position: relative;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 680;
  margin: 44px 0 10px;
  scroll-margin-top: 24px;
}
/* Ogni sezione è un evento sulla linea. */
.documento h2::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 0.38em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--linea);
  box-shadow: 0 0 0 4px var(--carta);
}
/* Le sezioni che parlano di soldi stanno su un ramo: colore diverso. */
.documento h2.ramo::before { background: var(--ramo); }
.documento h2:target::before { box-shadow: 0 0 0 4px var(--carta), 0 0 0 7px var(--linea); }

.documento h3 {
  font-size: 17px;
  font-weight: 650;
  margin: 24px 0 4px;
}

.documento p, .documento li { color: var(--inchiostro); }
.documento ul { padding-left: 1.1em; }
.documento li { margin: 4px 0; }
.documento li::marker { color: var(--tenue); }

/* In breve: una fascia piena, senza filo attorno. */
.breve {
  background: var(--foglio);
  padding: 18px 22px;
  border-radius: 14px;
  box-shadow: 0 1px 2px var(--velo), 0 8px 24px var(--velo);
  margin: 0 0 8px;
}
.breve p { margin: 0; }

.piede {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--spazio) 48px;
  color: var(--tenue);
  font-size: 14px;
}
.piede a { color: var(--grigio); }

/* Home: la timeline disegnata è il titolo. */
.copertina {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px var(--spazio) 24px;
}
.copertina svg.tela {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 36px;
}
.copertina h1 {
  font-size: clamp(40px, 8vw, 72px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 780;
  margin: 0 0 16px;
}
.copertina .sottotitolo {
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.4;
  color: var(--grigio);
  max-width: 34ch;
  margin: 0 0 28px;
}
.copertina .stato {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--linea);
  background: color-mix(in srgb, var(--linea) 14%, transparent);
  padding: 8px 14px;
  border-radius: 999px;
}
.voci {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  font-size: 16px;
}

@media (max-width: 520px) {
  .documento { padding-left: calc(var(--spazio) + 26px); }
  .documento::before { left: calc(var(--spazio) + 4px); }
  .documento h2::before { left: -27px; width: 12px; height: 12px; }
}

@media print {
  body { background: #fff; color: #000; }
  .documento::before, .documento h2::before { display: none; }
  .documento { padding-left: 0; }
}

/* Tratti dei disegni: la linea principale, i rami, gli eventi. */
.t-linea { stroke: var(--linea); fill: none; stroke-width: 3; stroke-linecap: round; }
.t-ramo { stroke: var(--ramo); fill: none; stroke-width: 3; stroke-linecap: round; }
.t-ramo2 { stroke: var(--grigio); fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0.7; }
.e-linea { fill: var(--linea); }
.e-ramo { fill: var(--ramo); }
.e-ramo2 { fill: var(--grigio); }
.e-alone { fill: var(--carta); }