/* Lo sfondo a moiré di cerchi: una carta bianco caldo e, su un canvas dietro a tutto, due famiglie di cerchi
   concentrici a filo d'inchiostro. Dove si sovrappongono nascono le frange del moiré, che si spostano quando un centro
   si muove. Un solo accento vermiglio, sulla parola che chiede di guardare due volte. Sopra, il titolo di un ottico
   inventato (Loupe) in Newsreader, che ha gli assi della grandezza ottica e del peso; le scritte piccole e la pillola
   in Archivo, che ha l'asse della larghezza. */
:root {
  --carta: #f3f0e8;                       /* il fondo */
  --inchiostro: #161513;                  /* il titolo e la pillola */
  --tenue: #7b766c;                       /* le scritte piccole */
  --cerchio: rgba(22, 21, 19, 0.5);       /* i cerchi */
  --accento: #e2482d;                     /* la parola in corsivo */
  --elastico: cubic-bezier(0.34, 1.9, 0.45, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pagina {
  --margine: clamp(16px, 4.4vw, 60px);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100svh;
  min-height: 460px;
  padding: clamp(18px, 3vw, 34px) var(--margine);
  overflow: hidden;
  isolation: isolate;
}

.fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 120px);
}

/* ---------------------------------------------------------------- la testata */
.testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.testa p {
  margin: 0;
}

.marchio {
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: 23px;
  font-weight: 560;
  font-style: italic;
  letter-spacing: -0.01em;
}

.testa__nota {
  color: var(--tenue);
  font-size: 14px;
  font-weight: 480;
}

/* ---------------------------------------------------------------- il titolo */
.eroe {
  display: grid;
  place-items: center;
  padding-bottom: 5vh;
}

.blocco {
  display: grid;
  justify-items: center;
  text-align: center;
}

.occhiello {
  margin: 0 0 18px;
  color: var(--tenue);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.titolo {
  margin: 0;
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: clamp(2.4rem, 1rem + 4.4vw, 5.2rem);
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  letter-spacing: -0.025em;
  line-height: 1;
}

.riga {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.12em 0.14em;
  margin: -0.04em -0.12em -0.14em;
}

.riga__dentro {
  display: block;
}

.accento {
  color: var(--accento);
  font-style: italic;
}

.azione {
  margin-top: 34px;
}

/* ---------------------------------------------------------------- la pillola elastica */
.pillola {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  color: var(--carta);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.pillola::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--inchiostro);
  transition: inset 0.6s var(--elastico);
}

.pillola__scritta {
  font-stretch: 100%;
  text-align: center;
  transition: font-stretch 0.6s var(--elastico);
}

.pillola__scritta::before {
  content: attr(data-testo);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-stretch: 125%;
}

.pillola__freccia {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s var(--elastico);
}

@media (hover: hover) and (pointer: fine) {
  .pillola:hover::before {
    inset: -2px -7px;
  }

  .pillola:hover .pillola__scritta {
    font-stretch: 125%;
  }

  .pillola:hover .pillola__freccia {
    transform: translateX(3px);
  }
}

.pillola:active::before {
  inset: 2px 3px;
}

.pillola:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  .titolo {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }
}