@font-face{
  font-family:'Amsterdam';
  src:url('/fonts/amsterdam-handwriting.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --cream:#f6f2e8;
  --paper:#fffdf8;
  --ink:#4a463d;
  --sage:#7a866b;
  --sage-deep:#5b6a4e;
  --sage-soft:#9aa889;
  --gold:#bfa46a;
  --gold-soft:#d8c493;
  --line:#e7e0d1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink); position:relative; overflow-x:hidden;
  font-family:'Cormorant Garamond',Georgia,serif; font-size:1.12rem; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* couple watercolour pinned at the very back — fixed, full-bleed, opacity eased
   just slightly so it reads as a soft backdrop behind the invitation card.
   Its own cream sky melts into --cream at the edges. Tune with --backdrop-opacity. */
:root{--backdrop-opacity:.85; --card-alpha:.9}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url(/couple-bg.jpg) center center/cover no-repeat;
  opacity:var(--backdrop-opacity);
}
html{overflow-x:hidden}
.stage{position:relative; max-width:760px; margin:0 auto}
.paper{
  max-width:680px; margin:3vh auto;
  /* translucent so the couple watercolour ghosts faintly through the whole card.
     --card-alpha: 1 = solid, lower = more of the photo shows through the text. */
  background:rgba(255,253,248,var(--card-alpha));
  border:1px solid var(--gold-soft); box-shadow:0 10px 40px rgba(91,106,78,.10);
  position:relative;
}
.paper::before{ /* thin inner gold frame, like the invite */
  content:""; position:absolute; inset:14px; border:1px solid var(--gold-soft); pointer-events:none; z-index:2;
}
.inner{position:relative; padding:0 clamp(2.6rem,8vw,3.8rem)}

/* script + serif */
.script{font-family:'Parisienne',cursive; font-weight:400; color:var(--sage-deep); line-height:1.05}
.names,.closing .sign{font-family:'Amsterdam','Parisienne',cursive; font-weight:400}
h1,h2,h3,.caps{font-family:'Cormorant Garamond',serif; font-weight:500}
.caps{text-transform:uppercase; letter-spacing:.28em}

/* hero */
.hero{position:relative; text-align:center}
.hero-photo{position:relative; width:100%; height:clamp(300px,54vw,440px); overflow:hidden}
.hero-photo img{width:100%; height:122%; object-fit:cover; object-position:center 55%; display:block; will-change:transform}
.hero-photo::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(246,242,232,0) 82%, var(--paper) 100%)}
.hero-photo.no-photo{display:none}
.hero-text{padding:2.6rem 1rem 2.2rem}
.invite-sub{font-size:1.4rem;color:var(--sage-deep);letter-spacing:.24em;margin:.8rem 0 0}
.hero .pre{font-size:.82rem; letter-spacing:.3em; color:var(--sage); text-transform:uppercase; margin:0}
.hero .names{font-size:clamp(2.4rem,9vw,3.6rem); margin:1.2rem 0 .2rem}
.hero .and{display:block; font-family:'Cormorant Garamond',serif; font-size:1.8rem; color:var(--gold); font-style:italic; margin:.85rem 0; position:relative; top:-15px}
.hero .names{line-height:1.32}
.hero .date{font-size:1.15rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); margin-top:1.4rem}
.hero .place{font-size:.95rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sage); margin:.3rem 0 0}

/* divider */
.divider{display:block; width:min(230px,58%); height:32px; margin:2rem auto;
  background:url(/divider.png) center/contain no-repeat; opacity:.92}
.divider::before,.divider::after{content:none}
.divider .h{display:none}
.section-title{text-align:center; font-size:1.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sage-deep); margin:2.8rem 0 .4rem}

/* timeline */
.timeline{position:relative; margin:2rem 0 1rem; padding-left:4.4rem}
.timeline::before{content:""; position:absolute; left:1.55rem; top:.6rem; bottom:.6rem; width:1px; background:var(--sage-soft)}
.event{position:relative; margin-bottom:2.08rem}
.event .badge{
  position:absolute; left:-4.4rem; top:0; width:3.1rem; height:3.1rem; border-radius:50%;
  background:var(--paper); border:1px solid var(--sage-soft); display:flex; align-items:center; justify-content:center;
}
.event .badge svg{width:1.5rem; height:1.5rem; stroke:var(--sage-deep); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.event .time{font-size:1.35rem; color:var(--sage-deep); font-weight:600}
.event h3{font-size:1.02rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin:.1rem 0 .3rem}
.event .loc{color:var(--sage-deep); font-style:italic; margin:0 0 .3rem}
.event p{margin:.2rem 0; color:var(--ink)}

/* info */
.info{display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; text-align:center; margin:1.5rem 0 .5rem}
.info .item{flex:1 1 150px}
.info .ico{color:var(--sage-deep); line-height:0}
.info .ico svg{width:1.9rem; height:1.9rem; stroke:var(--sage-deep); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.info .item p{margin:.4rem 0 0; font-size:1rem}

/* rsvp */
.rsvp{padding:1rem 0 2.5rem}
.rsvp .sub{text-align:center; color:var(--sage); margin:.2rem 0 2rem; letter-spacing:.04em}
form{display:flex; flex-direction:column; gap:1.02rem; max-width:440px; margin:0 auto}
label{display:flex; flex-direction:column; gap:.35rem; font-size:.78rem; letter-spacing:.16em; color:var(--sage-deep); text-transform:uppercase}
input,select,textarea{
  font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--ink);
  padding:.6rem .8rem; border:1px solid var(--line); border-radius:4px; background:#fff;
  text-transform:none; letter-spacing:normal;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--sage)}
.req{color:var(--gold)}
fieldset.attend{border:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem}
fieldset.attend legend{font-size:.78rem; letter-spacing:.16em; color:var(--sage-deep); text-transform:uppercase; padding:0; margin-bottom:.3rem}
.radio{flex-direction:row; align-items:center; gap:.55rem; text-transform:none; letter-spacing:normal; font-size:1.1rem; color:var(--ink)}
.radio input{width:auto}
#website{position:absolute; left:-9999px}
button{
  font-family:'Cormorant Garamond',serif; font-size:.9rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  background:var(--sage-deep); color:#fff; border:none; border-radius:4px; padding:.95rem; margin-top:.4rem; cursor:pointer; transition:background .2s;
}
button:hover{background:var(--sage)}
button:disabled{opacity:.6; cursor:default}
.status{text-align:center; min-height:1.4em; margin:.3rem 0 0}
.status.ok{color:var(--sage-deep)} .status.err{color:#a2503f}
#if-yes{display:flex; flex-direction:column; gap:1.02rem}
#if-yes.hide{display:none}

/* footer */
.closing{text-align:center; padding:2.4rem 0 1.4rem; border-top:1px solid var(--line); margin-top:2rem}
.closing .line{font-size:1.5rem; color:var(--sage-deep); font-style:italic}
.closing .with{font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--sage); margin:1.2rem 0 .3rem}
.closing .sign{font-size:1.85rem}
.farewell{line-height:0; padding-bottom:2rem}
.farewell img{width:100%; display:block; border-radius:5px;
  -webkit-mask-image:radial-gradient(135% 82% at 50% 80%, #000 44%, transparent 85%);
          mask-image:radial-gradient(135% 82% at 50% 80%, #000 44%, transparent 85%)}

/* parallax watercolour leaves — export transparent PNG sprigs from Affinity into /public.
   Different data-parallax speeds give depth. Missing files hide themselves (onerror). */
.leaf{position:absolute; z-index:5; width:clamp(180px,36vw,420px); pointer-events:none; will-change:transform; user-select:none}
.leaf-tl{top:-55px; left:-70px}
.leaf-tr{top:-55px; right:-70px}
.leaf-bl{bottom:-55px; left:-70px}
.leaf-br{bottom:-55px; right:-70px}

/* side sprigs — foliage that pokes in from the edges as you scroll */
.sprig{position:absolute; z-index:4; width:clamp(80px,11vw,125px); pointer-events:none; will-change:transform; opacity:.9; user-select:none}
.sprig.left{left:-30px}
.sprig.right{right:-30px}

@media (max-width:480px){
  .timeline{padding-left:3.6rem}
  .event .badge{left:-3.6rem; width:2.6rem; height:2.6rem}
  .timeline::before{left:1.3rem}
  .leaf{width:clamp(110px,40vw,200px)}
  .sprig{width:clamp(56px,14vw,86px)}
  .sprig.left{left:-34px}
  .sprig.right{right:-34px}
}