/* ============================================================
   Versione 2 · La lettera si piega e si dispiega
   Un foglio unico piegato in tre: scorrendo si apre in 3D.
   (busta, sezioni in fondo e colori: assets/lettera.css)
   ============================================================ */
.fold { position: relative; }
.fold__stage { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; }
/* l'ombra è calcolata sul foglio così com'è piegato in quel momento */
.sheetwrap {
  --sw: min(560px, 92vw);
  --ph: min(31.5svh, calc(var(--sw) * .84));
  position: relative; width: var(--sw); height: calc(var(--ph) * 3);
  perspective: 1800px; perspective-origin: 50% 32%;
  filter: drop-shadow(0 26px 22px rgba(60, 40, 10, .3));
}
.sheet { position: absolute; inset: 0; transform-style: preserve-3d; }
.pn { position: absolute; left: 0; width: 100%; height: var(--ph); transform-origin: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pn1 { top: 0; }
.pn2 { top: calc(var(--ph) - 1px); height: calc(var(--ph) + 1px); }
.pn3 { top: calc(var(--ph) * 2 - 1px); height: calc(var(--ph) + 1px); }
.motion .pn3 { visibility: hidden; }
.pn .face { position: absolute; inset: 0; container-type: inline-size; background: linear-gradient(180deg, #FFFCF5, #FBF6EA); }

/* cornice dorata solo lungo il bordo esterno del foglio, e le pieghe */
.face::after { content: ""; position: absolute; pointer-events: none; border: 0 solid rgba(184, 151, 90, .5); }
.pn1 .face::after { inset: 2.6cqw 2.6cqw 0; border-width: 1px 1px 0; }
.pn2 .face::after { inset: 0 2.6cqw; border-width: 0 1px; }
.pn3 .face::after { inset: 0 2.6cqw 2.6cqw; border-width: 0 1px 1px; }
.pn2 .face::before, .pn3 .face::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.4cqw; pointer-events: none;
  background: linear-gradient(180deg, rgba(110, 85, 45, .22), rgba(110, 85, 45, 0));
  border-top: 1px solid rgba(110, 85, 45, .28);
}
.shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(50, 34, 10, .72), rgba(50, 34, 10, .12)); }

/* secondo foglio: il giorno */
.when { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.5cqw; padding: 0 7cqw; text-align: center; }
.when .eyebrow { font: 500 max(8.5px, 2.1cqw)/1.4 var(--sc); letter-spacing: .3em; text-transform: uppercase; color: var(--green); padding-left: .3em; }
.when__date {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4cqw; width: 82cqw;
  font: 500 max(8.5px, 2.2cqw)/1.3 var(--sc); letter-spacing: .26em; text-transform: uppercase; color: var(--green);
}
.when__date > :first-child, .when__date > :last-child { padding: 1cqw 0; border-block: 1px solid rgba(184, 151, 90, .65); }
.when__date b { font: 500 11.5cqw/.9 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.when__date i { font-family: var(--serif); text-transform: none; letter-spacing: .04em; font-size: 1.15em; }
.when__time { font: 500 3.9cqw/1.2 var(--serif); }
.when__time small { display: block; font: italic 500 2.9cqw/1.3 var(--serif); color: var(--soft); }
.when .rule { display: block; width: 12cqw; height: 1px; background: var(--gold); margin: .6cqw 0; }
.when__place b { display: block; font: 500 3.9cqw/1.2 var(--serif); }
.when__place span { font-size: max(11px, 2.7cqw); color: var(--soft); }

/* terzo foglio: la vostra foto e l'invito a rispondere */
.closing { position: absolute; inset: 0; display: grid; grid-template-columns: 40cqw 1fr; gap: 6cqw; align-items: center; padding: 0 8cqw 2.6cqw; }
.print { margin: 0; padding: 1.6cqw 1.6cqw 2.2cqw; background: #fff; transform: rotate(-3deg); box-shadow: 0 2.4cqw 3.6cqw -2cqw rgba(60, 40, 10, .6); }
.print img { width: 100%; aspect-ratio: 1 / .9; object-fit: cover; object-position: 50% 30%; }
.print figcaption { margin-top: 1cqw; font: 400 max(15px, 4.4cqw)/1.1 var(--script); text-align: center; color: var(--ink); }
.closing__txt { display: grid; justify-items: start; gap: 3cqw; }
.quote { font: 500 max(15px, 4.8cqw)/1.25 var(--serif); }
.closing .btn { height: max(40px, 9cqw); padding: 0 .55em 0 1.4em; gap: 1em; font-size: max(10px, 2.3cqw); }
.closing .btn__ico { width: max(28px, 6.4cqw); height: max(28px, 6.4cqw); }
.closing .btn__ico svg { width: 55%; height: 55%; }

.fold__cue {
  position: absolute; left: 0; right: 0; bottom: max(22px, 4.5svh); margin: 0; text-align: center; pointer-events: none;
  font: 500 .74rem/1 var(--sc); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); padding-left: .3em;
}
.fold__cue::after { content: ""; display: block; width: 1px; height: 38px; margin: 12px auto 0; background: linear-gradient(var(--gold), rgba(184, 151, 90, 0)); transform-origin: 50% 0; animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* senza animazioni: i tre fogli restano uno sotto l'altro */
html:not(.motion) .fold__stage { height: auto; padding: 40px 0; }
html:not(.motion) .sheetwrap { height: auto; perspective: none; }
html:not(.motion) .sheet { position: relative; height: auto; }
html:not(.motion) .pn { position: relative; top: auto; height: var(--ph); }
html:not(.motion) .fold__cue { display: none; }
html:not(.motion) .shade { display: none; }

/* save the date */
.std-note { margin: -.2em 0 .9em; font: italic 400 clamp(.95rem, 1.6vw, 1.1rem)/1.4 "Cormorant Garamond", serif; color: #6B6152; }
.sec--foot .foot__note { max-width: 26em; margin: 1.1em auto 0; font: italic 400 1.15rem/1.5 "Cormorant Garamond", serif; color: rgba(255, 248, 234, .78); }

/* telefono: busta più larga, in orizzontale come una busta vera (prima era stretta e alta) */
@media (max-width: 700px) { .env { width: min(92vw, 440px, calc((100svh - 250px) * 1.38)); aspect-ratio: 4 / 3; } }

/* il luogo: una sola foto della villa, larga come nella versione B */
.villa__frame { margin: 26px calc(16px - clamp(26px, 7vw, 76px)) 30px; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 10; box-shadow: 0 40px 70px -40px rgba(60, 40, 10, .55); }
.villa__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; }
@media (max-width: 767px) { .villa__frame { aspect-ratio: 4 / 5; } }

/* testi della lettera un po' più grandi */
.front .mono { font-size: 5cqw; }
.front .eyebrow { font-size: max(9.5px, 2.6cqw); }
.front .names { font-size: 11.6cqw; }
.front .datefine { font-size: 4.5cqw; }
.when { gap: 2.2cqw; }
.when__date { font-size: max(9.5px, 2.6cqw); }
.when__date b { font-size: 13.5cqw; }
.when__time, .when__place b { font-size: 4.8cqw; }
.when__place span { font-size: max(11.5px, 3.2cqw); }
.quote { font-size: max(16px, 5.8cqw); }
.std-note { font-size: max(13px, 3.9cqw); }
.print figcaption { font-size: max(15px, 4.8cqw); }
.closing .btn { height: max(42px, 10cqw); font-size: max(10.5px, 2.8cqw); }