:root{
  --beige:#D0C7BE; --cream:#F6F1EC; --white:#FFFFFF;
  --ink:#4D4D4D; --soft:#A0A0A0; --track:#D8D1C9;
  --ease:cubic-bezier(.22,.61,.36,1); --gut:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:#000;color:var(--ink);font-family:'Cormorant',Georgia,serif;font-weight:400}
img,video{display:block;max-width:100%}
img{height:auto}
.wc{mix-blend-mode:multiply}

.page{position:relative;max-width:480px;margin:0 auto;overflow-x:clip;background:var(--cream);box-shadow:0 0 70px 14px rgba(0,0,0,.65)}

/* ---------- type ---------- */
.h{font-weight:500;font-size:21px;text-transform:uppercase;letter-spacing:.2em;padding-left:.2em;text-align:center}
.italic{font-style:italic;font-size:23px;text-align:center}
.body{font-size:22px;line-height:1.38;text-align:center;text-wrap:balance}
.address{font-size:21px;line-height:1.4;text-align:center}
.signature{font-family:'Tangerine','Cormorant',cursive;font-size:31px;text-align:center;line-height:1.2}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;container:hero / size;background:#AE9B8F;overflow:hidden}
.frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100cqw,100cqh*9/16);height:max(100cqh,100cqw*16/9)}
@container hero (min-aspect-ratio:9/16){
  .frame{width:min(100cqw,100cqh*9/16);height:min(100cqh,100cqw*16/9)}
}
.frame video,.frame .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.still{opacity:0;transition:opacity .35s var(--ease)}
.still.on{opacity:1}
.panel{position:absolute;left:22%;width:56%;top:18.5%;height:66.5%;
  display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;text-align:center;color:var(--ink)}
.sub{font-style:italic;font-size:clamp(14px,3.6cqh,24px);line-height:1.2}
.names{font-weight:500;text-transform:uppercase;font-size:clamp(22px,4.9cqh,38px);letter-spacing:.2em;line-height:1.05}
.names>span{display:block}
.nm{position:relative;display:inline-block;padding-left:.2em}
.amp{position:absolute;left:100%;top:50%;transform:translateY(-42%);margin-left:.05em;
  font-family:'Tangerine','Cormorant',cursive;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:2.15em;line-height:1;color:var(--soft)}
.house{width:74%;height:auto}
.date{font-size:clamp(11px,2.9cqh,20px);letter-spacing:.22em;padding-left:.22em;text-transform:uppercase}
.fx{opacity:0;transform:translateY(10px);
  transition:opacity 1.4s var(--ease) var(--d,0s),transform 1.4s var(--ease) var(--d,0s)}
.hero.seq .fx{opacity:1;transform:none}
.hint{position:absolute;left:50%;bottom:16px;width:1px;height:34px;background:rgba(77,77,77,.18);overflow:hidden;opacity:0;transition:opacity 1s var(--ease)}
.hint::after{content:"";position:absolute;left:0;top:-14px;width:1px;height:14px;background:var(--ink);animation:hint 2.2s var(--ease) infinite}
.hero.hint-on .hint{opacity:1}
@keyframes hint{0%{transform:translateY(0);opacity:0}25%{opacity:.8}100%{transform:translateY(48px);opacity:0}}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(var(--ty,22px)) rotate(var(--rot,0deg)) scale(var(--s0,1));
  transition:opacity 1.1s var(--ease) calc(var(--i,0)*.15s),transform 1.1s var(--ease) calc(var(--i,0)*.15s)}
.rv.in{opacity:1;transform:translateY(0) rotate(var(--rot,0deg)) scale(1)}
.flower{--s0:.97;position:absolute;z-index:4;height:auto}

/* ---------- sections ---------- */
section{position:relative}
.note{background:var(--cream);padding:64px var(--gut) 118px}
.doves{width:72%;margin:0 auto 30px}
.note .body{margin-top:26px}
.peony-r{width:170px;right:-26px;bottom:-30px;--rot:-28deg}
.ribbon{position:absolute;z-index:3;left:-30%;width:160%;height:58px;bottom:-29px;pointer-events:none;
  background:url(assets/lace.png) repeat-x center / auto 58px}

.day{background:var(--white);padding:88px var(--gut) 36px}
.timeline{position:relative;margin-top:40px}
.tl-track{position:absolute;left:calc(44% - .5px);top:64px;bottom:64px;width:1px;background:var(--track)}
.tl-fill{position:absolute;left:0;top:0;width:1px;height:0;background:var(--soft)}
.entry{position:relative;height:128px;display:flex;align-items:center}
.ico{width:44%;display:flex;justify-content:center}
.ico img{width:124px;height:124px}
.txt{padding-left:30px}
.txt h3{font-style:italic;font-weight:400;font-size:32px;line-height:1.1}
.time{font-size:16px;letter-spacing:.22em;color:var(--soft);margin-top:6px}
.dot{position:absolute;left:44%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--track);
  transform:translate(-50%,-50%) scale(1);transition:background 1s var(--ease),transform 1s var(--ease);z-index:2}
.entry .ico,.entry .txt{opacity:0;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.entry .ico{transform:translateX(-14px)}
.entry .txt{transform:translateX(14px);transition-delay:.15s}
.entry.on .ico,.entry.on .txt{opacity:1;transform:none}
.entry.on .dot{background:var(--soft);transform:translate(-50%,-50%) scale(1.5)}

.loc{background:var(--white);padding:48px 0 36px}
.loc-card{position:relative;width:124%;margin-left:-12%}
.loc-card>img{width:100%;filter:drop-shadow(0 10px 28px rgba(60,50,40,.09))}
.loc-in{position:absolute;left:24%;right:24%;top:17%;bottom:15%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.loc-in .italic{margin-top:14px}
.chapel{width:80%;margin:16px auto 18px}

.dress{background:var(--white);padding:44px var(--gut) 96px}
.dress .italic{margin-top:14px}
.dress-img{width:70%;margin:14px auto 8px}

.wait{background:var(--cream);padding:118px var(--gut) 150px}
.anemone{width:180px;right:-40px;top:6px;--rot:-30deg}
.wait .body{margin-top:26px}
.wait .signature{margin-top:30px}
.peony-l{width:200px;left:-50px;bottom:-6px;--rot:22deg}

.foot{background:var(--beige);text-align:center;font-size:10px;letter-spacing:.25em;padding:20px 0;text-transform:uppercase;color:rgba(77,77,77,.55)}

/* ---------- reduced motion ---------- */
.rm *,.rm *::before,.rm *::after{transition:none!important;animation:none!important}
.rm .frame video{display:none}
.rm .still{opacity:1}
.rm .fx{opacity:1;transform:none}
.rm .hint{opacity:1}

.admin-link{display:block;margin-top:10px;font-size:9px;letter-spacing:.2em;color:inherit;opacity:.6;text-decoration:none;text-transform:uppercase}
.admin-link:hover{opacity:1}