:root {
  --cielo-alto: #f6e4bf;      /* the sky high up, warm and pale */
  --cielo: #f0cf92;           /* the ochre sky of the late afternoon */
  --cielo-basso: #f3d9a8;     /* the haze down by the far bank */
  --sole: #ffe7a3;            /* the low sun and its glow on the water */
  --collina-lontana: #c4c79a; /* the farthest hills in the haze */
  --collina-chiara: #9fb98a;  /* the hills in the middle */
  --collina: #6f9a6a;         /* the nearest hills */
  --albero: #4f7f55;          /* the leaves on the far bank */
  --albero-scuro: #355e43;    /* the shade in the leaves */
  --terra: #8a5a33;           /* the earth at the top of the near banks */
  --terra-media: #6e4628;     /* the earth lower down */
  --terra-scura: #4a2f1c;     /* the banks under the water */
  --erba: #6f9b45;            /* the grass on the banks */
  --acqua-chiara: #6cb8a3;    /* the water right under the surface */
  --acqua: #3c9a8c;           /* the water just below */
  --acqua-media: #1f6f78;     /* the water in the middle */
  --acqua-fonda: #0f3550;     /* the deep water near the bed */
  --schiuma: #f4fbf3;         /* the light on the surface, the splashes and the rings */
  --sabbia: #b99a64;          /* the sand of the riverbed */
  --sabbia-scura: #6a5536;    /* the shade on the riverbed */
  --canna: #7a9a3c;           /* the reeds */
  --tifa: #6b3f22;            /* the brown heads of the cattails */
  --ninfea: #3f7f45;          /* the lily pads */
  --ninfea-chiara: #7fb35d;   /* the light on the lily pads */
  --fiore: #f08aa6;           /* the water lily flowers */
  --pelo: #7a4a2b;            /* the otter's coat */
  --pelo-scuro: #4a2a16;      /* the otter's back and feet */
  --pelo-chiaro: #d6aa78;     /* the otter's belly and muzzle */
  --legno: #8b6a45;           /* the boardwalk */
  --carta: #fff7e8;           /* the text */
  --inchiostro: #23312a;      /* the text on the button */
}

* { box-sizing: border-box; }

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

body {
  background: var(--acqua-fonda);
  color: var(--carta);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

p, h1 { margin: 0; }

.riserva {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--cielo);
  touch-action: pan-y;
}

.scena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------- the words */
.testata, .testo { color: #2c2416; }

.testata {
  position: absolute;
  z-index: 3;
  top: clamp(10px, 3vh, 26px);
  left: clamp(16px, 4.5vw, 56px);
  right: clamp(16px, 4.5vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 650;
  font-size: clamp(16px, 2.6vh, 22px);
}

.marchio svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: var(--acqua-media);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sotto {
  text-shadow: 0 0 6px var(--cielo-alto), 0 0 2px var(--cielo-alto);
  font-size: clamp(10px, 1.5vh, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
  text-align: right;
}

.testo {
  position: absolute;
  z-index: 3;
  top: clamp(42px, 11vh, 108px);
  left: clamp(16px, 4.5vw, 56px);
  max-width: min(460px, 44vw);
}

.titolo {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 650;
  font-variation-settings: 'opsz' 144, 'SOFT' 60;
  font-size: clamp(24px, min(5vw, 7.6vh), 66px);
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.titolo em {
  font-style: italic;
  font-weight: 430;
  color: var(--acqua-media);
}

.riga {
  margin-top: clamp(6px, 1.6vh, 16px);
  font-size: clamp(12px, 1.9vh, 16px);
  line-height: 1.4;
  opacity: .82;
  max-width: 34ch;
}

.azioni { margin-top: clamp(8px, 2.2vh, 22px); }

.pillola {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: clamp(32px, 5.4vh, 46px);
  padding: 0 clamp(16px, 2.4vh, 22px);
  border-radius: 999px;
  color: var(--carta);
  font-weight: 650;
  font-size: clamp(13px, 1.9vh, 15px);
  font-variation-settings: 'wdth' 90;
  text-decoration: none;
  isolation: isolate;
  transition: font-variation-settings .45s cubic-bezier(.3, 1.6, .5, 1);
}

.pillola::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--acqua-media);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 6px 18px rgba(18, 61, 86, .28);
  transition: transform .5s cubic-bezier(.3, 1.8, .5, 1);
}

@media (hover: hover) {
  .pillola:hover { font-variation-settings: 'wdth' 112; }
  .pillola:hover::before { transform: scale(1.06, 1.12); }
}

.pillola:focus-visible {
  outline: 2px solid var(--acqua-fonda);
  outline-offset: 3px;
}

.aiuto {
  position: absolute;
  z-index: 3;
  left: clamp(16px, 4.5vw, 56px);
  bottom: clamp(10px, 2.6vh, 24px);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(10px, 1.5vh, 12px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--carta);
  opacity: .8;
}

.aiuto svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* the entrance: the words come in once the script is ready */
.js .testata, .js .testo > *, .js .aiuto { opacity: 0; }

/* narrow screens: the words go across the top, small, and the river fills the rest */
@media (max-width: 640px) {
  .testo {
    max-width: none;
    right: clamp(16px, 4.5vw, 56px);
    top: clamp(38px, 10vh, 70px);
  }
  .titolo { font-size: clamp(22px, min(7.4vw, 6.6vh), 40px); }
  .riga { font-size: clamp(11px, min(3.4vw, 3vh), 14px); max-width: 30ch; }
  .sotto { display: none; }
}

@media (max-height: 460px) {
  .riga { display: none; }
}