/* L'orologio a cucù */
:root {
  --carta: #efe2c8;
  --riga: #e6d5b4;
  --inchiostro: #2b1a10;
  --tenue: #6b5442;
  --rosso: #b23a2a;
  --verde: #2f4a3c;
  --avorio: #f4ead2;
  --uccello: #6c7b80;
  --uccello-scuro: #46525a;
  --petto: #eadcc0;
  --becco: #d99a3a;
  --margine: clamp(16px, 4vw, 64px);
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  color: var(--inchiostro);
  /* la carta da parati della bottega: righe larghe e una riga fine */
  background-color: var(--carta);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 46px, var(--riga) 46px 58px, transparent 58px 64px, var(--riga) 64px 65px, transparent 65px 110px);
  overflow: hidden;
}

.pagina {
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--margine);
  padding: var(--margine);
}

/* ------------------------------------------------------------------ i testi */
.testo {
  max-width: 34rem;
  justify-self: end;
  display: grid;
  gap: clamp(14px, 2vh, 22px);
}
.testo p { margin: 0; }
.etichetta,
.corpo,
.aiuto,
.ora {
  overflow: hidden;
}
.etichetta span,
.corpo span,
.aiuto span,
.ora__dentro {
  display: inline-block;
}
.etichetta {
  font-size: 0.82rem;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rosso);
}
.titolo {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 640;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: clamp(2.4rem, 1rem + 3.6vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.riga {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.riga > span {
  display: inline-block;
}
.riga + .riga > span {
  font-style: italic;
  color: var(--rosso);
}
.corpo {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem);
  line-height: 1.5;
  color: var(--tenue);
  max-width: 30em;
}
.ora {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem);
  font-weight: 560;
}
.ora__maschera {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.04em;
}
.ora__parola {
  display: inline-block;
  font-style: italic;
  color: var(--rosso);
}
.aiuto {
  font-size: 0.9rem;
  font-weight: 560;
  color: var(--tenue);
}

/* ------------------------------------------------------------------ l'orologio */
.palco {
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  justify-self: start;
  width: 100%;
}
.orologio {
  height: 100%;
  max-height: 900px;
  aspect-ratio: 444 / 872;
  max-width: 100%;
  /* senza, nella colonna dello schermo alto la misura minima automatica della griglia lo allungava dalla larghezza
     e usciva sotto la pagina: così l'altezza resta quella del palco */
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
}
.orologio:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 6px;
}
.orologio__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* i legni: lo script scrive le quattro tinte dal colore WOOD */
.l { fill: var(--legno); }
.ls { fill: var(--legno-scuro); }
.lb { fill: var(--legno-buio); }
.lc { fill: var(--legno-chiaro); }
.ll { fill: var(--legno-luce); }
.solco { fill: none; stroke: var(--legno-buio); stroke-width: 1.4; opacity: 0.55; }
.venatura { fill: none; stroke: var(--legno-buio); stroke-width: 1; opacity: 0.22; }
.ombra { fill: #3a2010; opacity: 0.3; }
.lancetta { fill: #2a190e; }
.numeri text {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 620;
  font-size: 17px;
  fill: #3b2416;
  text-anchor: middle;
  dominant-baseline: central;
}
.tacca { stroke: #5a4128; stroke-width: 1; }
.tacca--grande { stroke-width: 2.2; }
.u-corpo { fill: var(--uccello); }
.u-scuro { fill: var(--uccello-scuro); }
.u-petto { fill: var(--petto); }
.u-becco { fill: var(--becco); }
.u-occhio { fill: #17110c; }
.u-penna { fill: none; stroke: var(--uccello); stroke-width: 1.2; stroke-linecap: round; }
.zampe { fill: none; stroke: #5b3a1c; stroke-width: 1.8; stroke-linecap: round; }

/* ------------------------------------------------------------------ schermo alto */
@media (max-aspect-ratio: 1/1) {
  .pagina {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(10px, 2vh, 24px);
  }
  .testo {
    justify-self: center;
    text-align: center;
    gap: clamp(6px, 1.2vh, 14px);
    justify-items: center;
  }
  .titolo { font-size: clamp(1.9rem, 1rem + 4.2vw, 3.6rem); }
  .corpo { font-size: 0.95rem; }
  .ora { font-size: 1.2rem; }
  .palco { justify-self: center; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 760px) {
  .corpo { display: none; }
}