/* La luce delle persiane */
:root {
  /* i colori della pagina: di sera li cambia lo script */
  --fondo: #F2EEE4;
  --testo: #2A2A1F;
  --tenue: #625E50;
  --luce: rgba(255, 244, 214, 0.24);
  --ombra: rgba(52, 42, 20, 0.11);
  --margine: clamp(18px, 4vw, 56px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

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

/* ---- la luce: una finestra con le persiane proiettata sulla pagina ---- */
.luce {
  position: fixed;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.luce__finestra {
  position: absolute;
  top: -20%;
  left: -18%;
  width: 92vmax;
  height: 70vmax;
  /* le stecche: righe di luce e d’ombra; in mezzo il montante della finestra, più scuro */
  background:
    linear-gradient(90deg, transparent 47%, var(--ombra) 47%, var(--ombra) 53%, transparent 53%),
    repeating-linear-gradient(180deg, var(--luce) 0 26px, var(--ombra) 26px 44px);
  filter: blur(6px);
  /* i bordi sfumano: una finestra proiettata non ha spigoli netti */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---- la pagina ---- */
.pagina {
  position: relative;
}
.nota {
  position: absolute;
  z-index: 2;
  top: var(--margine);
  left: var(--margine);
  max-width: 34ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.92rem, 0.84rem + 0.3vw, 1.08rem);
  font-weight: 460;
  line-height: 1.38;
}
.apertura {
  display: grid;
  align-content: end;
  min-height: var(--alto);
  padding: var(--margine);
  padding-bottom: calc(var(--margine) * 2);
}
.apertura__titolo {
  max-width: 13ch;
  margin: 0 0 1.2rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(3rem, 1.4rem + 6.4vw, 7.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.98;
}
.apertura__testo {
  max-width: 44ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.5;
}
.case {
  padding: calc(var(--alto) * 0.18) var(--margine);
}
.case__titolo {
  margin: 0 0 2.4rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.4rem);
  font-weight: 400;
}
.case__elenco {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
}
.casa__disegno {
  display: block;
  width: 100%;
  height: auto;
}
.casa__nome {
  margin: 1rem 0 0.35rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 400;
}
.casa__testo {
  margin: 0;
  color: var(--tenue);
  line-height: 1.45;
}
.frase {
  display: grid;
  place-items: center;
  min-height: var(--alto);
  padding: var(--margine);
}
.frase__testo {
  max-width: 22ch;
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.6rem);
  line-height: 1.08;
  text-align: center;
}
.contatti {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2rem;
  min-height: calc(var(--alto) * 1.2);
  padding: var(--margine);
  text-align: center;
}
.contatti__titolo {
  max-width: 14ch;
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 5.6rem);
  font-weight: 400;
  line-height: 1;
}
.bottone {
  display: inline-block;
  padding: 0.85em 1.6em 0.9em;
  border: 1.5px solid var(--testo);
  border-radius: 999px;
  color: var(--testo);
  font-weight: 560;
  text-decoration: none;
  transition: background-color 250ms ease, color 250ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bottone:hover,
.bottone:focus-visible {
  background: var(--testo);
  color: var(--fondo);
  outline: none;
}
.bottone:active {
  transform: scale(0.97);
}

@media (max-width: 760px) {
  .case__elenco {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
  /* sul telefono la finestra è centrata sullo schermo alto, e resta grande */
  .luce__finestra {
    top: calc(36% - 32vmax);
    left: calc(45% - 55vmax);
    width: 110vmax;
    height: 64vmax;
  }
}