/* Cormorant Garamond latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --pearl:#F4F3EF;
  --green:#173D34;
  --green-dark:#0F2C26;
  --bronze:#A77B4F;
  --grey:#56635D;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--pearl);
  color:var(--green);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- pagina principale ---------- */

.stage{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(30px,5vh,54px) 24px clamp(18px,3vh,30px);
}
.inner{width:100%;max-width:560px}

.logo{
  width:clamp(215px,54vw,280px);
  margin:0 auto;
}

.rule{
  width:60px;height:1px;border:0;
  background:var(--bronze);
  margin:clamp(24px,3.8vh,34px) auto clamp(22px,3.4vh,30px);
}

h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.72rem,5.2vw,2.55rem);
  line-height:1.3;
  letter-spacing:.004em;
  color:var(--green);
  margin:0;
  text-wrap:balance;
}

.secondary{
  font-size:.97rem;
  line-height:1.75;
  color:var(--grey);
  max-width:46ch;
  margin:clamp(15px,2.1vh,21px) auto 0;
  text-wrap:balance;
}

.invitation{
  font-size:1rem;
  font-weight:400;
  color:var(--green);
  max-width:34ch;
  text-wrap:balance;
  margin:clamp(27px,4vh,38px) auto clamp(13px,1.9vh,18px);
}

/* ---------- modulo ---------- */

.form{max-width:440px;margin:0 auto}
.row{display:flex;gap:10px;align-items:stretch}
@media (max-width:520px){.row{flex-direction:column}}

.field{
  flex:1 1 auto;min-width:0;
  font-family:var(--sans);font-weight:300;font-size:15px;
  color:var(--green);
  background:transparent;
  border:1px solid var(--bronze);
  border-radius:0;
  padding:14px 16px;
  transition:border-color .25s ease;
}
.field::placeholder{color:var(--grey);opacity:.75}
.field:focus{outline:none;border-color:var(--green)}
.field:focus-visible{outline:2px solid var(--green);outline-offset:2px}

.btn{
  flex:0 0 auto;
  font-family:var(--sans);font-weight:400;font-size:14px;
  letter-spacing:.06em;
  color:var(--pearl);
  background:var(--green);
  border:1px solid var(--green);
  border-radius:0;
  padding:14px 28px;
  cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--green-dark);border-color:var(--green-dark)}
.btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:default}

.consent{
  display:flex;gap:9px;align-items:flex-start;
  text-align:left;
  font-size:13px;line-height:1.55;color:var(--grey);
  text-wrap:pretty;
  margin:16px auto 0;max-width:440px;
}
.consent input{
  flex:0 0 auto;margin:3px 0 0;
  width:14px;height:14px;
  accent-color:var(--green);
}
.consent a{color:var(--grey);text-underline-offset:2px}
.consent a:hover{color:var(--green)}

.feedback{
  font-size:14px;line-height:1.6;
  margin:14px auto 0;max-width:440px;
}
.feedback:empty{margin:0}
.feedback.is-error{color:#A34C3F}
.feedback.is-ok{color:var(--green)}

.contact{
  font-size:13px;color:var(--grey);
  text-wrap:balance;
  margin:clamp(20px,3vh,28px) auto 0;
}
.contact a{color:var(--grey);text-underline-offset:2px}
.contact a:hover{color:var(--green)}

.done .form,.done .consent{display:none}

/* ---------- piede ---------- */

footer{
  flex:0 0 auto;
  text-align:center;
  padding:clamp(16px,2.6vh,26px) 24px clamp(20px,3vh,28px);
  font-size:12.5px;line-height:2;color:var(--grey);
}
footer a{color:var(--grey);text-decoration:none;text-underline-offset:2px;transition:color .2s ease}
footer a:hover{color:var(--bronze);text-decoration:underline}
footer .sep{opacity:.45;padding:0 7px}
footer .lang [aria-current="true"]{color:var(--bronze)}
footer .legalline{font-size:11.5px;opacity:.7;margin-top:6px}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- pagine di testo ---------- */

.doc{
  flex:1 0 auto;
  max-width:680px;margin:0 auto;
  padding:clamp(48px,9vh,90px) 24px clamp(30px,5vh,50px);
  text-align:left;
}
.doc .logo{width:150px;margin:0 0 clamp(34px,6vh,56px)}
.doc h1{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:8px}
.doc h2{
  font-family:var(--serif);font-weight:400;
  font-size:1.22rem;line-height:1.4;
  margin:2.2em 0 .5em;color:var(--green);
}
.doc p{font-size:15.5px;line-height:1.8;color:var(--grey);margin:0 0 1.1em}
.doc strong{font-weight:500;color:var(--green)}
.doc a{color:var(--green);text-underline-offset:2px}
.doc .small{font-size:13px;opacity:.8}
.doc .draft{
  display:inline-block;
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bronze);border:1px solid var(--bronze);
  padding:5px 11px;margin-bottom:26px;
}
.doc .back{display:inline-block;margin-top:28px;font-size:14px;color:var(--green)}

/* ---------- sequenza di ingresso ---------- */

.anim .logo,.anim .cj{opacity:0}
.anim .logo{animation:cjLogo .9s ease-out forwards}
.anim .cj-1{animation:cjUp .7s ease-out 1.75s forwards}
.anim .cj-2{animation:cjUp .7s ease-out 1.90s forwards}
.anim .cj-3{animation:cjUp .7s ease-out 2.05s forwards}
.anim .cj-4{animation:cjUp .7s ease-out 2.20s forwards}
.anim .cj-5{animation:cjUp .7s ease-out 2.35s forwards}
.anim .cj-6{animation:cjUp .7s ease-out 2.50s forwards}

@keyframes cjLogo{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
@keyframes cjUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .anim .logo,.anim .cj{opacity:1;animation:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* schermi bassi: il blocco si stringe invece di far scorrere la pagina */
@media (min-width:600px) and (max-height:860px){
  .logo{width:clamp(188px,19.5vh,238px)}
  .rule{margin:clamp(18px,2.8vh,26px) auto clamp(16px,2.6vh,24px)}
  h1{font-size:clamp(1.55rem,3.1vh,2.1rem)}
  .invitation{margin-top:clamp(20px,3vh,28px)}
  .secondary{font-size:.93rem}
}