/* The sticker-bombed page: the page of a made-up studio on a warm red, with one canvas above it where the stickers
   fly in and out. The canvas only catches the pointer while the page is covered, so the first tap takes the stickers
   off instead of following a link. */
:root {
  --fondo: #ff5a36;         /* the page */
  --inchiostro: #1a1310;    /* the words */
  --carta: #fff7ea;         /* the light parts */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

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

.pagina {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: clamp(16px, 2.4vw, 32px);
}

.testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(13px, 1.1vw, 16px);
}

.testa__voci {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
}

.testa__voci a {
  color: inherit;
  text-decoration: none;
}

.testa__voci a:focus-visible,
.attacca:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 4px;
}

.corpo {
  align-self: center;
  padding-block: 24px;
}

.corpo__etichetta,
.corpo__nota {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(12px, 1vw, 15px);
}

.corpo__titolo {
  margin: 14px 0 18px;
  font-size: clamp(44px, 8.4vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-weight: 850;
  max-width: 8.4em;
  text-wrap: balance;
}

.piede {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: clamp(12px, 1vw, 15px);
  text-transform: uppercase;
}

.attacca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--inchiostro);
  color: var(--carta);
  font: inherit;
  cursor: pointer;
}

/* the ring fills while the page is left alone: it shows how long before the stickers come */
.attacca__anello {
  width: 22px;
  height: 22px;
  transform: rotate(-90deg);
}

.attacca__anello circle {
  fill: none;
  stroke: var(--carta);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 94.25;
  stroke-dashoffset: 94.25;
}

.adesivi {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.adesivi[data-coperta='true'] {
  pointer-events: auto;
  cursor: pointer;
}

.adesivi canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}