:root{--petal-pink:#e6a7ae;--site-header-height:74px;--story-blush:#d8aaa5;--story-ivory:#fffaf3}

/* An understated editorial header: balanced, translucent, and touch friendly. */
body>header{
  height:var(--site-header-height);
  padding-inline:clamp(1.25rem,4vw,5rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(1rem,3vw,3.5rem);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  border-bottom:1px solid #d7c8b666;
  box-shadow:0 7px 28px #3d2b1d0a;
  backdrop-filter:blur(16px) saturate(1.15);
}
body>header .brand{justify-self:start;gap:.55rem;letter-spacing:.08em}
body>header .brand-letter{font-size:1.75rem;font-weight:400}
body>header .brand-divider{height:2rem;background:#6d5a4e99}
body>header nav{justify-self:center;gap:clamp(1rem,1.7vw,1.8rem)}
body>header nav a{position:relative;padding:.65rem 0;color:#2f393b;font-size:.93rem;letter-spacing:.01em;white-space:nowrap}
body>header nav a::after{content:"";position:absolute;right:0;bottom:.36rem;left:0;height:1px;background:#b77770;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,.8,.2,1)}
body>header nav a:hover::after,body>header nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
body>header .music-toggle{justify-self:end;min-width:8.4rem;padding:.72rem 1.05rem;border:1px solid #c9938e;background:#d8aaa5;color:#26353b;box-shadow:0 5px 14px #704f4920;letter-spacing:.02em}
body>header .music-toggle:hover{background:#ce9994;box-shadow:0 8px 18px #704f4930}

/* Gentle page motion: short, editorial reveals without delaying interaction. */
body>header{animation:header-ease-in .58s cubic-bezier(.22,.8,.2,1) both}
@keyframes header-ease-in{from{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:none}}
@keyframes content-ease-in{from{opacity:0;transform:translateY(1rem) scale(.992)}to{opacity:1;transform:none}}
.motion-ready .hero>div.is-visible>*{animation:content-ease-in .68s cubic-bezier(.22,.8,.2,1) both;animation-delay:calc(var(--reveal-order,0) * 85ms)}
.motion-ready .hero>div.is-visible>*:nth-child(1){--reveal-order:1}
.motion-ready .hero>div.is-visible>*:nth-child(2){--reveal-order:2}
.motion-ready .hero>div.is-visible>*:nth-child(3){--reveal-order:3}
.motion-ready .hero>div.is-visible>*:nth-child(4){--reveal-order:4}
.motion-ready .hero>div.is-visible>*:nth-child(5){--reveal-order:5}
.motion-ready .section .cards article,
.motion-ready .section .split img,
.motion-ready .section .gallery,
.motion-ready .section form,
.motion-ready .section .save-the-date-video{opacity:0;transform:translateY(1rem) scale(.99)}
.motion-ready .section.is-visible .cards article,
.motion-ready .section.is-visible .split img,
.motion-ready .section.is-visible .gallery,
.motion-ready .section.is-visible form,
.motion-ready .section.is-visible .save-the-date-video{animation:content-ease-in .66s cubic-bezier(.22,.8,.2,1) both;animation-delay:calc(var(--reveal-order,0) * 70ms)}
.motion-ready .section.is-visible .cards article:nth-child(2){--reveal-order:1}
.motion-ready .section.is-visible .cards article:nth-child(3){--reveal-order:2}
.motion-ready .section.is-visible .cards article:nth-child(4){--reveal-order:3}
.motion-ready .section.is-visible .cards article:nth-child(5){--reveal-order:4}
.motion-ready .section.is-visible .cards article:nth-child(6){--reveal-order:5}
.motion-ready .section.is-visible .cards article:nth-child(n+7){--reveal-order:6}
body>header .brand,body>header nav a,.button{transition:transform .28s ease,color .28s ease,background-color .28s ease,box-shadow .28s ease}
body>header .brand:hover{transform:translateY(-1px)}
body>header nav a:hover{color:#95675d}

/* Center the two editorial panels requested by the couple. */
#rsvp>.eyebrow,#rsvp>h2{text-align:center}
#rsvp>p{margin-inline:auto;text-align:center}
#rsvp-form{margin-inline:auto}
.save-the-date{text-align:center}
.save-the-date>.eyebrow,.save-the-date>h2{margin-inline:auto}
.save-the-date-video{margin-inline:auto!important}

/* Keep the supplied sunset introduction to a single desktop viewport. */
@media (min-width:900px){
  .hero{height:calc(100svh - var(--site-header-height));min-height:0;overflow:hidden;padding:clamp(.8rem,2vh,1.5rem)}
  .hero>div{max-height:calc(100svh - 96px);display:flex;flex-direction:column;align-items:center;justify-content:center}
  .hero h1{font-size:clamp(4.5rem,11vh,7.4rem);line-height:.82;margin:.15rem}
  .hero .date{margin-top:clamp(.6rem,1.7vh,1.25rem)}
  .hero p{margin-block:clamp(.3rem,1vh,.8rem)}
}

/* Proposal photos read as chapters in one continuous, keepsake story. */
#proposal{max-width:1200px}
#proposal .gallery{position:relative;margin-top:2.25rem;padding:clamp(1rem,2.2vw,1.75rem) clamp(3.8rem,7vw,6.75rem) clamp(1.2rem,2.5vw,2rem);border:1px solid #cab9a6;background:linear-gradient(135deg,#efe4d8 0%,#faf4ec 48%,#eadbce 100%);box-shadow:0 24px 60px #49352816,inset 0 0 0 7px #fff8ef80}
#proposal #track{border-radius:2px;box-shadow:0 20px 45px #49352826}
#proposal #track figure{isolation:isolate;padding:clamp(.75rem,1.5vw,1.15rem) clamp(.75rem,1.5vw,1.15rem) clamp(3.6rem,6vw,5rem);background:var(--story-ivory);box-shadow:inset 0 0 0 1px #cdbba833}
#proposal #track figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid #cdbba866;filter:saturate(.92) contrast(.98);transition:filter .5s ease,transform .65s cubic-bezier(.22,.8,.2,1)}
#proposal #track figure::before{top:.35rem;left:.35rem;text-shadow:24px 10px 0 #e7b8a8,10px 27px 0 #a9b38a;filter:drop-shadow(0 2px 2px #fff)}
#proposal #track figure::after{right:clamp(1rem,2.2vw,1.6rem);bottom:clamp(.7rem,1.4vw,1.15rem);width:clamp(48px,6vw,64px);height:clamp(48px,6vw,64px);background:radial-gradient(circle at 31% 24%,#f0c5b3,#b76f64 61%,#7d443f);box-shadow:inset 0 0 0 4px #f8d5c055,inset 0 0 0 6px #713f3944,0 7px 14px #4b2f2655}
#proposal .gallery>button{position:absolute;z-index:5;top:50%;width:3.15rem;height:3.15rem;margin:0;border:1px solid #fff9;border-radius:50%;background:var(--story-blush);box-shadow:0 8px 20px #704f4933;transform:translateY(-50%);font-size:1.35rem}
#proposal .gallery>#prev{left:clamp(.5rem,1.7vw,1.55rem)}
#proposal .gallery>#next{right:clamp(.5rem,1.7vw,1.55rem)}
#proposal .gallery>button:hover,#proposal .gallery>button:active{background:#c9938e;transform:translateY(-50%) scale(1.05)}
#proposal .gallery>#photo-count{bottom:clamp(.55rem,1.2vw,.9rem);padding:.35rem .8rem;border:1px solid #fff9;border-radius:999px;background:#354347e8;letter-spacing:.06em}
#proposal .proposal-caption{min-height:3.3rem;margin:.8rem auto 0;padding:.35rem 1rem 0;background:transparent;font:italic clamp(1.05rem,2vw,1.3rem) var(--serif);transition:opacity .18s ease,transform .18s ease}
#proposal .proposal-caption.is-changing{opacity:0;transform:translateY(.35rem)}
#proposal .proposal-progress{display:flex;justify-content:center;gap:.48rem;margin:.75rem auto 0}
#proposal .proposal-progress button{width:1.8rem;height:.22rem;padding:0;border:0;border-radius:999px;background:#d9c9bb;cursor:pointer;transition:width .35s ease,background-color .35s ease}
#proposal .proposal-progress button[aria-current="step"]{width:3.4rem;background:#b77770}
#proposal .proposal-progress button:focus-visible{outline:2px solid var(--sea);outline-offset:4px}

body .eic-petal{background:linear-gradient(145deg,#f6cbd0,var(--petal-pink) 60%,#cd8490)}
.post-invitation-entry .hero>div{animation:sunset-hero-enter 1.15s cubic-bezier(.22,.8,.2,1) both}
@keyframes sunset-hero-enter{from{opacity:0;transform:translateY(1.5rem) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:699px){
  :root{--site-header-height:64px}
  body>header{display:flex;height:var(--site-header-height);padding-inline:1rem;gap:.75rem}
  body>header .brand-letter{font-size:1.45rem}
  body>header .brand-divider{height:1.6rem}
  body>header #menu{margin-left:auto}
  body>header .music-toggle{min-width:0;padding:.55rem .7rem;font-size:.78rem}
  #rsvp{padding-inline:5vw}
  #rsvp-form,.save-the-date-video{width:100%!important}
  #proposal{padding-inline:4vw}
  #proposal .gallery{padding:.65rem .65rem 1rem}
  #proposal #track figure{padding:.55rem .55rem 3.2rem}
  #proposal .gallery>button{top:47%;width:2.65rem;height:2.65rem}
  #proposal .gallery>#prev{left:.9rem}
  #proposal .gallery>#next{right:.9rem}
  #proposal .proposal-progress{gap:.32rem}
  #proposal .proposal-progress button{width:1.1rem}
  #proposal .proposal-progress button[aria-current="step"]{width:2.1rem}
}
@media(prefers-reduced-motion:reduce){
  body>header{animation:none}
  .post-invitation-entry .hero>div,.motion-ready .hero>div.is-visible>*,.motion-ready .section.is-visible .cards article,.motion-ready .section.is-visible .split img,.motion-ready .section.is-visible .gallery,.motion-ready .section.is-visible form,.motion-ready .section.is-visible .save-the-date-video{animation:none;opacity:1;transform:none}
  #proposal .proposal-caption,#proposal .proposal-progress button,#proposal #track figure img{transition:none}
}