/* ==========================================================================
   Matrimonio Antonio & Roberta — foglio di stile del sito
   Valori identici al prototipo di design (nessuna reinterpretazione).
   Palette:  rosso #8A1420 · rosso scuro #6B0F19 · testo #2E2B28
             secondario #6E6862 · terziario #A08D84 · label #8A837C
             rosa polvere #C8A9A4 · fondo #FCFBF9 · fondo alt #F8F5F2
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
/* Baseline dichiarata esplicitamente: i temi a blocchi impostano sul body
   una propria dimensione del testo e un proprio interlinea, che si
   propagherebbero a ogni elemento senza valore esplicito. Questi sono i
   valori su cui e' costruito il design. */
body.ar-body { margin: 0; background: #FCFBF9; color: #2E2B28; font-size: 16px; line-height: normal; -webkit-font-smoothing: antialiased; }
.ar-site { font-size: 16px; line-height: normal; }

/* I temi a blocchi impostano su tutti i titoli line-height, letter-spacing e
   font-weight propri, tramite regole di solo elemento (h1, h2, h3...). Qui si
   riporta la baseline su cui e' costruito il design.
   :where() sui titoli tiene la specificita' a (0,1,0): abbastanza per vincere
   sulle regole di elemento, non abbastanza per scavalcare le classi dei
   componenti, che seguono piu' avanti e sovrascrivono cio' che serve. */
.ar-site :where(h1, h2, h3, h4, h5, h6) {
  line-height: normal; letter-spacing: normal; font-weight: 400; margin: 0;
}
.ar-site :where(p, ul, ol, figure) { margin: 0; }
.ar-site *, .ar-site *::before, .ar-site *::after { box-sizing: border-box; }
/* :where() azzera la specificita' dello scope: il reset resta confinato a
   .ar-site (per non toccare l'interfaccia iniettata dai plugin) ma non
   sovrasta le classi dei componenti, come invece accadeva scrivendo
   ".ar-site button". Senza questo, "font: inherit" vinceva su .ar-btn e i
   pulsanti perdevano Cormorant Garamond e le textarea il loro line-height. */
:where(.ar-site) a { color: #8A1420; text-decoration: none; }
:where(.ar-site) a:hover { color: #6B0F19; }
:where(.ar-site) input, :where(.ar-site) select,
:where(.ar-site) textarea, :where(.ar-site) button { font: inherit; }
.ar-site ::selection { background: #F3E1DF; }
.ar-site :focus-visible { outline: 2px solid #8A1420; outline-offset: 2px; }
.ar-site summary::-webkit-details-marker { display: none; }

@keyframes ar-fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ar-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

.ar-site { position: relative; font-family: 'Lora', Georgia, serif; overflow-x: hidden; }
.ar-visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Salto al contenuto: fuori schermo finche' non riceve il focus da tastiera.
   La pagina e' lunga, e senza questo chi naviga con la tastiera deve
   attraversare tutta la navigazione a ogni giro. */
.ar-skip {
  position: fixed; top: -100px; left: 12px; z-index: 30;
  background: #FCFBF9; color: #8A1420; border: 1px solid #8A1420; border-radius: 4px;
  padding: 12px 20px; font-family: 'Cormorant Garamond', serif;
  font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: top .2s cubic-bezier(.2,.7,.2,1);
}
.ar-skip:focus { top: 12px; }

/* --- Decorazioni fisse: neve e fasce botaniche --------------------------- */
.ar-snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; opacity: 0.55; }

.ar-rail {
  position: fixed; top: 0; bottom: 0;
  width: clamp(96px, 11vw, 190px);
  background-size: cover; background-repeat: no-repeat;
  opacity: 0.9; pointer-events: none; z-index: 3;
}
.ar-rail--sx { left: 0; background-position: left center; }
.ar-rail--dx { right: 0; background-position: right center; }

/* Le fasce sono nascoste sotto i 760px: la stessa soglia gestita dal
   JavaScript, qui pero' dichiarata anche in CSS. Non e' una ridondanza.
   Nascondendole solo via JS il browser ha gia' scaricato le due immagini
   (mezzo megabyte) prima di sapere che non servono, e la maggior parte
   degli invitati apre il sito da telefono, inquadrando il QR sull'invito.
   Con display:none dichiarato qui, gli sfondi non vengono mai richiesti. */
@media (max-width: 759.98px) {
  .ar-rail { display: none; }
}

/* --- Navigazione --------------------------------------------------------- */
.ar-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 28px;
  background: rgba(252, 251, 249, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(138, 20, 32, 0.10);
}
.ar-nav__logo { font-family: 'Cormorant Garamond', serif; font-size: 22px; letter-spacing: 0.22em; color: #8A1420; font-weight: 500; }
.ar-nav__links {
  display: flex; align-items: center; gap: 26px;
  font-family: 'Cormorant Garamond', serif; font-size: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.ar-nav__links a { color: #4A443F; padding: 4px 0; border-bottom: 1px solid transparent; }
.ar-nav__links a:hover { color: #8A1420; border-bottom-color: #8A1420; }
/* Selettore volutamente piu' specifico di ".ar-nav__links a": altrimenti
   quella regola sovrascriverebbe padding e bordo del pulsante, che finirebbe
   schiacciato contro il margine destro. */
.ar-nav__links a.ar-nav__cta {
  color: #8A1420; border: 1px solid #8A1420; border-radius: 4px;
  padding: 0 20px; height: 38px; display: inline-flex;
  align-items: center; justify-content: center; line-height: 1;
}
.ar-nav__links a.ar-nav__cta:hover { background: #8A1420; color: #FCFBF9; border-color: #8A1420; }
.ar-nav__toggle {
  display: none; background: none; border: 1px solid rgba(138, 20, 32, 0.3);
  border-radius: 4px; color: #8A1420; padding: 8px 14px;
  font-family: 'Cormorant Garamond', serif; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: 14px; cursor: pointer;
}

/* --- Pulsanti (sempre outline, mai pieni a riposo) ----------------------- */
.ar-btn {
  border: 1px solid #8A1420; background: transparent; color: #8A1420;
  border-radius: 4px; font-family: 'Cormorant Garamond', serif;
  text-transform: uppercase; cursor: pointer; display: inline-block;
  transition: background .3s, color .3s;
}
.ar-btn:hover { background: #8A1420; color: #FCFBF9; }
.ar-btn--cal    { padding: 13px 30px; font-size: 16px; letter-spacing: 0.18em; }
.ar-btn--iban   { padding: 12px 28px; font-size: 16px; letter-spacing: 0.18em; }
.ar-btn--submit { padding: 15px 40px; font-size: 18px; letter-spacing: 0.20em; }
.ar-btn--soft   { border-color: rgba(138, 20, 32, 0.30); padding: 10px 20px; font-size: 15px; letter-spacing: 0.14em; transition: background .25s, color .25s; }
.ar-btn--soft:hover { border-color: #8A1420; }
.ar-btn--map    { padding: 12px 20px; font-size: 16px; letter-spacing: 0.14em; transition: background .25s, color .25s; }
.ar-btn--map-soft { border-color: rgba(138, 20, 32, 0.35); }
.ar-btn--map-soft:hover { border-color: #8A1420; }
.ar-btn--wa     { border-color: rgba(138, 20, 32, 0.30); padding: 10px 22px; font-size: 15px; letter-spacing: 0.14em; transition: background .25s, color .25s, border-color .25s; }
.ar-btn--wa:hover { border-color: #8A1420; }

/* --- Hero ---------------------------------------------------------------- */
.ar-hero {
  position: relative; z-index: 2; min-height: 100vh;
  display: grid; place-items: center;
  padding: 120px 24px 72px; text-align: center;
}
.ar-hero__inner { position: relative; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.ar-hero__kicker { margin: 0 0 22px; font-family: 'Cormorant Garamond', serif; font-size: 23px; font-style: italic; color: #8A1420; letter-spacing: 0.02em; }
.ar-hero__crown { width: min(58vw, 420px); height: auto; animation: ar-breathe 9s ease-in-out infinite; }
.ar-hero__names { margin: 14px 0 0; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(34px, 6.4vw, 66px); letter-spacing: 0.06em; color: #8A1420; line-height: 1.1; }
.ar-hero__rule { width: 64px; height: 1px; background: rgba(138, 20, 32, 0.35); margin: 30px 0; }
.ar-hero__date { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 4.6vw, 48px); color: #6B0F19; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.ar-hero__where { margin: 8px 0 0; font-family: 'Cormorant Garamond', serif; font-size: 21px; letter-spacing: 0.2em; color: #7A736C; text-transform: uppercase; }

/* --- Countdown ----------------------------------------------------------- */
.ar-countdown {
  margin-top: 58px; padding: 30px clamp(22px, 5vw, 54px) 26px;
  border: 1px solid rgba(138, 20, 32, 0.18); border-radius: 4px;
  background: rgba(248, 245, 242, 0.93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 18px rgba(46, 43, 40, 0.04);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ar-countdown__label { margin: 0 0 18px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #A08D84; }
.ar-countdown__grid { display: flex; gap: clamp(14px, 4vw, 40px); align-items: flex-start; }
.ar-countdown__cell { display: flex; flex-direction: column; align-items: center; min-width: 62px; }
.ar-countdown__num { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 5vw, 46px); color: #8A1420; line-height: 1; font-variant-numeric: tabular-nums; }
.ar-countdown__unit { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #8A837C; margin-top: 10px; }
.ar-countdown__sep { width: 100%; height: 1px; background: rgba(138, 20, 32, 0.14); margin: 28px 0 22px; }
.ar-countdown__note { margin: 14px 0 0; font-size: 12px; color: #A08D84; font-style: italic; }
.ar-cal-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; animation: ar-fade-in .35s ease both; }
.ar-cal-options[hidden] { display: none; }

/* --- Sezioni e fregi ----------------------------------------------------- */
.ar-section { position: relative; z-index: 2; padding: 96px 24px; }
.ar-section--w900  { max-width: 900px;  margin: 0 auto; }
.ar-section--w1080 { max-width: 1080px; margin: 0 auto; }
.ar-section--alt   { background: #F2ECE5; border-top: 1px solid rgba(138, 20, 32, 0.10); border-bottom: 1px solid rgba(138, 20, 32, 0.10); }
.ar-section--blush { background: rgba(243, 225, 223, 0.30); border-top: 1px solid rgba(138, 20, 32, 0.10); border-bottom: 1px solid rgba(138, 20, 32, 0.10); }
.ar-section--no-bottom-border { border-bottom: 0; }

.ar-wrap { margin: 0 auto; }
.ar-wrap--640  { max-width: 640px; }
.ar-wrap--760  { max-width: 760px; }
.ar-wrap--1080 { max-width: 1080px; }
.ar-wrap--center { text-align: center; }

.ar-fregio { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 26px; }
.ar-fregio__line { width: 44px; height: 1px; background: rgba(138, 20, 32, 0.22); }
.ar-fregio__diamond { width: 6px; height: 6px; background: #C8A9A4; transform: rotate(45deg); }

.ar-kicker { margin: 0 0 10px; text-align: center; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #A08D84; }
.ar-h2 { margin: 0 0 8px; text-align: center; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(30px, 4.4vw, 46px); color: #6B0F19; letter-spacing: 0.03em; }
.ar-h2--mb14 { margin-bottom: 14px; }
.ar-h2--mb18 { margin-bottom: 18px; }
.ar-h2--mb24 { margin-bottom: 24px; }
.ar-h2--mb52 { margin-bottom: 52px; }
.ar-h2--mb56 { margin-bottom: 56px; }

.ar-intro { margin: 0 auto 56px; max-width: 520px; text-align: center; color: #6E6862; font-size: 16px; line-height: 1.75; }
.ar-intro--w560 { max-width: 560px; }
.ar-intro--mb52 { margin-bottom: 52px; }

.ar-muted-note { margin: 48px 0 0; text-align: center; font-size: 14px; font-style: italic; color: #A08D84; }
.ar-muted-note--mt36 { margin-top: 36px; }
.ar-muted-note--w620 { margin: 32px auto 0; max-width: 620px; }
.ar-inline-link { border-bottom: 1px solid rgba(138, 20, 32, 0.35); }

/* --- Programma: timeline ------------------------------------------------- */
.ar-timeline { display: grid; gap: 0; }
.ar-step { display: grid; grid-template-columns: 132px 1px 1fr; gap: 0; align-items: start; }
.ar-step__time { text-align: right; padding: 0 26px 44px 0; font-family: 'Cormorant Garamond', serif; font-size: 27px; color: #8A1420; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ar-step__time--soft { font-size: 19px; color: #A08D84; font-style: italic; letter-spacing: normal; }
.ar-step__rail { background: rgba(138, 20, 32, 0.16); width: 1px; height: 100%; position: relative; }
.ar-step__rail--fade { background: linear-gradient(rgba(138, 20, 32, 0.16), rgba(138, 20, 32, 0)); }
.ar-step__dot { position: absolute; top: 12px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: #C8A9A4; }
.ar-step__dot--first { background: #8A1420; }
.ar-step__body { padding: 0 0 44px 26px; }
.ar-step--last .ar-step__time { padding-bottom: 0; }
.ar-step--last .ar-step__body { padding-bottom: 0; }
.ar-step__title { margin: 0 0 8px; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 24px; color: #2E2B28; letter-spacing: 0.02em; }
.ar-step__text { margin: 0; color: #6E6862; line-height: 1.75; font-size: 16px; }
/* I contenuti gestiti dalla bacheca passano da the_content, che li avvolge
   in <p>: senza questo, i margini predefiniti del paragrafo si sommerebbero
   a quelli del contenitore. */
.ar-step__text p { margin: 0 0 1em; }
.ar-step__text p:last-child { margin-bottom: 0; }

/* --- Card ---------------------------------------------------------------- */
.ar-card { border: 1px solid rgba(138, 20, 32, 0.14); border-radius: 4px; padding: 28px; background: #FCFBF9; }
.ar-card--hover { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.ar-card--hover:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(46, 43, 40, 0.07); }
.ar-card__kicker { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #8A1420; }
.ar-card__title { margin: 0 0 10px; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 22px; color: #2E2B28; }
.ar-card__text { margin: 0; color: #6E6862; line-height: 1.75; font-size: 15px; }
.ar-card__text--mb14 { margin-bottom: 14px; }
.ar-card__link { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid rgba(138, 20, 32, 0.3); }

.ar-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ar-two-col--mt52 { margin-top: 52px; }
.ar-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.ar-cards--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- Alloggi ------------------------------------------------------------- */
.ar-hotel { display: flex; flex-direction: column; gap: 10px; }
.ar-hotel__dist { margin: 0; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #8A1420; }
.ar-hotel__name { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 23px; color: #2E2B28; }
.ar-hotel__text { margin: 0; color: #6E6862; line-height: 1.7; font-size: 15px; }
.ar-hotel__link { margin-top: auto; padding-top: 10px; align-self: flex-start; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid rgba(138, 20, 32, 0.3); }
.ar-convenzione { margin: 44px auto 0; max-width: 660px; border: 1px solid rgba(138, 20, 32, 0.20); border-radius: 4px; padding: 30px 28px; background: #FCFBF9; text-align: center; }
.ar-convenzione__kicker { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #8A1420; }
.ar-convenzione__text { margin: 0; color: #6E6862; line-height: 1.8; font-size: 16px; }

/* --- Location ------------------------------------------------------------ */
.ar-loc { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: stretch; }
.ar-loc__info { display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.ar-loc__label { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: #A08D84; }
.ar-loc__value { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 1.4; color: #2E2B28; }
.ar-loc__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ar-loc__map { padding: 12px; background: #FCFBF9; border: 1px solid rgba(138, 20, 32, 0.14); border-radius: 4px; box-shadow: 0 2px 18px rgba(46, 43, 40, 0.05); }
.ar-loc__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: saturate(0.85) contrast(0.96); }

/* --- Slot fotografici (predisposti, vuoti finche' non si caricano) ------- */
.ar-photo { padding: 12px; background: #FCFBF9; border: 1px solid rgba(138, 20, 32, 0.14); border-radius: 4px; box-shadow: 0 2px 18px rgba(46, 43, 40, 0.05); margin: 0; }
.ar-photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.ar-photo figcaption { margin-top: 10px; text-align: center; font-size: 13px; font-style: italic; color: #A08D84; }
.ar-photo--hero { max-width: 760px; margin: 44px auto 0; }

/* --- RSVP ---------------------------------------------------------------- */
.ar-form { display: grid; gap: 26px; border: 1px solid rgba(138, 20, 32, 0.14); border-radius: 4px; padding: clamp(24px, 4vw, 44px); background: #FCFBF9; }
.ar-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.ar-field { display: flex; flex-direction: column; gap: 8px; }
.ar-field--full { grid-column: 1 / -1; }
.ar-label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #8A837C; }
.ar-input { border: 0; border-bottom: 1px solid rgba(138, 20, 32, 0.25); background: transparent; padding: 10px 2px; font-size: 16px; color: #2E2B28; transition: border-color .3s; }
.ar-input:focus { border-bottom-color: #8A1420; outline: none; }
.ar-textarea { border: 1px solid rgba(138, 20, 32, 0.22); border-radius: 4px; background: transparent; padding: 14px; font-size: 16px; color: #2E2B28; resize: vertical; line-height: 1.65; transition: border-color .3s; }
.ar-textarea:focus { border-color: #8A1420; outline: none; }

.ar-radiogroup { display: flex; flex-direction: column; gap: 14px; }
.ar-radios { display: flex; flex-wrap: wrap; gap: 12px; }
.ar-radio { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(138, 20, 32, 0.22); border-radius: 4px; padding: 12px 20px; cursor: pointer; transition: background .25s, border-color .25s; }
.ar-radio:hover { border-color: #8A1420; background: rgba(243, 225, 223, 0.4); }
.ar-radio input { accent-color: #8A1420; width: 16px; height: 16px; }
.ar-radio span { font-family: 'Cormorant Garamond', serif; font-size: 19px; color: #2E2B28; }

.ar-count { border: 1px solid rgba(138, 20, 32, 0.16); border-radius: 4px; padding: 26px 24px; display: flex; flex-direction: column; gap: 22px; background: rgba(243, 225, 223, 0.20); }
.ar-count__intro { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #8A1420; }
.ar-count__help { margin: 0; font-size: 14px; color: #6E6862; line-height: 1.7; }
.ar-count__row { display: grid; grid-template-columns: 1fr 128px; gap: 18px; align-items: center; }
.ar-count__name { display: block; font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #2E2B28; }
.ar-count__hint { font-size: 13px; color: #A08D84; }
.ar-count__input { width: 100%; text-align: center; border: 1px solid rgba(138, 20, 32, 0.22); border-radius: 4px; background: #FCFBF9; padding: 12px; font-size: 18px; color: #2E2B28; font-variant-numeric: tabular-nums; transition: border-color .3s; }
.ar-count__input:focus { border-color: #8A1420; outline: none; }
.ar-count__sep { height: 1px; background: rgba(138, 20, 32, 0.12); }
.ar-count__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(138, 20, 32, 0.18); padding-top: 18px; }
.ar-count__total-label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #8A837C; }
.ar-count__total-num { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: #8A1420; font-variant-numeric: tabular-nums; }

.ar-consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ar-consent input { accent-color: #8A1420; width: 16px; height: 16px; margin-top: 4px; }
.ar-consent span { font-size: 14px; color: #6E6862; line-height: 1.65; }
.ar-error { margin: 0; color: #8A1420; font-size: 15px; border-left: 2px solid #8A1420; padding-left: 14px; }
.ar-error[hidden] { display: none; }
.ar-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.ar-recaptcha-note { font-size: 12px; color: #A08D84; }
.ar-note { margin: 0; padding-left: 16px; border-left: 2px solid rgba(138, 20, 32, 0.30); font-size: 14px; line-height: 1.75; color: #6E6862; }
.ar-thanks { border: 1px solid rgba(138, 20, 32, 0.22); border-radius: 4px; padding: 56px 32px; text-align: center; background: #FCFBF9; animation: ar-fade-in .6s ease both; }
.ar-thanks[hidden] { display: none; }
.ar-thanks__title { margin: 0 0 14px; font-family: 'Cormorant Garamond', serif; font-size: 32px; color: #8A1420; }
.ar-thanks__text { margin: 0; color: #6E6862; line-height: 1.75; font-size: 16px; }

/* --- FAQ ----------------------------------------------------------------- */
.ar-faq { display: flex; flex-direction: column; border-top: 1px solid rgba(138, 20, 32, 0.16); }
.ar-faq details { border-bottom: 1px solid rgba(138, 20, 32, 0.16); }
.ar-faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-family: 'Cormorant Garamond', serif; font-size: 21px; color: #2E2B28; position: relative; transition: color .25s; }
.ar-faq summary:hover { color: #8A1420; }
.ar-faq__chev { position: absolute; right: 6px; top: 50%; margin-top: -6px; width: 9px; height: 9px; border-right: 1px solid #8A1420; border-bottom: 1px solid #8A1420; transform: rotate(45deg); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ar-faq details[open] .ar-faq__chev { transform: rotate(-135deg); }
.ar-faq__answer { margin: 0; padding: 0 40px 24px 0; color: #6E6862; line-height: 1.8; font-size: 16px; }
.ar-faq__answer p { margin: 0 0 1em; }
.ar-faq__answer p:last-child { margin-bottom: 0; }
.ar-faq__outro { margin: 40px 0 0; text-align: center; font-size: 15px; color: #6E6862; line-height: 1.8; }

/* --- Regalo -------------------------------------------------------------- */
.ar-gift__intro { margin: 0 0 40px; color: #6E6862; font-size: 16px; line-height: 1.8; }
.ar-gift { border: 1px solid rgba(138, 20, 32, 0.18); border-radius: 4px; padding: 36px 28px; background: #FCFBF9; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.ar-gift__label { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #A08D84; }
.ar-gift__name { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #2E2B28; }
.ar-gift__rule { width: 48px; height: 1px; background: rgba(138, 20, 32, 0.25); }
.ar-gift__iban { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(18px, 3.2vw, 26px); color: #8A1420; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; word-break: break-all; }
.ar-gift__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ar-gift__actions [hidden] { display: none; }
/* La riga anti-phishing usa il colore del testo secondario e non quello
   terziario delle note decorative. Non e' una postilla: e' la frase che
   protegge gli invitati dalla sostituzione fraudolenta dell'IBAN, ed e'
   l'unica difesa dichiarata contro quel rischio. In #A08D84 sul fondo
   alternato scendeva a 2,70:1, sotto la soglia AA di 4,5:1, cioe' faticosa da
   leggere proprio su un telefono alla luce del giorno. */
.ar-phishing { margin: 22px 0 0; font-size: 13px; line-height: 1.7; color: #6E6862; font-style: italic; }

/* --- Footer -------------------------------------------------------------- */
.ar-footer { position: relative; z-index: 2; padding: 80px 24px 56px; text-align: center; background: #F8F5F2; border-top: 1px solid rgba(138, 20, 32, 0.10); }
.ar-footer__kicker { margin: 0 0 28px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #A08D84; }
.ar-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 620px; margin: 0 auto 44px; }
.ar-footer__person { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ar-footer__name { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 22px; color: #8A1420; }
.ar-footer__sign { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 20px; letter-spacing: 0.24em; color: #C8A9A4; }
.ar-footer__legal { margin: 22px 0 0; font-size: 13px; color: #A08D84; }
.ar-footer__copy { margin: 10px 0 0; font-size: 12px; letter-spacing: 0.04em; color: #756458; }  /* #756458 e non un grigio piu' chiaro: a 12px il contrasto va tenuto
     sopra 4.5:1, e i toni tenui del resto del piede non ci arrivano.
     E' lo stesso colore gia' usato per le note informative. */

/* --- Dress code ---------------------------------------------------------- */
.ar-dresscode__claim { margin: 0 0 28px; font-family: 'Cormorant Garamond', serif; font-size: clamp(24px, 3.6vw, 34px); color: #8A1420; letter-spacing: 0.06em; }
.ar-dresscode__text { margin: 0; color: #6E6862; font-size: 16px; line-height: 1.8; }
.ar-photo--loc { margin-top: 44px; }
.ar-intro strong { font-weight: 500; color: #8A1420; }

/* --- Pagine di testo (privacy policy e simili) --------------------------- */
.ar-site--doc { min-height: 100vh; display: flex; flex-direction: column; }
.ar-doc {
  flex: 1; position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto;
  padding: 140px 24px 96px;
}
.ar-doc__titolo {
  margin: 0 0 48px; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px); color: #6B0F19; letter-spacing: 0.03em;
  line-height: normal;
}
.ar-doc__corpo { color: #2E2B28; font-size: 16px; line-height: 1.8; }
.ar-doc__corpo p { margin: 0 0 20px; color: #4A443F; }
.ar-doc__corpo p em { color: #A08D84; }
.ar-doc__corpo h2 {
  margin: 44px 0 16px; font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 28px; color: #8A1420;
  letter-spacing: 0.02em; line-height: normal;
}
.ar-doc__corpo h3 {
  margin: 32px 0 12px; font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: 21px; color: #2E2B28; line-height: normal;
}
.ar-doc__corpo ul { margin: 0 0 20px; padding-left: 22px; color: #4A443F; }
.ar-doc__corpo li { margin: 0 0 8px; }
.ar-doc__corpo li::marker { color: #C8A9A4; }
.ar-doc__corpo a { border-bottom: 1px solid rgba(138, 20, 32, 0.35); }
.ar-doc__corpo strong { font-weight: 500; color: #2E2B28; }
.ar-site--doc .ar-footer { padding: 40px 24px; }

/* ==========================================================================
   Differenziazione delle sezioni
   --------------------------------------------------------------------------
   Il sito risultava piatto su telefono: dieci sezioni con lo stesso padding,
   la stessa testata alta 94px e fondi che si distinguono con un rapporto di
   contrasto di 1,05:1, cioe' invisibili. Sotto i 760px spariscono anche le
   fasce botaniche, e il 91% della pagina resta senza un solo acquerello.

   Questa palette non ha la gamma tonale per separare le sezioni con i fondi
   (anche a opacita' piena il blush arriva a 1,22:1). La separazione e' quindi
   spostata su leve che funzionano anche a bassissimo contrasto: taglio
   visibile fra le sezioni, progressione numerata, ritmo verticale variabile
   e gerarchia tipografica.
   ========================================================================== */

/* --- Taglio visibile fra una sezione e l'altra --------------------------- */
/* Il bordo passa da 0.10 (1,198:1, sotto la soglia di percezione) a 0.16, e
   il rombo del fregio segna il punto esatto del taglio: e' gia' il
   vocabolario del progetto, non un elemento nuovo. */
.ar-section { border-top: 1px solid rgba(138, 20, 32, 0.16); }
.ar-section--alt,
.ar-section--blush { border-top-color: rgba(138, 20, 32, 0.16); }
.ar-section::before {
  content: ''; position: absolute; top: -4px; left: 50%; margin-left: -3.5px;
  width: 7px; height: 7px; background: #C8A9A4; transform: rotate(45deg);
}

/* --- Progressione ---------------------------------------------------------
   Qui c'erano numerali romani dentro il fregio, per dire a che punto della
   pagina si fosse. Sono stati tolti quando sono arrivati i divisori d'atto:
   due numerazioni diverse, una sopra l'altra e disallineate fra loro — dopo
   "Atto secondo" compariva III, dopo "Atto terzo" VI — si leggevano come
   arbitrarie. Gli atti danno la posizione in modo piu' chiaro e con meno
   segni. Il rombo del fregio resta quello che era. */

/* --- Ritmo verticale variabile ------------------------------------------- */
/* Il padding era 96px identico ovunque. Le sezioni brevi e contemplative
   respirano, quelle lunghe e operative entrano subito nel contenuto.
   Solo padding-block: il padding orizzontale resta quello calcolato dal JS. */
.ar-section        { padding-block: clamp(60px, 13vw, 96px); }
.ar-section--aria  { padding-block: clamp(84px, 20vw, 124px); }
.ar-section--densa { padding-block: clamp(52px, 11vw, 84px); }

/* --- Gerarchia tipografica su mobile ------------------------------------- */
/* Il rapporto titolo/corpo era 1,88 su telefono contro 2,88 su desktop: la
   gerarchia si appiattiva proprio dove serviva di piu'. */
.ar-h2     { font-size: clamp(34px, 4.4vw, 46px); }
.ar-kicker { font-size: 11px; letter-spacing: 0.34em; }

/* --- Fondo alternato ------------------------------------------------------
   Scelto dal committente fra tre varianti misurate. Era #F8F5F2, che accanto
   al fondo pagina dava un rapporto di contrasto di 1,050:1 — sotto la soglia
   di percezione su un telefono alla luce del giorno, quindi un'alternanza che
   esisteva nel codice ma non per l'occhio. #F2ECE5 porta il rapporto a
   1,134:1. E' l'unica modifica alla palette del progetto, presa
   deliberatamente e non fatta passare dentro un intervento tecnico.
   Il testo resta ampiamente leggibile: il corpo su questo fondo sta a 12,0:1. */

/* --- Massima presenza consentita al fondo blush -------------------------- */
/* Stesso colore #F3E1DF gia' in palette (e' quello di ::selection): cambia
   solo l'alpha. Da sola non basterebbe, ha senso sommata alle regole sopra. */
.ar-section--blush { background: rgba(243, 225, 223, 0.85); }

/* Avviso mostrato solo quando JavaScript e' disattivato. */
.ar-error--noscript { display: block; margin: 0 0 26px; }

/* --- Divisori d'atto ------------------------------------------------------
   Tre punti in cui la pagina respira e si annuncia. Riportano l'acquerello
   dell'invito nel tratto di pagina che su telefono ne e' privo, dove le fasce
   laterali sono nascoste. Il padding orizzontale e' dichiarato qui perche'
   responsive() agisce su "section, footer" e questo e' un div: se un giorno
   quel selettore si allarga, va incluso. */
.ar-atto {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 72px 24px 0; text-align: center;
}
.ar-atto__corona { width: 88px; height: auto; opacity: .92; }
.ar-atto__num {
  margin: 16px 0 0; font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: #A08D84;
}
.ar-atto__titolo {
  margin: 8px 0 0; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(24px, 5vw, 30px); color: #8A1420; letter-spacing: .04em;
}
/* La sezione che segue un atto non ripete l'aria: l'ha gia' data l'atto.
   E' questa riga a trasformare il divisore in ritmo — respiro, poi
   ripartenza — invece di sommare due pause uguali. */
.ar-atto + .ar-section { padding-top: 40px; border-top: 0; }
.ar-atto + .ar-section::before { display: none; }
@media (min-width: 760px) { .ar-atto__corona { width: 104px; } }


/* --- Leggibilita' delle righe che portano informazione --------------------
   #A08D84 sta fra 2,70:1 e 3,06:1 sui tre fondi del sito: va bene per filetti
   e rombi, che sono decorazione, non per righe che dicono qualcosa.

   Il criterio non e' "ripete o non ripete" ma "se questa riga non si legge,
   l'invitato perde qualcosa?". Per gli occhielli sopra i titoli la risposta e'
   no, e restano in terziario come vuole il progetto. Per queste due e' si':
     - la nota del countdown porta gli orari dell'evento, 11:00-20:00, che
       dopo la data e' la riga piu' fattuale della pagina;
     - le note in coda alle sezioni portano avvertenze e un rimando alle
       mappe, con un collegamento dentro.

   #756458 e' la stessa famiglia un tono piu' profondo: 5,46:1 sul fondo base,
   4,81:1 sull'alternato, 5,20:1 nel riquadro del countdown. Pensato per gli
   invitati che leggeranno il programma sul telefono, a dicembre, fuori. */
.ar-muted-note,
.ar-countdown__note { color: #756458; }