/* Il foglio a quadretti */
:root {
  --carta: #F4F1EA;
  --inchiostro: #1F1D1A;
  --tenue: #6A6457;
  --margine: clamp(18px, 4vw, 56px);
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}

.pagina {
  padding: var(--margine) var(--margine) 22vh;
}
/* in alto a sinistra la nota e il titolo, accanto la prima foto */
.testa {
  grid-column: 1 / 6;
  display: grid;
  align-content: space-between;
  min-height: 100%;
}
.nota {
  max-width: 36ch;
  margin: 0 0 6vh;
  color: var(--tenue);
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.08rem);
  font-weight: 460;
  line-height: 1.38;
}
.titolo {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2.2rem, 1rem + 3.6vw, 5rem);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

/* ---- la galleria: dodici colonne, tre quadri sfalsati ---- */
.galleria {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 24px);
  row-gap: 10vh;
  align-items: start;
}
.quadro {
  margin: 0;
}
.quadro--campo {
  grid-column: 6 / 13;
}
.quadro--finestra {
  grid-column: 2 / 6;
  margin-top: 4vh;
}
.quadro--brocca {
  grid-column: 6 / 13;
  margin-top: 26vh;
}
/* il riquadro ha le proporzioni dell'immagine; la tela dentro è assoluta, così Safari non la deforma */
.quadro__tela {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #CFC6B6;
  touch-action: pan-y;
  cursor: crosshair;
}
.quadro--finestra .quadro__tela { aspect-ratio: 3 / 4; }
.quadro--brocca .quadro__tela { aspect-ratio: 16 / 9; }
.quadro__tela canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.quadro__dida {
  margin-top: 0.8rem;
  color: var(--tenue);
  font-size: 0.95rem;
  font-weight: 480;
}

/* ---- schermi larghi (computer, Playground): la galleria prende la sua larghezza anche dall'altezza, così i tre quadri
   e il titolo stanno in uno schermo; gli spazi sfalsati restano, più corti ---- */
@media (min-width: 761px) {
  .pagina {
    padding-bottom: var(--margine);
  }
  .galleria {
    max-width: min(100%, calc((100vh - 240px) * 1.1));
    margin-inline: auto;
    row-gap: 5vh;
  }
  .nota {
    margin-bottom: 4vh;
  }
  .titolo {
    font-size: min(clamp(2.2rem, 1rem + 3.6vw, 5rem), 4.6vh);
  }
  .quadro--finestra {
    margin-top: 3vh;
  }
  .quadro--brocca {
    margin-top: 12vh;
  }
}

@media (max-width: 760px) {
  .galleria {
    row-gap: 7vh;
  }
  .testa {
    grid-column: 1 / -1;
  }
  .quadro--campo,
  .quadro--finestra,
  .quadro--brocca {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .quadro--finestra {
    grid-column: 3 / -1;
  }
}

/* ---- telefono basso (la casella dell'anteprima, 341 × 410): tutto in uno schermo, sfalsato come al computer.
   Il titolo accanto al campo, sotto la finestra a sinistra e la brocca a destra, con la nota sotto la brocca ---- */
@media (max-width: 760px) and (max-height: 520px) {
  .pagina {
    padding: 14px var(--margine);
  }
  .galleria {
    column-gap: 10px;
    row-gap: 14px;
  }
  .testa {
    display: contents;
  }
  .titolo {
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: end;
    margin-bottom: 1.4rem;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    line-height: 1.02;
  }
  .quadro--campo {
    grid-column: 6 / 13;
    grid-row: 1;
  }
  .quadro--finestra {
    grid-column: 1 / 6;
    grid-row: 2 / 4;
    margin-top: 0;
  }
  .quadro--brocca {
    grid-column: 6 / 13;
    grid-row: 2;
    margin-top: 0;
  }
  .nota {
    grid-column: 6 / 13;
    grid-row: 3;
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.35;
  }
  .quadro__dida {
    margin-top: 0.3rem;
    font-size: 0.7rem;
  }
}