@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La pagina ha un'identita chiara: niente inversione automatica dei
     controlli nativi quando il sistema e in tema scuro. */
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--panna);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  text-wrap: balance;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 var(--s4);
}

h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.4rem); }

p { margin: 0 0 var(--s4); text-wrap: pretty; }

/* La testata e sticky: senza questo, cliccando un'ancora il titolo
   della sezione finisce nascosto sotto la barra. */
:target,
section[id] { scroll-margin-top: 5.5rem; }

a { color: var(--bruno); text-decoration-thickness: 1px; text-underline-offset: .2em; }

img { max-width: 100%; height: auto; display: block; }

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

/* Fuori schermo con transform, non con left:-9999px: quello allarga
   l'area di scorrimento e crea overflow orizzontale. */
.salta-al-contenuto {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  transform: translateY(-300%);
  background: var(--scuro);
  color: var(--testo-chiaro);
  padding: var(--s3) var(--s4);
  z-index: 100;
}
.salta-al-contenuto:focus { transform: translateY(0); }

.solo-lettori-schermo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Segnaposto per i dati non ancora forniti.
   Devono dare fastidio: e il loro scopo. Il test @pubblicazione
   fallisce finche ne resta anche uno. */
.dato-mancante {
  background: #FFE58A;
  color: #4A3200;
  padding: 0 .35em;
  border-radius: var(--raggio);
  font-weight: 600;
  white-space: nowrap;
}