/* ══════════════════════════════════════════════════════════════
   Tuscany with Björn's Family — Villa Barilli invitation
   Sun-warmed editorial · Fraunces + Hanken Grotesk
   ══════════════════════════════════════════════════════════════ */

:root{
  --paper:    #f4edde;
  --paper-2:  #ece0c7;
  --paper-3:  #e4d6b9;
  --ink:      #232017;
  --ink-soft: #6c654f;
  --ink-faint:#a59a7d;
  --terra:    #b9522f;
  --terra-dk: #98401f;
  --olive:    #6f7244;
  --gold:     #b88a35;
  --line:     rgba(35,32,23,.16);
  --line-soft:rgba(35,32,23,.09);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 5vw, 5rem);
  --frame-inset: clamp(1rem, 2.5vw, 1.6rem); /* hero editorial frame margin */
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  position:relative;
}

/* paper grain + warm vignette atmosphere */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:multiply;
}

img{ display:block; max-width:100%; }

::selection{ background:var(--terra); color:var(--paper); }

.nowrap{ white-space:nowrap; }
/* nicer line-breaking everywhere */
h1, h2, .hero__sub, .villa__intro, .when__intro, .rsvp__intro{ text-wrap:balance; }
p, .letter__body p, .where__text p{ text-wrap:pretty; }

/* ── shared bits ─────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--terra);
}
.eyebrow--light{ color:#f3e4cf; }

.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:.86rem;
  letter-spacing:.04em;
  padding:.95em 1.6em; border-radius:999px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn--solid{ background:var(--terra); color:#fff; box-shadow:0 8px 22px -10px rgba(152,64,31,.7); }
.btn--solid:hover{ background:var(--terra-dk); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:#f6ead6; border-color:rgba(246,234,214,.5); }
.btn--ghost:hover{ background:rgba(246,234,214,.12); transform:translateY(-2px); }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--line:hover{ border-color:var(--terra); color:var(--terra); transform:translateY(-2px); }
.btn--big{ font-size:1rem; padding:1.1em 2em; }

/* section scaffold */
.section{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section__label{
  font-size:.74rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; align-items:center; gap:.9em;
  padding-bottom:1.4rem; margin-bottom:2.6rem; border-bottom:1px solid var(--line-soft);
}
.section__label span{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.15rem; color:var(--terra); letter-spacing:0;
}

h2{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(2.1rem, 5.4vw, 3.7rem);
  line-height:1.02; letter-spacing:-.018em;
  font-optical-sizing:auto;
}

/* ════════════════════ NAV ════════════════════ */
/* clean hero: eyebrow + title + the one-line subtitle; dates & buttons stay off */
.hero__dates, .hero__actions{ display:none !important; }

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  /* sit a clear gap below the hero frame's top border so the header never crosses it */
  padding:calc(var(--frame-inset) + 1.15rem) clamp(1.5rem,5vw,3.2rem) 1.1rem;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
}
/* over the hero (not stuck): show only the logo — the links appear once it sticks on scroll */
.nav:not(.is-stuck) .nav__links{ opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.nav.is-stuck{
  background:rgba(244,237,222,.86); backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-soft); padding-top:.75rem; padding-bottom:.75rem;
}
.nav__mark{ display:flex; align-items:center; gap:.7em; text-decoration:none; color:#f6ead6; transition:color .5s var(--ease); }
.nav.is-stuck .nav__mark{ color:var(--ink); }
.nav__mark-mono{
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.18rem;
  border:1.5px solid currentColor; border-radius:50%;
  width:2.2em; height:2.2em; display:grid; place-items:center; letter-spacing:-.04em;
}
.nav__mark-text{ font-family:var(--sans); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.74rem; }
.nav__links{ display:flex; align-items:center; gap:clamp(.7rem,2.4vw,2rem); }
.nav__links a{
  text-decoration:none; color:#f3e4cf; font-weight:500; font-size:.84rem; letter-spacing:.02em;
  transition:color .4s var(--ease); position:relative;
}
.nav.is-stuck .nav__links a{ color:var(--ink-soft); }
.nav__links a:not(.nav__cta):hover{ color:#fff; }
.nav.is-stuck .nav__links a:not(.nav__cta):hover{ color:var(--terra); }
.nav__cta{
  border:1px solid rgba(243,228,207,.55); padding:.55em 1.25em; border-radius:999px;
  color:#f6ead6 !important;
}
.nav.is-stuck .nav__cta{ border-color:var(--terra); color:var(--terra) !important; background:transparent; }
.nav__cta:hover{ background:var(--terra); border-color:var(--terra); color:#fff !important; }
@media(max-width:560px){ .nav__links a:not(.nav__cta){ display:none; } }

/* ════════════════════ HERO ════════════════════ */
.hero{ position:relative; min-height:var(--hero-h, 100svh); display:flex; }
.hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.06); animation:heroZoom 16s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__veil{
  position:absolute; inset:0;
  background:
    /* ink pooled directly behind the text, bottom-left — fades out so the photo stays clean */
    radial-gradient(118% 96% at 22% 91%, rgba(15,9,3,.88) 0%, rgba(15,9,3,.6) 26%, rgba(15,9,3,.16) 52%, transparent 70%),
    /* a whisper of shade at the very top so the nav stays legible */
    linear-gradient(180deg, rgba(18,12,6,.30) 0%, transparent 20%);
}
.hero__frame{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(2rem,7vh,6rem) var(--pad) clamp(2.4rem,6vh,4.5rem);
  margin:var(--frame-inset);
  border:1px solid rgba(245,236,219,.28);
  transition:border-color .45s ease;
}
html.pre-snap .hero__frame{ border-color:transparent; }   /* hidden until the "snapshot" draws it on */
.hero__inner{ max-width:min(880px, 92%); margin-bottom:clamp(1.5rem,8vh,5.5rem); }   /* keep the title up where it sat before */
.hero__title{
  font-family:var(--serif); color:#fdf6e8; font-optical-sizing:auto;
  font-weight:330; line-height:.93; letter-spacing:-.02em;
  margin:.5rem 0 1.4rem; text-shadow:0 2px 30px rgba(20,12,4,.4);
}
.hero__title .l1{ display:block; font-size:clamp(3.6rem, 13vw, 9.5rem); }
.hero__title .l2{ display:block; font-size:clamp(1.9rem, 6.6vw, 4.6rem); font-weight:300; padding-left:.06em; }
.hero__title em{ font-style:italic; font-weight:300; color:#f0c89a; }
.hero__sub{
  font-family:var(--serif); font-size:clamp(1.05rem,2.3vw,1.5rem);
  color:#f4e7d3; line-height:1.45; font-weight:330; max-width:34ch;
}
.hero__sub strong{ font-weight:560; font-style:italic; }
.hero__dates{
  display:flex; align-items:center; flex-wrap:wrap; gap:.7em 1.05em;
  margin:1.8rem 0 2.2rem;
  font-family:var(--serif); font-style:italic; font-weight:330;
  font-size:clamp(1.1rem, 2.5vw, 1.65rem); letter-spacing:.012em;
  color:#f1e4ce;
}
.hero__dates-rule{
  width:clamp(28px,6vw,68px); height:1px; flex:0 0 auto;
  background:linear-gradient(90deg, transparent, #e3bd88 60%, #e3bd88);
}
.hero__dates-txt{ display:inline-block; }
.hero__dates i{ font-style:italic; color:#e8c089; padding:0 .12em; }
.hero__dates .yr{ color:#ecc78f; letter-spacing:.04em; }
/* faint halo on the hero type for crispness over the photo */
.eyebrow--light{ text-shadow:0 1px 10px rgba(12,7,2,.55); }
.hero__sub, .hero__dates{ text-shadow:0 1px 12px rgba(12,7,2,.5); }
.nav:not(.is-stuck) .nav__mark, .nav:not(.is-stuck) .nav__links a{ text-shadow:0 1px 8px rgba(12,8,3,.5); }
.hero__actions{ display:flex; gap:.9rem; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; left:50%; bottom:clamp(1rem,3vh,2rem); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  color:#f0e3cd; text-decoration:none; font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; font-weight:600;
}
.hero__scroll i{ width:1px; height:38px; background:linear-gradient(#f0e3cd,transparent); animation:scrollPulse 2.2s var(--ease) infinite; transform-origin:top; }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }
/* on phones the buttons sit near the bottom — drop the scroll cue to avoid a collision */
@media(max-width:600px){ .hero__scroll{ display:none; } }

/* ════════════════════ I · LETTER ════════════════════ */
.letter{ padding-top:clamp(4.5rem,11vh,8.5rem); padding-bottom:clamp(4rem,9vh,7rem); }
.letter__grid{ display:grid; grid-template-columns:1.2fr .95fr; gap:clamp(1.75rem,3.5vw,3.25rem); align-items:start; }
.letter__body{ max-width:52ch; }
.letter__body p{ font-family:var(--serif); font-size:clamp(1.18rem,2vw,1.5rem); line-height:1.6; font-weight:360; color:#33301f; margin-bottom:1.5rem; }
.letter__body p strong{ font-weight:560; font-style:italic; color:var(--terra-dk); }
.dropcap{
  float:left; font-family:var(--serif); font-weight:340; font-style:normal;
  font-size:5.2rem; line-height:.74; padding:.06em .12em 0 0; color:var(--terra);
}
.signature{ margin-top:2.2rem !important; font-style:italic; color:var(--ink-soft) !important; }
.signature span{ display:inline-block; margin-top:.2rem; font-size:1.9rem; color:var(--ink) !important; font-style:italic; }
.letter__figure{ position:relative; }
.letter__figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; box-shadow:0 30px 50px -28px rgba(40,28,12,.5); }
.letter__figure figcaption{ margin-top:.9rem; font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--ink-soft); }
@media(max-width:760px){ .letter__grid{ grid-template-columns:1fr; } .letter__figure{ order:-1; } .letter__body{ max-width:none; } }

/* ════════════════════ II · VILLA ════════════════════ */
.villa{ padding-top:clamp(3.5rem,8vh,6rem); padding-bottom:clamp(4rem,9vh,7rem); }
.villa__head{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,5vw,4rem); align-items:end; margin-bottom:3rem; }
.villa__intro{ font-size:1.05rem; color:var(--ink-soft); line-height:1.7; max-width:52ch; }
@media(max-width:760px){ .villa__head{ grid-template-columns:1fr; gap:1.2rem; } }

.facts{
  list-style:none; display:grid; grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-bottom:3rem;
  background:rgba(255,255,255,.25);
}
.facts li{ padding:1.3rem 1rem; text-align:center; border-right:1px solid var(--line-soft); }
.facts li:last-child{ border-right:none; }
.facts b{ display:block; font-family:var(--serif); font-weight:430; font-size:1.5rem; color:var(--ink); line-height:1; }
.facts span{ display:block; margin-top:.45rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; }
@media(max-width:760px){ .facts{ grid-template-columns:repeat(3,1fr); } .facts li:nth-child(3n){ border-right:none; } .facts li:nth-child(-n+3){ border-bottom:1px solid var(--line-soft); } }

/* editorial photo mosaic */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:13.5vw; gap:.8rem; grid-auto-flow:row dense; }
.g{ position:relative; overflow:hidden; border-radius:2px; cursor:pointer; background:var(--paper-2); }
.g img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s var(--ease); filter:saturate(.96); }
.g::after{ content:"⤢"; position:absolute; right:.6rem; bottom:.45rem; color:#fff; opacity:0; font-size:1.1rem; transition:opacity .4s var(--ease); text-shadow:0 1px 6px rgba(0,0,0,.6); }
.g:hover img{ transform:scale(1.07); filter:saturate(1.06); }
.g:hover::after{ opacity:.95; }
.g--wide{ grid-column:span 2; }
.g--tall{ grid-row:span 2; }
@media(max-width:900px){ .gallery{ grid-template-columns:repeat(3,1fr); grid-auto-rows:24vw; } }
@media(max-width:560px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:34vw; } .g--wide{ grid-column:span 2; } .g--tall{ grid-row:span 1; } }

/* ════════════════════ III · WHEN ════════════════════ */
.when{ padding-top:clamp(3.5rem,8vh,6rem); padding-bottom:clamp(4rem,9vh,7rem); }
.when__intro{ font-size:1.1rem; color:var(--ink-soft); max-width:48ch; margin-top:1.2rem; line-height:1.7; }
.timeline{ margin-top:3.5rem; }
.timeline__track{ position:relative; display:flex; align-items:center; height:24px; }
.timeline__line{ flex:1; height:2px; background:linear-gradient(90deg,var(--terra),var(--gold),var(--olive)); border-radius:2px; }
.timeline__dot{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; }
.timeline__dot--start{ background:var(--terra); box-shadow:0 0 0 5px rgba(185,82,47,.16); }
.timeline__dot--end{ background:var(--olive); box-shadow:0 0 0 5px rgba(111,114,68,.16); }
.timeline__marks{ display:flex; justify-content:space-between; margin-top:1.2rem; gap:1rem; }
.tmark{ display:flex; flex-direction:column; gap:.25rem; }
.tmark b{ font-family:var(--serif); font-weight:480; font-size:1.15rem; color:var(--ink); }
.tmark span{ font-size:.8rem; color:var(--ink-faint); letter-spacing:.02em; }
.tmark--mid{ text-align:center; align-items:center; }
.tmark--end{ text-align:right; align-items:flex-end; }
@media(max-width:620px){ .timeline__marks{ flex-direction:column; gap:1.1rem; } .tmark{ align-items:flex-start !important; text-align:left !important; } .tmark--mid b{ color:var(--terra); } }

/* ════════════════════ IV · WHERE ════════════════════ */
.where{ padding-top:clamp(3.5rem,8vh,6rem); padding-bottom:clamp(4rem,9vh,7rem); }
.where__intro{ max-width:64ch; }
.where__intro h2{ margin-bottom:1.3rem; }
.where__intro p{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-soft); line-height:1.72; }
.where__intro p strong{ color:var(--ink); font-weight:600; }

/* — day trips — */
.trips__head{ display:flex; align-items:center; gap:1.3rem; margin:clamp(3rem,7vw,5rem) 0 1.7rem; }
.trips__head span{ font-family:var(--serif); font-style:italic; font-weight:380; font-size:clamp(1.3rem,3vw,1.95rem); color:var(--ink); white-space:nowrap; }
.trips__head::after{ content:""; flex:1; height:1px; background:var(--line); }
.trips__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.trip{
  position:relative; overflow:hidden; border-radius:5px; text-decoration:none;
  box-shadow:0 22px 44px -30px rgba(40,28,12,.6); display:block;
  height:clamp(240px, 26vw, 322px);
}
.trip--feature{ grid-column:1 / -1; height:clamp(340px, 40vw, 470px); }
.trip img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; transition:transform 1.2s var(--ease); }
.trip:hover img{ transform:scale(1.07); }
.trip__cap{
  position:absolute; inset:auto 0 0 0; padding:1.15rem 1.3rem 1.2rem; color:#fff;
  background:linear-gradient(transparent, rgba(18,12,5,.5) 32%, rgba(15,10,4,.9));
}
.trip__time{ display:inline-block; font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:#eecb93; margin-bottom:.4rem; }
.trip__cap b{ display:block; font-family:var(--serif); font-weight:430; font-size:clamp(1.35rem,2.2vw,1.7rem); line-height:1.02; }
.trip__cap p{ margin-top:.5rem; font-size:.84rem; line-height:1.45; color:rgba(255,255,255,.84); max-width:40ch; }
.trip--feature .trip__cap{ padding:1.5rem 1.6rem 1.7rem; }
.trip--feature .trip__cap b{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
.trip--feature .trip__cap p{ font-size:.96rem; max-width:34ch; }
@media(max-width:680px){
  .trips__grid{ grid-template-columns:1fr; gap:.85rem; }
  .trip{ height:230px; }
  .trip--feature{ grid-column:auto; height:300px; }
}

/* — the villa on the map (the one clickable map link) — */
.villa-map{
  display:block; position:relative; overflow:hidden; border-radius:5px; text-decoration:none;
  height:clamp(300px, 38vw, 440px); margin-top:clamp(1.8rem,4vw,3rem); margin-bottom:clamp(1.6rem,3.2vw,2.4rem);
  box-shadow:0 22px 44px -30px rgba(40,28,12,.6);
}
.villa-map img{ width:100%; height:100%; object-fit:cover; object-position:center 52%; transition:transform 1.2s var(--ease); }
.villa-map:hover img{ transform:scale(1.05); }
.villa-map__cap{
  position:absolute; inset:auto 0 0 0; padding:clamp(1.3rem,3vw,2rem); color:#fff;
  background:linear-gradient(transparent, rgba(18,12,5,.5) 34%, rgba(15,10,4,.9));
}
.villa-map__eyebrow{ display:inline-block; font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:#eecb93; margin-bottom:.45rem; }
.villa-map__cap b{ display:block; font-family:var(--serif); font-weight:430; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.02; }
.villa-map__cap p{ margin-top:.35rem; font-size:.92rem; color:rgba(255,255,255,.84); }
.villa-map__cta{
  display:inline-flex; align-items:center; margin-top:1.05rem;
  font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.02em; color:#1f1708;
  background:#f0c89a; padding:.62em 1.15em; border-radius:999px;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.villa-map:hover .villa-map__cta{ background:#fff; transform:translateY(-1px); }

/* ════════════════════ V · RSVP ════════════════════ */
.rsvp{ padding-top:clamp(3.5rem,8vh,6rem); padding-bottom:clamp(4.5rem,10vh,8rem); }
.rsvp__intro{ font-size:1.1rem; color:var(--ink-soft); max-width:54ch; margin-top:1.2rem; line-height:1.7; }
.rsvp__intro strong{ color:var(--terra-dk); font-weight:600; }
.rsvp__panel{
  margin-top:3rem; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  background:rgba(255,255,255,.4); border:1px solid var(--line);
  border-radius:8px; padding:clamp(1.4rem,3.5vw,2.8rem);
  box-shadow:0 40px 80px -50px rgba(60,40,16,.5);
}
@media(max-width:840px){ .rsvp__panel{ grid-template-columns:1fr; } }

/* — calendar picker — */
.picker__cal{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
@media(max-width:480px){ .picker__cal{ grid-template-columns:1fr; gap:1.2rem; } }
.month__name{ font-family:var(--serif); font-weight:480; font-size:1.18rem; text-align:center; margin-bottom:.9rem; color:var(--ink); }
.month__dow{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:.4rem; }
.month__dow span{ text-align:center; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.month__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.day{
  aspect-ratio:1; display:grid; place-items:center; position:relative;
  font-size:.86rem; font-weight:500; color:var(--ink); border-radius:50%;
  cursor:pointer; user-select:none; transition:background .18s var(--ease), color .18s var(--ease);
  background:transparent; z-index:1;
}
.day.is-empty{ visibility:hidden; }
.day.is-out{ color:var(--ink-faint); opacity:.32; cursor:default; }
.day.is-open:hover{ background:rgba(185,82,47,.14); }
.day.is-open{ box-shadow:inset 0 0 0 1px rgba(185,82,47,.22); color:var(--terra-dk); font-weight:600; }
/* range band */
.day.in-range::before{
  content:""; position:absolute; inset:0 -2px; background:rgba(185,82,47,.16); z-index:-1;
}
.day.range-start::before{ left:50%; }
.day.range-end::before{ right:50%; }
.day.is-pick{ background:var(--terra); color:#fff; font-weight:700; box-shadow:0 6px 14px -6px rgba(152,64,31,.8); }
.day.is-pick.range-mid::before{ display:none; }
.picker__legend{ display:flex; gap:1.4rem; justify-content:center; margin-top:1.4rem; font-size:.74rem; color:var(--ink-soft); }
.picker__legend span{ display:inline-flex; align-items:center; gap:.45em; }
.lg{ width:13px; height:13px; border-radius:50%; display:inline-block; }
.lg--win{ box-shadow:inset 0 0 0 1px rgba(185,82,47,.35); background:rgba(185,82,47,.14); }
.lg--sel{ background:var(--terra); }

/* — form — */
.rform{ display:flex; flex-direction:column; }
.rform__summary{
  background:var(--paper-2); border:1px dashed var(--line); border-radius:6px;
  padding:1rem 1.2rem; margin-bottom:1.5rem; min-height:64px;
  display:flex; flex-direction:column; justify-content:center;
}
.rform__summary-empty{ font-style:italic; color:var(--ink-faint); font-size:.92rem; }
.rform__summary .sum-dates{ font-family:var(--serif); font-size:1.28rem; color:var(--ink); font-weight:460; line-height:1.25; }
.rform__summary .sum-nights{ margin-top:.3rem; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--terra); font-weight:600; }
.field{ margin-bottom:1.25rem; display:flex; flex-direction:column; }
.field__label{ font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem; }
.field__label span{ text-transform:none; letter-spacing:0; color:var(--ink-faint); font-weight:400; font-size:.8rem; }
.field input, .field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:.8em .9em; width:100%; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--terra); box-shadow:0 0 0 3px rgba(185,82,47,.14); }
.field textarea{ resize:vertical; min-height:80px; }
.rform__row{ display:grid; grid-template-columns:1fr auto; gap:1rem; }
.field--narrow{ max-width:9rem; }
@media(max-width:480px){ .rform__row{ grid-template-columns:1fr; } .field--narrow{ max-width:none; } }

.toggle{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.toggle input{ position:absolute; opacity:0; pointer-events:none; }
.toggle label{
  text-align:center; padding:.75em .5em; border:1px solid var(--line); border-radius:6px;
  font-size:.88rem; font-weight:500; cursor:pointer; background:#fff; color:var(--ink-soft);
  transition:all .25s var(--ease);
}
.toggle label:hover{ border-color:var(--terra); }
#coming-yes:checked ~ label[for="coming-yes"]{ background:var(--olive); border-color:var(--olive); color:#fff; }
#coming-no:checked ~ label[for="coming-no"]{ background:var(--ink-soft); border-color:var(--ink-soft); color:#fff; }
.field--toggle{ margin-bottom:1.25rem; }

#send{ width:100%; justify-content:center; margin-top:.4rem; }
.rform__fineprint{ font-size:.76rem; color:var(--ink-faint); text-align:center; margin-top:.9rem; line-height:1.5; }
.rsvp--cant .picker{ opacity:.4; pointer-events:none; transition:opacity .4s var(--ease); }

/* ════════════════════ FOOTER ════════════════════ */
.foot{
  position:relative; z-index:2; text-align:center;
  padding:clamp(4rem,10vh,7rem) var(--pad) clamp(2.5rem,6vh,4rem);
  border-top:1px solid var(--line-soft); margin-top:2rem;
}
.foot__line{ font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem,4.5vw,2.6rem); color:var(--ink); font-weight:350; }
.foot__sig{ font-family:var(--serif); font-size:1.15rem; color:var(--terra); margin-top:.7rem; letter-spacing:.01em; }
.foot__meta{ margin-top:2rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; }

/* ════════════════════ LIGHTBOX ════════════════════ */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(20,14,6,.94);
  display:none; align-items:center; justify-content:center; padding:4vw;
  opacity:0; transition:opacity .35s var(--ease); backdrop-filter:blur(4px);
}
.lightbox.is-open{ display:flex; opacity:1; }
.lightbox img{ max-width:92vw; max-height:88vh; object-fit:contain; border-radius:2px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__close{ position:absolute; top:1.2rem; right:1.6rem; font-size:2.2rem; line-height:1; color:#f3e4cf; background:none; border:none; cursor:pointer; opacity:.8; transition:opacity .2s, transform .2s; }
.lightbox__close:hover{ opacity:1; transform:rotate(90deg); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.4rem; color:#f3e4cf; background:rgba(255,255,255,.07); border:none; cursor:pointer; width:3rem; height:5rem; border-radius:6px; transition:background .25s; }
.lightbox__nav:hover{ background:rgba(255,255,255,.16); }
.lightbox__nav--prev{ left:1.2rem; }
.lightbox__nav--next{ right:1.2rem; }
@media(max-width:560px){ .lightbox__nav{ width:2.4rem; height:4rem; font-size:1.8rem; } }

/* ════════════════════ INTRO CURTAIN ════════════════════ */
/* while the curtain is up, the page underneath can't scroll — it behaves as its own screen */
html.intro-lock, html.intro-lock body{ overflow:hidden; height:100%; }
.intro{
  position:fixed; inset:0; z-index:400; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(120% 90% at 50% 38%, #cfa64c 0%, #b5662f 46%, #5f3318 100%);
}
.intro__gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* the Italian-emoji swarm that plays through the song's intro (animated by GSAP) */
.intro__emojis{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.emo{ position:absolute; left:50%; top:50%; font-size:clamp(1.7rem,3.8vw,2.7rem); line-height:1; will-change:transform; }
.intro__sun{ position:absolute; left:50%; top:50%; font-size:clamp(3rem,9vw,5.5rem); line-height:1; will-change:transform; filter:drop-shadow(0 0 28px rgba(255,210,120,.7)); }
/* the couplet that plays after the invitation lifts away (animated by GSAP) */
.intro__verse{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(1.6rem,4.5vw,2.8rem); padding:2rem; text-align:center; pointer-events:none; will-change:opacity; }
.verse{ margin:0; max-width:min(92vw, 38rem); opacity:0; will-change:opacity, transform; }   /* own layer → fade/slide is composited, not re-painted */
.verse__who{ display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:#eecb93; margin-bottom:.55rem; }
.verse__line{ font-family:var(--serif); font-style:italic; font-weight:350; font-size:clamp(1.35rem,3.6vw,2.3rem); line-height:1.25; color:#fdf3e2; text-shadow:0 1px 10px rgba(40,18,2,.6); }
.intro__inner{ position:relative; z-index:2; padding:2rem; max-width:min(780px,92vw); color:#fff6e9; }
.intro__inner > *{ opacity:0; transform:translateY(20px); animation:introIn .9s var(--ease) forwards; }
.intro__eyebrow{ animation-delay:.2s; font-family:var(--sans); font-weight:600; letter-spacing:.34em; text-transform:uppercase; font-size:.72rem; color:#ffe9c8; }
.intro__skywrite{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); margin:0; z-index:2; pointer-events:none; opacity:0; text-align:center; white-space:nowrap; font-family:var(--sans); font-weight:600; letter-spacing:.28em; text-transform:uppercase; font-size:clamp(1.05rem,3.6vw,2rem); color:#ffe9c8; text-shadow:0 4px 32px rgba(50,20,2,.55); }
.intro__title{ opacity:1; transform:none; animation:none; font-family:var(--serif); font-weight:330; line-height:.98; letter-spacing:-.02em; margin:1rem 0 1.1rem; text-shadow:0 6px 44px rgba(50,20,2,.55); }
.intro__title span, .intro__title em{ display:block; opacity:0; transform:translateY(26px); animation:introIn 1s var(--ease) forwards; }
.intro__title span{ font-size:clamp(2.1rem,7vw,4.4rem); animation-delay:.4s; }
.intro__title em{ font-style:italic; font-size:clamp(2.7rem,9.5vw,6.2rem); color:#ffd9a0; animation-delay:.58s; }
.intro__sub{ animation-delay:.82s; font-family:var(--serif); font-style:italic; font-size:clamp(1rem,2.4vw,1.35rem); color:#f6e4cd; }
.intro__btn{
  cursor:pointer; margin-top:2rem; display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:600; font-size:1.05rem; letter-spacing:.02em;
  color:#5f3318; background:#ffe9c8; border:none; border-radius:999px;
  padding:1em 2.3em; box-shadow:0 16px 40px -14px rgba(20,8,0,.6);
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  animation:introIn .9s var(--ease) 1s forwards, introPulse 2.6s ease-in-out 2.2s infinite;
}
.intro__btn:hover{ transform:translateY(-3px) scale(1.03); background:#fff4e1; }
.intro__btn-spark{ font-size:.9em; }
.intro__hint{ animation-delay:1.25s; margin-top:1.25rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,240,222,.72); }
@keyframes introIn{ to{ opacity:1; transform:none; } }
@keyframes introPulse{ 0%,100%{ box-shadow:0 16px 40px -14px rgba(20,8,0,.6), 0 0 0 0 rgba(255,233,200,.55);} 50%{ box-shadow:0 16px 40px -14px rgba(20,8,0,.6), 0 0 0 16px rgba(255,233,200,0);} }
@media(prefers-reduced-motion:reduce){
  .intro__inner > *, .intro__title span, .intro__title em{ animation-duration:.01ms !important; opacity:1 !important; transform:none !important; }
  .intro__btn{ animation:none !important; }
}

/* ════════════════════ THE SONG (player) ════════════════════ */
.player{
  /* sit a clear gap inside the hero frame's border line, not on it */
  position:fixed; right:calc(var(--frame-inset) + 1rem); bottom:calc(var(--frame-inset) + 1rem); z-index:60;
  display:flex; align-items:center; gap:.75rem; padding:.5rem 1.05rem .5rem .55rem;
  background:rgba(244,237,222,.78); backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(35,32,23,.12); border-radius:999px; cursor:pointer;
  box-shadow:0 14px 34px -16px rgba(40,28,12,.5);
  font-family:var(--sans); -webkit-tap-highlight-color:transparent;
  opacity:0; transform:translateY(12px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), box-shadow .4s var(--ease);
}
.player.is-ready{ opacity:1; transform:none; }
.player:hover{ box-shadow:0 18px 38px -16px rgba(40,28,12,.55); transform:translateY(-2px); }
.player__sun{
  position:relative; width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 38% 34%, #f9dd93 0%, #ecb95c 52%, #d8932f 100%);
  box-shadow:0 0 14px -1px rgba(227,162,62,.7), inset 0 0 0 1px rgba(255,255,255,.3);
}
.player__sun::before, .player__sun::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:1.5px solid rgba(227,162,62,.6); opacity:0;
}
.player.is-playing .player__sun{ animation:sunspin 22s linear infinite; }
.player.is-playing .player__sun::before{ animation:sunray 2.6s ease-out infinite; }
.player.is-playing .player__sun::after{ animation:sunray 2.6s ease-out infinite 1.3s; }
@keyframes sunray{ 0%{ transform:scale(.92); opacity:.7 } 100%{ transform:scale(2.5); opacity:0 } }
@keyframes sunspin{ to{ transform:rotate(360deg) } }
.player__label{ display:flex; flex-direction:column; line-height:1.12; text-align:left; padding-right:.15rem; }
.player__label b{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:1rem; color:var(--ink); }
.player__label small{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); margin-top:.18rem; font-weight:600; }
@media(max-width:560px){ .player{ padding:.45rem .5rem; gap:.55rem; } .player__label{ display:none; } }
@media(prefers-reduced-motion:reduce){
  .player.is-playing .player__sun,
  .player.is-playing .player__sun::before,
  .player.is-playing .player__sun::after{ animation:none; }
}

/* ════════════════════ CELEBRATION ════════════════════ */
.confetti{ position:fixed; inset:0; z-index:450; pointer-events:none; display:none; }
.confetti.is-on{ display:block; }
.celebrate{
  position:fixed; inset:0; z-index:280; display:none; align-items:center; justify-content:center; padding:6vw;
  background:rgba(20,14,6,.42); backdrop-filter:blur(2.5px);   /* lighter so the villa shows behind */
  opacity:0; transition:opacity .4s var(--ease);
}
.celebrate.is-open{ display:flex; opacity:1; }
.celebrate__card{
  position:relative; max-width:470px; width:100%; text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:clamp(2rem,5vw,3rem) clamp(1.6rem,4vw,2.6rem);
  box-shadow:0 50px 100px -40px rgba(40,24,6,.7);
  transform:translateY(18px) scale(.96); transition:transform .55s var(--ease);
}
.celebrate.is-open .celebrate__card{ transform:none; }
.celebrate__flag{ font-size:2.7rem; display:block; margin-bottom:.3rem; animation:flagPop .7s var(--ease) both; }
@keyframes flagPop{ 0%{ transform:scale(0) rotate(-25deg); opacity:0 } 60%{ transform:scale(1.25) rotate(8deg) } 100%{ transform:none; opacity:1 } }
.celebrate__title{ font-family:var(--serif); font-weight:380; font-style:italic; font-size:clamp(2rem,5vw,2.85rem); color:var(--terra); line-height:1; }
/* inline RSVP status (sending / error) below the form */
.rform__status{ margin-top:1rem; font-size:.95rem; line-height:1.55; text-align:center; }
.rform__status:empty{ display:none; }
#send:disabled{ opacity:.72; cursor:default; }   /* the "Sending…" state */
.rform__status.is-error{ color:#a8432b; }
.rform__status.is-error b{ color:var(--terra-dk); font-weight:600; }
.celebrate__msg{ font-family:var(--serif); font-size:clamp(1.1rem,2.4vw,1.4rem); color:var(--ink); margin-top:.85rem; line-height:1.4; }
.celebrate__hint{ font-size:.95rem; color:var(--ink-soft); margin-top:1rem; line-height:1.55; }
.celebrate__hint b{ color:var(--terra-dk); font-weight:600; }
.celebrate__dismiss{ margin-top:1.6rem; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; }

/* ════════════════════ REVEAL ON SCROLL ════════════════════ */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.hero .reveal{ transition-duration:1.1s; }
.hero .reveal.is-in:nth-child(1){ transition-delay:.1s; }
.hero__title.is-in{ transition-delay:.22s; }
.hero__sub.is-in{ transition-delay:.4s; }
.hero__dates.is-in{ transition-delay:.55s; }
.hero__actions.is-in{ transition-delay:.7s; }
.hero__scroll.is-in{ transition-delay:1s; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__media img{ animation:none; transform:none; }
  html{ scroll-behavior:auto; }
}