/* Il sito di Arianna Selmi: crema e inchiostro come il libro, Fraunces per i titoli, Source Serif 4 per il testo. */
@font-face { font-family: "Fraunces"; src: url("caratteri/Fraunces-VF.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("caratteri/Fraunces-Italic-VF.woff") format("woff"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("caratteri/SourceSerif4-VF.woff") format("woff"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("caratteri/SourceSerif4-Italic-VF.woff") format("woff"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --crema: #F4ECDD;
  --crema-scura: #EEE3CF;
  --sabbia: #DAC9B3;
  --inchiostro: #1D2F37;
  --testo: #2A3439;
  --tenue: #5E676B;
  --cuoio: #89572C;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--testo);
  font: 400 1.125rem/1.6 "Source Serif 4", Georgia, serif;
}
main { max-width: 38rem; margin: 0 auto; padding: 3.5rem 1rem 2rem; }

.occhiello {
  margin: 0 0 0.75rem;
  font: 600 0.8rem/1.4 "Source Serif 4", Georgia, serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cuoio);
}
h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  color: var(--inchiostro);
  line-height: 1.15;
}
h1 { margin: 0 0 1.25rem; font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 600; }
h1 em { font-style: italic; font-weight: 500; color: var(--cuoio); }
p { margin: 0 0 1rem; }

.disegno { display: block; width: 100%; max-width: 30rem; height: auto; margin: 2rem auto 0; }
.firma { margin-top: 1.5rem; font: italic 500 1.25rem/1.3 "Fraunces", Georgia, serif; color: var(--inchiostro); }

footer {
  max-width: 38rem; margin: 0 auto; padding: 1.5rem 1rem 2.5rem;
  border-top: 1px solid var(--sabbia);
  font-size: 0.875rem; color: var(--tenue);
}
footer a { color: inherit; }